TYPESCRIPT: Axios fetcher(METHOD POST) + NextJs SSR = URL Malformed

[vishnuvchandar]

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

[vishnuvchandar]

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.

vercel/swr-site#326

A quick help is much appreciated.