absent-sapphire

prefetchQuery vs ensureQueryData in SSR

Can someone explain the difference to me of these four?

loader: ({ context }) => {
        // 1. prefetch without await
        context.queryClient.prefetchQuery(...);
        // 2. prefetch with await
        await context.queryClient.prefetchQuery(...);
        // 3. ensure without await
        context.queryClient.ensureQueryData(...);
        // 4. ensure with await and await for the result
        await context.queryClient.ensureQueryData(...);
    },

loader: ({ context }) => {
        // 1. prefetch without await
        context.queryClient.prefetchQuery(...);
        // 2. prefetch with await
        await context.queryClient.prefetchQuery(...);
        // 3. ensure without await
        context.queryClient.ensureQueryData(...);
        // 4. ensure with await and await for the result
        await context.queryClient.ensureQueryData(...);
    },

I use useSuspenseQuery on the frontend I know there's staletimes etc. But what I'm more interested in is/I want to acheive is this: I want to start the fetch on the server, not block the UI rendering, and have the useSuspenseQuery pick up on the frontend where the server-side fetch continue. This means 'immediately show a loading UI and kick off the server-side data fetch at the same time, then simply use that data on the client side'. To clarify, what I mean by the last one is I do NOT want another fetch request to trigger on the client. I also read on one of TkTodo's replies here saying 'Also, when you use suspense, there is really no reason to await anything in the route loaders.' https://discord.com/channels/719702312431386674/1360474327933259816/1360652929614217370 Given all that, I think '3' should be the way to go. But please correct me if I'm wrong.

3 Replies

absent-sapphireOP•2mo ago

Also, a separate question - how does useSuspenseQuery 'resume' data fetching on the server? I think it's done by streaming? If so, does it mean useQuery cannot achieve the same effect? Or does it have some way of knowing 'hey the data is currently being fetched on the server, don't trigger an additional network request until it resolves'?

conscious-sapphire•3w ago

I'm curious about this as well

ambitious-aqua•3w ago

https://github.com/TanStack/query/discussions/9135

GitHub

RFC: Unified Imperative Query Methods · TanStack query · Discussi...

Context Sometimes, APIs don’t evolve well. I’ve seen the situation a couple of times that we add an API, and we think it’s great, and then after some time, we add another API that does something si...

Gaming

Programming

prefetchQuery vs ensureQueryData in SSR

Did you find this page helpful?