Nuxt•2w ago

Custom Fetch Types not align

I have following custom composable function: import type { UseFetchOptions } from '#app' export function useCraftFetch<T>( url: string | Request | Ref<string | Request> | (() => string | Request), options: UseFetchOptions<T> = {} ) { const { authToken } = useRuntimeConfig().public.craftcms const headers = { 'Authorization': authToken, } const customOptions: UseFetchOptions<T> = { ...options, headers: { ...headers, ...(options.headers || {}) } } return useFetch<T>(url, customOptions) } And I get a ts error in the useFetch part where customOptions is set. Why is that?

12 Replies

kapa.ai•2w ago

Hi @Samuelreichoer. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The TypeScript error you're encountering is likely related to the type definition of UseFetchOptions and how it's being used with the useFetch function. Based on the knowledge sources, there are a few potential issues: Issue with Type Definitions The main issue appears to be that the type definitions for useFetch have evolved, and there might be a mismatch between your implementation and the expected types. Recent updates to Nuxt have modified how types work with useFetch and its options. According to a recent pull request fixing type issues in custom useFetch, there can be issues with the return type when using custom wrappers around useFetch. Possible Solutions 1. Type Casting for Headers:
The headers property might need explicit type casting. Based on the documentation, you might need to use set method for headers:

   import type { UseFetchOptions } from '#app'

   export function useCraftFetch<T>(
       url: string | Request | Ref<string | Request> | (() => string | Request),
       options: UseFetchOptions<T> = {}
   ) {
     const { authToken } = useRuntimeConfig().public.craftcms
     
     const customOptions: UseFetchOptions<T> = {
       ...options,
       onRequest({ options }) {
         // Set headers using the set method
         options.headers = options.headers || {}
         options.headers.Authorization = authToken
         
         // Add any other headers from the original options
         if (options.headers) {
           Object.entries(options.headers).forEach(([key, value]) => {
             options.headers[key] = value
           })
         }
       }
     }

     return useFetch<T>(url, customOptions)
   }

   import type { UseFetchOptions } from '#app'

   export function useCraftFetch<T>(
       url: string | Request | Ref<string | Request> | (() => string | Request),
       options: UseFetchOptions<T> = {}
   ) {
     const { authToken } = useRuntimeConfig().public.craftcms
     
     const customOptions: UseFetchOptions<T> = {
       ...options,
       onRequest({ options }) {
         // Set headers using the set method
         options.headers = options.headers || {}
         options.headers.Authorization = authToken
         
         // Add any other headers from the original options
         if (options.headers) {
           Object.entries(options.headers).forEach(([key, value]) => {
             options.headers[key] = value
           })
         }
       }
     }

     return useFetch<T>(url, customOptions)
   }

2. Using Interceptors:
According to the useFetch documentation, you can use interceptors to modify headers:

   export function useCraftFetch<T>(
       url: string | Request | Ref<string | Request> | (() => string | Request),
       options: UseFetchOptions<T> = {}
   ) {
     const { authToken } = useRuntimeConfig().public.craftcms
     
     return useFetch<T>(url, {
       ...options,
       onRequest({ options }) {
         // Set the request headers
         options.headers = options.headers || {}
         options.headers.Authorization = authToken
         
         // Add any other headers from the original options
         if (options.headers) {
           Object.entries(options.headers).forEach(([key, value]) => {
             options.headers[key] = value
           })
         }
       }
     })
   }

   export function useCraftFetch<T>(
       url: string | Request | Ref<string | Request> | (() => string | Request),
       options: UseFetchOptions<T> = {}
   ) {
     const { authToken } = useRuntimeConfig().public.craftcms
     
     return useFetch<T>(url, {
       ...options,
       onRequest({ options }) {
         // Set the request headers
         options.headers = options.headers || {}
         options.headers.Authorization = authToken
         
         // Add any other headers from the original options
         if (options.headers) {
           Object.entries(options.headers).forEach(([key, value]) => {
             options.headers[key] = value
           })
         }
       }
     })
   }

3. Using defu for Deep Merging:
As shown in the Stack Overflow example, you can use the defu package to properly merge options:

   import { defu } from 'defu'
   
   export function useCraftFetch<T>(
       url: string | Request | Ref<string | Request> | (() => string | Request),
       options: UseFetchOptions<T> = {}
   ) {
     const { authToken } = useRuntimeConfig().public.craftcms
     
     const defaults: UseFetchOptions<T> = {
       headers: {
         Authorization: authToken
       }
     }
     
     // Deep merge options
     const params = defu(options, defaults)
     
     return useFetch<T>(url, params)
   }

   import { defu } from 'defu'
   
   export function useCraftFetch<T>(
       url: string | Request | Ref<string | Request> | (() => string | Request),
       options: UseFetchOptions<T> = {}
   ) {
     const { authToken } = useRuntimeConfig().public.craftcms
     
     const defaults: UseFetchOptions<T> = {
       headers: {
         Authorization: authToken
       }
     }
     
     // Deep merge options
     const params = defu(options, defaults)
     
     return useFetch<T>(url, params)
   }

The most recent approach recommended in the Custom useFetch documentation is to use interceptors for handling headers and authentication, which provides more flexibility and better type safety. If you're still encountering issues, it might be helpful to check the exact TypeScript error message to better diagnose the problem. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@1065266379382587422> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

SamuelreichoerOP•2w ago

Same error on all possible solutions. @kapa.ai Same error on all possible solutions.

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand you're still encountering the same error with all the solutions I suggested. Without seeing the specific error message, it's difficult to pinpoint the exact issue, but let's explore some additional approaches based on the knowledge sources. Recent Documentation Updates There have been recent updates to the custom useFetch documentation that might address your issue. According to a recent pull request docs: add type casting of api plugin to custom-usefetch documentation, TypeScript linting can complain about type mismatches between $Fetch<unknown, NitroFetchRequest> and unknown types. Alternative Approaches 1. Use $fetch Instead of Wrapping useFetch: Some users have found success by avoiding wrapping useFetch altogether and using $fetch directly:

export default function craftFetch(
  url: string,
  options: { [key: string]: any } = {}
) {
  const { authToken } = useRuntimeConfig().public.craftcms
  
  return $fetch(url, {
    ...options,
    headers: {
      Authorization: authToken,
      ...(options.headers || {})
    }
  });
}

export default function craftFetch(
  url: string,
  options: { [key: string]: any } = {}
) {
  const { authToken } = useRuntimeConfig().public.craftcms
  
  return $fetch(url, {
    ...options,
    headers: {
      Authorization: authToken,
      ...(options.headers || {})
    }
  });
}

This approach is similar to what was described in a Stack Overflow solution where a user moved away from wrapping useFetch to using $fetch directly. 2. Move Authentication Logic to onRequest: As mentioned in another Stack Overflow answer, moving authentication logic to the onRequest option might help:

function useCraftFetch<T>(url: string, options: UseFetchOptions<T> = {}) {
  const { authToken } = useRuntimeConfig().public.craftcms
  
  const defaults: UseFetchOptions<T> = {
    async onRequest({ options }) {
      options.headers = options.headers || {}
      options.headers.Authorization = authToken
    },
    // other default options
  }
  
  // Combine options (without using async function)
  return useFetch(url, { ...defaults, ...options })
}

function useCraftFetch<T>(url: string, options: UseFetchOptions<T> = {}) {
  const { authToken } = useRuntimeConfig().public.craftcms
  
  const defaults: UseFetchOptions<T> = {
    async onRequest({ options }) {
      options.headers = options.headers || {}
      options.headers.Authorization = authToken
    },
    // other default options
  }
  
  // Combine options (without using async function)
  return useFetch(url, { ...defaults, ...options })
}

3. Remove async from Your Function: A key insight from the Stack Overflow discussion is that useFetch returns an augmented promise with reactive properties, but wrapping it in an async function loses these properties:

// Note: NOT async function
export function useCraftFetch<T>(
    url: string | Request | Ref<string | Request> | (() => string | Request),
    options: UseFetchOptions<T> = {}
) {
  const { authToken } = useRuntimeConfig().public.craftcms
  
  return useFetch<T>(url, {
    ...options,
    headers: {
      Authorization: authToken,
      ...(options.headers || {})
    }
  })
}

// Note: NOT async function
export function useCraftFetch<T>(
    url: string | Request | Ref<string | Request> | (() => string | Request),
    options: UseFetchOptions<T> = {}
) {
  const { authToken } = useRuntimeConfig().public.craftcms
  
  return useFetch<T>(url, {
    ...options,
    headers: {
      Authorization: authToken,
      ...(options.headers || {})
    }
  })
}

If you're still facing issues, it would be helpful to know the specific error message you're receiving. The TypeScript errors with custom useFetch wrappers can be quite nuanced, and the exact error message would help identify the specific type mismatch. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@1065266379382587422> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

SamuelreichoerOP•4d ago

@kapa.ai Is it simpler to use useAsyndata in the custom fetch wrapper?

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, using useAsyncData in a custom fetch wrapper could be a viable alternative approach, but it's not necessarily simpler than using useFetch. According to the documentation, useFetch is actually a wrapper around useAsyncData and $fetch:

useFetch(url) is nearly equivalent to useAsyncData(url, () => event.$fetch(url)). It's developer experience sugar for the most common use case.

Data Fetching If you're experiencing TypeScript issues with your custom wrapper, you could try implementing it with useAsyncData instead:

export function useCraftFetch<T>(
    url: string | Request | Ref<string | Request> | (() => string | Request),
    options: UseFetchOptions<T> = {}
) {
  const { authToken } = useRuntimeConfig().public.craftcms
  
  return useAsyncData<T>(
    // Generate a unique key based on the URL
    typeof url === 'function' ? url().toString() : url.toString(),
    () => $fetch<T>(url, {
      ...options,
      headers: {
        Authorization: authToken,
        ...(options.headers || {})
      }
    })
  )
}

export function useCraftFetch<T>(
    url: string | Request | Ref<string | Request> | (() => string | Request),
    options: UseFetchOptions<T> = {}
) {
  const { authToken } = useRuntimeConfig().public.craftcms
  
  return useAsyncData<T>(
    // Generate a unique key based on the URL
    typeof url === 'function' ? url().toString() : url.toString(),
    () => $fetch<T>(url, {
      ...options,
      headers: {
        Authorization: authToken,
        ...(options.headers || {})
      }
    })
  )
}

This approach might help avoid some of the TypeScript issues you're encountering, as noted in a Stack Overflow post:

According to the official Nuxt documentation, if you want to fetch content using the SDK, you will have to use the useAsyncData function.

Stack Overflow Post However, it's important to note that when creating custom wrappers, you should not await the function in the composable itself, as mentioned in the documentation:

If you're using a custom useAsyncData wrapper, do not await it in the composable, as that can cause unexpected behavior.

useAsyncData documentation The key advantage of using useAsyncData directly is that it gives you more fine-grained control over the data fetching process, which might help resolve your TypeScript issues. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

<@1065266379382587422> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

SamuelreichoerOP•4d ago

@kapa.ai Now I get folliwing ts error Argument of type 'string | Request | Ref<string | Request, string | Request> | (() => string | Request)' is not assignable to parameter of type 'NitroFetchRequest'. Type 'Ref<string | Request, string | Request>' is not assignable to type 'NitroFetchRequest'.ts(2345) in that line on url () => $fetch<T>(url, {

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I see the issue now. The error is occurring because you're trying to pass the url parameter directly to $fetch inside the useAsyncData handler function, but the types don't match. When using useAsyncData with $fetch, you need to ensure the URL is in the correct format that $fetch expects (a NitroFetchRequest). Here's how you can fix it:

export function useCraftFetch<T>(
    url: string | Request | Ref<string | Request> | (() => string | Request),
    options: UseFetchOptions<T> = {}
) {
  const { authToken } = useRuntimeConfig().public.craftcms
  
  // Create a key for caching based on the URL
  const key = typeof url === 'function' 
    ? () => url().toString() 
    : typeof url === 'string' 
      ? url 
      : unref(url).toString();
  
  return useAsyncData<T>(
    key,
    async () => {
      // Resolve the URL to a string
      const resolvedUrl = typeof url === 'function' 
        ? url() 
        : unref(url);
      
      // Now use $fetch with the resolved URL
      return $fetch<T>(resolvedUrl, {
        ...options,
        headers: {
          Authorization: authToken,
          ...(options.headers || {})
        }
      });
    }
  );
}

export function useCraftFetch<T>(
    url: string | Request | Ref<string | Request> | (() => string | Request),
    options: UseFetchOptions<T> = {}
) {
  const { authToken } = useRuntimeConfig().public.craftcms
  
  // Create a key for caching based on the URL
  const key = typeof url === 'function' 
    ? () => url().toString() 
    : typeof url === 'string' 
      ? url 
      : unref(url).toString();
  
  return useAsyncData<T>(
    key,
    async () => {
      // Resolve the URL to a string
      const resolvedUrl = typeof url === 'function' 
        ? url() 
        : unref(url);
      
      // Now use $fetch with the resolved URL
      return $fetch<T>(resolvedUrl, {
        ...options,
        headers: {
          Authorization: authToken,
          ...(options.headers || {})
        }
      });
    }
  );
}

The key issue is that $fetch expects a specific type (NitroFetchRequest), but you're passing in a more complex type that includes Ref and function variants. By resolving the URL first using unref() for refs and calling the function for function URLs, you can ensure you're passing the correct type to $fetch. This approach is based on how useFetch internally handles different URL types, as it also needs to resolve the URL before passing it to $fetch. The useAsyncData + $fetch combination gives you more control over this process, as mentioned in the documentation. If you continue to face issues, you might want to consider using the ofetch library directly, which provides more flexibility for creating custom fetch instances with predefined headers. Let me know if this resolves your TypeScript error! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

<@1065266379382587422> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

SamuelreichoerOP•4d ago

This was the solution: import { defu } from 'defu' import type { UseFetchOptions } from '#app' export function useCraftFetch<T>( url: string | (() => string), options?: UseFetchOptions<T>, ) { const { authToken } = useRuntimeConfig().public.craftcms const defaults: UseFetchOptions<T> = { headers: { Authorization: authToken, }, } const params = defu(options, defaults) return useFetch(url, params) }

Gaming

Programming

Custom Fetch Types not align

Did you find this page helpful?