chain beforeFetch/afterFetch/onFetchError from createFetch and useFetch

[Glandos]

Clear and concise description of the problem

Currently, a handler defined in createFetch can be overwritten in useFetch.

For example, we can define a createFetch with a global beforeFetch option to set a bearer token, and in the useFetch call, add a beforeFetch option to set some other needed headers.

Suggested solution

useFetchFactory should be able to chain beforeFetch/afterFetch/onFetchError instead of overwriting them.

Alternative

No response

Additional context

Manually chain for now:

const injectToken = function ({ options }: BeforeFetchContext) {
  options.headers = {
    ...options.headers,
    Authorization: `Bearer ${Vue.$auth.token()}`
  }

  return { options }
}

const useApiFetch = createFetch({
  baseUrl: '/api/v1',
  options: {
    beforeFetch: injectToken
  }
})

// fetchOptions comes from an external caller
useApiFetch(path, {
    immediate: false,
    initialData: defaultValue,
    // Complicated stuff to be able to workaround beforeFetch overwrite
    ...fetchOptions,
    ...(fetchOptions?.beforeFetch === undefined ? {} : {
      async beforeFetch (ctx) {
        ctx = {...ctx, ...injectToken(ctx)}
        ctx = {...ctx, ...(await fetchOptions.beforeFetch?.(ctx))}
        return ctx
      }
    })
  })

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[brease-colin]

The chainCallbacks function does not work well with async beforeFetch functions. While it does execute them with an await, chainCallbacks itself never returns a promise and as such is not awaited before the actual fetch happens.

This bug cost me quite a while to find, unfortunately, and resulted in strange behavior.

[Glandos]

Indeed, @brease-colin seems right here.
My custom implementation is:

type ContextFunction<T = BeforeFetchContext | AfterFetchContext> = (ctx: T) =>
  ReturnType<Exclude<UseFetchOptions[T extends BeforeFetchContext ? 'beforeFetch' : 'afterFetch'], undefined>>

const mergeContextHandlers = <T = BeforeFetchContext | AfterFetchContext> (...handlers: (ContextFunction<T> | undefined)[]) => {
  return async (ctx: T) => {
    for (const handler of handlers) {
      if (handler !== undefined) {
        ctx = { ...ctx, ...(await handler(ctx)) }
      }
    }
    return ctx
  }
}

And it doesn't use a .forEach so it does return a Promise.
Feel free to reuse this code, I don't really have the time to open a PR for now.

[Glandos]

Fixed by #2231