T
TanStack•2y ago
secure-lavender

Need help to find out why my query is not marked as stale

Hey guys, I don't understand what I am doing wrong. Maybe it is just some async stuff. I have one query to fetch some bank data. On top of that I have written some more queries which filter the list of bank data I am getting. Once I am posting new data I want to invalidate all filters and the initial query which gets the data. However, one query is always using initial data set and not the updated data set. 
// The data getting query:
const usePaymentDetails = (currentContract: string): UseQueryResult<IPaymentDetails | null, void> => {
  const queryClient = useQueryClient();

  return useQuery({
    queryKey: ['allPaymentDetails', currentContract],
    queryFn: () => {
      return getPaymentDetails(currentContract);
    },
    enabled: !!currentContract,
    onSuccess: (response) => {
      console.log('refetching payment details');
      queryClient.invalidateQueries({
        queryKey: ['currentPaymentDetails']
      });
      queryClient.invalidateQueries({ queryKey: ['nextPaymentDetails'] });
      return response;
    }
  });
};
// The data getting query:
const usePaymentDetails = (currentContract: string): UseQueryResult<IPaymentDetails | null, void> => {
  const queryClient = useQueryClient();

  return useQuery({
    queryKey: ['allPaymentDetails', currentContract],
    queryFn: () => {
      return getPaymentDetails(currentContract);
    },
    enabled: !!currentContract,
    onSuccess: (response) => {
      console.log('refetching payment details');
      queryClient.invalidateQueries({
        queryKey: ['currentPaymentDetails']
      });
      queryClient.invalidateQueries({ queryKey: ['nextPaymentDetails'] });
      return response;
    }
  });
};
// this query here is the troublemaker, so the queryClient is not running even though I am invalidating it after the get 
const useCurrentPaymentDetails = (
  currentContract: string
): UseQueryResult<{ out: IPaymentDetails; in: IPaymentDetails }, void> => {
  const queryClient = useQueryClient();
  return useQuery({
    queryKey: ['currentPaymentDetails', currentContract],
    queryFn: () => {
      const allPaymentDetails = queryClient.getQueryData<IPaymentDetails[]>(['allPaymentDetails', currentContract]);
      console.log('currentPaymentDetails', 'allPaymentDetails', allPaymentDetails);
      return allPaymentDetails ? getActiveDetail(allPaymentDetails) : { in: null, out: null };
    },
    enabled: !!currentContract
  });
};
// this query here is the troublemaker, so the queryClient is not running even though I am invalidating it after the get 
const useCurrentPaymentDetails = (
  currentContract: string
): UseQueryResult<{ out: IPaymentDetails; in: IPaymentDetails }, void> => {
  const queryClient = useQueryClient();
  return useQuery({
    queryKey: ['currentPaymentDetails', currentContract],
    queryFn: () => {
      const allPaymentDetails = queryClient.getQueryData<IPaymentDetails[]>(['allPaymentDetails', currentContract]);
      console.log('currentPaymentDetails', 'allPaymentDetails', allPaymentDetails);
      return allPaymentDetails ? getActiveDetail(allPaymentDetails) : { in: null, out: null };
    },
    enabled: !!currentContract
  });
};
2 Replies
secure-lavender
secure-lavenderOP•2y ago
The issue arises after a mutation: 
// adding new bank details
const useSetPaymentDetail = (data: TChangePaymentData, contractId?: string) => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: async () => {
      const res = await someServerMutation(data)

      console.log('invalidation', contractId);
      queryClient.refetchQueries({
        queryKey: ['allPaymentDetails']
      });
      queryClient.invalidateQueries({
        queryKey: ['currentPaymentDetails']
      });
      queryClient.invalidateQueries({
        queryKey: ['nextPaymentDetails']
      });

      return res
    }

  });
};
// adding new bank details
const useSetPaymentDetail = (data: TChangePaymentData, contractId?: string) => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: async () => {
      const res = await someServerMutation(data)

      console.log('invalidation', contractId);
      queryClient.refetchQueries({
        queryKey: ['allPaymentDetails']
      });
      queryClient.invalidateQueries({
        queryKey: ['currentPaymentDetails']
      });
      queryClient.invalidateQueries({
        queryKey: ['nextPaymentDetails']
      });

      return res
    }

  });
};
stormy-gold
stormy-gold•2y ago
Possibly await invalidation of allPaymentDetails is a fix But to improve in general: the queryKey of useCurrentPaymentDetails must contain the value of allPaymentDetails You should look up the concept of dependent queries.

Did you find this page helpful?