React Query Caching things on the server?

[rfedoruk]

Not sure if this is a bug or maybe intentional, but just wanted to share something that I have noticed. In one project where we are using Tanstack Start, Router, and Query, we sometimes use this pattern for data fetching:
https://tanstack.com/router/latest/docs/framework/react/guide/router-context#how-about-an-external-data-fetching-library

loader: async () => {
    const someData = await queryClient.ensureQueryData({
         queryKey: ['getAllPosts'],
        queryFn: () => fetchPostsServerFn()
    };
   return {someData}
}
component: () => {
 const data = Route.useLoaderData()
}

and the server function looks something like this:

export const fetchPostsServerFn = createServerFn({ method: 'GET' })
  .handler(async () => {
    const userId = getCookie(USER_ID_COOKIE)
  
   const posts = await fetchPosts(userId)
    
    return {
    posts
    }
  })

What we noticed, is that this queryClient is caching something on the server, because if you, for example, have two different users, and one user fetches this data, another user will get that other users data from the cache.
Maybe this is just a documentation thing, but to me it was not clear that following this kind of approach would cache some stuff on the server, I assumed it would be cached to the users browser, like how Tanstack Query usually works.

[schiller-manuel]

you need to create the query client per request on the server