SWR keeps refreshing with old bearer token

[vanam]

Bug report

Description / Observed Behavior

I have encountered strange behavior when accessing endpoints with bearer token. I have a fetcher like this:

const fetcherWithToken = async (url, token) => {
  try {
    const response = await fetch(url, {
      headers: {
        'Authorization': 'Bearer ' + token
      },
    })

    let text = await response.text()

    const data = text ? JSON.parse(text) : null

    if (response.ok) {
      return data
    } else if (response.statusCode === 401) {
      const error = new NotAuthorizedError(response.statusMessage);
      error.status = response.status
      throw error
    }

    const error = new Error(response.statusText)
    error.response = response
    error.status = response.status
    error.data = data
    throw error
  } catch (error) {
    if (!error.data) {
      error.data = { message: error.message }
    }
    throw error
  }
}

and a hook like this:

const { data, error } = useSWR(
    ["https://api.example.com/xxx", token],
    fetcherWithToken,
    { refreshInterval: 5000 }
  );

After token refresh SWR keeps refreshing with both tokens - the old and the new.

Expected Behavior

I would expect SWR to refresh only with the new token.

Repro Steps / Code Example

Source code: https://codesandbox.io/s/eager-hoover-v4ryk?file=/pages/index.js

1. Let the app refresh data several times
2. Click at "Click me" button as soon as possible after a new message ("Fetching with Bearer token: X") in console appears
   

Additional Context

swr: 0.3.11

I have come across this problem when building next.js application with @react-keycloak/ssr.

PS: I am not a JS developer so the code is a mess and it might just be PEBCAK.

[vanam]

Thank you