extended-salmon

getQueryData returning undefined

Using the query keys factory with the query options API that @TkDodo 🔮 wrote about in his blog, I'm trying to update the product list cache when editing a product. Query Keys:

export const productQueries = {
  all: () => ['products'],
  lists: () => [...productQueries.all(), 'list'],
  list: (filters: ProductFilters = {}) =>
    queryOptions({
      queryKey: [...productQueries.lists(), filters],
      queryFn: () => fetchProductsList(filters),
    }),
}

export const productQueries = {
  all: () => ['products'],
  lists: () => [...productQueries.all(), 'list'],
  list: (filters: ProductFilters = {}) =>
    queryOptions({
      queryKey: [...productQueries.lists(), filters],
      queryFn: () => fetchProductsList(filters),
    }),
}

The final query key looks like this: ['products', 'list', {page: 1, per_page: 20}] When I try to do queryClient.getQueryData(productQueries.list().queryKey), it's returning undefined. When I try with lists(), it also returns undefined. Does getQueryData not return all matching queries? Only exact ones? Using invalidateQueries works without having to pass the filters inside the query key.

6 Replies

sensitive-blue•13mo ago

This sent me down a good path of looking into this! My guess is that you will need to exact match the query but I'm not 100% on this. Also, you are setting filters to an empty object by default here: filters: ProductFilters = {} which may be throwing off the queryKey as the filters would be {} I think

extended-salmonOP•13mo ago

Yeah I just set the default value to be empty in case there are no filters, but I checked with the devtools and the query key is exactly like this ['products', 'list', {page: 1, per_page: 20}]. What I'm not getting is the return undefined. I'm pretty sure it didn't use to work with exact matches for the query key, I even have one other project that it has the same pattern and returns a cached value on getQueryData, but I can't get it to work without passing the filters in this case.

sensitive-blue•13mo ago

Hmm ya... Just tested it out in my project with all the latest versions and everything needed to be exact, including the filters within the object or it shows undefined for me. Not sure if that helps but good luck!

conscious-sapphire•13mo ago

Yes it's exact per default, so you need the full key.

extended-salmonOP•13mo ago

I see, but I still don't get it I got the same pattern on another project, and it does return the cache without passing the exact key. Do you know why this happens? The only differences are that we're passing more variables to the query key and we're using version 5.28.8

  all: () => ['systems'],
  lists: () => [...systemQueries.all(), 'list'],
  list: (
    filters: SystemFilters = {},
    sorting: ActiveSorting = DEFAULT_ACTIVE_SORTING,
    pagination: PaginationExpression = DEFAULT_PAGINATION,
  ) =>
    queryOptions({
      queryKey: [...systemQueries.lists(), filters, sorting, pagination],
      queryFn: () => fetchSystemsList(filters, sorting, pagination),
      placeholderData: keepPreviousData,
    }),

  all: () => ['systems'],
  lists: () => [...systemQueries.all(), 'list'],
  list: (
    filters: SystemFilters = {},
    sorting: ActiveSorting = DEFAULT_ACTIVE_SORTING,
    pagination: PaginationExpression = DEFAULT_PAGINATION,
  ) =>
    queryOptions({
      queryKey: [...systemQueries.lists(), filters, sorting, pagination],
      queryFn: () => fetchSystemsList(filters, sorting, pagination),
      placeholderData: keepPreviousData,
    }),

 onMutate: async (systemPk) => {
      await queryClient.cancelQueries({ queryKey: systemQueries.all() })

      const cachedSystems = queryClient.getQueryData(systemQueries.list().queryKey)

 onMutate: async (systemPk) => {
      await queryClient.cancelQueries({ queryKey: systemQueries.all() })

      const cachedSystems = queryClient.getQueryData(systemQueries.list().queryKey)

conscious-sapphire•13mo ago

all I can say is if getQueryData returns data for a key ['systems', 'list'], then you have a cache entry with exactly that key.

Gaming

Programming

getQueryData returning undefined

Did you find this page helpful?