Data is always undefined even if the request is successful? (SWR + Next.js)

[thejonmonte]

Hi, I'm using SWR with Next.js, which I'm both extremely new to, and I've been trying to fetch data from a URL with useSWR. However, even if there exists response data from the fetcher, the data returned from useSWR is still always undefined and my application always displays "loading...". Below is a snippet of the code relating to this:

const HomePage = memo(props => {
    const { data, error } = useSWR(url, fetcher({ query: {} }));

    if (error) return <div>failed to load</div>;
    if (!data) return <div>loading...</div>;
...

Fetcher function:

const url = `${process.env.baseUrl}/...`;

const fetcher = (queryBody) =>
    fetch(url, {
        method: 'POST',
        headers: {
            "Accept": 'application/json',
            "Content-Type": "application/json"
        },
        body: JSON.stringify(queryBody)
    }).then(async (res) => {
        try {
            const response = await res.json();
            return response;
        } catch (error) {
            console.log(error);
        }
    });

[thejonmonte]

Never mind, I saw #93, specifically monman2l's comment. It made me realize that I needed to change my fetcher function to

const fetcher = queryBody => (url) =>
    fetch(url, {
        method: 'POST',
        headers: {
            Accept: 'application/json',
            "Content-Type": "application/json"
        },
        body: JSON.stringify(queryBody)
    }).then(async (res) => {
        try {
            const response = await res.json();
            console.log(response);
            return response;
        } catch (error) {
            console.log(error);
        }
    });

Thank you though!

[sergiodxa]

I also recommend you to not use SWR to do POST requests, only GET