foreign-sapphire

How do I tell useQuery that initial data is prefetched on the server?

I have a Remix app and in my loader function I prefetch the data. Then on the client side I use useQuery as described in the docs Remix example. However the type of my data is MyData | undefined because useQuery doesn't know the initial data will be there. How do I solve that? For now I solved it by setting initialData: {} as MyData in useQuery but I wonder if there is a better way?

9 Replies

rare-sapphire•12mo ago

How does that loader data wind up in the query cache if not via initialData? loader runs on the server, right?

foreign-sapphireOP•12mo ago

Yes. Like this: https://tanstack.com/query/latest/docs/framework/react/guides/ssr#full-remix-example

Server Rendering & Hydration | TanStack Query React Docs

In this guide you'll learn how to use React Query with server rendering. See the guide on for some background. You might also want to check out the before that. For advanced server rendering patterns,...

foreign-sapphireOP•12mo ago

My loader code (server side):

export const loader: LoaderFunction = async () => {
  const queryClient = new QueryClient();

  await queryClient.prefetchQuery({
    queryKey: ['myQuery'],
    queryFn: myQuery,
  });

  return { dehydratedState: dehydrate(queryClient) };
};

export const loader: LoaderFunction = async () => {
  const queryClient = new QueryClient();

  await queryClient.prefetchQuery({
    queryKey: ['myQuery'],
    queryFn: myQuery,
  });

  return { dehydratedState: dehydrate(queryClient) };
};

my client usage of useQuery:

const { data } = useQuery({
  queryKey: ['myQuery'],
  queryFn: myQuery
});

const { data } = useQuery({
  queryKey: ['myQuery'],
  queryFn: myQuery
});

foreign-sapphireOP•12mo ago

loader data wind up in the query cache if not via initialData

Using hydration APIs. This part is explaned here https://tanstack.com/query/latest/docs/framework/react/guides/ssr#using-the-hydration-apis

Server Rendering & Hydration | TanStack Query React Docs

rare-sapphire•12mo ago

Okay, with hydration api, the best way to get type-safety is using suspense. Not sure if remix wraps routes in suspense boundaries but tanstack router does and that has worked great

foreign-sapphireOP•12mo ago

What do you mean? Are there some docs for this or examples?

rare-sapphire•12mo ago

You can useSuspenseQuery instead of useQuery. The react docs explain what suspense is

foreign-sapphireOP•12mo ago

I know what suspense is but didn't hear about useSuspenseQuery yet. Interesting, thx. However, according to the docs cancellation doesn't work which is not ideal. Also not sure what does this part mean:

status is always success
the derived flags are set accordingly.

status is always success
the derived flags are set accordingly.

what happens when there is an error?

rare-sapphire•12mo ago

It will throw to error boundaries

Gaming

Programming

How do I tell useQuery that initial data is prefetched on the server?

Did you find this page helpful?