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 @connectrpc/connect-web

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.