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?