sbbu•7mo ago

TanStack Integration with server-side prefetching

is it possible to use convex' tanstack query integration with serverside prefetching? i'm basically trying to do something like this (in a server component, nextjs app router)

queryClient.prefetchQuery({
  ...convexQuery(api.users.getById, {
    id: "example"
  })
})

return (
  <HydrationBoundary state={dehydrate(queryClient)}>
    <UserInfo />
  </HydrationBoundary>
)

queryClient.prefetchQuery({
  ...convexQuery(api.users.getById, {
    id: "example"
  })
})

return (
  <HydrationBoundary state={dehydrate(queryClient)}>
    <UserInfo />
  </HydrationBoundary>
)

but it doesn't work, because convexQuery seems to require a context provider, which is clientside only. I know that convex has its own preloading api for server rendering, but I would much prefer to not have to pass every single preloaded query as a prop to the components using them. The pattern is very prone to prop drilling. It's nicer to pass down one prop for all of your dehydrated state into some sort of context provider. Maybe there's another way to do something like this without the need for tanstack query?

8 Replies

ballingt•7mo ago

I'll get back to you on this, so far I've been focusing on making this work well with TanStack Start but it takes care of this by dehydrating and hydrating the TanStack Query Client to do this. we need to implement these patterns other places for general TanStack Query use @sbbu check out this example for where that's at https://github.com/TanStack/router/tree/main/examples/react/start-convex-trellaux but yeah these pieces do not fit together in more general ways yet, or if they do we need examples

sbbuOP•7mo ago

thanks for your reply! looking at this example, I feel like it should work in my case too you're calling new ConvexQueryClient() outside of a React context, right? in router.tsx

sbbuOP•7mo ago

but if I try and use that on the server I get this error, I'm not sure why

sbbuOP•7mo ago

maybe I am misunderstanding how it works, I'm not familiar at all with tanstack start, or tanstack router

ballingt•7mo ago

Ah this is Next.js? yeah you may need to wait for this, TanStack Query needs to be dehydrated/hydrated and I'm not sure how that's hooked up for Next.js or if it is yet But absolutely, this is the direction I'll get an example up before long but for now the TanStack Query integration stuff is going to work most smoothly with (the not-yet-alpha-released) TanStack Start

sbbuOP•7mo ago

I have to stick to nextjs for now, this is the one thing keeping me from adopting convex for new projects rn so I'll definitely be keeping my eye out Could you perhaps give an ETA on this? It's ok if no not trying to rush or anything, I'm sure you and the team are all very busy 😅 Just asking because we are greenfielding a new project but we have to move fast and we're trying to decide if we use convex or go for something closer to our usual stack I heard about convex a few days ago and got super excited I'm really hoping to get to use it on a new project

ballingt•7mo ago

Is TanStack Query part of your goal, or just some way to preload queries and not need to pass them down? You can always preload on the server and then use a useQuery in a parent component to maintain the subscription. useQuery() has the side effect of subscribing to a query, then you can don't have to pass down the query or the query result, you can just add another useQuery in the component where you need the data. The thing we haven't put together yet is serialization of the TanStack Query client, that might be possible today but you may need to use an unstable version of TanStack Query.

sbbuOP•7mo ago

Good point. Tanstack query isn't strictly necessary for this. What about preloading a query with default arguments on the server & changing the arguments on the client? usePreloadedQuery seems to assume that the inputs will never change I'd be willing to use an unstable version while its still early

TanStack Integration with server-side prefetching

Did you find this page helpful?