Swr: How does one defer execution?

[rostero1]

Is there an option to defer execution? For example, what if I want only want to fetch the resource (and make the network request) when the user clicks on "fetch"?

[pacocoursey]

Yes! The first parameter to useSWR is a key, but this key can be a function. If the function throws or returns a falsy value, then SWR will know that not everything is ready to begin the fetching yet.

fetch the resource when the user clicks

Here's an example of how that could look:

const FetchingButton = () => {
  const [startFetch, setStartFetch] = useState(false)
  const { data } = useSWR(
    () => startFetch ? '/api/projects' : null,
    fetch
  )

  return (<button onClick={() => setStartFetch(true)}>Fetch!</button>)
}

You can see another example of this, but with data dependencies, here:

https://swr.now.sh/#dependent-fetching

[aequasi]

I think it would be very beneficial to provide this as an export :)

[rostero1]

Thank you, @pacocoursey.

With the following example, if I select "the-simpsons" from the dropdown, then "game-of-thrones", and then "the-simpsons" again, it will refetch the data when I re-select the-simpsons. I want this refetch in some scenarios, but not in others. For the code below, I was expecting it not to refetch since the I already fetched 'the-simpsons'. Is there a way to control whether or not a refetch happens in this scenario?

  const { data: characters, isValidating: isCharactersValidating } = useSWR(
    () =>
      formikBag.values.favoriteShow !== ""
        ? formikBag.values.favoriteShow
        : null,
    requestShow
  );

codesandbox link

[pacocoursey]

I want this refetch in some scenarios, but not in others

You can control this somewhat using the dedupingInterval configuration option (e.g. dedupingInterval: 5000 means if there are multiple requests to the same key within 5 seconds, only one will be made).

Hopefully that satisfies your use case, let me know if not!

[rostero1]

Thanks, that would solve the problem for my use case. I just wasn't sure why it was happening. For example, why does reselecting the simpsons refetch the simpsons characters in the dropdown, but not in the "Simpsons Characters" box, which doesn't get rerendered during this time.

[pacocoursey]

In your example, SWR refetches in both cases (selecting a different value in the dropdown, and clicking revalidate in the sidebar box). The difference is that in the dropdown, you return early when the data is validating in the background, so you never show the stale data (even when it's available).

If you're asking why the sidebar box doesn't update with new data when the dropdown revalidates, it's because you're using different SWR keys so they don't share a cache! In the dropdown you use /api/user and in the sidebar box you use the-simpsons.

[rostero1]

Thanks. I thought isValidating would run for all components that are wired with the same swr key. Sorry for the confusion.

I simplified the example: https://codesandbox.io/s/elated-pare-m9wdn

Would you like me to close the issue?

[pacocoursey]

Thanks. I thought isValidating would run for all components that are wired with the same swr key.

Good point, maybe we can clarify this in the documentation.

close the issue

Sounds good! Let me know if you have any other questions or issues.