vishnuvchandar
commented
4 months ago Another update. I used 1.3.0 version and its working fine with a small code change.
requestInfo = [url, JSON.stringify(payload)]; --> requestInfo = [url, payload] (Looks like in 1.3 the stringify is no longer needed.
However!!!!!!!!!!! THE PROBLEM STARTS @ 2.0.1
I see a major change in this version upgrade. I went through the below change but unable to understand what it has impacted. I am able to understand the fetcher doesn't accept array anymore. At the same time unable to figure out the right way of providing the URL and request payload to the useSwr() method.
https://github.com/vercel/swr-site/pull/326
A quick help is much appreciated.
Bug report
Description / Observed Behavior
When using Axios fetcher and making a post call from NextJs, the url is malformed What kind of issues did you encounter with SWR? The request object gets concatenated to the request URL. Say: Body = {airportCode: LHR}, url = https://localhost:3000/api/airports/search --> url becomes https://localhost:3000/api/airports/search,{airportCode: LHR}
Expected Behavior
How did you expect SWR to behave here? POST call to url https://localhost:3000/api/airports/search body: {airportCode: LHR}
Repro Steps / Code Example
import axios from "axios"; import useSWR, { mutate as swrMutate } from "swr";
interface FetchProps { url: string; payload?: any; }
export const useFetch = ({ url, payload }: FetchProps) => { let fetcher: (url: string, data?: any) => Promise = (url, data) => axios.post(url, data).then(res => res.data);
let requestInfo: string | [string, string] = url;
if (!payload) {
// Adjusting fetcher when payload is not available
fetcher = (url) => axios.get(url).then(res => res.data);
} else {
requestInfo = [url, JSON.stringify(payload)];
console.log("requestInfo", requestInfo)
}
const { data, error, isValidating, mutate } = useSWR(requestInfo, fetcher, { revalidateOnFocus: false, });
return { data, error, loading: isValidating, mutate, }; };
export const update = (url: string) => { swrMutate(url); };
Invoking like below const {data, loading, error} = useFetch("/api/airports/search", {airportCode: 'LHR'})
Or share your code snippet or a CodeSandbox link is also appreciated!
Additional Context
SWR version. 2.1.5 - 2.2.5 Add any other context about the problem here.
I see the code working properly in versions ~0.5
The URL is displayed on the network tab as shown below.
http://localhost:3000/api/airports/search,%7B%22airportCode%22:%22ADS%22%7D