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

``bash


npm

`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}