How to pass headers and params in useswr for a get request?

[rjvarona]

Hey guys, Im pretty new to this I want to get data with useSwr, but I need to pass in headers to my endpoint. I've tried this as my fetch

const fetcher = async () =>
  await fetch({
    method: "GET",
    headers: {
      latitude: "34.211822",
      longitude: "-118.646435"
    }
  }).then(response => response.json());

and my URL looks like this

const url =
    "url";
  const { data, error } = useSwr(url, { fetcher });

Is this the right way to do this?

[sergiodxa]

Yes, you can use your fetcher for that, if you need to dynamically pass params you can use an array as a key of useSWR, something like this:

useSWR([url, headerValue], fetcher)

And now your fetcher will be implemented as

function fetcher(url, headerValue) { ... }

[dkt0591]

sirrrrrr, i should kiss you 100 times

[AarRidho]

Prior to beta, it could be something like this for v1 (just in case)

function fetcher(...args) {
    const [url, headerValue] = args;
    // ...
}

When v2 released

function fetcher(params) {
    const [url, headerValue] = params;
    // ...
}

[jonmadison]

I couldn't not immediately see this in the docs, struggled for a few hours on this. Thank you!

[softmarshmallow]

Doing so somehow breaks the typings. useSWR<T> won't work.

i should add as BareFetcher<any> or @ts-ignore