The Easiest & Most Powerful
API Client for JS & TS.

import { createApi } from 'api-flow-client'

const api = createApi({
  baseURL: 'https://api.example.com',
  auth: {
    // Injects "Authorization: Bearer <token>" automatically
    getAccessToken: () => localStorage.getItem('access_token'),
    getRefreshToken: () => localStorage.getItem('refresh_token'),
    
    // Called ONCE when any request receives 401
    refresh: async (refreshToken) => {
      const response = await fetch('https://api.example.com/auth/refresh', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ refreshToken })
      })
      const data = await response.json()
      localStorage.setItem('access_token', data.accessToken)
      return data.accessToken
    }
  }
})

import { createApi } from 'api-flow-client'

const api = createApi({
  baseURL: 'https://api.example.com',
  cache: {
    enabled: true,
    ttl: 5 * 60 * 1000, // 5 minutes TTL
    maxSize: 150         // LRU limit
  }
})

// 1. First call fetches over network
const u1 = await api.get('/users')

// 2. Second call returns from memory in 0ms
const u2 = await api.get('/users')

// 3. Invalidate specific URL
api.clearCache('/users')

// 4. Regex pattern bulk invalidation (NEW in v1.1.0)
api.invalidateCachePattern(/\/users\//)

import React from 'react'
import { api } from './api'
import { useGet, usePost, useDelete } from 'api-flow-client/hooks'

export function UserProfile() {
  // Auto-fetches on mount, cancels on unmount
  const { data, loading, error, refetch } = useGet<User>(api, '/profile')

  // Mutation hooks for updates
  const { mutate: updateProfile, loading: saving } = usePost(api, '/profile')
  const { mutate: deleteAccount } = useDelete(api, '/profile')

  if (loading) return <div>Loading user profile...</div>
  if (error) return <div>Error: {error.message}</div>

  return (
    <div>
      <h1>{data?.name}</h1>
      <button onClick={() => updateProfile({ name: 'New Name' })}>Update</button>
      <button onClick={() => refetch()}>Refresh</button>
    </div>
  )
}

// app/users/page.tsx (Next.js App Router / SSR)
import { createServerSideApi, extractServerHeaders } from 'api-flow-client'
import { headers } from 'next/headers'

export default async function UsersPage() {
  const incomingHeaders = await headers()
  
  // Forwards auth cookies & IP transparently
  const api = createServerSideApi({
    baseURL: process.env.INTERNAL_API_URL,
    headers: extractServerHeaders({ headers: incomingHeaders })
  })

  const response = await api.get<User[]>('/users')

  return (
    <main>
      <h1>Server-Rendered Users ({response.data.length})</h1>
    </main>
  )
}

import { api } from './api'

// 1. Page-based Async Iterator
for await (const page of api.paginate<User>('/users', { limit: 25 })) {
  console.log(`Page ${page.page}:`, page.data)
  if (!page.hasMore) break
}

// 2. Cursor-based Async Iterator
for await (const batch of api.cursorPaginate<LogEntry>('/logs', { limit: 100 })) {
  processLogs(batch.data)
}