React
Procedure API for React Server Components
React
The React adapter is a simplified API for React Server Components.
import { init } from "@jlnstack/procedure/react"init
Initialize Procedure with a base context:
const { procedure, middleware } = init({
ctx: async () => ({ db: getDb() })
})procedure
Creates a new procedure builder:
const myHandler = procedure
.use(...)
.rsc(...).use()
Adds a middleware to the procedure:
procedure.use(withAuth)
procedure.use([middlewareA, middlewareB]) // parallel.input()
Adds input validation using Standard Schema:
import { z } from "zod"
const getPost = procedure
.input(z.object({ id: z.string() }))
.rsc(async ({ input, ctx }) => {
return ctx.db.posts.find(input.id)
}).run()
Finalizes the procedure as a callable async function:
const getData = procedure
.use(withAuth)
.run(async ({ ctx }) => {
return ctx.db.items.findMany()
})
const data = await getData().rsc()
Finalizes the procedure as a React Server Component:
const ItemList = procedure
.use(withAuth)
.rsc(async ({ ctx }) => {
const items = await ctx.db.items.findMany()
return <List items={items} />
})Use it directly in your page:
export default function Page() {
return (
<Suspense fallback={<Loading />}>
<ItemList />
</Suspense>
)
}