useSWR has infinite service call

Question

I have a api that only uses POST, so i have to sent an ID to fetch, in this case event.

The problem is that my SWR is making infinite calls.

I have this component:

const EventDetail = ({ params }: { params: { id: string } }) => {
  const id: string = params.id;
  const [cookies] = useCookies(["token"]);

  const token = cookies.token;
  let formData = new FormData();
  formData.append("id", id);
  const dataToRequest = { token, formData };
  const { data, error, isLoading } = useSWR(
    [SERVICESADDR.EVENT, dataToRequest],
    fetcher,
  );
  if (error) {
    console.log(error);
  }
  console.log(data);

  return <div>{id}</div>;
};

export default EventDetail;

and my fetcher is:

export const fetcher = ([url, data]: [
  url: string,
  data: { token: string; formData?: FormData },
]) =>
  fetch(url, {
    method: "POST",
    body: data.formData,
    headers: {
      Authorization: `Bearer ${data.token}`,
      "Accept-Language": "pt",
      Accept: "/*",
    },
  })
    .then((res) => res.text())
    .then((res) => res);

Thank you in advance!!

Answer 1

This is because the key (first argument of useSWR) is tied to the cache key.
If any value in this array is updated, a new http request will be triggered.

In your example, the key is [SERVICESADDR.EVENT, dataToRequest] and dataToRequest object is recreated at each render, that's why you get an infinite service call.

You can pass the token and the id to key and create the FormData object in the fetcher function

const EventDetail = ({ params }: { params: { id: string } }) => {
  const id: string = params.id;
  const [cookies] = useCookies(["token"]);
  const token = cookies.token;
  const { data, error, isLoading } = useSWR(
    [SERVICESADDR.EVENT, token, id],
    fetcher,
  );

  return <div>{id}</div>;
};

export const fetcher = ([url, token, id]: [
  url: string,
  token: string,
  id: string
]) => {
  const formData = new FormData();
  formData.append("id", id);

  return fetch(url, {
    method: "POST",
    body: formData,
    headers: {
      Authorization: `Bearer ${token}`,
      "Accept-Language": "pt",
      Accept: "/*",
    },
  }).then((res) => res.text());
}

Answer 2

Try turning the FormData object into a plain old JS object before using it as a value in the SWR key. It's unclear from useSWR's "Passing Objects" docs, but it might not be serializing it as expected and therefore seeing a new object on every render and always thinking the cache key has changed:

const dataToRequest = { token, formData: Object.fromEntries(formData) };