Refetching a query with different cache-control headers

Hey,

I'm looking for a way to refetch a query with different cache-control headers. Currently I'm caching a response in the browser cache but I would like to be able to bust that cache if needed. However, I haven't figured a way to refetch a query with different headers.

At first I tried something like this but I quickly found out it doesn't work as one place will have a query with queryKey ["cars", false] and another will have a query with ["cars", true]:

const useCarsQuery = (cacheBust: boolean) => {
  return useQuery({
    queryKey: ["cars", cacheBust],
    queryFn: async () => {
      return await getCars(cacheBust);
    },
  });
};

const getCars = async (cacheBust: boolean) => {
  const headers = cacheBust ? { "Cache-Control": "no-cache" } : undefined;
  const response = await fetch(`/cars`, { headers });
  return response.json();
};

const useCarsQuery = (cacheBust: boolean) => {
  return useQuery({
    queryKey: ["cars", cacheBust],
    queryFn: async () => {
      return await getCars(cacheBust);
    },
  });
};

const getCars = async (cacheBust: boolean) => {
  const headers = cacheBust ? { "Cache-Control": "no-cache" } : undefined;
  const response = await fetch(`/cars`, { headers });
  return response.json();
};

What would be the best way to refetch the query so that the browser cache gets busted?

TanStack•3y ago•

2 replies

living-lavender

Refetching a query with different cache-control headers

const useCarsQuery = (cacheBust: boolean) => {
  return useQuery({
    queryKey: ["cars", cacheBust],
    queryFn: async () => {
      return await getCars(cacheBust);
    },
  });
};

const getCars = async (cacheBust: boolean) => {
  const headers = cacheBust ? { "Cache-Control": "no-cache" } : undefined;
  const response = await fetch(`/cars`, { headers });
  return response.json();
};

const useCarsQuery = (cacheBust: boolean) => {
  return useQuery({
    queryKey: ["cars", cacheBust],
    queryFn: async () => {
      return await getCars(cacheBust);
    },
  });
};

const getCars = async (cacheBust: boolean) => {
  const headers = cacheBust ? { "Cache-Control": "no-cache" } : undefined;
  const response = await fetch(`/cars`, { headers });
  return response.json();
};

What would be the best way to refetch the query so that the browser cache gets busted?

Refetching a query with different cache-control headers

Similar Threads

Refetching a query with different cache-control headers

Similar Threads

Similar Threads

Similar Threads