Could client.prefetchQuery() return the fetched data?

[qw-in]

This would be convenient for SSG / SSR. For example in next.js returning not found when a resource does not exist.

// pages/[dynamicParam].js

// Here is how I am currently checking for 404

export async function getStaticProps({ params = {} }) {
  const { dynamicParam } = params;
  
  const queryClient = new QueryClient();
  await queryClient.prefetchQuery(['prefix', dynamicParam], () => loadThing(dynamicParam));
  const data = queryClient.getQueryData(['prefix', dynamicParam]);
  
  return {
    notFound: data === null,
    props: {
      dehydratedState: dehydrate(queryClient),
    },
  };
}

// With proposed change to prefetchQuery

export async function getStaticProps({ params = {} }) {
  const { dynamicParam } = params;
  
  const queryClient = new QueryClient();
  const data = await queryClient.prefetchQuery(['prefix', dynamicParam], () => loadThing(dynamicParam));
  
  return {
    notFound: data === null,
    props: {
      dehydratedState: dehydrate(queryClient),
    },
  };
}

[tannerlinsley]

I think you are looking for QueryClient.fetchQuery() 😉

[qw-in]

Thanks @tannerlinsley, I'll try it out. Sorry I completely missed this from the tips and tricks section of the docs 😅

From the docs:

Sometimes this behavior is not desirable, maybe you want to render an error page with a correct status code instead on certain errors or queries. In those cases, use fetchQuery and catch any errors to handle those manually.

For anyone interested, prefetch is a tiny wrapper around fetch:
https://github.com/tannerlinsley/react-query/blob/2249abfaac3d8cf19a14bc6645a96a8c384c1354/src/core/queryClient.ts#L290-L298