@trpc/react-query

tRPC

End-to-end typesafe APIs made easy

@trpc/react-query

A tRPC wrapper around react-query.

Documentation

Full documentation for @trpc/react-query can be found here

Installation

# npm
npm install @trpc/react-query @tanstack/react-query

# Yarn
yarn add @trpc/react-query @tanstack/react-query

# pnpm
pnpm add @trpc/react-query @tanstack/react-query

# Bun
bun add @trpc/react-query @tanstack/react-query

Basic Example

Create a utils file that exports tRPC hooks and providers.

import { createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from './server';

export const trpc = createTRPCReact<AppRouter>();

Use the provider to connect to your API.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { trpc } from '~/utils/trpc';
import React, { useState } from 'react';

export function App() {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      url: 'http://localhost:5000/trpc',
    }),
  );
  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        {/* Your app here */}
      </QueryClientProvider>
    </trpc.Provider>
  );
}

Now in any component, you can query your API using the proxy exported from the utils file.

import { trpc } from '~/utils/trpc';

export function Hello() {
  const { data, error, status } = trpc.greeting.useQuery({ name: 'tRPC' });

  if (error) {
    return <p>{error.message}</p>;
  }

  if (status !== 'success') {
    return <p>Loading...</p>;
  }

  return <div>{data && <p>{data.greeting}</p>}</div>;
}

Similar packages

Other packages similar to @trpc/react-query

react-query

React Query is a powerful data-fetching library for React applications. It provides hooks for fetching, caching, and synchronizing server data with client-side state. Unlike @trpc/react-query, it does not provide built-in type safety or integration with tRPC.

apollo-client

Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. It offers features like caching, optimistic UI, and subscriptions. Unlike @trpc/react-query, it uses GraphQL instead of tRPC for API interactions.

swr

SWR (stale-while-revalidate) is a React Hooks library for data fetching developed by Vercel. It focuses on simplicity and performance, providing a lightweight solution for fetching and caching data. Unlike @trpc/react-query, it does not offer built-in type safety or integration with tRPC.