T
TanStack•12mo ago
like-gold

I don't know the difference between useDataLoader and useSuspenseQuery.

What are the advantages and disadvantages of each?
2 Replies
narrow-beige
narrow-beige•12mo ago
useLoaderData just retrieves the data returned by the loader, useSuspenseQuery comes from tanstack query and it makes a request and suspends while the fetching is going on. When using code splitting, it takes some times to download the component for the route, your useSuspenseQuery will start the request only after the component was fetched (as the logic is in the component), using the loader will start the request for the data in parallel with the download for the route component.
like-gold
like-goldOP•12mo ago
@ferretwithabéret Thank you. Could you tell me a bit more? https://stackblitz.com/edit/vitejs-vite-tuuuh6?file=src%2Froutes%2Ftasks.tsx For example, there is this code This code takes a tasks Received by ensureQueryData, and then receives the cache at render time. // in component 
  // const { data: tasks, isFetching } = useSuspenseQuery(tasksQueryOptions);.
  const tasks = Route.useLoaderData();.
  // const { data: tasks, isFetching } = useSuspenseQuery(tasksQueryOptions);.
  const tasks = Route.useLoaderData();.
Questions. 1. in this case, if I use Route.useLoaderData, will it return a cache if it is subsequently re-rendered within this component? Or is it a one-time read? What are the best pratics? 2. I saw somewhere in the documentation that it is possible to use multiple queryClient.ensureQueryData in the loader? 
loader: async ({ context: { queryClient } }) => {
const [a, b] = await Promise.all([queryClient.ensureQueryData(option), queryClient.ensureQueryData(option2)])
return [a,b]
}
loader: async ({ context: { queryClient } }) => {
const [a, b] = await Promise.all([queryClient.ensureQueryData(option), queryClient.ensureQueryData(option2)])
return [a,b]
}
Waiting for data acquisition in await and returning it and 
loader: ({ context: { queryClient } }) => {
queryClient.ensureQueryData(option)
queryClient.ensureQueryData(option2)
}
loader: ({ context: { queryClient } }) => {
queryClient.ensureQueryData(option)
queryClient.ensureQueryData(option2)
}
What is the difference between returning nothing and just executing? I would like to know the best pragmatics of their use within loader and component!
KenjiMorita
StackBlitz
React/TanstackRouter&ReactQuery(with Authrization Context) - StackB...
Next generation frontend tooling. It's fast!

Did you find this page helpful?