@elixir-ts-rpc/react

Typed React hooks for your generated elixir-ts-rpc client. They are built on TanStack Query. Inputs, outputs, and error unions flow into useQuery and useMutation. This is pre-1.0 (0.0.2), so the API may change.

npm install @elixir-ts-rpc/react @elixir-ts-rpc/client @tanstack/react-query

You provide the peer dependencies: @tanstack/react-query (v5+), @elixir-ts-rpc/client, and react (v18+).

Setup

You add your own <QueryClientProvider>. This package does not create one.

// rpc.ts
import { createRpcReact } from "@elixir-ts-rpc/react";
import { createRpcClient } from "./rpc.gen";

export const rpc = createRpcReact(createRpcClient({ baseUrl: "/rpc" }));

The adapter has the same shape as the client:

const users = rpc.users.list.useQuery({ filter: {} });
// users.data is the typed output · users.error covers declared and transport errors

const update = rpc.users.update.useMutation();
update.mutate({ id: "u_1", email: "[email protected]" });

Every procedure also gives you queryKey, queryFilter, queryOptions, mutationOptions, infiniteQueryOptions, and an isError guard.

Documentation

React + TanStack Query →: query keys, invalidation, key prefixes, option factories, infinite queries, typed errors, adapters for other frameworks.

Client: @elixir-ts-rpc/client. Server: elixir_ts_rpc on HexDocs.

Want to see what codegen emits before writing any Elixir? The playground runs the real generator in your browser.