Catch errors from usePreloadedQuery

Question

I have this code and I want to catch the errors that happens in the query used by usePaginationFragment. what happens now is when something goes wrong in the backend, the data.queryName returns null, and there is no way to know about the errors. the question is how can I receive the errors when happend?

function MyPagination(){
  return (
    <ErrorBoundary>
      <Suspense fallback={"loading..."} >
        <PaginationLoadable
          preloadedQuery={preloadedQuery}
          query={graphql`...`}
        />
      </Suspense>
    </ErrorBoundary>
  )
}

function PaginationLoadable(this: never, props: PaginationLoadableProps){

    const preloadedData = usePreloadedQuery<any>(props.query, props.preloadedQuery);

    const {data} = usePaginationFragment(
        props.fragment,
        preloadedData
    );

    console.log(data[ /*queryName*/ ] === null)

}

Thank you

In order to catch the error, your Graphql needs to throw an error instead of returning null then your ErrorBoundary will be able to catch that error. — zimex
– zimex, Commented Aug 18, 2021 at 11:52

naoufal bardouni · Accepted Answer · 2021-08-18 12:46:30Z

1

Here is how I did it, it must throw an error in the NetworkLayer function like so:


new Environment({
  network: Network.create(
    function fetch(operation, variables) {
      return (
        Axios
        .post(
          '*API_NEDPOINT*',
          {
            query: operation.text,
            variables
          }
        )
        .then(
          response => {
            if(response.data.errors){
              const er: any = new Error('ServerError');
              er.data = response.data.data;
              er.errors = response.data.errors;
              return Promise.reject(er);
            }
            return response.data;
          }
        )
      );
    }
  ),
  store
});

answered Aug 18, 2021 at 12:46

naoufal bardouni

2513 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Catch errors from usePreloadedQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related