-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Solved] Uncaught Error: Maximum update depth exceeded (using axios post) #542
Comments
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) |
@sergiodxa Thank you! Looks like that was the issue. I passed the individual POST request input fields like this: useSWR(
[ "/api/myEndpoint", "12345", "abcd" ],
myFetcher
); Then I modified the fetcher to take those individual values and construct the object to send as input before making the axios call. However, this still doesn't ideally solve my use case. I'd like to write an axios POST based fetcher that can take an object and a url and just make a POST request to that url using the object as input. Here's the fetcher I've written: async function axiosPOST(urlEndpoint, inputData) {
const agent = new https.Agent({
// custom agent config
});
const response = await axios({
method: "post",
url: urlEndpoint,
data: inputData,
httpsAgent: agent,
});
return response.data;
} Now if SWR doesn't support passing in objects then I'll need to write a separate fetcher for every API call that constructs the input object inside the fetcher before passing it to axios. Any way we can make a general fetcher like the above work with SWR? |
For anyone who stumbles into the same error, I'll leave a minimal working code example here for axios post with typescript: // Call.tsx
import React from "react";
import axios from "axios";
import useSWR from "swr";
type myInput = {
id: string;
name: string;
};
const inputData = { id: "12345", name: "abcd" };
export function Call() {
const { data, error } = useSWR(
["/api/myEndpoint", inputData],
axiosPostFetcher
);
if (data) console.log("SWR response:", data);
if (error) console.log("SWR Error:", error);
if (!data) console.log("SWR undefined");
return <></>;
}
async function axiosPostFetcher(urlEndpoint: string, inputData: myInput) {
const response = await axios({
method: "post",
url: urlEndpoint,
data: inputData,
});
return response.data;
} The problem with this approach is that your |
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 |
@sergiodxa Thanks a lot! The JSON serialize/deserialize example works perfectly. I'll mark the issue as resolved. Documentation improvement suggestions for the SWR team:
|
I just realized you are using SWR to do a POST, except when using GraphQL where you need to use POST to fetch data (usually), the recommended way to do a POST request is to don't use SWR, instead run your request in an effect or event handler, SWR can and will run multiple times and a POST is usually used to create new resources, using them combined will cause unwanted side-effects where you are creating new resources even if you don't need them. |
Hi, Also, still no built-in support for object params? I use object a lot for params, it's very handy when one of the value change, I can re-trigger getting the new data by spread object {...previosParams, id: newID} |
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
Additional Context
SWR version: 0.2.3
The text was updated successfully, but these errors were encountered: