@mokup/client

Client-side request switching utilities and adapters for Mokup.

Install

pnpm add @mokup/client

Quick start (fetch)

import { createFetchAdapter, createMockResolver } from '@mokup/client'

const resolver = createMockResolver({
  mockBase: 'http://localhost:3300',
  realBase: 'https://api.example.com',
  pathMap: [{ from: '/api/*', to: '/*' }],
  markers: { header: true },
})

const mokupFetch = createFetchAdapter({ resolver })

await mokupFetch('/api/users', { mock: true })

Quick start (axios)

import { applyMokupToAxios } from '@mokup/client'
import axios from 'axios'

const api = axios.create({ baseURL: 'https://api.example.com' })

applyMokupToAxios(api, {
  resolverOptions: {
    mockBase: 'http://localhost:3300',
    realBase: 'https://api.example.com',
    pathMap: [{ from: '/api/*', to: '/*' }],
  },
})

await api.request({ url: '/api/users', mock: true })

Resolver options

• mockBase: mock server origin or base path
• realBase: real API origin or base path
• pathMap: prefix rewrite rules (/api/* -> /*)
• allowHosts: only rewrite matching hosts
• markers: inject headers or query markers (x-mokup, __mokup)
• storage: persist global toggle (optional)

Overrides and priority

Order (highest to lowest):

1. Request mock or meta.mokup
2. Headers/cookie/query markers
3. Global setUseMock
4. resolverOptions.env.useMock

Global switch

const resolver = createMockResolver({ mockBase, realBase })
resolver.setUseMock(true)

const useMock = resolver.getUseMock()