Not refetching on reactive query key change

[aakashbashyal21]

I have a useCollections composable that takes a reactive Ref for filtering, sorting, and pagination.

The computed query key clearly changes (confirmed via console logs), but the query does not re-run when the parameters update.

Here's the code:

const COLLECTION_QUERY_KEY = "collections" as const;
export const collectionsQueryKeys = queryKeysFactory(COLLECTION_QUERY_KEY);

export const useCollections = (
  query: Ref<RecordListOptions | undefined>
) => {
  const { data, ...rest } = useQuery<ListResult<ProductCollectionsResponse>>({
    key: computed(() => {
      const queryKey = collectionsQueryKeys.list(query.value);
      console.log("Query Key:", queryKey);
      return queryKey;
    }),
    query: async () => getProductCollection(query.value),
  });

  return { data, ...rest };
};

collectionsQueryKeys:

 
export type TQueryKey<TKey, TListQuery = any, TDetailQuery = string> = {
  all: readonly [TKey]
  lists: () => readonly [...TQueryKey<TKey>["all"], "list"]
  list: (
    query?: TListQuery
  ) => readonly [...ReturnType<TQueryKey<TKey>["lists"]>, { query: TListQuery }]
  details: () => readonly [...TQueryKey<TKey>["all"], "detail"]
  detail: (
    id: TDetailQuery,
    query?: TListQuery
  ) => readonly [
    ...ReturnType<TQueryKey<TKey>["details"]>,
    TDetailQuery,
    { query: TListQuery }
  ]
}

export const queryKeysFactory = <
  T,
  TListQueryType = any,
  TDetailQueryType = string
>(
  globalKey: T
) => {
  const queryKeyFactory: TQueryKey<T, TListQueryType, TDetailQueryType> = {
    all: [globalKey],
    lists: () => [...queryKeyFactory.all, "list"],
    list: (query?: TListQueryType) =>
      [...queryKeyFactory.lists(), query ? { query } : undefined].filter(
        (k) => !!k
      ),
    details: () => [...queryKeyFactory.all, "detail"],
    detail: (id: TDetailQueryType, query?: TListQueryType) =>
      [...queryKeyFactory.details(), id, query ? { query } : undefined].filter(
        (k) => !!k
      ),
  }
  return queryKeyFactory
}

At runtime, I see the console log output confirming the query key is changing, e.g.:

Query Key: ["collections", "list", { query: { page: 1, perPage: 10, sort: "" } }]
Query Key: ["collections", "list", { query: { page: 1, perPage: 20, sort: "" } }]

But getProductCollection() never runs again. The query is stuck on the initial fetch.

Why isn’t the query refetching when the key changes reactively? What could i be missing here?

[posva]

Use these instead:

• https://pinia-colada.esm.dev/guide/query-keys.html#Managing-query-keys-key-factories-
• https://pinia-colada.esm.dev/guide/query-keys.html#Typing-query-keys
• https://pinia-colada.esm.dev/guide/queries.html#Organizing-Queries

[aakashbashyal21]

I can read the documentation and I have read them, but https://pinia-colada.esm.dev/guide/query-keys.html#Simple-static-keys as you have mentioned in the example.

These all are valid:

['products', 1]
['products', '1']
['products', { id: 1 }]
['products', { id: 1, type: 'book' }]
['products', 'search', { filters: { type: ['book', 'comic'] }}]
['products', 'search', { filters: { type: ['book', 'comic'], limit: 10 }}]

But why is my query not running can you please guide me on that? I have read the documentation, and Nothing helped me.

[posva]

Sorry, I missed the message. I don't know why your code (specifically) isn't working. It should work, so this might be a bug but I need a boiled-down reproduction without all the TS gymnastics to take a look.