TanStack Query integrations for mokup client switching.
npm install @mokup/queryTanStack Query integrations for Mokup request switching.
``bash`
pnpm add @mokup/query @mokup/client
`ts
import { applyMokupToQueryClient } from '@mokup/query'
import { QueryClient } from '@tanstack/react-query'
const queryClient = new QueryClient()
applyMokupToQueryClient(queryClient, {
resolverOptions: {
mockBase: 'http://localhost:3300',
realBase: 'https://api.example.com',
pathMap: [{ from: '/api/', to: '/' }],
markers: { header: true },
},
})
`
Default queryKey shapes:
`ts`
const keyA = ['GET', '/users', { params, headers, body, mock: true }]
const keyB = ['/users', { params, mock: true }]
Per-request override using meta:
`ts`
useQuery({
queryKey: ['GET', '/users'],
meta: { mokup: true },
})
If your app already has custom query keys, provide buildRequest to map them.
`ts
import { createMokupQueryClient } from '@mokup/query'
const { queryFn, mutationFn } = createMokupQueryClient({
buildRequest(queryKey, meta) {
const [resource, params] = queryKey as [string, Record
return {
url: resource,
method: 'GET',
params,
meta,
}
},
})
`
`ts
import { applyMokupToQueryClient, createAxiosExecutor } from '@mokup/query'
import axios from 'axios'
const executor = createAxiosExecutor({
axios,
resolverOptions: {
mockBase: 'http://localhost:3300',
realBase: 'https://api.example.com',
},
})
applyMokupToQueryClient(queryClient, { executor })
`
`ts
import { applyMokupToQueryClient, createFetchExecutor } from '@mokup/query'
const executor = createFetchExecutor({
resolverOptions: {
mockBase: 'http://localhost:3300',
realBase: 'https://api.example.com',
},
})
applyMokupToQueryClient(queryClient, { executor })
``