How to properly add headers with SWR using fetch ?

[desiboli]

I can't understand why this isn't working:

  const fetcher = async (orgId: string, config: object) => {
    const response = await fetch(
      `${process.env.NEXT_PUBLIC_APP_API_URL}/Admins/${orgId}`,
      config
    )
    if (!response.ok) {
      throw new Error('An error occurred while fetching the data.')
    }
    return response.json()
  }

  const {
    data: adminsData,
    error,
    isLoading,
  } = useSWR(
    [
      orgId,
      {
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${accessToken}`,
        },
      },
    ],
    fetcher
  )

In the network tab I get the wrong request url, it looks like it's trying to add the headers to the request url which is weird.
This is how the failed request url looks like: "https://api-url.net/api/Admins/1437,[object%20Object]"

I guess I'm doing this wrong and I can't find anything about it in the docs or maby I don't understand it... How would you add the headers / Authorization ?
Thank you! 🙏

[promer94]

You fetcher fn should be

const fetcher = async ([orgId, config]) => {
    const response = await fetch(
      `${process.env.NEXT_PUBLIC_APP_API_URL}/Admins/${orgId}`,
      config
    )
    if (!response.ok) {
      throw new Error('An error occurred while fetching the data.')
    }
    return response.json()
  }

https://swr.vercel.app/docs/typescript#useswr

[desiboli]

Thank you! 🙏