Bug? Passing array to fetcher with useSWR and useSWR not updating data

[TR-Jackson]

I am using a useUser hook (adapted from https://github.com/vercel/next.js/blob/canary/examples/with-iron-session/lib/useUser.js) and it never redirects and I think its because useSWR isn't updating data:

This is my useUser hook:

This is my fetcher function using axios:

1. useSWR not passing array correctly to fetcher
   If I try const { data, mutate } = useSWR(["/user", Cookies.get("jwt")], fetchWithToken); and const fetchWithToken = ([url, token] = []) => {, url ends up being equal to "/" and token equal to "u", which makes me guess the fetcher is only receiving "/user" as an argument.
   I thought this was allowed as the docs state this (https://swr.vercel.app/docs/arguments#multiple-arguments), but this issue isn't major as I can just pass the token as I know the URL for this hook isn't changing.

2. data not updating
   The main useEffect only runs once with data being undefined so the hook just returns. I thought once the request finished, data would be updated and the hook would re-run, as data is a dependency, but it doesn't and neither does the test useEffect which just console logs data when it changes.
   I know the request is finishing as the console log in the fetcher shows the data has been retrieved.
   

Thanks in advance for any help
(https://github.com/TR-Jackson/nea-revision-app/tree/dev for the rest of the code)

Update: if js-cookie function Cookies.get('jwt) returns undefined then the fetcher doesn't run at all. This is the same for false which is also tried using. It only seems to run the fetcher if the arguments are strings. I have tried installing the beta version of swr but to no change.

[mnightingale]

A couple of issues I can see.

First you've identified the documentation on https://swr.vercel.app/docs/arguments#multiple-arguments so you've correctly identified that you should be doing something like useSWR(["/user", Cookies.get("jwt")], fetchWithToken) the signature for fetchWithToken would be const fetchWithToken = (url, token) {} when you mention getting "/" and "u" you're doing the equivalent of url[0] and url[1]

Second your fetcher is never returning the promise and you probably shouldn't be catching the error (so you can use const { data, error } = useSWR(...)).

For example this is similar to what I do (you could get rid of the brackes and const fetchWithToken = (url, token) => axios.get(...).

const fetchWithToken = (url, token) => {
  return axios
    .get(url, {
      headers: {
        Authorization: 'Bearer ' + token,
      },
    })
    .then((res) => res.data)
}

You might also want to investigate using global configuration to set the fetcher and creating an axios client with interceptors to add the authorization header and I use it to change errors for display.

[TR-Jackson]

Thanks so much, I was trying to be too smart with the destructuring! Also, I have changed the auth so the server just reads the cookies on the request. Thanks again