CODEWITHSUNDEEP
reactjsnext.jsswr
Carlos Almeida
Carlos Almeida

Reputation: 35

useSWR has infinite service call

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!!

Upvotes: 0

Views: 121

Answers (2)

Olivier Boiss&#233;
Olivier Boiss&#233;

Reputation: 18113

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

Upvotes: 2

Ross Allen
Ross Allen

Reputation: 44880

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

Upvotes: 1

Related Questions