Combining with TanStack Router?

[superxiao]

I’m exploring if it makes sense to use data loaded by TanStack Router’s loaders to initially hydrate TanStack DB collections.

Since loaders run on both server and client (for initial load and navigations), can loader data be effectively used to jump-start collections without conflict?

Or are loaders and collections two separate data-fetching layers that don’t integrate well (for now)?

[thruflo]

Yup, this makes total sense and is something we'll be illustrating in the docs and examples.

You can see some existing discussions here: https://github.com/search?q=repo%3ATanStack%2Fdb+preload&type=issues

End goal is something like:

const query = createCollection(liveQueryOptions(...))

export default createFileRoute({
  loader: () => query.preload()
})

function Component () {
  const { data } = useLiveQuery(query)
}

[superxiao]

From the doc I'm getting the hint that something like this perhaps already works. At least for calling ensureQueryData in the loader:

export const Route = createFileRoute('/posts')({
  // Use the `loader` option to ensure that the data is loaded
  loader: () => queryClient.ensureQueryData(postsQueryOptions),
  component: () => {
    // Read the data from the cache and subscribe to updates
    const {
      data: { posts },
    } = useSuspenseQuery(postsQueryOptions)
    
    ...
  },
})

This is made possible by either manually dyhydrate/hydrate the queryClient when creating a router, or have TanStack Start automatically set it up. (link1, link2)

I wonder whether that means calling queryClient.prefetchQuery inside the loader would also already work out of the box, meaning calling useLiveQuery, useSuspenseQuery etc. in the browser would not issue extra queries, but would suspend on the loader initiated query, and wait for it to finish and stream to the browser?

[superxiao]

Found a very helpful article explaining exactly this:

As I implied above, to stream data with react-query, do the exact same thing, but don’t await the promise. Let’s do that on the page for viewing an individual epic.

loader: ({ context, params }) => {
  const { queryClient, timestarted } = context;

  queryClient.ensureQueryData(
    epicQueryOptions(timestarted, params.epicId)
  );
},

Now if this page is loaded initially, the query for this data will start on the server and stream to the client. If the data are pending, our suspense boundary will show, triggered automatically by react-query’s useSuspenseBoundary hook.

So it seems calling ensureQueryData in the server loader is the right way. Not sure whether prefetchQuery works though.

[KyleAMathews]

You could do it this way but we will be directly supporting SSR in the future so letting DB itself managing threading data from the server into the client will be easier.