8000 trpc with nodejs prisma and react · wpcodevo/trpc-react-node-prisma@4d081eb · GitHub
[go: up one dir, main page]
Skip to content

Commit 4d081eb

Browse files
wpcodevowpcodevo
committed
trpc with nodejs prisma and react
0 parents  commit 4d081eb

30 files changed

+2959
-0
lines changed

‎.env

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
DATABASE_PORT=6500
2+
POSTGRES_PASSWORD=password123
3+
POSTGRES_USER=postgres
4+
POSTGRES_DB=trpc-prisma
5+
POSTGRES_HOST=postgres
6+
POSTGRES_HOSTNAME=127.0.0.1

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎Makefile

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
dev:
2+
docker-compose up -d
3+
4+
dev-down:
5+
docker-compose down

‎docker-compose.yml

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
version: '3'
2+
services:
3+
postgres:
4+
image: postgres
5+
container_name: postgres
6+
ports:
7+
- '6500:5432'
8+
restart: always
9+
env_file:
10+
- ./.env
11+
volumes:
12+
- postgres-db:/var/lib/postgresql/data
13+
redis:
14+
image: redis:latest
15+
container_name: redis
16+
ports:
17+
- '6379:6379'
18+
volumes:
19+
- redis:/data
20+
volumes:
21+
postgres-db:
22+
redis:

‎package.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "trpc-node-react",
3+
"private": "true",
4+
"scripts": {
5+
"start": "concurrently \"wsrun --parallel start\""
6+
},
7+
"workspaces": [
8+
"packages/*"
9+
],
10+
"devDependencies": {
11+
"concurrently": "^7.2.2",
12+
"wsrun": "^5.2.4"
13+
}
14+
}

‎packages/client/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + React + TS</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

‎packages/client/package.json

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "client",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"start": "vite --host localhost --port 3000",
8+
"build": "tsc && vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"@trpc/client": "^9.26.2",
13+
"@trpc/react": "^9.26.2",
14+
"@trpc/server": "^9.26.2",
15+
"react": "^18.2.0",
16+
"react-dom": "^18.2.0",
17+
"react-query": "3",
18+
"server": "1.0.0"
19+
},
20+
"devDependencies": {
21+
"@types/react": "^18.0.15",
22+
"@types/react-dom": "^18.0.6",
23+
"@vitejs/plugin-react": "^2.0.0",
24+
"autoprefixer": "^10.4.7",
25+
"postcss": "^8.4.14",
26+
"tailwindcss": "^3.1.6",
27+
"typescript": "^4.6.4",
28+
"vite": "^3.0.0"
29+
}
30+
}

‎packages/client/postcss.config.cjs

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎packages/client/public/vite.svg

Lines changed: 1 addition & 0 deletions
Loading

‎packages/client/src/App.tsx

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { useState } from 'react';
2+
import { QueryClientProvider, QueryClient } from 'react-query';
3+
import { ReactQueryDevtools } from 'react-query/devtools';
4+
import { getFetch } from '@trpc/client';
5+
import { trpc } from './utils/trpc';
6+
7+
function AppContent() {
8+
const hello = trpc.useQuery(['hello']);
9+
return <main className='p-2'>{JSON.stringify(hello.data, null, 2)}</main>;
10+
}
11+
12+
function App() {
13+
const [queryClient] = useState(
14+
() =>
15+
new QueryClient({
16+
defaultOptions: {
17+
queries: {
18+
staleTime: 5 * 1000,
19+
},
20+
},
21+
})
22+
);
23+
const [trpcClient] = useState(() =>
24+
trpc.createClient({
25+
url: 'http://localhost:8000/api/trpc',
26+
fetch: async (input, init?) => {
27+
const fetch = getFetch();
28+
return fetch(input, {
29+
...init,
30+
credentials: 'include',
31+
});
32+
},
33+
})
34+
);
35+
return (
36+
<trpc.Provider client={trpcClient} queryClient={queryClient}>
37+
<QueryClientProvider client={queryClient}>
38+
<AppContent />
39+
<ReactQueryDevtools initialIsOpen={false} />
40+
</QueryClientProvider>
41+
</trpc.Provider>
42+
);
43+
}
44+
45+
export default App;

0 commit comments

Comments
 (0)
0