dependent-tan

How to work with prefetch query in NextJS app router?

I've been trying to set up prefetch in NextJS App router using the guide at: https://tanstack.com/query/v5/docs/framework/react/guides/advanced-ssr but it never seems to work even when I have the same code from the docs.

21 Replies

dependent-tanOP•13mo ago

key and query function looks like this

dependent-tanOP•13mo ago

prefetch method on the server component

dependent-tanOP•13mo ago

query on the client component

dependent-tanOP•13mo ago

I get the following error about invalid url

dependent-tanOP•13mo ago

if I removed the return null from here the data fetch only on the client side

eastern-cyan•13mo ago

Looking at your code, it seems you're using the native fetch , your url may not be valid, try passing a valid url or a create an interceptor where you can pass in thr base url

dependent-tanOP•13mo ago

thanks for your response @albertdugba🇬🇭 I have tested with axios with baseURL as well, but still the same error about invalid url, but it works on the client, but not on the server

eastern-cyan•13mo ago

Interesting but can you confirm your base url is getting logged ?

dependent-tanOP•13mo ago

yes, I can confirm that

dependent-tanOP•13mo ago

eastern-cyan•13mo ago

okay if you don't mind, you can share a google meet link so we look at it together @Sam (unclebigbay)

dependent-tanOP•13mo ago

sure, thanks 1 sec Here: https://meet.google.com/fsp-cqwr-sug?ijlm=1729266774413&hs=187&adhoc=1 @albertdugba🇬🇭 any luck? thanks for yesterday

eastern-cyan•13mo ago

Yes, I have reproduced the problem and I don't seem to have the issue, here, Also you might want to add a loading.tsx to show a loading indicator on the page until page is fully loaded. You can checkout it out here Hello Sam I have reproduced it here https://codesandbox.io/p/devbox/nextjs-server-component-tanstac-query-275fgv

dependent-tanOP•13mo ago

thanks @albertdugba🇬🇭, it seems the environment difference won't rule this out, the full url used in the sandbox is hosted but I'm referring to working locally with it Also, I don't think showing a loading state for server fetched data means it's been fetched on the server it should just show without a loading state If I'm going to use a loading state, then prefetch should also be removed I hope you get my point @albertdugba🇬🇭

eastern-cyan•13mo ago

@Sam (unclebigbay) I get your point... so I initially tested it on my local machine before uploading it to CodeSandbox, and it loaded instantly, successfully loading. The reason I suggested adding a loading indicator is to handle any delay caused by the API or when the page takes longer to load. I don't think this is a major issue in production since the page is cached Another suggestion, you can pass down the data to the your Dashboard component directly and remove the useQuery hook from the dashboard itself so something like this

const users =   await queryClient.prefetchQuery({
    queryKey: ["user"],
    queryFn: getUsers,
  });

 <HydrationBoundary state={dehydrate(queryClient)}>
        <Dashboard users={users} />
   </HydrationBoundary>

const users =   await queryClient.prefetchQuery({
    queryKey: ["user"],
    queryFn: getUsers,
  });

 <HydrationBoundary state={dehydrate(queryClient)}>
        <Dashboard users={users} />
   </HydrationBoundary>

dependent-tanOP•13mo ago

so I initially tested it on my local machine before uploading it to CodeSandbox, and it loaded instantly

loading instantly is what I'm unable to achieve yet and trying to figure out why true loading might not show and I don't think prefetch returns data

dependent-tanOP•13mo ago

prefetch doesn't work because of this error (original issue)

eastern-cyan•13mo ago

Oh yeah true, it does not return anything, my bad

dependent-tanOP•13mo ago

no worries honestly can't understand why working with prefetch on nextjs app is this difficult what I need to achieve is - fetch data on server (no loading state) - update the data when user adds new record (invalidate) What's coming to my end now as a fix is a. Run db call on server component to get data b. Pass the data from a to a use state in client component c. Have a client endpoint (same as a) to call when new data is added (mimic invalidation) or just spread the newly added data from the db to the state d. Update the state from b with the client data the only contraint here is that for each data query, we'll have a server and client version I don't think this has any issue with performance, we're just replacing the server fetched data with the client fetch data just an extra effort with maintenance to keep the two versions in sync in case of any update wdyt @albertdugba🇬🇭 ?

dependent-tanOP•13mo ago

this indeed work as expected

dependent-tanOP•13mo ago

Still welcoming any other approach that doesn't require keeping two queries

Gaming

Programming

How to work with prefetch query in NextJS app router?

Did you find this page helpful?