Having a TypeScript error issue while using the getQueriesData function in Next.js 13 with React Query. Below is my code snippet:
// app/products.tsx
import { getQueryClient } from "@/app/providers/getQueryClient";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import React from "react";
export interface ProductResponse {
// Interface definition...
}
// Function definition...
export const ProductList = () => {
const queryClient = getQueryClient();
const { data, isLoading, isFetching, error } = useQuery({
queryKey: ["hydrate-users"],
queryFn: () => getProducts(),
});
return (
<div>
<button onClick={() => {
queryClient.getQueriesData("hydrate-users");
}}>Revalidate</button>
{/* Rest of the code */}
</div>
);
};
The content of my queryClient.tsx file:
// app/getQueryClient.jsx
import { QueryClient } from "@tanstack/react-query";
import { cache } from "react";
const getQueryClient = cache(() => new QueryClient());
export default getQueryClient;
Encountering an error when trying to utilize the getQueriesData function on the queryClient instance:
No overload matches this call.
Overload 1 of 2, '(queryKey: QueryKey): [QueryKey, unknown][]', gave the following error.
Argument of type 'string' is not assignable to parameter of type 'QueryKey'.
Overload 2 of 2, '(filters: QueryFilters): [QueryKey, unknown][]', gave the following error.
Type '"hydrate-users"' has no properties in common with type 'QueryFilters'.