ratty-blush

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)

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;
};

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>

<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

4 Replies

fair-rose•3y ago

querykeys need to be an array

ratty-blushOP•3y ago

Holy hell Im sorry for that stupid question

ratty-blushOP•3y ago

my brain mislead itself when i saw this

ratty-blushOP•3y ago

i don't know why i thought it was just the plain query key, even if it was shown later the type is QueryKey Thanks for that quick response!

Gaming

Programming

usage of queryClient.getQueryData results in errors

Did you find this page helpful?