How to set default baseURL for useFetch?

[and2]

Simple as that, how would one go about setting a default baseURL to be used by useFetch / useAsyncData?

[Megarsh]

I've been using a composable to create localized fetch requests, so in your case you can do something like this

Add this composable
export const useBaseFetch = (url, options = {}) => $fetch(`/base-url${url}`, options)

And use it like this
const { data } = await useAsyncData('key', () => useBaseFetch('/data'))

[and2]

This is great, thank you. Thought I was missing a way to set it up somehow in nuxt.config.

[Y-anon]

Actually the documentation for ohmyfetch recommends the following method:

// Create a fetch object with a baseURL already setup
const apiFetch = $fetch.create({ baseURL: '/api' })

// Use it as if it was $fetch
const {data, pending, errors, refresh} = await apiFetch('/test') // Same as $fetch('/test', { baseURL: '/api' })

[ArmanHashemi]

or you can use this composable :

export const useApiFetch = async (url: string, options = {}) => {
const config = useRuntimeConfig()
return useFetch(${config.public.BASE_URL}/${url},options)
}

const {data, pending, error, refresh} = await useApiFetch<test[]>('/todos')

[vedmant]

Is there official way to do this? Should it be a nuxt plugin to create a fetch with neeed baseurl available globally?

[manniL]

No, you rather want to encapsulate that logic in a custom composable ☺️

[mukundshah]

maybe we can use NUXT_FETCH_BASE or something alike. If NUXT_FETCH_BASE is provided, use it otherwise stick to the current url

[Disservin]

TLDR: This all sucks

I've been constantly running into issues, pinia complaining that it can't find an app, nuxt complaing that "A composable that requires access to the Nuxt instance was called outside of a plugin" or something the like. The earlier posted approach with the useApiFetch composable doesn't work, your original function doesn't define any type arguments, so annotating the return type of the API doesn't work... Expected 0 type arguments, but got 1.ts(2558)

Previously I've used

export const useApiFetch = async <
  T = unknown,
  R extends NitroFetchRequest = NitroFetchRequest,
>(
  request: Parameters<typeof $fetch<T, R>>[0],
  options?: Partial<Parameters<typeof $fetch<T, R>>[1]>,
) => {
  return $fetch.create({
    baseURL: useRuntimeConfig().public.BASE_URL,
    headers: {
      Authorization: `Bearer ${useAuthStore().token}`,
    },
  })(request, options);
};

but this is an abomination and results in Typescript complaining about Excessive stack depth comparing types.

Now I am using to get rid of the previous problems at the cost of having to call useApiFetch twice, once to the get new fetch instance and a second time to execute the fetch.

export const useApiFetch = () => {
  return $fetch.create({
    baseURL: useRuntimeConfig().public.BASE_URL,
    headers: {
      Authorization: `Bearer ${useAuthStore().token}`,
    },
  });
};

  const res = await useApiFetch()<{firstname: string, lastname: string, email: string}>("/user", {
    method: "GET",
  });

btw this doesn't work, because nuxt doesnt like you accessing the runtime config and pinia doesn't like you accessing the store

export const useApiFetch2 = 
   $fetch.create({
    baseURL: useRuntimeConfig().public.apiBase,
    headers: {
      Authorization: `Bearer ${useAuthStore().token}`,
    },
});

[mukundshah]

@Disservin

May give a try to this one. This does the following things:

• Handle apiBaseUrl provided from runtime config
• Show error page when error occurs
• Show loading indicator
• Cancel previous request if not completed, through signal
• Add auth token if protected: true (this is TODO, you can remove this part if you don't need this)

import { defu } from 'defu'
import { useFetch } from '#app'

type UseFetchOptions = Parameters<typeof useFetch>[1]

type UseAPIFetchOptions = UseFetchOptions & { protected?: boolean }

const isURL = (str: string) => {
  try {
    return Boolean(new URL(str))
  }
  catch {
    return false
  }
}


export const useAPIFetch: typeof useFetch = (
  request,
  opts: UseAPIFetchOptions = {},
) => {
  const { public: { apiBaseURL } } = useRuntimeConfig()

  const _nuxt = useNuxtApp()
  const loadingIndicator = useLoadingIndicator()

  const _opts: UseFetchOptions = {}

  const _request = computed(() => {
    const r = typeof request === 'function' ? request() : request
    return toValue(r)
  })

  if (
    !opts.baseURL
    && typeof _request.value === 'string'
    && !isURL(_request.value)
  )
    _opts.baseURL = apiBaseURL as string

  if (opts.protected) {
    const auth = useCookie('auth')
    if (!auth) {
      _nuxt.payload.error = createError({
        statusCode: 401,
        statusMessage: 'Unauthorized',
      })
      return
    }
    _opts.headers = { Authorization: `Bearer ${auth.value}` }
  }

  const options = defu(_opts, opts)

  let abortController: AbortController | null = null

  onBeforeUnmount(() => {
    abortController?.abort()
  })

  return useFetch(request, {
    onRequest: async ({ options }) => {
      abortController?.abort()
      abortController = new AbortController()
      options.signal = abortController.signal

      loadingIndicator.finish({ force: true }) // finish any previous loading
      loadingIndicator.start()
    },

    onRequestError: async ({ error }) => {
      loadingIndicator.finish()
      console.error(error)
    },

    onResponse: async ({ response }) => {
      loadingIndicator.finish()
      return response._data
    },

    onResponseError: async ({ response }) => {
      loadingIndicator.finish()
      _nuxt.payload.error = createError({
        statusCode: response.status,
        statusMessage: `${response.statusText} ${response.url}`,
      })
    },
    ...options,
  })
}

[Disservin]

Why are you sending this?
a) this has way too much stuff attached to it and explodes the scope of the discussion
b) neither does it solve my described issue.

The earlier posted approach with the useApiFetch composable doesn't work, your original function doesn't define any type arguments, so annotating the return type of the API doesn't work...

you can't type the return type of the api call with your wrapper, i.e. useAPIFetch<{firstname: string, lastname: string, email: string}>

c) this even throws a type error for me

[laventnc]

when researching this problem stumbled upon this post from the author of nuxt that answers this problem and provides insight into his thinking.

credit alexander lichter's repo implementation for pointing me in this direction

[Disservin]

This looks better but I think you can’t use the runtimeConfig in a plugin without adding some helpers which make the function asynchronous..

[manniL]

@Disservin useRuntimeConfig is not async so that should be fine. Also shown in this video (which is linked to the repo @laventnc posted 👍🏻

[Disservin]

@manniL
I wasn't talking about useRuntimeConfig earlier but runWithContext. Now after a closer look it is not entirely what I want, I just wanted a raw $fetch with some default settings without the nuxt wrapper useFetch around it.. well I guess I have to live with that.
That blog code also seems to be outdated..

• options.headers.Authorization = "Bearer"; is a type error
• the call and function signatures doent match

  options: Omit<UseFetchOptions<T>, 'default'> & { default: () => T | Ref<T> },

this requires options to be present when called, but then when actually used
const { data: modules } = await useAPI('/modules') it is not passed.

[Disservin]

ah actually I can just do

export const useApiFetch = $fetch.create({
  onRequest({ request, options, error }) {
    options.headers = {
      ...options.headers,
      Authorization: `Bearer ${useAuthStore().token}`,
    }
    options.baseURL = useRuntimeConfig().public. BASE_URL
  },
});

[laventnc]

@manniL, I was curious about how this composable relates with the pinia store.... if we use something like the linked solution inside a pinia store action:

export const useUserStore = defineStore('user', () => {
  const users = ref([])

  async function fetchUsers () {
    const { data } = await useAPI('/users')
    users.value = data.value
    return users
  }
})

Am I creating an issue when I dispatch the action inside a component, by basically calling useFetch inside useAsyncData?

<script setup>
const store = useUserStore()
// we could also extract the data, but it's already present in the store
await useAsyncData('users', () => store.fetchUsers())
</script>

Looking at the docs:

It is recommended to use $fetch for client-side interactions (event based) or combined with useAsyncData when fetching the initial component data.

I'm wondering if the call inside the store should just use the base $fetch (like below), allowing us to preserve the distinction mentioned above. If introducing the useFetch wrapper in our useAPI composable is not a problem, that would obviously be preferred

async function fetchUsers () {
    const { data } = await useNuxtApp().$api('/users')
    users.value = data.value
    return users
  }

[laventnc]

this requires options to be present when called, but then when actually used const { data: modules } = await useAPI('/modules') it is not passed.

this is a pretty simple solution for that:

 opts?: Omit<UseFetchOptions<T>, 'default'> & { default?: () => T | Ref<T> }

[Disservin]

I know 🤣 just wanted to mention that