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.

Install

npm install @connectrpc/connect-query@"^1.0.0" @connectrpc/connect-web@"^1.0.0"

Usage

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

const finalTransport = createConnectTransport({
baseUrl: "https://demo.connectrpc.com",
});

const queryClient = new QueryClient();

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

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.