optimistic-gold

Advanced SSR - is queryFn on the client redundant?

Hey there, I am trying to set up for my project that I have been working on ssr with tanstack/react-query and Next.js Looking through the documentation, I found the following resource (https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr). In my use case, I am implementing the app router, but what is confusing me is the code that is run on the client.

  function Posts() {
    const { data } = useQuery({ queryKey: ['posts'], queryFn: getPosts })  
  }

  function Posts() {
    const { data } = useQuery({ queryKey: ['posts'], queryFn: getPosts })  
  }

Why does the queryFn needs to be passed again on the client? The data is passed from the server, without having the query function set. (Example: https://codesandbox.io/p/devbox/gifted-colden-dgmk45, check the movie/Movies.tsx file). Thank you in advance, hope my question is clear enough 🤠

9 Replies

stormy-gold•14mo ago

Probably because queryFn is a required property. Even though you seeded the cache on the server the client isn't aware you'd never want to invalidate/refetch again. I suppose if you really didn't want to pass it again you could queryFn: () => null as a noop, but yuck. Could also just make a usePosts hook so the "duplication" is out of sight out of mind It's not redundant unless you think of it as "the client never needs to fetch again, the server did it for us". In most circumstances, something in your app will cause new fetches and the client needs to know how to obtain that data

optimistic-goldOP•14mo ago

That is the thing, is not requried. I mean, using ts, there is no error, when the queryFn is not set. Furthermore, sometimes the client is fetching the data unexpectedly when I only want it to be fetched on the server. The only way I solved this, was by not passing the queryFn.

stormy-gold•14mo ago

Sounds like something is wrong elsewhere. staleTime causing a refetch to occur because the client thinks the data is stale? Or maybe you're failing hydration somewhere? queryFn is "Required, but only if no default query function has been defined". Not giving it to your Movies component is gonna do more harm than good

absent-sapphire•14mo ago

1) the queryFn is not required to be passed into useQuery because you could also set it as a default value (see https://tanstack.com/query/latest/docs/framework/react/guides/default-query-function#default-query-function) 2) if you only want to fetch on the server and use the app directory, you probably don't need react query. React Query is a client side data synchronization tool that takes specific moments in time to update data in the background from the client with stale-while-revalidate principles

optimistic-goldOP•14mo ago

Hmm okay, but would not be useful to have caching on the server? The reason for choosing React Query as a library was mainly due to the caching system of requests. I am asking, because I am trying to understand why React Query does have support for ssr, since it should be used on the client The project that I am working on, would have some interactivity, but some of the things we want to render on the server

absent-sapphire•14mo ago

React Query caches in the browser, there is no caching on the server. That's what nextjs does You can use the server to seed the browser cache, but fetches from react query will always originate from the browser after that

optimistic-goldOP•14mo ago

Okay, so when do I want so use ssr with react-query?

absent-sapphire•14mo ago

when you want to seed the client cache on the server and then "hand over" data fetching to the client to profit from RQ caching and smart invalidation

optimistic-goldOP•14mo ago

Okay, so from my understanding the benefit will araise from the following flow: 1. Data is fetched on the server (since ssr) 2. The data is sent to the client 3. Since data is on the client, caching and smart invalidation can be used

Gaming

Programming

Advanced SSR - is queryFn on the client redundant?

Did you find this page helpful?