Setup

Blitz RPC with Next.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 Blitz RPC API Route:

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

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

import { rpcHandler } from "@blitzjs/rpc"
import { api } from "app/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.

Topics

Blitz RPC with Next.js