correct-apricot

React query serverside prefetching with passing more params to custom function not working

Hello all, I have a question I always thought that you could prefetch regardless of the params you pass to the queryKey, and queryfn is this is not the case? so for example

// in serverSideProps you would do this
const someRandomValue = "hello" 
await queryClient.prefetchQuery({
  queryKey: ['someValue', {someRandomValue}]
  // or 
  queryKey: ['someValue', someRandomValue]
  queryFn: testFunction
)}

// then your function could look like this 
export const testFunction = async ({ queryKey }) => {
  const [_key, { someRandomValue }] = queryKey;
  try {
    return someRandomValue;
  } catch (error) {
    console.log(error);
  }
};

// in serverSideProps you would do this
const someRandomValue = "hello" 
await queryClient.prefetchQuery({
  queryKey: ['someValue', {someRandomValue}]
  // or 
  queryKey: ['someValue', someRandomValue]
  queryFn: testFunction
)}

// then your function could look like this 
export const testFunction = async ({ queryKey }) => {
  const [_key, { someRandomValue }] = queryKey;
  try {
    return someRandomValue;
  } catch (error) {
    console.log(error);
  }
};

I always thought that this would work, is this not the case? you can see in the sandbox that i created what I mean, my understanding is that if your are fetching on the serversideProps it should return isLoading falsewith data already populated fromt the server https://stackblitz.com/edit/stackblitz-starters-rpdzwt?description=The%20React%20framework%20for%20production&file=package.json,pages%2F_app.js,pages%2Fhook%2FuseTest.js,pages%2Findex.js,pages%2Fanother.js,pages%2Fhook%2FuseAnother.js&title=Next.js%20Starter

StackBlitz

Next.js Starter - StackBlitz

The React framework for production

11 Replies

quickest-silver•3y ago

you have two different sessionKeys: helloKEY vs. HELLOOKEY use the same key and it works

correct-apricotOP•3y ago

Hey yeah, you were right about that, I am running through that issue mentioned in codesandbox and really can't find differences, here is is the code I have, anything pops out to you maybe I am missing something?

quickest-silver•3y ago

use the devtools to see if the prefetching puts the correct values into the cache. it's still likely a key mismatch

correct-apricotOP•3y ago

So I thought it could have been a key mismatch, but the key doesn't change unless user signouts you can see below

quickest-silver•3y ago

what hydration does is put the data that you serialize on the server into the cache on the client. if the client sees no data, it's not put there correctly. try with a hardcoded queryKey like in the sandbox to see if that's the problem. You can also inspect window.__nextData (or something similar) to see where next puts the data to see what gets sent to the client

correct-apricotOP•3y ago

so I tried this, and this seems to work correctly, so the problem must be with the queryKey, but not sure how or why it wouldn't fetch correctly if that key does not change

correct-apricotOP•3y ago

I also tried doing what you said and inspect the NEXT_DATA and that's what I got the first one with hardcoded key and the second one with what I had initially

quickest-silver•3y ago

in your first screenshot, you have userbrands, null once and userbrands, somekey in the devtools the null one might come from the server, and the one with the real key from the client

correct-apricotOP•3y ago

I see what you are saying these ones, but I am finding it strange that in the nextdata it shows correctly and the prefetch query itself wouldn't run if there's no sessionKey

quickest-silver•3y ago

I don't see it either on those screenshots, sorry

correct-apricotOP•3y ago

yeah, not sure why that happens, because looking closely seems like the data is there

Gaming

Programming

React query serverside prefetching with passing more params to custom function not working

Did you find this page helpful?