mirror of
https://github.com/ArthurDanjou/trpc-nuxt.git
synced 2026-02-02 21:27:53 +01:00
move to pnpm workspace
This commit is contained in:
Robert Soriano
7
playground/.gitignore
vendored
7
playground/.gitignore
vendored
@@ -1,7 +0,0 @@
|
||||
node_modules
|
||||
*.log*
|
||||
.nuxt
|
||||
.nitro
|
||||
.cache
|
||||
.output
|
||||
.env
|
||||
@@ -1,31 +0,0 @@
|
||||
# dev playground
|
||||
|
||||
## Setup
|
||||
|
||||
Make sure to install the dependencies:
|
||||
|
||||
```bash
|
||||
pnpm install
|
||||
```
|
||||
|
||||
## Development Server
|
||||
|
||||
Start the development server on http://localhost:3000
|
||||
|
||||
```bash
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
## Production
|
||||
|
||||
Build the application for production:
|
||||
|
||||
```bash
|
||||
pnpm build
|
||||
```
|
||||
|
||||
Locally preview production build:
|
||||
|
||||
```bash
|
||||
pnpm preview
|
||||
```
|
||||
@@ -1,5 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<NuxtPage />
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,9 +0,0 @@
|
||||
// https://v3.nuxtjs.org/api/configuration/nuxt.config
|
||||
export default defineNuxtConfig({
|
||||
runtimeConfig: {
|
||||
baseURL: '',
|
||||
},
|
||||
typescript: {
|
||||
strict: true,
|
||||
},
|
||||
})
|
||||
@@ -1,19 +0,0 @@
|
||||
{
|
||||
"name": "playground",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "nuxt build",
|
||||
"dev": "nuxt dev",
|
||||
"generate": "nuxt generate",
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare"
|
||||
},
|
||||
"dependencies": {
|
||||
"superjson": "^1.11.0",
|
||||
"trpc-nuxt": "workspace:*",
|
||||
"zod": "^3.19.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"nuxt": "3.0.0-rc.12"
|
||||
}
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
const { $client } = useNuxtApp()
|
||||
// const headers = useClientHeaders()
|
||||
|
||||
// const addHeader = () => {
|
||||
// headers.value.authorization = 'Bearer abcdefghijklmnop'
|
||||
// console.log(headers.value)
|
||||
// }
|
||||
|
||||
const addTodo = async () => {
|
||||
const title = Math.random().toString(36).slice(2, 7)
|
||||
|
||||
try {
|
||||
const result = await $client.todo.addTodo.mutate({
|
||||
id: Date.now(),
|
||||
userId: 69,
|
||||
title,
|
||||
completed: false,
|
||||
})
|
||||
await result.execute()
|
||||
console.log('Todo: ', result.data.value)
|
||||
}
|
||||
catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
|
||||
const { data: todos, pending, error, refresh } = await $client.todo.getTodos.query()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="pending">
|
||||
Loading...
|
||||
</div>
|
||||
<div v-else-if="error?.data?.code">
|
||||
Error: {{ error.data.code }}
|
||||
</div>
|
||||
<div v-else>
|
||||
<ul>
|
||||
<li v-for="t in todos?.slice(0, 10)" :key="t.id">
|
||||
<NuxtLink :class="{ completed: t.completed }" :to="`/todo/${t.id}`">
|
||||
Title: {{ t.title }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
<button @click="addTodo">
|
||||
Add Todo
|
||||
</button>
|
||||
<button @click="() => refresh()">
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.completed {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
</style>
|
||||
@@ -1,19 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
const route = useRoute()
|
||||
const { $client } = useNuxtApp()
|
||||
const { data: todo, pending, error } = await $client.todo.getTodo.query(Number(route.params.id))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="pending">
|
||||
Loading...
|
||||
</div>
|
||||
<div v-else-if="error?.data?.code">
|
||||
{{ error.data.code }}
|
||||
</div>
|
||||
<div v-else>
|
||||
ID: {{ todo?.id }} <br>
|
||||
Title: {{ todo?.title }} <br>
|
||||
Completed: {{ todo?.completed }}
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,50 +0,0 @@
|
||||
import { httpBatchLink, loggerLink } from '@trpc/client'
|
||||
import { createTRPCNuxtProxyClient } from 'trpc-nuxt/client'
|
||||
import superjson from 'superjson'
|
||||
import type { AppRouter } from '~~/server/trpc/routers'
|
||||
|
||||
export default defineNuxtPlugin((nuxtApp) => {
|
||||
const client = createTRPCNuxtProxyClient<AppRouter>({
|
||||
transformer: superjson,
|
||||
links: [
|
||||
// adds pretty logs to your console in development and logs errors in production
|
||||
loggerLink({
|
||||
enabled: opts =>
|
||||
process.env.NODE_ENV === 'development'
|
||||
|| (opts.direction === 'down' && opts.result instanceof Error),
|
||||
}),
|
||||
httpBatchLink({
|
||||
url: 'http://localhost:3000/api/trpc',
|
||||
/**
|
||||
* Set custom request headers on every request from tRPC
|
||||
* @link https://trpc.io/docs/ssr
|
||||
*/
|
||||
headers() {
|
||||
if (nuxtApp.ssrContext?.event?.req) {
|
||||
// To use SSR properly, you need to forward the client's headers to the server
|
||||
// This is so you can pass through things like cookies when we're server-side rendering
|
||||
|
||||
// If you're using Node 18, omit the "connection" header
|
||||
const {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
connection: _connection,
|
||||
...headers
|
||||
} = nuxtApp.ssrContext.event.req.headers
|
||||
return {
|
||||
...headers,
|
||||
// Optional: inform server that it's an SSR request
|
||||
'x-ssr': '1',
|
||||
}
|
||||
}
|
||||
return {}
|
||||
},
|
||||
}),
|
||||
],
|
||||
})
|
||||
|
||||
return {
|
||||
provide: {
|
||||
client,
|
||||
},
|
||||
}
|
||||
})
|
||||
@@ -1,23 +0,0 @@
|
||||
import { createNuxtApiHandler } from 'trpc-nuxt'
|
||||
import { appRouter } from '../../trpc/routers'
|
||||
import { createContext } from '~~/server/trpc/context'
|
||||
|
||||
export default createNuxtApiHandler({
|
||||
router: appRouter,
|
||||
/**
|
||||
* @link https://trpc.io/docs/context
|
||||
*/
|
||||
createContext,
|
||||
onError({ error }) {
|
||||
if (error.code === 'INTERNAL_SERVER_ERROR') {
|
||||
// send to bug reporting
|
||||
console.error('Something went wrong', error)
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @link https://trpc.io/docs/caching#api-response-caching
|
||||
*/
|
||||
// responseMeta() {
|
||||
// // ...
|
||||
// },
|
||||
})
|
||||
@@ -1,17 +0,0 @@
|
||||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||
import type { inferAsyncReturnType } from '@trpc/server'
|
||||
import type { H3Event } from 'h3'
|
||||
|
||||
export type Context = inferAsyncReturnType<typeof createContext>
|
||||
|
||||
/**
|
||||
* Creates context for an incoming request
|
||||
* @link https://trpc.io/docs/context
|
||||
*/
|
||||
export async function createContext(
|
||||
opts: H3Event,
|
||||
) {
|
||||
// for API-response caching see https://trpc.io/docs/caching
|
||||
|
||||
return {}
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
import { initTRPC } from '@trpc/server'
|
||||
import superjson from 'superjson'
|
||||
import type { Context } from './context'
|
||||
|
||||
const t = initTRPC.context<Context>().create({
|
||||
transformer: superjson,
|
||||
})
|
||||
|
||||
/**
|
||||
* Create a router
|
||||
* @see https://trpc.io/docs/v10/router
|
||||
*/
|
||||
export const router = t.router
|
||||
|
||||
/**
|
||||
* Create an unprotected procedure
|
||||
* @see https://trpc.io/docs/v10/procedures
|
||||
**/
|
||||
export const publicProcedure = t.procedure
|
||||
|
||||
/**
|
||||
* @see https://trpc.io/docs/v10/middlewares
|
||||
*/
|
||||
export const middleware = t.middleware
|
||||
|
||||
/**
|
||||
* @see https://trpc.io/docs/v10/merging-routers
|
||||
*/
|
||||
export const mergeRouters = t.mergeRouters
|
||||
@@ -1,10 +0,0 @@
|
||||
import { router } from '..'
|
||||
import { todoRouter } from './todo'
|
||||
import { userRouter } from './user'
|
||||
|
||||
export const appRouter = router({
|
||||
todo: todoRouter,
|
||||
user: userRouter,
|
||||
})
|
||||
|
||||
export type AppRouter = typeof appRouter
|
||||
@@ -1,33 +0,0 @@
|
||||
import { z } from 'zod'
|
||||
import { publicProcedure, router } from '..'
|
||||
|
||||
const baseURL = 'https://jsonplaceholder.typicode.com'
|
||||
|
||||
const TodoShape = z.object({
|
||||
userId: z.number(),
|
||||
id: z.number(),
|
||||
title: z.string(),
|
||||
completed: z.boolean(),
|
||||
})
|
||||
|
||||
export type Todo = z.infer<typeof TodoShape>
|
||||
|
||||
export const todoRouter = router({
|
||||
getTodos: publicProcedure
|
||||
.query(() => {
|
||||
return $fetch<Todo[]>(`${baseURL}/todos`)
|
||||
}),
|
||||
getTodo: publicProcedure
|
||||
.input(z.number())
|
||||
.query((req) => {
|
||||
return $fetch<Todo>(`${baseURL}/todos/${req.input}`)
|
||||
}),
|
||||
addTodo: publicProcedure
|
||||
.input(TodoShape)
|
||||
.mutation((req) => {
|
||||
return $fetch<Todo>(`${baseURL}/todos`, {
|
||||
method: 'POST',
|
||||
body: req.input,
|
||||
})
|
||||
}),
|
||||
})
|
||||
@@ -1,33 +0,0 @@
|
||||
import { z } from 'zod'
|
||||
import { publicProcedure, router } from '..'
|
||||
|
||||
const baseURL = 'https://jsonplaceholder.typicode.com'
|
||||
|
||||
const UserShape = z.object({
|
||||
id: z.number(),
|
||||
name: z.string(),
|
||||
username: z.string(),
|
||||
email: z.string(),
|
||||
})
|
||||
|
||||
export type User = z.infer<typeof UserShape>
|
||||
|
||||
export const userRouter = router({
|
||||
getUsers: publicProcedure
|
||||
.query(() => {
|
||||
return $fetch<User[]>(`${baseURL}/users`)
|
||||
}),
|
||||
getUser: publicProcedure
|
||||
.input(z.number())
|
||||
.query((req) => {
|
||||
return $fetch<User>(`${baseURL}/users/${req.input}`)
|
||||
}),
|
||||
addUser: publicProcedure
|
||||
.input(UserShape)
|
||||
.mutation((req) => {
|
||||
return $fetch<User>(`${baseURL}/users`, {
|
||||
method: 'POST',
|
||||
body: req.input,
|
||||
})
|
||||
}),
|
||||
})
|
||||
@@ -1,4 +0,0 @@
|
||||
{
|
||||
// https://v3.nuxtjs.org/concepts/typescript
|
||||
"extends": "./.nuxt/tsconfig.json"
|
||||
}
|
||||
Reference in New Issue
Block a user