🚀Announcing Flightcontrol - Easily Deploy Blitz.js and Next.js to AWS 🚀
Back to Documentation Menu

Setup

  1. Install @blitzjs/rpc plugin with:
npm i @blitzjs/rpc # yarn add @blitzjs/rpc # pnpm add @blitzjs/rpc
  1. 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.

  1. Add Blitz RPC API Route:

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.


Idea for improving this page? Edit it on GitHub.