How to create a copy of useFetch inside a custom hook?

Question

I'm trying to create a hook that can be used multiple times, but the behavior I'm getting is not what I expect

/composables/fetch.ts

export const useFetchWithErrorHandler = async (url: string, options?: FetchOptions) => {
  const route = useRoute();
  const { API_BASE_URL, API_PREFIX } = useRuntimeConfig();

  console.log(url, options);

  return new Promise(async (resolve, reject) => {
    const response = await useFetch(API_PREFIX url, {
      ...options,
      baseURL: API_BASE_URL,
      initialCache: false,
      async onResponse({ request, response, options }) {
        console.log('[fetch response]', response);
      },
      async onResponseError({ request, response, options }) {
        console.log('[fetch response error]');
      },
    });
    resolve(response);
  });

Only triggers the first request

const { data: response } = await useFetchWithErrorHandler(`page-1`, {
    pick: ['data'],
});

const { data: response } = await useFetchWithErrorHandler(`page-2`, {
    pick: ['data'],
});

Answer 1

useFetch Use caching to avoid multiple identical requests.

You can disable caching if you set initialCache: false in the options, for example

useFetch(API_PREFIX + url, {
    ...options,
    initialCache: false,
  }
)