NuAPI

Nuxt HTTP Client module

• ✨  Release Notes
• 📖  Documentation

Features

• ✅ Using Fetch instead of XHR
• ✅ Built-in adapter for Dedupe, and Priority Queue request.
• ✅ Composable hook for Axios interceptors.

Compabilities

• Nuxt 3

Quick Setup

1. Add @privyid/nuapi dependency to your project

yarn add --dev @privyid/nuapi

2. Add @privyid/nuapi to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@privyid/nuapi'
  ]
})

That's it! You can now use NuAPI in your Nuxt app ✨

Usage

import {
  createLazyton,
  ApiResponse,
  AxiosRequestConfig
} from '@privyid/nuapi'

const useApi = createLazyton({ prefixURL: '/api' })

interface User {
  userId: string,
  email: string,
  name: string
  role: string,
}

interface FormUser {
  name: string,
  email: string,
  role: string,
}

function getUserProfile (config?: AxiosRequestConfig): ApiResponse<User> {
  return useApi().get('/user/profile', config)
}

function postUserProfile (body: FormUser, config?: AxiosRequestConfig): ApiResponse<User> {
  return useApi().post('/user/profile', body, config)
}

Hook

There are available hook for add request/response interceptors.

import {
  onRequest,
  onRequestError,
  onResponse,
  onResponseError,
  onError,
  getCode,
  getMessage,
} from '@privyid/nuapi/core'

function isUnauthorize (error: Error): boolean {
  const code    = getCode(error)
  const message = getMessage(error)

  return code === 401 && message.includes('Unauthorized')
}

/** set additional or custom headers */
onRequest((config) => {
  const token: string = cookies.get('session/token') || ''

  // check available authorization header
  // and set authorization header
  if (config.headers && !config.headers.Authorization && token)
    config.headers.Authorization = `Bearer ${token}`

  return config
})

/**
 * check unauthorize error response
 * cause of invalid or expired token
 */
onResponseError(async (error) => {
  if (isUnauthorize(error)) {
    await navigateTo('/login')
  }

  throw error
})

Queue

All request per instance will be add into queue before sent with priority 1. If you want to send your request first before the others, you can set using option priority. The higher priority will run first.

useApi().get('/document/load', {
  priority: 2,
})

Dedupe

Sometime, you want to cancel request with same endpoint like when you working with searching or filter.

NuAPI has built in function for this case. Just set requestId, multiple sent request with same id will cancel last request before.

useApi().get('/document/load', {
  requestId: 'document-load',
})

API

👉 You can learn more about usage in JSDocs Documentation.

Contribution

• Clone this repository
• Play Nyan Cat in the background (really important!)
• Enable Corepack using corepack enable (use npm i -g corepack for Node.js < 16.10)
• Run yarn install
• Run yarn dev:prepare to generate type stubs.
• Use yarn dev to start playground in development mode.

License

MIT License