T
TanStack•2mo ago
genetic-orange

Help figuring out why queryFn is firing with stale params

Consider this snippet from a "Widget" component: 
  const queryParams = useDashboardContext();
  const { data, isFetching, isError } = useQuery<ScorecardAlerts>({
    queryKey: [
      {
        dataset: WidgetDatasets.SCORECARD_ALERTS,
        ...queryParams,
      },
    ],
    queryFn: ({ queryKey }) => {
      const [params] = queryKey;
      return axios.get(APIEndpoints.DASHBOARD, {
        params,
      });
    },
    staleTime: Infinity,
  });
  const queryParams = useDashboardContext();
  const { data, isFetching, isError } = useQuery<ScorecardAlerts>({
    queryKey: [
      {
        dataset: WidgetDatasets.SCORECARD_ALERTS,
        ...queryParams,
      },
    ],
    queryFn: ({ queryKey }) => {
      const [params] = queryKey;
      return axios.get(APIEndpoints.DASHBOARD, {
        params,
      });
    },
    staleTime: Infinity,
  });
This works fine, but I'd like a way to invalidate all widgets at some point, so I added a 'widget' string to my queryKey: 
  const queryParams = useDashboardContext();
  const { data, isFetching, isError } = useQuery<ScorecardAlerts>({
    queryKey: [
      'widget',
      {
        dataset: WidgetDatasets.SCORECARD_ALERTS,
        ...queryParams,
      },
    ],
    queryFn: ({ queryKey }) => {
      const [,params] = queryKey;
      return axios.get(APIEndpoints.DASHBOARD, {
        params,
      });
    },
    staleTime: Infinity,
  });
  const queryParams = useDashboardContext();
  const { data, isFetching, isError } = useQuery<ScorecardAlerts>({
    queryKey: [
      'widget',
      {
        dataset: WidgetDatasets.SCORECARD_ALERTS,
        ...queryParams,
      },
    ],
    queryFn: ({ queryKey }) => {
      const [,params] = queryKey;
      return axios.get(APIEndpoints.DASHBOARD, {
        params,
      });
    },
    staleTime: Infinity,
  });
For some strange reason, when queryParams changes, the queryFn() will now run twice, once with the old queryParams and once with the new queryParams. I can't for the life of me understand why. Can anyone provide insight? I've already logged out queryParams to verify a sneaky re-render with old data isn't happening - so im confident its something going on with useQuery
1 Reply
genetic-orange
genetic-orangeOP•2mo ago
Also, i do not have StrictMode enabled

Did you find this page helpful?