Appearance

Fetch Types ​

File Information ​

  • Path: app/types/fetch.ts
  • Purpose: TypeScript interfaces for custom fetch client
  • Exported From: ~/types (via index.ts)

Overview ​

This file contains TypeScript interfaces for the custom fetch client configuration, responses, interceptors, and Nuxt context. These types are used for type-safe HTTP requests throughout the application.

Type Definitions ​

Fetch Configuration ​

FetchConfig ​

Fetch request configuration.

typescript
interface FetchConfig {
  url?: string
  method?: string
  headers?: Record<string, string>
  params?: Record<string, any>
  data?: any
  signal?: AbortSignal
  controller?: AbortController
  useApiBase?: boolean
  baseURL?: string
}

Properties:

  • url?: string - Request URL
  • method?: string - HTTP method (GET, POST, etc.)
  • headers?: Record<string, string> - Request headers
  • params?: Record<string, any> - URL query parameters
  • data?: any - Request body data
  • signal?: AbortSignal - Abort signal for cancellation
  • controller?: AbortController - Abort controller
  • useApiBase?: boolean - Use API base URL
  • baseURL?: string - Custom base URL

Usage:

typescript
import type { FetchConfig } from '~/types'

const config: FetchConfig = {
  url: '/api/endpoint',
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  data: { key: 'value' }
}

Fetch Response ​

FetchResponse<T> ​

Generic fetch response wrapper.

typescript
interface FetchResponse<T = any> {
  data: T
  status: number
  statusText: string
  headers: Record<string, string>
  config: FetchConfig
  request: Response
}

Generic Parameter:

  • T - Response data type (default: any)

Properties:

  • data: T - Response data
  • status: number - HTTP status code
  • statusText: string - HTTP status text
  • headers: Record<string, string> - Response headers
  • config: FetchConfig - Original request config
  • request: Response - Native Response object

Usage:

typescript
import type { FetchResponse } from '~/types'

interface UserData {
  id: number
  name: string
}

const response: FetchResponse<UserData> = {
  data: { id: 1, name: 'John' },
  status: 200,
  statusText: 'OK',
  headers: {},
  config: {},
  request: new Response()
}

Interceptor Types ​

FetchRequestInterceptor ​

Request interceptor interface.

typescript
interface FetchRequestInterceptor {
  onFulfilled?: (config: FetchConfig) => FetchConfig | Promise<FetchConfig>
  onRejected?: (error: any) => any
}

Properties:

  • onFulfilled?: (config: FetchConfig) => FetchConfig | Promise<FetchConfig> - Success handler
  • onRejected?: (error: any) => any - Error handler

Usage:

typescript
import type { FetchRequestInterceptor } from '~/types'

const interceptor: FetchRequestInterceptor = {
  onFulfilled: (config) => {
    // Add auth token
    config.headers = {
      ...config.headers,
      Authorization: `Bearer ${token}`
    }
    return config
  },
  onRejected: (error) => {
    console.error('Request error:', error)
    return error
  }
}

FetchResponseInterceptor ​

Response interceptor interface.

typescript
interface FetchResponseInterceptor {
  onFulfilled?: (response: FetchResponse) => FetchResponse | Promise<FetchResponse>
  onRejected?: (error: any) => any
}

Properties:

  • onFulfilled?: (response: FetchResponse) => FetchResponse | Promise<FetchResponse> - Success handler
  • onRejected?: (error: any) => any - Error handler

Usage:

typescript
import type { FetchResponseInterceptor } from '~/types'

const interceptor: FetchResponseInterceptor = {
  onFulfilled: (response) => {
    // Transform response
    return response
  },
  onRejected: (error) => {
    // Handle error
    if (error.status === 401) {
      // Handle unauthorized
    }
    return error
  }
}

Nuxt Context Types ​

FetchNuxtContext ​

Nuxt context structure for fetch client.

typescript
interface FetchNuxtContext {
  $config: {
    isLocal: boolean
    baseUrl: string
    apiBaseUrl: string
  }
  route: {
    params: Record<string, any>
  }
  $auth: {
    strategy: {
      token: {
        get(): string | null
      }
    }
  }
  $clearAuthCookies(): void
  error(options: { statusCode: number; path: string; message: string }): void
}

Properties:

  • $config - Runtime configuration
  • route - Current route information
  • $auth - Authentication context
  • $clearAuthCookies() - Clear auth cookies method
  • error() - Error handler method

Usage Examples ​

Basic Fetch Request ​

typescript
import type { FetchConfig, FetchResponse } from '~/types'

async function fetchData(): Promise<FetchResponse<UserData>> {
  const config: FetchConfig = {
    url: '/api/user',
    method: 'GET'
  }
  
  const response = await fetchClient.request<UserData>(config)
  return response
}

Request with Interceptors ​

typescript
import type { FetchRequestInterceptor, FetchResponseInterceptor } from '~/types'

const requestInterceptor: FetchRequestInterceptor = {
  onFulfilled: (config) => {
    // Add auth header
    config.headers = {
      ...config.headers,
      Authorization: `Bearer ${getToken()}`
    }
    return config
  }
}

const responseInterceptor: FetchResponseInterceptor = {
  onFulfilled: (response) => {
    // Log response
    console.log('Response:', response.data)
    return response
  },
  onRejected: (error) => {
    // Handle errors
    if (error.status === 401) {
      logout()
    }
    return error
  }
}
  • Used by API client plugin
  • Used by composables making HTTP requests

Import Example ​

typescript
import type {
  FetchConfig,
  FetchResponse,
  FetchRequestInterceptor,
  FetchResponseInterceptor,
  FetchNuxtContext
} from '~/types'

Notes ​

  • All fetch types are exported from ~/types
  • FetchResponse is generic for type safety
  • Interceptors support both sync and async handlers
  • Nuxt context types provide type safety for Nuxt-specific features
  • Abort controllers supported for request cancellation