initialData function is not firing off

[shamxeed]

I tried to populate my query with some in hand data as initialData but that doesn't seemed to work!

maybe I'm doing something wrong that's why I'm here, a help will be much appreciated!!

what I tried:

const useAlphabets = () => {
   const { axios } = useAxios()
   const queryClient = useQueryClient()

   return useQuery('alphabets', async () => {
      const { alphabets } = await axios({ url: '/api/learning/alphabets' })
      return alphabets
   },
   {
      initialData: () => queryClient.getQueryData('learningResources')?.filter((resource) => resource?.categories?.inludes('alphabets'))
   })
}

Under normal circumstance this query will be populated with some initialData but I don't why when I tried it the data is always undefined and of course the cache has the data I'm trying to access. Because if I console log the data somewhere else, I used to see the data in the log.

I think the initialData function is not firing off, because I tried something as simple as alerting generic message just to confirm the initialData func fires but to no avail.

{
   initialData: () => alert('Hi, there! I worked!!') // still not working
}

Thanks!!!

[TkDodo]

It would be better if you could show this in a codesandbox reproduction. I see no reason why initialData function shouldn't run...

[shamxeed]

Thanks for the reply @TkDodo!!
After testing out on code sandbox everything seemed to be working fine, I'm really confused why my code isn't working.

Codesandbox example

My setup:

const client = new QueryClient({
  defaultOptions: {
    queries: {
      cacheTime: 'Infinity',
      staleTime: 'Infinity',
    },
  },
});

const asyncStoragePersistor = createAsyncStoragePersistor({
  storage: asyncStorage,
});

persistQueryClient({
  queryClient: client,
  persistor: asyncStoragePersistor,
  maxAge: 1000 * 60 * 60 * 24 * 365,
});

<QueryClientProvider client={client}>
   <App />
</QueryClientProvider>

Enviroment:
React Native + Expo

[TkDodo]

hm, when using the persist plugins, I would've expected, the initialData function to not run, and also actually the queryFn to not run when we already have data in the storage. Imo, the order should be:

• restore from external storage
• query runs - it sees data in the cache already, thus initialData is not run
• the queryFn runs if the data we have is considered stale
• the query should not be in a hard loading state because we have data already.

I tried that out with the webstoragepersister, but it's not that way there. Even in this setup, the initialDataFn seems to run.

The idea of initialData is that it is put into the cache when the query is created if there is no data in the cache already.

[TkDodo]

@shamxeed I think it's race condition. Have a look at this issue: #3245

What you experience could be due to the restoring of the client from the async storage being faster than the App rendering, which means initialData function will not run because you have data already. This is expected.
In this PR:

• feat(persistQueryClient): PersistQueryClientProvider #3248

I tried to solve this issue with a dedicated PersistQueryClientProvider. It should make the behaviour deterministic. I'd appreciate it if you would try it out. You can get it via:

"react-query": "https://pkg.csb.dev/tannerlinsley/react-query/commit/5a0aab79/react-query",

To summarize:

• if your app mounts, we try to restore the async storage
• after that, the app renders
• then, if a query mounts, initialData will only be taken if that query doesn't have data yet.

[shamxeed]

I did give it a try, initialData is not firing still but I came to understand that initialData only fires when the query is first mounted and any other subsequent mounts are ignored.

So it's safe to say initialData only fires when query was first created to the cache, am I right?

[TkDodo]

Yes that's right.