useSWR data returns undefined but I can see the data in the fetcher function

[ksoenandar]

I'm using useSWR in my NextJS project but I'm having trouble with it returning undefined.

hooks.jsx

import useSWR from 'swr';
import { useEffect } from 'react';
import { useRouter } from 'next/router';

const fetcher = (url) => {
    fetch(url)
        .then((r) => r.json())
        .then((data) => {
            console.log(data); <- returns data as expected
            return { user: data?.user || null };
        });
};

function useUser({ redirectTo, redirectIfFound } = {} ) {
    const router = useRouter();

    const { data, error } = useSWR('/api/users/fetch', fetcher);
    const user = data?.user;
    const finished = Boolean(data);
    const hasUser = Boolean(user);

    console.log(data); <- returns undefined

    useEffect(() => {
        if (!redirectTo || !finished) return;

        if (
            // for register / signin route
            (redirectTo && redirectIfFound && hasUser)
        ) {
            router.push(redirectTo);
        }
    }, [redirectTo, redirectIfFound, finished, hasUser]);

    return error ? null : user;
}

export default useUser;

When I console logged the 'data' in the fetcher function, it returns the data as expected. However, in the main useUser function, the 'data' returns undefined. What am I doing wrong?

Thanks in advance

[sergiodxa]

Is this the same as #681? cc @shuding this could be a bug?

[ksoenandar]

I did come across #681 but there doesn't seem to be a resolution to that. Although, on your last question in that thread, I definitely can see a fetch request in my network tab of the console and in the response section, I can definitely see the data that I expected.

[sergiodxa]

Could you create a codesandbox to replicate it? I tried and was not able to.

[ksoenandar]

I've created a super simplified version here. I'm seeing the same thing here.

[promer94]

const fetcher = (url) => {
    return fetch(url)  **// You miss the return statement here**
        .then((r) => r.json())
        .then((data) => {
            console.log(data); <- returns data as expected
            return { user: data?.user || null };
        });
};

[sergiodxa]

Ohh I totally missed it, you are right, this is what’s happening, the same issue it’s happening on the CodeSandbox

[ksoenandar]

You're a legend - thank you so much! Was pulling my hair out trying to figure this one out!