Examples

Looking for a specific feature? The Cookbook has a copy-paste example for every one: HTTP, errors, refresh token, interceptors, upload, SSR, SSE, WebSocket, WebTransport, NDJSON, hooks, tRPC, DevTools and the CLI.

Live in the docs

These widgets run createFetch in your browser (mock fetch / streams) — not screenshots.

Demo	Framework	What it runs
Status / 4xx	Core	Handlers incl. 429
React Query	React	queryFn + mutationFn
Next.js SSR	React · Next.js	ssr-forward cookies
Nuxt SSR	Vue · Nuxt	ssr-forward + Vue plugin
Upload	Core	api.upload multipart
SSE	Core + all frameworks	api.sse · React/Vue useSse · guide
WebSocket & streams	Core + all frameworks	api.ws · api.transport · api.stream · useWs
tRPC	React StackBlitz + all	createTRPCFetchClient · recipe
DevTools	Core	HTTP / SSE / SSR / tRPC / WS / Stream dock

React

Framework

React · TanStack Query

Live demo · React / TanStack Query

useQuery + useMutation shape

Real createFetch calls — same queryFn / mutationFn contract your React app uses.

name

idle — click useQuery

const api = createFetch({ baseUrl })

// React Query
useQuery({
  queryKey: ['users'],
  queryFn: ({ signal }) => api.get<User[]>('/users', { signal }),
})

useMutation({
  mutationFn: (body) => api.post<User>('/users', { body }),
})

Next.js SSR

Framework

React · Next.js App Router

Live demo · Next.js SSR

ssr-forward cookie / auth

Real createFetch with source: 'ssr' + ssr-forward — watch headers get attached (then skipped in browser).

Request log

Run server prefetch to see forwarded Cookie / Authorization.

// app/users/page.tsx (Next.js App Router)
import { cookies } from 'next/headers'
import { createFetch } from 'tanstack-fetch'
import { createSsrForwardInterceptor, createTraceInterceptor } from 'tanstack-fetch/plugins'

const createServerApi = async () =>
  createFetch({
    baseUrl: process.env.API_URL!,
    source: 'ssr',
    interceptors: [createSsrForwardInterceptor(), createTraceInterceptor()],
    incoming: async () => ({
      cookie: (await cookies()).toString(),
    }),
  })

await queryClient.query({
  queryKey: ['users'],
  queryFn: async () => (await createServerApi()).get('/users'),
})

Core — upload & SSE

Framework

Core (framework-agnostic) · SSE React demo below

Live demo · Upload

api.upload + multipart fields

Real api.upload() builds FormData and posts through createFetch from tanstack-fetch/sse. Add onUploadProgress in your app for XHR progress.

folder

No file selected

0%

Pick a file and upload — real api.upload() + mock fetch

await api.upload('/files', {
  file,
  fieldName: 'file',
  fields: { folder: 'avatars', public: true },
  onUploadProgress: ({ progress }) => setProgress(progress),
})

Live demo · SSE

api.sse over fetch

Real tanstack-fetch/sse against a mock event stream — cookies / Authorization work (unlike EventSource).

Idle — start the stream

import { createFetch } from 'tanstack-fetch/sse'
import { useSse } from 'tanstack-fetch/react'

const api = createFetch({
  plugins: ['sse-resume'],
  getToken: () => localStorage.getItem('access_token'),
})

const OrdersLive = () => {
  const { data, status, error, close } = useSse<Tick>('/orders/stream', {
    client: api,
  })

  if (status === 'error') return <p>{error?.message}</p>
  return (
    <>
      <p>{status} · tick #{data?.n}</p>
      <button onClick={close}>Close</button>
    </>
  )
}

Live demo · useSse

React useSse + status

Pass {'{ client: api }'} — no FetchProvider required. Status: connecting → connected → disconnected / error.

status: disconnected

import { createFetch } from 'tanstack-fetch/sse'
import { useSse } from 'tanstack-fetch/react'

const api = createFetch({
  baseUrl: import.meta.env.VITE_API_URL,
  plugins: ['sse-resume'],
  getToken: () => localStorage.getItem('access_token'),
})

const OrdersLive = () => {
  // Pass client — FetchProvider is optional
  const { data, status, error, close } = useSse<Tick>('/orders/stream', {
    client: api,
  })

  if (status === 'error') return <p>{error?.message}</p>

  return (
    <div>
      <p>{status}</p>
      <p>{data ? `#${data.n}` : '—'}</p>
      <button type="button" onClick={close}>Disconnect</button>
    </div>
  )
}

Core — WebSocket · WebTransport · NDJSON

Live demo · WebSocket

useWs — auth + reconnect

Chat against a mock socket. Send before it opens (queued), then drop the connection: it reconnects and getToken() runs again, so the URL gets a fresh token.

status: disconnected

import { createFetch } from 'tanstack-fetch/live'
import { useWs } from 'tanstack-fetch/react'

const api = createFetch({ baseUrl, getToken })

const ChatRoom = ({ id }: { id: number }) => {
  const { data, status, send, close } = useWs<ChatMessage, { id: number }>('/rooms/:id', {
    client: api,
    params: { id },
    authIn: 'query', // browsers can't send WS headers
    reconnect: { retries: 3, delayMs: 600 },
  })

  return (
    <>
      <p>{status} · {data?.text}</p>
      <button onClick={() => send({ text: 'hi' })}>Send</button>
      <button onClick={close}>Close</button>
    </>
  )
}

Live demo · NDJSON

api.stream + streamedQuery

A POST with a body and an Authorization header, read line by line. EventSource cannot do either.

status: disconnected

import {
  experimental_streamedQuery as streamedQuery,
  useQuery,
} from '@tanstack/react-query'

const Answer = ({ prompt }: { prompt: string }) => {
  const { data: tokens = [], fetchStatus, refetch } = useQuery({
    queryKey: ['chat', prompt],
    queryFn: streamedQuery({
      streamFn: ({ signal }) =>
        api.stream<Token>('/chat', { body: { prompt }, signal }),
    }),
    enabled: false,
  })

  return (
    <>
      <button onClick={() => refetch()}>Ask</button>
      <p>{tokens.map((t) => t.text).join('')}</p>
      {fetchStatus === 'fetching' && <span>streaming…</span>}
    </>
  )
}

More: all realtime demos · cookbook

Copy-paste apps

Clone the repo and open a folder under examples/:

App	Framework	Focus
basic-http	Core	Plain get / post / errors
tanstack-query	React	useQuery + useMutation
auth-status	React	Token + 4xx (incl. 429) / 5xx
file-upload	React	Upload + progress
sse-live	React	useSse live stream
ws-chat	React	useWs chat + NDJSON answer
next-ssr	React · Next.js	App Router + ssr-forward
trpc	React	tRPC + createTRPCFetchClient

Nuxt SSR walkthrough (docs): Nuxt SSR