Does the `useQuery` caching against the `queryKey`?

I have this snippet and I'm expecting that the endpoint will requested any time the

prunedFilter

prunedFilter

is changed as it is changing the key.

* This is actually first expectation what failed, so I'm calling the

refetch

refetch

in the

useEffect

useEffect

hook to achieve this behaviour.

* Other expectation I have is that the endpoint will requested against query key, so if the changed prunedFilter will change back to previous state and therefore, the key will appear same as before, I'm expecting cached data, but it's requesting the server any time the

prunedFilter

prunedFilter

is changed.

const { data, refetch, isRefetching } = useQuery<any, Error>(
  ["allQuestionsCorrelationData", prunedFilter],
  () => {
    const formData = new FormData();
    formData.append("filter", JSON.stringify(prunedFilter));

    return fetch(
      "https://dev.any-survey.com/admin/interests/data.cfm/allQuestionsCorrelation/",
      {
        method: "POST",
        body: formData,
      }
    )
      .then((res) => res.json())
      .then((d) => {
        setCompData(d);
        return d;
      });
  },
  { staleTime: Infinity, initialData: [] }
);

const { data, refetch, isRefetching } = useQuery<any, Error>(
  ["allQuestionsCorrelationData", prunedFilter],
  () => {
    const formData = new FormData();
    formData.append("filter", JSON.stringify(prunedFilter));

    return fetch(
      "https://dev.any-survey.com/admin/interests/data.cfm/allQuestionsCorrelation/",
      {
        method: "POST",
        body: formData,
      }
    )
      .then((res) => res.json())
      .then((d) => {
        setCompData(d);
        return d;
      });
  },
  { staleTime: Infinity, initialData: [] }
);

TanStack•4y ago•

25 replies

urgent-maroon

Does the `useQuery` caching against the `queryKey`?

I have this snippet and I'm expecting that the endpoint will requested any time the

prunedFilter

prunedFilter

is changed as it is changing the key.

* This is actually first expectation what failed, so I'm calling the

refetch

refetch

in the

useEffect

useEffect

prunedFilter

prunedFilter

is changed.

const { data, refetch, isRefetching } = useQuery<any, Error>(
  ["allQuestionsCorrelationData", prunedFilter],
  () => {
    const formData = new FormData();
    formData.append("filter", JSON.stringify(prunedFilter));

    return fetch(
      "https://dev.any-survey.com/admin/interests/data.cfm/allQuestionsCorrelation/",
      {
        method: "POST",
        body: formData,
      }
    )
      .then((res) => res.json())
      .then((d) => {
        setCompData(d);
        return d;
      });
  },
  { staleTime: Infinity, initialData: [] }
);

const { data, refetch, isRefetching } = useQuery<any, Error>(
  ["allQuestionsCorrelationData", prunedFilter],
  () => {
    const formData = new FormData();
    formData.append("filter", JSON.stringify(prunedFilter));

    return fetch(
      "https://dev.any-survey.com/admin/interests/data.cfm/allQuestionsCorrelation/",
      {
        method: "POST",
        body: formData,
      }
    )
      .then((res) => res.json())
      .then((d) => {
        setCompData(d);
        return d;
      });
  },
  { staleTime: Infinity, initialData: [] }
);

Does the `useQuery` caching against the `queryKey`?

Similar Threads

Does the `useQuery` caching against the `queryKey`?

Similar Threads

Similar Threads

Similar Threads