Need clarifications about dependent use of useSWR

[zacBkh]

Hi folks,

I am trying to fetch with useSWR authenticated user data.
I am on a client side rendered page (/my-profile) so the process of authenticating (using nextAuth) is also happening client side, hence it is not instant and need some time. So the session object is not accessible directly onMount.
Typically, I would use useEffect to track on if authentication happened or not, but useSWR should remove the need for this as far as I understood.

I understood I need to use dependent fetching however I can't wrap my mind around the example provided in the doc.

const { data: user } = useSWR('/api/user')
const { data: projects } = useSWR(() => '/api/projects?uid=' + user.id)

There is not even mention of the fetcher function, I don't understand how they access projects.length here :
if (!projects) return 'loading...' return 'You have ' + projects.length + ' projects' }

If someone could provide a clear example of what I need to do to only fetch when my session object is ready it would be really helpful, thanks!

[zacBkh]

FYI, I am currently using a workaround that is very ugly to me :

const { data, error, isLoading } = useSWR( session ? 'get_user_profile' : null, fetcher, )

Also by doing this, if my session is not ready and I am trying to display keys of the session object in my JSX, it will throw an error, even though I put safety early return before :

if (error) return <div>failed to load</div>
if (isLoading) return <div>Loading...</div>

// The below will throw an arror if my session (data) is not ready despite I put the two above safety early return and idk why...
return (
        <>
            <h1>Protected Page</h1>
            <p>You can view this page because you are signed in.</p>
            <p>{data.result.name}</p>
        </>
    )