Setup

Install @blitzjs/rpc plugin with:

npm i @blitzjs/rpc # yarn add @blitzjs/rpc # pnpm add @blitzjs/rpc

Client setup

Add the following to your blitz-client.ts file:

import { setupClient } from "@blitzjs/next"
import { BlitzRpcPlugin } from "@blitzjs/rpc"

const { withBlitz } = setupClient({
  plugins: [BlitzRpcPlugin()],
})

export { withBlitz }

You can configure the @blitzjs/rpc plugin to use different react-query options:

import { setupClient } from "@blitzjs/next"
import { BlitzRpcPlugin } from "@blitzjs/rpc"

const { withBlitz } = setupClient({
  plugins: [
    BlitzRpcPlugin({
      reactQueryOptions: {
        queries: {
          staleTime: 7000,
        },
      },
    }),
  ],
})

export { withBlitz }

You can read more about react-query's QueryClient options here.

Server setup

Add the following to your blitz-server.ts file:

const { invoke } = setupBlitzServer({
  plugins: [
    // Other plugins
    RpcServerPlugin({
      logging: {
        //logging options
      },
      onInvokeError(error) {
        // Add your custom error handling here
      },
    }),
  ],
})

export { invoke }

API setup

App router (recommended):

Create an app/api/rpc/[[...blitz]] directory in your src directory with a route.ts file, and add the following lines:

Standalone Usage

// app/api/rpc/[[...blitz]]/route.ts
import { rpcAppHandler } from "@blitzjs/rpc"

export const { GET, POST, HEAD } = rpcAppHandler()

Blitz Auth Integration

// app/api/rpc/[[...blitz]]/route.ts
import { rpcAppHandler } from "@blitzjs/rpc"
import { withBlitzAuth } from "app/blitz-server"

export const { GET, POST, HEAD } = withBlitzAuth(rpcAppHandler())

View RPC Configurations to view the available options.

Pages router:

Create an pages/api/rpc directory in your src directory with [[...blitz]].ts file, and add the following lines:

// src/pages/api/rpc/[[...blitz]].ts

import { rpcHandler } from "@blitzjs/rpc"
import { api } from "src/blitz-server"

export default api(rpcHandler({}))