Getting started

Connect-Query is an expansion pack for TanStack Query (react-query), written in TypeScript and thoroughly tested. It enables effortless communication with servers over the Connect Protocol or the gRPC-Web Protocol.

Quickstart

Connect-Query will immediately feel familiar to you if you've used TanStack Query. It provides a set of convenient helpers that you can pass to the same TanStack Query functions you're already using:

import { useQuery } from '@tanstack/react-query';
import { example } from 'your-generated-code/example-ExampleService_connectquery';

export const Example: FC = () => {
  const { data } = useQuery(example.useQuery({}));
  return <div>{data}</div>;
};

That's it!

The code generator does all the work of turning your Protobuf file into something you can easily import. TypeScript types all populate out-of-the-box. Your documentation is also converted to TSDoc.

One of the best features of this library is that once you write your schema in Protobuf form, the TypeScript types are generated and then inferred. You never again need to specify the types of your data since the library does it automatically.

play the above video to see the TypeScript types in action

Generated Code

This example shows the best developer experience using code generation. Here's what that generated code looks like:

your-generated-code/example-ExampleService_connectquery

import {
  createQueryService,
  createUnaryHooks,
} from "@connectrpc/connect-query";
import { MethodKind } from "@bufbuild/protobuf";
import { ExampleRequest, ExampleResponse } from "./example_pb.js";

export const typeName = "your.company.com.example.v1.ExampleService";

export const ExampleService = {
  methods: {
    example: {
      name: "Example",
      kind: MethodKind.Unary,
      I: ExampleRequest,
      O: ExampleResponse,
    },
  },
  typeName,
} as const;

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

export const say = {
  ...$queryService.example,
  ...createUnaryHooks($queryService.example),
};

If you want to use Connect-Query dynamically without code generation, you can call createQueryService exactly as the generated code does.