@trpc/next 10.0.0-alpha.34 → 10.0.0-alpha.37

package/README.md

@@ -1,3 +1,86 @@
+<p align="center">
+  <a href="https://trpc.io/"><img src="../../www/static/img/logo-text.svg" alt="tRPC" height="130"/></a>
+</p>
+
+<p align="center">
+  <strong>End-to-end typesafe APIs made easy</strong>
+</p>
+
+<p align="center">
+  <!-- TODO: replace with new version GIF -->
+  <img src="https://storage.googleapis.com/trpc/trpcgif.gif" alt="Demo" />
+</p>
+
 # `@trpc/next`
 
-https://trpc.io
+> Connect a tRPC router to Next.js.
+
+## Documentation
+
+Full documentation for `@trpc/next` can be found [here](https://trpc.io/docs/nextjs)
+
+## Installation
+
+```bash
+# npm
+npm install @trpc/next @trpc/react react-query
+
+# Yarn
+yarn add @trpc/next @trpc/react react-query
+
+# pnpm
+pnpm add @trpc/next @trpc/react react-query
+```
+
+## Basic Example
+
+Setup tRPC in `utils/trpc.ts`.
+
+```ts
+import { setupTRPC } from '@trpc/next';
+// Import the router type from your server file
+import type { AppRouter } from '../pages/api/[trpc].ts';
+
+export const trpc = setupTRPC<AppRouter>({
+  config() {
+    return {
+      url: 'http://localhost:3000/api/trpc',
+    };
+  },
+  ssr: true,
+});
+```
+
+Hook up tRPC inside `_app.tsx`.
+
+```ts
+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.
+
+```ts
+import { trpc } from '~/utils/trpc';
+
+export function Hello() {
+  const { data, error, status } = trpc.proxy.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>;
+}
+```

package/dist/index.js

@@ -240,7 +240,7 @@ function withTRPC(opts) {
 
 function setupTRPC(opts) {
   var hooks = react.createReactQueryHooks();
-  var proxy = react.createReactQueryProxy(); // TODO: maybe set TSSRContext to `never` when using `WithTRPCNoSSROptions`
+  var proxy = react.createReactQueryHooksProxy(hooks); // TODO: maybe set TSSRContext to `never` when using `WithTRPCNoSSROptions`
 
   var _withTRPC = withTRPC(opts);
 

package/dist/index.mjs

@@ -3,7 +3,7 @@ import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
-import { createReactQueryHooks, createTRPCClient, createReactQueryProxy } from '@trpc/react';
+import { createReactQueryHooks, createTRPCClient, createReactQueryHooksProxy } from '@trpc/react';
 import React, { useState, createElement } from 'react';
 import { QueryClient, QueryClientProvider, Hydrate, dehydrate } from 'react-query';
 import ssrPrepass from 'react-ssr-prepass';
@@ -226,7 +226,7 @@ function withTRPC(opts) {
 
 function setupTRPC(opts) {
   var hooks = createReactQueryHooks();
-  var proxy = createReactQueryProxy(); // TODO: maybe set TSSRContext to `never` when using `WithTRPCNoSSROptions`
+  var proxy = createReactQueryHooksProxy(hooks); // TODO: maybe set TSSRContext to `never` when using `WithTRPCNoSSROptions`
 
   var _withTRPC = withTRPC(opts);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trpc/next",
-  "version": "10.0.0-alpha.34",
+  "version": "10.0.0-alpha.37",
   "description": "tRPC Next lib",
   "author": "KATT",
   "license": "MIT",
@@ -38,9 +38,9 @@
     }
   },
   "peerDependencies": {
-    "@trpc/client": "10.0.0-alpha.34",
-    "@trpc/react": "10.0.0-alpha.34",
-    "@trpc/server": "10.0.0-alpha.34",
+    "@trpc/client": "10.0.0-alpha.37",
+    "@trpc/react": "10.0.0-alpha.37",
+    "@trpc/server": "10.0.0-alpha.37",
     "next": "*",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
@@ -51,9 +51,9 @@
     "react-ssr-prepass": "^1.5.0"
   },
   "devDependencies": {
-    "@trpc/client": "10.0.0-alpha.34",
-    "@trpc/react": "10.0.0-alpha.34",
-    "@trpc/server": "10.0.0-alpha.34",
+    "@trpc/client": "10.0.0-alpha.37",
+    "@trpc/react": "10.0.0-alpha.37",
+    "@trpc/server": "10.0.0-alpha.37",
     "@types/express": "^4.17.12",
     "express": "^4.17.1",
     "next": "^12.1.6",
@@ -65,5 +65,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "533e9ced4859aa20e72da44a7cdafc95736dd1e5"
+  "gitHead": "da12b6b12f7dc99a54d748f5660a296e9db2d87f"
 }

package/src/setupNext.tsx

@@ -1,4 +1,4 @@
-import { createReactQueryHooks, createReactQueryProxy } from '@trpc/react';
+import { createReactQueryHooks, createReactQueryHooksProxy } from '@trpc/react';
 import { AnyRouter } from '@trpc/server';
 import { NextPageContext } from 'next/types';
 import { WithTRPCNoSSROptions, WithTRPCSSROptions, withTRPC } from './withTRPC';
@@ -8,7 +8,7 @@ export function setupTRPC<
   TSSRContext extends NextPageContext = NextPageContext,
 >(opts: WithTRPCNoSSROptions<TRouter> | WithTRPCSSROptions<TRouter>) {
   const hooks = createReactQueryHooks<TRouter, TSSRContext>();
-  const proxy = createReactQueryProxy<TRouter, TSSRContext>();
+  const proxy = createReactQueryHooksProxy<TRouter, TSSRContext>(hooks);
 
   // TODO: maybe set TSSRContext to `never` when using `WithTRPCNoSSROptions`
   const _withTRPC = withTRPC<TRouter, TSSRContext>(opts);