@trpc/next 10.0.0-alpha.36 → 10.0.0-alpha.37
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +84 -1
- package/package.json +8 -8
package/README.md
CHANGED
|
@@ -1,3 +1,86 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<a href="https://trpc.io/"><img src="../../www/static/img/logo-text.svg" alt="tRPC" height="130"/></a>
|
|
3
|
+
</p>
|
|
4
|
+
|
|
5
|
+
<p align="center">
|
|
6
|
+
<strong>End-to-end typesafe APIs made easy</strong>
|
|
7
|
+
</p>
|
|
8
|
+
|
|
9
|
+
<p align="center">
|
|
10
|
+
<!-- TODO: replace with new version GIF -->
|
|
11
|
+
<img src="https://storage.googleapis.com/trpc/trpcgif.gif" alt="Demo" />
|
|
12
|
+
</p>
|
|
13
|
+
|
|
1
14
|
# `@trpc/next`
|
|
2
15
|
|
|
3
|
-
|
|
16
|
+
> Connect a tRPC router to Next.js.
|
|
17
|
+
|
|
18
|
+
## Documentation
|
|
19
|
+
|
|
20
|
+
Full documentation for `@trpc/next` can be found [here](https://trpc.io/docs/nextjs)
|
|
21
|
+
|
|
22
|
+
## Installation
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
# npm
|
|
26
|
+
npm install @trpc/next @trpc/react react-query
|
|
27
|
+
|
|
28
|
+
# Yarn
|
|
29
|
+
yarn add @trpc/next @trpc/react react-query
|
|
30
|
+
|
|
31
|
+
# pnpm
|
|
32
|
+
pnpm add @trpc/next @trpc/react react-query
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Basic Example
|
|
36
|
+
|
|
37
|
+
Setup tRPC in `utils/trpc.ts`.
|
|
38
|
+
|
|
39
|
+
```ts
|
|
40
|
+
import { setupTRPC } from '@trpc/next';
|
|
41
|
+
// Import the router type from your server file
|
|
42
|
+
import type { AppRouter } from '../pages/api/[trpc].ts';
|
|
43
|
+
|
|
44
|
+
export const trpc = setupTRPC<AppRouter>({
|
|
45
|
+
config() {
|
|
46
|
+
return {
|
|
47
|
+
url: 'http://localhost:3000/api/trpc',
|
|
48
|
+
};
|
|
49
|
+
},
|
|
50
|
+
ssr: true,
|
|
51
|
+
});
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
Hook up tRPC inside `_app.tsx`.
|
|
55
|
+
|
|
56
|
+
```ts
|
|
57
|
+
import { trpc } from '~/utils/trpc';
|
|
58
|
+
|
|
59
|
+
const App = ({ Component, pageProps }) => {
|
|
60
|
+
return <Component {...pageProps} />;
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
export default trpc.withTRPC(App);
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
Now you can query your API in any component.
|
|
67
|
+
|
|
68
|
+
```ts
|
|
69
|
+
import { trpc } from '~/utils/trpc';
|
|
70
|
+
|
|
71
|
+
export function Hello() {
|
|
72
|
+
const { data, error, status } = trpc.proxy.greeting.useQuery({
|
|
73
|
+
name: 'tRPC',
|
|
74
|
+
});
|
|
75
|
+
|
|
76
|
+
if (error) {
|
|
77
|
+
return <p>{error.message}</p>;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
if (status !== 'success') {
|
|
81
|
+
return <p>Loading...</p>;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
return <div>{data && <p>{data.greeting}</p>}</div>;
|
|
85
|
+
}
|
|
86
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trpc/next",
|
|
3
|
-
"version": "10.0.0-alpha.
|
|
3
|
+
"version": "10.0.0-alpha.37",
|
|
4
4
|
"description": "tRPC Next lib",
|
|
5
5
|
"author": "KATT",
|
|
6
6
|
"license": "MIT",
|
|
@@ -38,9 +38,9 @@
|
|
|
38
38
|
}
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
|
-
"@trpc/client": "10.0.0-alpha.
|
|
42
|
-
"@trpc/react": "10.0.0-alpha.
|
|
43
|
-
"@trpc/server": "10.0.0-alpha.
|
|
41
|
+
"@trpc/client": "10.0.0-alpha.37",
|
|
42
|
+
"@trpc/react": "10.0.0-alpha.37",
|
|
43
|
+
"@trpc/server": "10.0.0-alpha.37",
|
|
44
44
|
"next": "*",
|
|
45
45
|
"react": ">=16.8.0",
|
|
46
46
|
"react-dom": ">=16.8.0",
|
|
@@ -51,9 +51,9 @@
|
|
|
51
51
|
"react-ssr-prepass": "^1.5.0"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
|
-
"@trpc/client": "10.0.0-alpha.
|
|
55
|
-
"@trpc/react": "10.0.0-alpha.
|
|
56
|
-
"@trpc/server": "10.0.0-alpha.
|
|
54
|
+
"@trpc/client": "10.0.0-alpha.37",
|
|
55
|
+
"@trpc/react": "10.0.0-alpha.37",
|
|
56
|
+
"@trpc/server": "10.0.0-alpha.37",
|
|
57
57
|
"@types/express": "^4.17.12",
|
|
58
58
|
"express": "^4.17.1",
|
|
59
59
|
"next": "^12.1.6",
|
|
@@ -65,5 +65,5 @@
|
|
|
65
65
|
"publishConfig": {
|
|
66
66
|
"access": "public"
|
|
67
67
|
},
|
|
68
|
-
"gitHead": "
|
|
68
|
+
"gitHead": "da12b6b12f7dc99a54d748f5660a296e9db2d87f"
|
|
69
69
|
}
|