Vanilla Client

The vanilla client allows you to consume your API on the frontend. This client is the minimal core and it is recommended that you use the React or Solid integration for building application.

To get started first install the minimal runtime package.

npm i @rspc/client

Next you need to export the Typescript bindings from your rspc::Router by using either export_ts_bindings or export_ts.

src/main.rs

let router = <rspc::Router>::new()
  // This will automatically export the bindings to the `./ts` directory when you run build() in a non-release Rust build
  .config(Config::new().export_ts_bindings("./bindings.rs"))
  .build();

Then you can use the @rspc/client package to consume your API.

index.ts

import { createClient, FetchTransport } from "@rspc/client";
import type { Procedures } from "./ts/index"; // These were the bindings exported from your Rust code!
 
// You must provide the generated types as a generic and create a transport (in this example we are using HTTP Fetch) so that the client knows how to communicate with your API.
const client = createClient<Procedures>({
  // Refer to the integration your using for the correct transport.
  transport: new FetchTransport("http://localhost:4000/rspc"),
});
 
// Now use the client in your code!
const version = await client.query(["version"]); // The types will be inferred from your backend.
const userOne = await client.query(["getUser", 1]);
const userTwo = await client.mutation(["addUser", { name: "Monty Beaumont" }]);

Transports

rspc has multiple different transports which can be used. These dictate how the frontend is able to talk with the backend.

Fetch Transport

💡

Fetch transport does not support subscriptions!

Transport build on the standard Fetch (opens in a new tab) API. This uses HTTP GET and POST requests under the hood.

rspc will generally use a GET request for queries and POST request for mutations however this isn't guaranteed.

index.ts

import { createClient, FetchTransport } from "@rspc/client";
import type { Procedures } from "./bindings.ts"; // The bindings exported from your Rust code!
 
const client = createClient<Procedures>({
  transport: new FetchTransport("http://localhost:4000/rspc"),
});

Custom Fetch implementation

index.ts

import { createClient, FetchTransport } from "@rspc/client";
import type { Procedures } from "./bindings.ts"; // The bindings exported from your Rust code!
 
const client = createClient<Procedures>({
  transport: new FetchTransport(
    "http://localhost:4000/rspc",
    // Include Cookies for cross-origin requests
    (input, init) => fetch(input, { ...init, credentials: "include" })
  ),
});

Fetch Authentication

Guide coming soon...

Websocket Transport

Transport build on the standard WebSocket (opens in a new tab) API. This uses HTTP GET and POST requests under the hood.

index.ts

import { createClient, WebsocketTransport } from "@rspc/client";
import type { Procedures } from "./bindings.ts"; // The bindings exported from your Rust code!
 
const client = createClient<Procedures>({
  transport: new WebsocketTransport("ws://localhost:8080/rspc/ws"),
});

Websocket Authentication

Guide coming soon...

Advanced React