Generate code

The code generator for Connect-Query, a expansion pack for TanStack Query (react-query), that enables effortless communication with servers that speak the Connect Protocol.

Installation

protoc-gen-connect-query is a code generator plugin for Protocol Buffer compilers like buf and protoc. It generates clients from your Protocol Buffer schema, and works in tandem with @bufbuild/protoc-gen-es, the code generator plugin for all Protocol Buffer base types. The code those two plugins generate requires the runtime libraries @connectrpc/connect-query, and @bufbuild/protobuf.

To install buf, the plugins and their runtime libraries, run:

npm install --save-dev @bufbuild/buf @connectrpc/protoc-gen-connect-query @bufbuild/protoc-gen-es
npm install @connectrpc/connect-query @bufbuild/protobuf

We use peer dependencies to ensure that code generator and runtime library are compatible with each other. Note that yarn and pnpm only emit a warning in this case.

Generating Code

example.proto

For these examples, consider the following example proto file example.proto:

syntax = "proto3";

package example.v1;

message Nothing {}

message Todo {
  string id = 1;
  string name = 2;
  bool completed = 3;
}

message Todos {
  repeated Todo todos = 1;
}

service TodoService {
  rpc GetTodos(Nothing) returns (Todos);
  rpc AddTodo(Todo) returns (Nothing);
}

With the buf CLI

Add a new configuration file buf.gen.yaml

version: v1
plugins:
  # This will invoke protoc-gen-es and write output to src/gen
  - plugin: es
    out: src/gen
    opt: target=ts
  # This will invoke protoc-gen-connect-query
  - plugin: connect-query
    out: src/gen
    opt: target=ts

To generate code for all protobuf files within your project, simply run:

npx buf generate

Note that buf can generate from various inputs, not just local Protobuf files. For example, npx buf generate buf.build/connectrpc/eliza generates code for the module connectrpc/eliza on the Buf Schema Registry.

With protoc

PATH=$PATH:$(pwd)/node_modules/.bin \
  protoc -I . \
  --es_out src/gen \
  --es_opt target=ts \
  --connect-query_out src/gen \
  --connect-query_opt target=ts \
  example.proto

Note that we are adding node_modules/.bin to the $PATH, so that the protocol buffer compiler can find them.

Generated Output

Connect-Query will create one output file for every service in every protofile. Say you have the following file structure:

.
└── proto/
    ├── pizza.proto
    └── curry.proto

Where pizza.proto contains DetroitStyleService and ChicagoStyleService, and where curry.proto contains VindalooService. Your generated output will look like this:

.
└── gen/
    ├── pizza_pb.ts
    ├── pizza-ServiceOne_connectquery.ts
    ├── pizza-ChicagoStyleService_connectquery.ts
    ├── curry_pb.ts
    └── curry-VindalooService_connectquery.ts

The reason each service gets a separate file is to facilitate intellisense and language server protocol imports. Notice that one file per input proto is generated by protoc-gen-es (pizza_pb.ts and curry_pb.ts), and that one file per service is created by protoc-gen-connect-query (making up the remainder). The Protobuf-ES generated files (*_pb.ts) are important because those files are referenced from the *_connectquery.ts files.

Plugin options

target

This option controls whether the plugin generates JavaScript, TypeScript, or TypeScript declaration files.

Say, for example, you used example.proto:

Target	Generated output
target=js	example-TodoService_connectquery.js
target=ts	example-TodoService_connectquery.ts
target=dts	example-TodoService_connectquery.d.ts

Multiple values can be given by separating them with +, for example target=js+dts.

By default, we generate JavaScript and TypeScript declaration files, which produces the smallest code size and is the most compatible with various bundler configurations. If you prefer to generate TypeScript, use target=ts.

import_extension=.js

By default, protoc-gen-connect-query (and all other plugins based on @bufbuild/protoplugin) uses a .js file extensions in import paths, even in TypeScript files.

This is unintuitive, but necessary for ECMAScript modules in Node.js.

Unfortunately, not all bundlers and tools have caught up yet, and Deno requires .ts. With this plugin option, you can replace .js extensions in import paths with the given value. For example, set

• import_extension=none to remove the .js extension
• import_extension=.ts to replace the .js extension with .ts

Example Generated Code

using example.proto

// @generated by protoc-gen-connect-query v0.0.8 with parameter "target=ts"
// @generated from file example.proto (package example.v1, syntax proto3)
/* eslint-disable */
// @ts-nocheck

import { createQueryService } from "@connectrpc/connect-query";
import { MethodKind } from "@bufbuild/protobuf";
import { Empty, Todo, Todos } from "./example_pb.js";

export const typeName = "example.v1.TodoService";

const $queryService = createQueryService({ service: TodoService });

export const TodoService = {
  methods: {
    getTodos: {
      name: "GetTodos",
      kind: MethodKind.Unary,
      I: Empty,
      O: Todos,
    },
  },
  typeName,
} as const;

/**
 * @generated from rpc example.v1.TodoService.GetTodos
 */
export const getTodos = {
  ...$queryService.getTodos,
  ...createUnaryHooks($queryService.getTodos),
};

/**
 * @generated from rpc example.v1.TodoService.AddTodo
 */
export const getTodos = {
  ...$queryService.addTodos,
  ...createUnaryHooks($queryService.addTodos),
};