Skip to main content

Connect for TanStack Query

Connect-Query is a wrapper around TanStack Query (formerly React Query), written in TypeScript and thoroughly tested. It enables effortless communication with servers that speak the Connect Protocol.


npm install @connectrpc/connect-query @connectrpc/connect-web


import { createConnectTransport } from "@connectrpc/connect-web";
import { TransportProvider } from "@connectrpc/connect-query";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const finalTransport = createConnectTransport({
baseUrl: "",

const queryClient = new QueryClient();

function App() {
return (
<TransportProvider transport={finalTransport}>
<QueryClientProvider client={queryClient}>
<YourApp />

With configuration completed, you can now use the useQuery hook to make a request:

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

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

To see more details and the full API, checkout the Connect Query readme.