docs: add custom useFetch recipe

[Atinux]

Migrate from https://notes.atinux.com/nuxt-custom-fetch to a Nuxt recipe as it has a lot of traffic and helps many people on this important feature.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[MuhammadM1998]

I'm using a similar setup with both $fetch and useFetch wrappers inside the same composable without plugins and it's working correctly. Is there a drawback of this that I'm missing? Maybe that would be good to clarified in the docs too

[DamianGlowala]

I would generally suggest replacing vast majority of occurences of 'we' (e.g. 'we created', 'we are storing') with a form more commonly used in the docs.

E.g. given the following sentence:

We are currently discussing with the core team (...)

... who are 'we' to the readers if it isn't the core team?

[manniL]

Might be worth linking https://www.youtube.com/watch?v=jXH8Tr-exhI here too (happy to link back to the blog post instead of your personal one after this was published 👌)

[danielroe]

I've pushed a couple of changes, including to the example (for handling different possibilities of HeadersInit). It would be worth checking that everything still works as expected.

what do you think @Atinux?

[maximepvrt]

@Atinux Will this duplicate https://nuxt.com/docs/examples/advanced/use-custom-fetch-composable ? Should this example be deleted ?

[Atinux]

@maximepvrt I created a PR on nuxt/examples#75 to update the link

I think we could update the example based on Daniel changes though.

@danielroe it would be nice to have a utility for that because having 3 lines to do the same thing is quite frustrating. @pi0 is this something that ofetch could provide on onRequest hook?

Thinking of:

const api = $fetch.create({
  baseURL: 'https://api.nuxt.com',
  onRequest({ setHeader }) {
    if (session.value?.token) {
      setHeader('Authorization', `Bearer ${session.value?.token}`)
    }
  }
})

[Atinux]

@DamianGlowala applied the changes.

@manniL linked your video :)

[pi0]

Having standard way in ofetch context to set/get headers seems good idea. I'm thinking to adopt usage of web Headers (via a lazy getter). (Therefore using ctx.headers instead of destructuring args in example would be more performant suggestion)

[manniL]

@Atinux Now that it has been merged, do you think it'd be helpful to link to the post in the docs in your blog post on the top of the article? 😋

[Atinux]

@manniL I added a redirect instead :)