What is @trpc/client?
@trpc/client is a TypeScript-first framework for building end-to-end typesafe APIs. It allows you to create and consume APIs with full type safety, ensuring that your client and server are always in sync.
What are @trpc/client's main functionalities?
Creating a TRPC Client
This code demonstrates how to create a TRPC client that connects to a TRPC server running at 'http://localhost:4000/trpc'.
const trpc = require('@trpc/client');
const { createTRPCClient } = trpc;
const client = createTRPCClient({
url: 'http://localhost:4000/trpc',
});
Making a Query
This code demonstrates how to make a query to the TRPC server to fetch a user with a specific ID.
const result = await client.query('getUser', { id: 1 });
console.log(result);
Making a Mutation
This code demonstrates how to make a mutation to the TRPC server to create a new user.
const newUser = await client.mutation('createUser', { name: 'John Doe' });
console.log(newUser);
Subscribing to a Subscription
This code demonstrates how to subscribe to a subscription on the TRPC server to listen for updates to a specific user.
const subscription = client.subscription('onUserUpdate', { userId: 1 }, {
onData: (data) => console.log('User updated:', data),
onError: (err) => console.error('Subscription error:', err),
});
Other packages similar to @trpc/client
apollo-client
Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. Unlike @trpc/client, which is TypeScript-first and focuses on end-to-end type safety, Apollo Client is centered around GraphQL and offers a rich ecosystem for managing data fetching, caching, and state management.
axios
Axios is a promise-based HTTP client for the browser and Node.js. While it does not offer the same level of type safety and end-to-end integration as @trpc/client, it is a versatile and widely-used library for making HTTP requests.
react-query
React Query is a data-fetching library for React applications that simplifies fetching, caching, and synchronizing server data. It can be used with any data-fetching library, including @trpc/client, to manage server state in a React application. Unlike @trpc/client, React Query is not focused on type safety but rather on providing a powerful and flexible data-fetching solution.
tRPC
End-to-end typesafe APIs made easy
@trpc/client
Communicate with a tRPC server on the client side.
Documentation
Full documentation for @trpc/client
can be found here
Installation
npm install @trpc/client
yarn add @trpc/client
pnpm add @trpc/client
bun add @trpc/client
Basic Example
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from './server';
const trpc = createTRPCProxyClient<AppRouter>({
links: [
httpBatchLink({
url: 'http://localhost:3000/trpc',
}),
],
});
async function main() {
const helloResponse = await trpc.greeting.query({
name: 'world',
});
console.log('helloResponse', helloResponse);
}
main();