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

TanStack•9mo ago•

1 reply

awake-maroon

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

Help figuring out why queryFn is firing with stale params

Similar Threads

Help figuring out why queryFn is firing with stale params

Similar Threads

Similar Threads

Similar Threads