tRPC

End-to-end typesafe APIs made easy

Demo

# `@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@4 # Yarn yarn add @trpc/react-query @tanstack/react-query@4 # pnpm pnpm add @trpc/react-query @tanstack/react-query@4 # Bun bun add @trpc/react-query @tanstack/react-query@4 ``` ## 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}

}

; } ```