getQueryData returning undefined unless exact key match

I am trying to use one cache as the initial value for another, following https://tanstack.com/query/latest/docs/framework/react/guides/initial-query-data#initial-data-from-cache

Example code

const useCustomHook = (param) => {
  const queryClient = useQueryClient();

  const query = useQuery({
    queryKey: ['key', param],
    queryFn: async () => {
      return await fetchData();
    },
    initialData: () => {
      console.log('init', queryClient.getQueryData(['key']));
      return undefined;
    },
  });

  console.log('root', queryClient.getQueryData(['key']));

  return query
}

const useCustomHook = (param) => {
  const queryClient = useQueryClient();

  const query = useQuery({
    queryKey: ['key', param],
    queryFn: async () => {
      return await fetchData();
    },
    initialData: () => {
      console.log('init', queryClient.getQueryData(['key']));
      return undefined;
    },
  });

  console.log('root', queryClient.getQueryData(['key']));

  return query
}

Both the

init

init

and

root

root

logs are

undefined

undefined

I understand on the initial query there is no data and I would expect undefined, but on changing param I still get undefined. But if I update the logs to

queryClient.getQueryData(['key', param])

queryClient.getQueryData(['key', param])

the cached data is returned.

Am I missing a something, the docs say I should be able to get the data with only a partial key match

TanStack | High Quality Open-Source Software for Web Developers

Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.

TanStack•2y ago•

12 replies

forward-apricot

getQueryData returning undefined unless exact key match

I am trying to use one cache as the initial value for another, following https://tanstack.com/query/latest/docs/framework/react/guides/initial-query-data#initial-data-from-cache

Example code

const useCustomHook = (param) => {
  const queryClient = useQueryClient();

  const query = useQuery({
    queryKey: ['key', param],
    queryFn: async () => {
      return await fetchData();
    },
    initialData: () => {
      console.log('init', queryClient.getQueryData(['key']));
      return undefined;
    },
  });

  console.log('root', queryClient.getQueryData(['key']));

  return query
}

const useCustomHook = (param) => {
  const queryClient = useQueryClient();

  const query = useQuery({
    queryKey: ['key', param],
    queryFn: async () => {
      return await fetchData();
    },
    initialData: () => {
      console.log('init', queryClient.getQueryData(['key']));
      return undefined;
    },
  });

  console.log('root', queryClient.getQueryData(['key']));

  return query
}

Both the

init

init

and

root

root

logs are

undefined

undefined

I understand on the initial query there is no data and I would expect undefined, but on changing param I still get undefined. But if I update the logs to

queryClient.getQueryData(['key', param])

queryClient.getQueryData(['key', param])

the cached data is returned.

Am I missing a something, the docs say I should be able to get the data with only a partial key match

TanStack | High Quality Open-Source Software for Web Developers

Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.

getQueryData returning undefined unless exact key match

Similar Threads

getQueryData returning undefined unless exact key match

Similar Threads

Similar Threads

Similar Threads