TanStackT
TanStack•3y ago•
6 replies
colossal-harlequin

usage of queryClient.getQueryData results in errors

Hello 👋
Im using Nuxt3 (SPA) and have a query ta fetch data and then i have a function that retrieve that data into the cache (later stage it will apply some filterting/mapping). When i try to call that function to return the query cache, i get the following errors:

In console:
`
queryCache.ts:170 Uncaught (in promise) TypeError: Cannot create property 'exact' on string 'dealsPreviews'
    at QueryCache2.find (queryCache.ts:170:15)


In IDE (Webstorm 2022.3.1)
TS2345: Argument of type 'string' is not assignable to parameter of type 'MaybeRefDeep '.
const cachedData = queryClient.getQueryData('dealsPreviews')

The code:
const queryClient = useQueryClient();

const { data, isLoading, isError } = useQuery({
  queryKey: ['dealsPreviews'],
  queryFn: () => request(useRuntimeConfig().public.GRAPHQL_ENDPOINT, dealPreviewQuery),
});

const getDealsSortedBy = (sortBy = ESortByFilter.NEWEST) => {
  const cachedData = queryClient.getQueryData('dealsPreviews');
  if (sortBy === ESortByFilter.OLDEST) {
    // apply filters
  }
  return cachedData;
};


Template
<h2 v-for="deal in data?.deals">{{ deal.title }}</h2>
<hr />
<h3 v-for="item in getDealsSortedBy()">{{ JSON.stringify(item) }}</h3>


The useQuery works fine, however it's when trying to access the queryClient that things goes south on my side. I've tried looking into the discord but didn't find relevant errors with the typing error and the 'exact' key problem

I tried to add the ´{exact: false}´ filter to the getQueryData but still no chance

Do you see any wrong doing in what im trying to achieve ? If needed i can make a replica

Thanks in advance
image.png
Was this page helpful?