Updating query data based on previous data

[PabloRomanH]

I have an endpoint that can return a lot of data, so I have a parameter to ask it to only return new data after a certain date.
Then I'm persisting this data to IndexedDB, so every time I load the page, my query has access to the old cached data. The problem is that when loading the page, the old data only lasts until the most recent data is fetched from the backend.
How can I update the data in the query based on the new received data without losing the old data? I've tried using queryClient.getQueryData() inside the useQuery function (queryFn), but I just get undefined. I also don't see the old data being passed to queryFn.

[TkDodo]

You should be able to get the old query data inside the queryFn and just append your data before returning the promise with getQueryData. If you have a codesandbox with the issue I can take a look

[PabloRomanH]

I just tested it and apparently the hydration of the queryClient is happening after the queryFn is first executed (I have to use async code to hydrate my cache from IndexedDB).

Is there a way to make all (or certain) queries wait for the hydration to complete?

Do I need to set an initial value for the query to distinguish "no cache present" from "not yet hydrated" and handle it manually? In that case, once the values are hydrated, I suppose I'll need to manually trigger a reload of the queries? This seems less than ideal.

[TkDodo]

You can disable the query until hydration is finished

[PabloRomanH]

I tried doing this, but the hydration code is running at the top level of my app, and from there I can't reenable the query. I tried changing the default options for the query in the hydration code, but that doesn't seem to affect a query that has already been created in a specific component. How can I let the query in a component know that it should be enabled now?

[PabloRomanH]

I'll try doing that! El vie, 19 feb 2021 a las 14:26, Dominik Dorfmeister (< [email protected]>) escribió:

…

You can disable the query until hydration is finished — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1828 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAJMIZYQUV6ZYJJLIQI3VNDS7YHA3ANCNFSM4X3TQALA> .

-- Pablo Roman Learn Spanish naturally: youtube.com/DreamingSpanish Blog about SLA: dreaminglanguages.com <http://dreaminglanguages.wordpress.com/>

[victorkvarghese]

v5 pseudo code for reference

export const GetItems = () => {
  const apiService = ApiService.createInstance();

  // get data from queryclient
  const existingItemData: ItemEntity[] | undefined =
    RNQueryClient.getQueryData([QueryKeys.GET_ITEMS]);

  return useQuery({
    queryKey: [QueryKeys.GET_ITEMS],
    queryFn: async ({}) => {
      const response: AxiosResponse = await apiService.getItems({});

      const data = response.data;
      // get cached data from client, and append to new data
      let items: ItemEntity[] = [...(data.items || [])];
      if (existingFeedData) {
        items = [...existingItemData, ...items];
      }
      
      return items || [];
    },
  });
};