Track Query Errors on Prefetch phase

[lautapercuspain]

Hey @TkDodo, I'm looking for ways to track query errors on the prefetch phase.
Sometimes a prefetch call in getServerSideProps could go wrong, I would like to detect errors and redirect eventually.

Do you know if there's an existing way to do this?

As per the React-Qeury docs, I can read the following on the prefetchQuery section "A promise is returned that will either immediately resolve if no fetch is needed or after the query has been executed. It will not return any data or throw any errors."

How can we know if there was an error on the prefetch query phase?

Thanks

cc/ @tannerlinsley

[lautapercuspain]

It would be great if we can add queryClient.isError class member, what are your thoughts?

[TkDodo]

you can just do queryClient.fetchQuery instead. It will return a failing or successful promise, but you have to handle errors yourselves, and keep in mind that erroneous queries are not dehydrated per default.

In fact, prefetchQuery is just a fetchQuery wrapper that discards errors ;) This is literally the implementation of prefetchQuery:

https://github.com/tannerlinsley/react-query/blob/00d0c527bc67cb0db7be9682565c60ffafc1ad51/src/core/queryClient.ts#L410-L412

It's also in the docs on the page you linked:

The method works the same as fetchQuery except that it will not throw or return any data.

[hc0503]

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const { bid } = ctx.query;
  await Promise.all([
    queryClient.prefetchQuery(["book", { bookId: bid as string }], () =>
      getBook(parseInt(bid as string), ctx)
    ),
    queryClient.prefetchInfiniteQuery(
      ["announcements"],
      ({ pageParam = 1 }) => getAnnouncements({ page: pageParam }, ctx)
    ),
    queryClient.prefetchQuery(["me"], () => getUser(ctx)),
  ]);

  return {
    props: {
      dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))),
    },
  };
};

This is my prefetch code in NextJS SSR, I want to return 404 when the prefetchQuery has error.

return {
    notFound: true,
}

Help me how I can catch the prefetchQuery error in NextJS SSR.

[TkDodo]

use queryClient.fetchQuery instead and catch errors with try/catch.

[hc0503]

Thank you @TkDodo ,
That works well,