@trpc/client

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

# Yarn
yarn add @trpc/client

# pnpm
pnpm add @trpc/client

# Bun
bun add @trpc/client

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();

Similar packages

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.