Loading…
;\n return{JSON.stringify(data, null, 2)};\n}\n```\n\n## How it works\n\n- `createRouteClient` wires your `QueryClient`, base URL, optional custom fetcher, and debug settings.\n- `dispatchEndpoint({ leaf, input, ...requestOptions })` imperatively executes any leaf through that shared client configuration.\n- `build(leaf, options?, meta?)` returns a helper that exposes:\n - `useEndpoint(args?, options?)` — React hook for GET/feeds/mutations (typed params/query/body/output) with optional per-call TanStack options.\n - `fetch(...)` — direct fetcher (no cache). Mutations require the body as the last argument.\n - `getQueryKeys(...)` — deterministic cache key used by React Query + invalidation.\n - `invalidate(...)` — invalidate this exact endpoint instance.\n - `setData(updater, args?)` — mutate cache (infinite-aware).\n- For feed endpoints (`cfg.feed === true`), cursors are handled automatically; cache keys omit the cursor so pages merge correctly.\n- Feed endpoints automatically expose `useFeed`; mutations automatically expose `fetchMany`, `fetchManyWithOptions`, and `useEndpointMany`.\n\nApplication-specific endpoint behavior can be layered with the public augment\nAPI. See the [endpoint augment authoring guide](./AUGMENTS.md).\n\n---\n\n## Detailed usage\n\n### 1) Configure the client\n\nThe recommended setup is to export one configured client from your app's\nshared client folder. Web, mobile, and embeds can import that same module while\nthe custom fetcher handles platform auth consistently. Per request,\n`fetchWithOptions(...)` accepts `headers`, `signal`, and `credentials`; hook\nqueries forward TanStack Query's cancellation signal automatically. Custom\nfetchers also receive the originating contract `leaf` as `req.leaf`.\n\n```ts\nimport { QueryClient } from '@tanstack/react-query'\nimport { createRouteClient, defaultFetcher } from '@emeryld/rrroutes-client'\n\nconst queryClient = new QueryClient()\n\nconst client = createRouteClient({\n baseUrl: 'https://api.example.com',\n queryClient,\n fetcher: async (req) => {\n // Attach auth headers, reuse defaultFetcher for JSON parsing + error handling\n return defaultFetcher({\n ...req,\n headers: { ...req.headers, Authorization: `Bearer ${getToken()}` },\n })\n },\n environment: process.env.NODE_ENV, // disables debug when \"production\"\n debug: {\n fetch: true,\n invalidate: true,\n verbose: true, // include params/query/output in debug events\n },\n})\n```\n\nThe client also exposes a leaf-aware dispatcher for integrations such as an MCP\nserver, jobs, and other dynamic route registries:\n\n```ts\nconst result = await client.dispatchEndpoint({\n leaf: registry.byKey['PATCH /v1/users/:userId'],\n input: {\n params: { userId: 'user_123' },\n query: { notify: true },\n body: { displayName: 'Ada' },\n },\n signal: abortController.signal,\n})\n```\n\nIt uses the same fetcher, authentication, request/response validation,\nmultipart conversion, and debug pipeline as helpers created with `build`.\n\nPass the client-visible error shape directly as the first generic:\n\n```ts\nimport { createRouteClient } from '@emeryld/rrroutes-client/react-query'\nimport type { ApiError } from '../shared/errors'\n\nexport const client = createRouteClientLoading…
;\n if (result.error) returnFailed: {String(result.error)}
;\n\n // Register a listener for push-based updates (e.g., sockets) against this hook\n result.onReceive((freshUser) => {\n console.log('pushed update', freshUser);\n });\n\n returnConnecting…
}\n >\n {children}\n \n );\n}\n\nfunction RoomMessages({ roomId }: { roomId: string }) {\n const client = useSocketClientSubscribed rooms: {rooms.join(', ')}
\n