0

I'm using Vue 3 with Pinia Colada to manage server state. 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 };
};

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?

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.