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](https://trpc.io/docs/react-query)
## Installation
```bash
# 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.
```ts
import { createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from './server';
export const trpc = createTRPCReact();
```
Use the provider to connect to your API.
```ts
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 (
{/* Your app here */}
);
}
```
Now in any component, you can query your API using the proxy exported from the utils file.
```ts
import { trpc } from '~/utils/trpc';
export function Hello() {
const { data, error, status } = trpc.greeting.useQuery({ name: 'tRPC' });
if (error) {
return {error.message}
;
}
if (status !== 'success') {
return Loading...
;
}
return {data &&
{data.greeting}
}