@trpc/client

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.

README

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
npm install @trpc/client@next

# Yarn
yarn add @trpc/client@next

# pnpm
pnpm add @trpc/client@next

# Bun
bun add @trpc/client@next

Basic Example

import { createTRPCClient, httpBatchLink } from '@trpc/client';
// Importing the router type from the server file
import type { AppRouter } from './server';

// Initializing the tRPC client
const trpc = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000/trpc',
    }),
  ],
});

async function main() {
  // Querying the greeting
  const helloResponse = await trpc.greeting.query({
    name: 'world',
  });

  console.log('helloResponse', helloResponse); // Hello world
}

main();