getQueryData is always undefined

[baymac]

Here is a dummy example of my issue. I have a query hook like this:

import { listItems } from '../utils/QueryApis';
import { useQuery } from "react-query";
import { ListItemsRequestParams, DataItemTypes } from '../utils/RequestTypes';

export default function useItems(listItemsRequestParams: ListItemsRequestParams) {
  return useQuery(['items', listItemsRequestParams], listItems);
}

I try to get the cacheData with:

function comp() {
  const { status, data: items, error, isFetching } = useItems({ query_type });

  const test = () => console.log(queryCache.getQueryData('items'))
  
   if (status === "loading") {
        return <Loading />
    }

    if (status === "error") {
        <span>Error: {(error as any).message}</span>
    }
  return <DPButton onClick={() => test()}>Test</DPButton>
}

When I click on Test button, it always prints undefined.

[baymac]

I am using version 1.2.9

[baymac]

If I do:

console.log((queryCache.getQueries(['items'])[0].state as any).data)

I can see the my cached data.

[tannerlinsley]

Your query key above is ['items', listItemsRequestParams], not 'items', thus it is returning all queries with the items prefix.

[IanVS]

It looks like the new queryClient.getQueriesData accomplishes this use case very well.

[dsacramone]

Have a question here, that might be applicable yet unique to this topic.

I have a response that gives me some element field data, and within this data, each field has a dynamic url. This url I will fetch. Because it is dynamic, I have no "insight" into its pathing. But, I am using useQuery here. All good. The problem is the request for the cache data happens before the actual "real" fetch, and it ends up returning undefined, and thus when the "real" api fires, it returns undefined... and never makes the request.

Is there a standardized way to do this? I'm surprised as I figured the return of an empty cache is undefined, and thus a subsequent useQuery for that same query-key would then make the api request.

so, my "cache" hook is:

export const useGetDynamicFieldSelector = async (select, key) => {
    const queryClient = useQueryClient();

    const {data} = useQuery(
      QUERY_KEYS.dynamicFields(key),
        async () => {
            const res = await queryClient.getQueryData(QUERY_KEYS.dynamicFields(key));
            return res;
        },
      {
          select,
      }
    );

    return data;
}

And my actual fetch of the "real" api:

  const {data, isLoading} = useQuery(QUERY_KEYS.dynamicFields(field.name),() => fetchFieldApi(field), {enabled: Boolean(field.fetch)});

So, the cache call runs first because its in a component higher up the component chain... and that seems to then "set" the value of undefined, so when the actual "api" call happens, it doesn't..... any thoughts?

Note, I tried setting stale/cache time of 0, in the cache getter hook. Didn't work.

[TkDodo]

not sure what you're trying to do here. Basically, you shouldn't have two different queryFns for the same queryKey

[dsacramone]

@TkDodo Yeah, perhaps I wasn't succinct enough.. basically, I have an api that returns a list of dynamic form elements (change on context, and from a db) - call that operation1. Some of these fields come with a fetch url. So, as I am iterating thru them, I am using useQuery and fetching the urls when necessary. All good. They get the in cache. The thing is.. the useQuery is created on the fly downstream in one component. But in another component, "Header", I need the data from one of these caches... The getQueryData is not "updating" when the cache I need is finally populated.. it [''products, sku_id] <--cache key. In other words, I can't use the created queryFN, as that is dynamic and created with operation1... I just need the cache when its updated for this particular cacheKey ''products, sku_id]. Doesn't appear to be updating/subscribing/observing.. its always undefined, when the "Header" calls it.. that makes sense, since its happening before the api is made.. but I figured it would "udpate". Was that clear or still unclear?

[TkDodo]

you can use a direct cache subscription and filter to your key, like e.g. useIsFetching is doing it.

[ra-kesh]

while doing optimistic update via the cache , If I am doing something like the below

setQueryData(queryKey, oldData => newData)

Are there any way to use setQueryData with partial keys ?

[TkDodo]

setQueriesData

[ra-kesh]

@TkDodo thank you so much for the superfast reply