Dealing with useFetch / useAsyncFetch with headers and baseUrl
I am a bit of a newbie to Nuxt.
I want to create a custom fetch but with the love that comes with useFetch in terms of caching and the other bits of extras. If i use useFetch, i can load it in setup, but not as a user action. For the user action, i would need $fetch if i am understanding it correctly.
I've read the documentation, created my own custom fetch. But would love to try extend the caching ability. Is this possible? I'm considering using Pinia as a "cache" but not sure if this is the right approach.
Any and all tips are welcome
3 Replies
I have a lot to say to all that but... keep in mind i'm no expert and it's my opinion ^^
First : useFetch is the combination of useAsyncData and ofetch (imported as $fetch indeed)
the useAsyncData is the brick that allows SSR, so it's indeed not safe for user actions... more directly don't POST with it ^^"
With that in mind, I fully overloaded $fetch on a project because I needed it to be without any SSR
since it's a SPA, there is no problem caching the data in composables for exemple and doing whatever you want with it
That being said, I heard Pinia is powerful and useful with SSR consideration.
Personally, I consider it too big and complicated to be worth maintaining if you don't need something sophisticated
If you are into something fully SEO friendly or for any other reason with high SSR consideration, I guess it's better to follow the path but I couldn't explain why exactly ^^
If you don't need to complicate it too much for your needs, the best is most likely to just follow this nice nuxt recipe to achieve it : https://nuxt.com/docs/guide/recipes/custom-usefetch#custom-usefetch
Nuxt
Custom useFetch in Nuxt · Recipes
How to create a custom fetcher for calling your external API in Nuxt 3.
you'll be able to have you $ownFetch with your configuration and it will not limit you to use Pinia
but if you totally go overboard, you can fully overload everything, just mind the lifecycle and the nuxt context