Package Exports

@trpc/next

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@trpc/next) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

End-to-end typesafe APIs made easy

Demo

`@trpc/next`

Connect a tRPC router to Next.js.

Documentation

Full documentation for @trpc/next can be found here

Installation

# npm
npm install @trpc/next@next @trpc/react@next @tanstack/react-query

# Yarn
yarn add @trpc/next@next @trpc/react@next @tanstack-react-query

# pnpm
pnpm add @trpc/next@next @trpc/react@next @tanstack/react-query

Basic Example

Setup tRPC in utils/trpc.ts.

import { createTRPCNext, httpBatchLink } from '@trpc/next';
// Import the router type from your server file
import type { AppRouter } from '../pages/api/[trpc].ts';

export const trpc = createTRPCNext<AppRouter>({
  config() {
    return {
      links: [
        httpBatchLink({
          url: 'http://localhost:3000/trpc',
        }),
      ],
    };
  },
  ssr: true,
});

Hook up tRPC inside _app.tsx.

import { trpc } from '~/utils/trpc';

const App = ({ Component, pageProps }) => {
  return <Component {...pageProps} />;
};

export default trpc.withTRPC(App);

Now you can query your API in any component.

import { trpc } from '~/utils/trpc';

export function Hello() {
  const { data, error, status } = trpc.greeting.useQuery({
    name: 'tRPC',
  });

  if (error) {
    return <p>{error.message}</p>;
  }

  if (status !== 'success') {
    return <p>Loading...</p>;
  }

  return <div>{data && <p>{data.greeting}</p>}</div>;
}