No data fetched / problem understanding how SWR works with NextJS #681

Sicaa · 2020-10-08T06:20:34Z

Sicaa
Oct 8, 2020

Hi! I'm learning the combo NextJS / SWR by trying to make a simple dashboard displaying user email. I have an external API returning JSON data, for example the API endpoint example.com/user returns {"user":{"id":1,"email":"[email protected]"}}

_app.js file:

import { SWRConfig } from 'swr'

export default function App({ Component, pageProps }) {
    const fetcher = url => fetch(url).then(r => { return r.json(); });

    return (
        <SWRConfig
            value={{
                fetcher: fetcher,
                onError: (err) => {
                    console.error(err)
                },
            }}
        >
            <Component {...pageProps} />
        </SWRConfig>
    )
}

index.js file:

import React from 'react';
import Head from 'next/head';

import useUser from "../lib/useUser";

export default function Index() {
    const { data, mutate } = useUser();

    // if (!data) {
    //     return <div>loading...</div>;
    // }

    return (
        <>
            <Head>
                <title>Dashboard</title>
            </Head>
            <div>Hellowww, {data.user.email}</div>
        </>
    )
};

lib/useUser.js file:

import useSWR from 'swr'

export default function useUser() {
    console.log('useUser!');

    const query = 'http://example.com/user';
    const { data, mutate, error } = useSWR(query);

    console.log(data); // undefined

    return { data, mutate }
}

When hitting the index page, I'm always getting the error: TypeError: Cannot read property 'email' of undefined. If I uncomment the "loading" part where I test the user variable, I'm always having the loading part and it is never refreshed. I think I'm completely missing something. I've also seen examples with the React useEffect() function in useUser.js file and I'm not sure of the point of using it. I've tried that too but still no luck.

Can someone help me please?

Answered by Sicaa

Oct 16, 2020

Ok I found the problem. It was a CORS issue... I didn't see the warnings, was focused in the network tab... Thank you @sergiodxa.

View full answer

sergiodxa · 2020-10-08T20:48:34Z

sergiodxa
Oct 8, 2020

Your useUser hook returns an object with data and mutate but in your componente you name them user and mutate without doing data: user to alias data as user. This is why it never loads, because the user key doesn’t exists.

Once you fix that, from what I saw your data has a key user and inside it has the email, so you should do user.user.email, I recommend you to keep it as data so it reads as data.user.email, or you can remove spread data before returning it in your useUser hook

3 replies

Sicaa Oct 9, 2020
Author

Thank you for your time. My bad, I've tested so many solutions that I left some messed up vars... I fixed that in my example, but it still doesn't work. The console.log(data); part from useUser.js is always undefined.

sergiodxa Oct 9, 2020

Do you see the request on the network tab in the browser dev tools?

Sicaa Oct 11, 2020
Author

Yes, I see it:

BTW the "response" tab is always empty for XHR requests with NextJS, even if I fetch my URL directly without SWR (and I'm able to see the user JSON data in a console.log). This is curious.

Sicaa · 2020-10-16T05:44:12Z

Sicaa
Oct 16, 2020
Author

Ok I found the problem. It was a CORS issue... I didn't see the warnings, was focused in the network tab... Thank you @sergiodxa.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

No data fetched / problem understanding how SWR works with NextJS #681

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 3 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

No data fetched / problem understanding how SWR works with NextJS #681

Sicaa Oct 8, 2020

Replies: 2 comments · 3 replies

sergiodxa Oct 8, 2020

Sicaa Oct 9, 2020 Author

sergiodxa Oct 9, 2020

Sicaa Oct 11, 2020 Author

Sicaa Oct 16, 2020 Author

Sicaa
Oct 8, 2020

Replies: 2 comments 3 replies

sergiodxa
Oct 8, 2020

Sicaa Oct 9, 2020
Author

Sicaa Oct 11, 2020
Author

Sicaa
Oct 16, 2020
Author