Duplicate calls seem to be being made

[alex-r89]

Hi there,

I have built a very simple application to have a play around with swr. I have run into an issue though where I am seeing duplicate requests in the network tab when I run the application in slow 3g.

I have the following code related to swr:

const fetcher = (url) => fetch(url).then((res) => (res.status === 200 ? res.json() : null))

const options = {
  refreshInterval: 2000
}

.....

const { data, error } = useSWR(tweets.length ? `/api/id/${tweets[0].id}` : null, fetcher, options)

.....

However, in my network tab I am seeing the following:

Please ignore the 503 errors (I have designed it to randomly return a 503 to test functionality), but as you can see we have multiple requests for the same ID (107 is there multiple times for example).

Is there something I am missing?

Thanks

[sergiodxa]

SWR revalidates in many cases, some of them could be:

• a component using a key is mounted
• connection change from offline to online
• browser tab regain the focus (this includes if you switch focus from devtools to your actual app)
  So the most probable scenario is that a revalidation has been triggered.

[alex-r89]

Thanks for the input.
Regardless of this though, shouldn't SWR deduplicate the requests? As per the documentation:

If you call the hook with the same key multiple times, only one request is made

But i'm seeing multiple requests. The Key isn't changing and even if I pass revalidateOnFocus: false I see duplicate requests, so I think that rules out browser tab focus, component mounting and the connection going on/offline?

[sergiodxa]

The deduping works if you render multiple components at the same time (specifically in a window of 2 seconds). This means if you have a useCurrentUser calling useSWR with the same key and you render multiple components (e.g. inside a list) calling this hook it will only fetch the current user once. But a revalidation can and will still happen because of multiple reasons.

The idea of SWR is that you get stale data while it's revalidating so it's expected that SWR will refetch the data in many cases, the deduping will only ensure they will not happen in the same 2 seconds.

[alex-r89]

Hmm. Everything you're saying makes sense, but I'm still confused then as to why im seeing multiple requests for the same key then - as per my original image, multiple calls to 107. Based on what you say, and the config I have, I thought I would only see the single call to 107

I do have refreshInterval: 2000 but I would have thought based on your reply, the duplicate calls would be deduped.

[ivan-kleshnin]

@alex-r89 I observe the same duplication. Have you figured out the cause of such behavior eventually?

[mimoid-prog]

@alex-r89
If I understand it correctly:
SWR is using cached data only for 2 seconds by default (dedupingInterval = 2000).
So if you do another request in time of 2 seconds it will use cache, after that time it will make new request.
And if you use refreshInterval: 2000 it's gonna make new request every 2 seconds and all the same requests after that will use cached data in time of 2 seconds.
So are you sure that you need to use refreshInterval: 2000 at all?
And maybe you need to set dedupingInterval to higher number?

[msdrigg]

I had this same issue, and it turned out to be that the keys weren't exactly the same due to a function instance being different.

I lifted that function creation up into a context and that solved the problem

[chuanhan]

Hello, I was wondering if there's a simple piece of code I could refer to, as I am facing a similar issue. Thank you.😭

[msdrigg]

Something like:

Bad (getUsers changes every time the element gets called)

  const getUsers = () => {
    // No users :(
    return []
  }
  const { data, error, isLoading } = useSWR(['/api/user', getUsers], fetcher)

Good (getUsers never changes because it's lifted up into a context that never gets recreated)

  const getUsers = useGetUsers()
  const { data, error, isLoading } = useSWR(['/api/user', getUsers], fetcher)

https://react.dev/reference/react/useContext

I can't share the exact code bc I don't remember what it was.

[timtucker-dte]

For anyone who else who it might help, I encountered similar issues passing in URL objects.

Easiest solution that did the trick was to to passing in url?.pathname instead -- that way even if the underlying URL object changes the string value is still the same.