Axum

Use rspc = "=0.3.0", rspc-axum = "=0.2.0", and Axum 0.7 together. The quickstart includes a complete server.

Mount the routerCopy Anchor Link

let router = rspc::Router::<()>::new()
    .query("version", |t| t(|_: (), _: ()| "0.3.0"))
    .build()
    .arced();

let app = axum::Router::new()
    .nest("/rspc", rspc_axum::endpoint(router, || ()));

The adapter expects an Arc of the built router. Do not use the experimental adapter's Procedures setup here.

Extract request contextCopy Anchor Link

The context callback can accept request-parts extractors. For example:

use axum::http::request::Parts;

let router = rspc::Router::<String>::new()
    .query("currentPath", |t| t(|ctx: String, _: ()| ctx))
    .build()
    .arced();

let app = axum::Router::new().nest(
    "/rspc",
    rspc_axum::endpoint(router, |parts: Parts| parts.uri.path().to_owned()),
);

Use an application context struct when you need shared resources and verified session data. See request context.

FrontendCopy Anchor Link

import { createClient, FetchTransport } from "@rspc/client";
import type { Procedures } from "./bindings";

const client = createClient<Procedures>({
  transport: new FetchTransport("/rspc"),
});

console.log(await client.query(["version"]));

For subscriptions, enable the adapter's ws feature and use WebsocketTransport at ws://localhost:4000/rspc/ws. Use wss:// in production. HTTP fetch does not support subscriptions.

If the frontend is on another origin, configure CORS on the Axum server. Use an explicit allowed origin with credentials support for cookie sessions.