How to add default parameters and headers to $fetch?

Question

Trying to add any default parameters or headers (in this case a json web token as authentication header) to the $fetch composable so that i dont have to do

await $fetch('/api/example', {
  headers: {
    // authentication header and jwt here
  }
});

on every single request. i found a way to do this by wrapping $fetch in another composable (in this case as $api) but this removed any typings on the api response, so this is not something i want to do.

Even a simplified api.ts composable like this

export const $api = (url: string) => {
  return $fetch(url);
}

does not give me the response typings from the api result that a blank $fetch in my frontend would give me.

Can i inject default values in $fetch somehow? maybe through a module/plugin/interceptor? if not, is there a way to wrap $fetch in a composable and still keep the response typings?

i'm using nuxt3 with $fetch being ohmyfetch and i'm not using the @nuxt/auth package btw

Answer 1

Nuxt 3 is using ofetch which it exposes globally via globalThis (see here). If you want to use a preconfigured ofetch instance as $fetch instead (e.g. with headers or automatically added query params), you can override globalThis.$fetch in e.g. the <script> of your app.vue using ofetch.create and providing your default options (as documented in this section of the ofetch documentation). You can find all available options you can pass to ofetch.create in the ofetch code here and here.

Example code

app.vue

<script setup>
import { ofetch } from 'ofetch'

globalThis.$fetch = ofetch.create({ baseUrl: '', onRequest: () => {}, ... })
</script>

Answer 2

You can create a composable containing a wrapper around $fetch for example under /composables/api.ts you can have:

export function $api<T>(
  request: Parameters<typeof $fetch<T>>[0],
  opts?: Parameters<typeof $fetch<T>>[1],
) {
  const auth = useAuth()

  return $fetch<T>(request, {
    ...opts,
    headers: {
      Authorization: auth.logged ? `Bearer ${auth.accessToken}` : '',
      ...opts?.headers,
    },
  })
}

Here useAuth() is a Pinia store containing auth information like logged and the access token.

Like this you can simply use $api() anywhere in the app.