mirror of
https://github.com/ArthurDanjou/trpc-nuxt.git
synced 2026-01-14 12:14:40 +01:00
remove examples folder
This commit is contained in:
wobsoriano
7
examples/custom/.gitignore
vendored
7
examples/custom/.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,7 +0,0 @@
|
|||||||
// https://v3.nuxtjs.org/api/configuration/nuxt.config
|
|
||||||
export default defineNuxtConfig({
|
|
||||||
modules: ['trpc-nuxt'],
|
|
||||||
trpc: {
|
|
||||||
enableFileRouting: false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
@@ -1,20 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "custom",
|
|
||||||
"private": true,
|
|
||||||
"scripts": {
|
|
||||||
"build": "nuxt build",
|
|
||||||
"dev": "nuxt dev",
|
|
||||||
"generate": "nuxt generate",
|
|
||||||
"preview": "nuxt preview"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@trpc/client": "10.0.0-rc.4",
|
|
||||||
"@trpc/server": "10.0.0-rc.4",
|
|
||||||
"superjson": "^1.11.0",
|
|
||||||
"trpc-nuxt": "workspace:*",
|
|
||||||
"zod": "^3.19.1"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"nuxt": "3.0.0-rc.13"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,67 +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 x = await $client.todo.addTodo.mutate({
|
|
||||||
id: Date.now(),
|
|
||||||
userId: 69,
|
|
||||||
title,
|
|
||||||
completed: false
|
|
||||||
})
|
|
||||||
console.log(x.data.value)
|
|
||||||
} catch (e) {
|
|
||||||
console.log(e)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const { data: todos, pending, error, refresh } = await $client.todo.getTodos.query(undefined, {
|
|
||||||
trpc: {
|
|
||||||
abortOnUnmount: true
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</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,27 +0,0 @@
|
|||||||
import { httpBatchLink, loggerLink } from '@trpc/client'
|
|
||||||
import { createTRPCNuxtProxyClient } from 'trpc-nuxt/client'
|
|
||||||
import superjson from 'superjson'
|
|
||||||
import { AppRouter } from '~~/server/trpc/routers'
|
|
||||||
|
|
||||||
export default defineNuxtPlugin(() => {
|
|
||||||
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'
|
|
||||||
})
|
|
||||||
]
|
|
||||||
})
|
|
||||||
|
|
||||||
return {
|
|
||||||
provide: {
|
|
||||||
client
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
import { createNuxtApiHandler } from 'trpc-nuxt/handler'
|
|
||||||
import { appRouter } from '@/server/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 function createContext (
|
|
||||||
opts: H3Event
|
|
||||||
) {
|
|
||||||
// for API-response caching see https://trpc.io/docs/caching
|
|
||||||
|
|
||||||
return {}
|
|
||||||
}
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
import { router } from '../trpc'
|
|
||||||
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 '../trpc'
|
|
||||||
|
|
||||||
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 '../trpc'
|
|
||||||
|
|
||||||
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,43 +0,0 @@
|
|||||||
import { initTRPC } from '@trpc/server'
|
|
||||||
import superjson from 'superjson'
|
|
||||||
import { ZodError } from 'zod'
|
|
||||||
import type { Context } from './context'
|
|
||||||
|
|
||||||
const t = initTRPC.context<Context>().create({
|
|
||||||
transformer: superjson,
|
|
||||||
errorFormatter ({ shape, error }) {
|
|
||||||
return {
|
|
||||||
...shape,
|
|
||||||
data: {
|
|
||||||
...shape.data,
|
|
||||||
zodError:
|
|
||||||
error.code === 'BAD_REQUEST' &&
|
|
||||||
error.cause instanceof ZodError
|
|
||||||
? error.cause!.flatten()
|
|
||||||
: null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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,4 +0,0 @@
|
|||||||
{
|
|
||||||
// https://v3.nuxtjs.org/concepts/typescript
|
|
||||||
"extends": "./.nuxt/tsconfig.json"
|
|
||||||
}
|
|
||||||
@@ -1,4 +1,7 @@
|
|||||||
// https://v3.nuxtjs.org/api/configuration/nuxt.config
|
// https://v3.nuxtjs.org/api/configuration/nuxt.config
|
||||||
export default defineNuxtConfig({
|
export default defineNuxtConfig({
|
||||||
modules: ['trpc-nuxt']
|
modules: ['trpc-nuxt'],
|
||||||
|
trpc: {
|
||||||
|
enableFileRouting: true
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
17
pnpm-lock.yaml
generated
17
pnpm-lock.yaml
generated
@@ -63,23 +63,6 @@ importers:
|
|||||||
nuxt: 3.0.0-rc.13
|
nuxt: 3.0.0-rc.13
|
||||||
vue-plausible: 1.3.2
|
vue-plausible: 1.3.2
|
||||||
|
|
||||||
examples/custom:
|
|
||||||
specifiers:
|
|
||||||
'@trpc/client': 10.0.0-rc.4
|
|
||||||
'@trpc/server': 10.0.0-rc.4
|
|
||||||
nuxt: 3.0.0-rc.13
|
|
||||||
superjson: ^1.11.0
|
|
||||||
trpc-nuxt: workspace:*
|
|
||||||
zod: ^3.19.1
|
|
||||||
dependencies:
|
|
||||||
'@trpc/client': 10.0.0-rc.4_@trpc+server@10.0.0-rc.4
|
|
||||||
'@trpc/server': 10.0.0-rc.4
|
|
||||||
superjson: 1.11.0
|
|
||||||
trpc-nuxt: link:../..
|
|
||||||
zod: 3.19.1
|
|
||||||
devDependencies:
|
|
||||||
nuxt: 3.0.0-rc.13
|
|
||||||
|
|
||||||
playground:
|
playground:
|
||||||
specifiers:
|
specifiers:
|
||||||
'@trpc/client': 10.0.0-rc.4
|
'@trpc/client': 10.0.0-rc.4
|
||||||
|
|||||||
Reference in New Issue
Block a user