Setup - Blitz.js

Install @blitzjs/rpc plugin with:

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

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.

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,
}

Add Blitz RPC API Route:

4.1 App router (recommended):

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

// app/api/rpc/[[...blitz]]/route.ts

import {rpcAppHandler} from "@blitzjs/rpc"
import {withBlitzAuth} from "app/blitz-server"

// With Blitz Auth
export const {GET, POST, HEAD} = withBlitzAuth(rpcAppHandler(
  {},
))

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

4.2 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({}))

Follow the Query Resolvers and Mutation Resolvers docs to learn how to use the @blitzjs/rpc plugin's features.