[Solved] Uncaught Error: Maximum update depth exceeded (using axios post)

Bug report

Description / Observed Behavior

Code keeps getting called repeatedly eventually ending in a Maximum update depth error.

Expected Behavior

Call should work as expected. I’m just trying to make a basic axios post request.

Repro Steps / Code Example

// App.tsx
import React from 'react';
import https from "https";
import axios from "axios";
import useSWR from "swr";

type myInput = {
  myInputData: string;
};

export function App() {
  const { data, error } = useSWR(
    [
      "/api/myEndpoint",
      {
        myInputData: "12345",
      },
    ],
    myFetcher
  );

 console.log("SWR response:", data);
 
  return <></>
}

const myFetcher = async (url: string, input: myInput) => {
  const agent = new https.Agent({
    // custom agent config
  });

  const response = await axios({
    method: "post",
    url: url,
    data: input,
    httpsAgent: agent,
  });

  return response.data;
};

Additional Context

SWR version: 0.2.3

[sergiodxa]

If you want to use objects with a single fetcher function instead of a custom one per useSWR call you can serialize it like this:

function fetcher(url: string, serializedParams: string) {
  const params = JSON.parse(serializedParams);
  // code here
}

useSWR(["/api", JSON.stringify({ token: userToken })], { fetcher })

Something like that

But I’m not sure how performant that could be, you are going to serialize and deserialize a lot.

If you don’t enable Suspense on SWR, you may be able to also use React.useMemo to memoize the object and pass it directly, but this is also not 100% secure.

[sergiodxa]

Objects are not supported as part of a key, they are going to be regenerated on every render, instead try sending more values in the array or if possible move the definition of the object to outside the component (in your example is possible but most probably it will not when using it in an app)