How to conditionally load data with SWR

Jul 25, 2021

Learn how to conditionally load data with SWR by passing null as the key until your data is ready, so the request only fires once you can make it.

~~~

Using SWR you might have this problem: you want to do the request only if you have some data.

For example, one case I had was, I had to figure out if the user was logged in before sending a request to a /api/user endpoint to get the user’s data.

In particular, I had a session object, and inside it, a user object. Both needed to be defined.

So here’s what I did:

import fetcher from 'lib/fetcher'

...

const { data: userData } = useSWR(session && session.user ? `/api/user` : null, fetcher)

The first parameter is the URL. If it’s null, then SWR does not perform the request, and solves the original problem.

Tagged: JavaScript · All topics

~~~