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.

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.

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 is built on the standard Fetch API.

GET or POST?

rspc uses:

GET requests for queries
POST requests for mutations

Important: While rspc primarily uses GET requests for queries, it may also use POST requests for queries in certain scenarios (similar to how GraphQL operates). Mutations will always use POST requests and will never use GET. This behavior is an implementation detail and isn't guaranteed to remain the same in the future.

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

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 API. This uses HTTP GET and POST requests under the hood.

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