T
TanStack•3y ago
exotic-emerald

Invalidate query with new variables

Hello there, i have a problem with invalidating query. Currently i have userQuery. Afterwards i have jobsQuery with variables from userQuery. It fetches good but when i update user using mutation and want to invalidate jobsQuery, it runs with the previous variables from user (not with the new ones). Is there any way i could pass the new variables to jobsQuery? When i do refetch manually it refetches with new variables. Thank you for any ideas. Here is example of my code: 
//UPDATING USER
API.users
  .updateProfile({
    subscribedNotifications: {
      [trigger]: ["+phone"],
    },
  })
  .then(async () => {
    
    queryClient.invalidateQueries(["me", token]);
    queryClient.invalidateQueries(["jobs", token]);
})
.
.
.
//JOBS QUERY
const jobs = useQuery({
  queryKey: ["jobs", token],
  queryFn: async () =>
    API.jobs
      .jobsAvailable({
        includeWiderAreas: true,
        term: await getDynamicTerms(userQ.data!.data.subscribedNotifications),
      })
      .then(async (res) => res),
  enabled: !!userQ.data?.data.subscribedNotifications,
  staleTime: 0,
  refetchOnMount: true,
});
.
.
.
//getDynamicTerms function to properly type the variables
const getDynamicTerms = async (userData: NotificationSubscription) => {
  const terms = [];

  if (userData.newOneTimeJobs?.includes(NOTIFICATION_CHANNEL.PHONE)) {
    terms.push(JOB_TERM.ONE_TIME);
  }

  if (userData.newLongTermJobs?.includes(NOTIFICATION_CHANNEL.PHONE)) {
    terms.push(JOB_TERM.LONG_TERM);
  }

  if (userData.newFullTimeJobs?.includes(NOTIFICATION_CHANNEL.PHONE)) {
    terms.push(JOB_TERM.FULL_TIME);
  }

  return terms;
};
//UPDATING USER
API.users
  .updateProfile({
    subscribedNotifications: {
      [trigger]: ["+phone"],
    },
  })
  .then(async () => {
    
    queryClient.invalidateQueries(["me", token]);
    queryClient.invalidateQueries(["jobs", token]);
})
.
.
.
//JOBS QUERY
const jobs = useQuery({
  queryKey: ["jobs", token],
  queryFn: async () =>
    API.jobs
      .jobsAvailable({
        includeWiderAreas: true,
        term: await getDynamicTerms(userQ.data!.data.subscribedNotifications),
      })
      .then(async (res) => res),
  enabled: !!userQ.data?.data.subscribedNotifications,
  staleTime: 0,
  refetchOnMount: true,
});
.
.
.
//getDynamicTerms function to properly type the variables
const getDynamicTerms = async (userData: NotificationSubscription) => {
  const terms = [];

  if (userData.newOneTimeJobs?.includes(NOTIFICATION_CHANNEL.PHONE)) {
    terms.push(JOB_TERM.ONE_TIME);
  }

  if (userData.newLongTermJobs?.includes(NOTIFICATION_CHANNEL.PHONE)) {
    terms.push(JOB_TERM.LONG_TERM);
  }

  if (userData.newFullTimeJobs?.includes(NOTIFICATION_CHANNEL.PHONE)) {
    terms.push(JOB_TERM.FULL_TIME);
  }

  return terms;
};
2 Replies
sunny-green
sunny-green•3y ago
You probably need to invalidate the query that fetches the user or to use setQueryData to update the cache, so that userQ.data will have the new values. I also think that the dynamic terms in the jobs query should be in the query key.
exotic-emerald
exotic-emeraldOP•3y ago
Yes i am invalidating the user query (its the “me” query). I need to invalidate this first and afterwards the jobs query. Will try the setQueryData and use dynamicTerms as query key.

Did you find this page helpful?