Skip to content
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

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

Open
vishnuvchandar opened this issue May 17, 2024 · 1 comment
Open

Comments

@vishnuvchandar
Copy link

vishnuvchandar commented May 17, 2024

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
image

@vishnuvchandar
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant