Advanced

Type helpers

NuxtOpenFetch provides a set of types to help you with the development

Sometimes you may need to use the types for query params, response body etc. NuxtOpenFetch provides a set of types to help you with this.

Available type helpers:

  • PetsRequestQuery
  • PetsRequestPath
  • PetsRequestBody
  • PetsResponse

Example:

import type { PetsRequestQuery, PetsResponse } from '#open-fetch'

type Status = PetsRequestQuery<'findPetsByStatus'>['status']

const status = ref<Status>('available')

function transform(data: PetsResponse<'findPetsByStatus'>) {
  return data.map(item => ({
    ...item,
    inStock: data.status === 'available'
  }))
}

const { data } = await usePets('/pet/findByStatus', {
  immediate: false,
  query: {
    status,
  },
  transform
})

Custom client

NuxtOpenFetch uses Nuxt/Nitro plugins to provide fetch clients to the app/server