mirror of
https://github.com/ArthurDanjou/trpc-nuxt.git
synced 2026-01-14 20:19:33 +01:00
Compare commits
9 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
fca82a027e | ||
|
|
7995e892db | ||
|
|
8168a46985 | ||
|
|
2a23f4303d | ||
|
|
ff4bbebb0b | ||
|
|
354bf5d707 | ||
|
|
e7d160ee48 | ||
|
|
9bf6d57c2c | ||
|
|
6bca1e621d |
2
.nuxtrc
Normal file
2
.nuxtrc
Normal file
@@ -0,0 +1,2 @@
|
||||
imports.autoImport=false
|
||||
typescript.includeWorkspace=true
|
||||
@@ -18,7 +18,7 @@ End-to-end typesafe APIs with [tRPC.io](https://trpc.io/) in Nuxt applications.
|
||||
## Install
|
||||
|
||||
```bash
|
||||
npm i trpc-nuxt
|
||||
npm i trpc-nuxt@0.3
|
||||
```
|
||||
|
||||
```ts
|
||||
|
||||
37
package.json
37
package.json
@@ -1,10 +1,8 @@
|
||||
{
|
||||
"name": "trpc-nuxt",
|
||||
"type": "module",
|
||||
"version": "0.3.3",
|
||||
"version": "0.3.6",
|
||||
"license": "MIT",
|
||||
"main": "./dist/module.cjs",
|
||||
"types": "./dist/types.d.ts",
|
||||
"exports": {
|
||||
"./package.json": "./package.json",
|
||||
".": {
|
||||
@@ -16,15 +14,18 @@
|
||||
"import": "./dist/runtime/api.mjs"
|
||||
}
|
||||
},
|
||||
"main": "./dist/module.cjs",
|
||||
"types": "./dist/types.d.ts",
|
||||
"files": [
|
||||
"dist",
|
||||
"*.d.ts"
|
||||
],
|
||||
"scripts": {
|
||||
"prepublishOnly": "pnpm build",
|
||||
"build": "nuxt-module-build",
|
||||
"play": "pnpm build && nuxi dev playground",
|
||||
"build:playground": "nuxi build playground",
|
||||
"dev": "nuxi dev playground",
|
||||
"dev:build": "nuxi build playground",
|
||||
"dev:preview": "nuxi preview playground",
|
||||
"dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
|
||||
"lint": "eslint .",
|
||||
"lint:fix": "eslint . --fix",
|
||||
"release": "bumpp --commit --push --tag && npm publish",
|
||||
@@ -35,25 +36,25 @@
|
||||
"@trpc/server": "<10.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nuxt/kit": "3.0.0-rc.13",
|
||||
"@nuxt/kit": "3.0.0",
|
||||
"@trpc/client": "^9.27.4",
|
||||
"@trpc/server": "^9.27.4",
|
||||
"dedent": "^0.7.0",
|
||||
"defu": "^6.1.0",
|
||||
"h3": "^0.8.6",
|
||||
"ohash": "^0.1.5",
|
||||
"pathe": "^0.3.9",
|
||||
"ufo": "^0.8.6"
|
||||
"defu": "^6.1.1",
|
||||
"h3": "^1.0.2",
|
||||
"ofetch": "^1.0.0",
|
||||
"ohash": "^1.0.0",
|
||||
"pathe": "^1.0.0",
|
||||
"ufo": "^1.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@antfu/eslint-config": "^0.23.1",
|
||||
"@nuxt/module-builder": "^0.2.0",
|
||||
"@antfu/eslint-config": "^0.34.0",
|
||||
"@nuxt/module-builder": "^0.2.1",
|
||||
"@types/dedent": "^0.7.0",
|
||||
"bumpp": "^7.2.0",
|
||||
"bumpp": "^8.2.1",
|
||||
"eslint": "^8.25.0",
|
||||
"nuxt": "3.0.0-rc.13",
|
||||
"trpc-nuxt": "workspace:*",
|
||||
"zod": "^3.19.1"
|
||||
"nuxt": "3.0.0",
|
||||
"zod": "^3.20.2"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": "@antfu",
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
const counter = useCookie('counter')
|
||||
counter.value = counter.value || Math.round(Math.random() * 1000)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h1> Counter: {{ counter || '-' }}</h1>
|
||||
<button @click="counter = null">
|
||||
reset
|
||||
</button>
|
||||
<button @click="counter--">
|
||||
-
|
||||
</button>
|
||||
<button @click="counter++">
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { useAsyncQuery, useClient, useClientHeaders } from '#imports'
|
||||
const client = useClient()
|
||||
const headers = useClientHeaders()
|
||||
const { data: todos, pending, error, refresh } = await useAsyncQuery(['getTodos'])
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { useAsyncQuery, useRoute } from '#imports'
|
||||
const route = useRoute()
|
||||
const { data: todo, pending, error } = await useAsyncQuery(['getTodo', Number(route.params.id)])
|
||||
</script>
|
||||
@@ -11,8 +12,8 @@ const { data: todo, pending, error } = await useAsyncQuery(['getTodo', Number(ro
|
||||
{{ error.data.code }}
|
||||
</div>
|
||||
<div v-else>
|
||||
ID: {{ todo.id }} <br>
|
||||
Title: {{ todo.title }} <br>
|
||||
Completed: {{ todo.completed }}
|
||||
ID: {{ todo?.id }} <br>
|
||||
Title: {{ todo?.title }} <br>
|
||||
Completed: {{ todo?.completed }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -29,7 +29,6 @@ export const router = trpc.router<Context>()
|
||||
.mutation('addTodo', {
|
||||
input: TodoShape,
|
||||
async resolve(req) {
|
||||
console.log(req.input)
|
||||
return await $fetch<Todo>(`${baseURL}/todos`, {
|
||||
method: 'POST',
|
||||
body: req.input,
|
||||
@@ -43,7 +42,7 @@ export async function createContext(event: H3Event) {
|
||||
|
||||
// This is just an example of something you'd might want to do in your ctx fn
|
||||
// const x = useCookies(event)
|
||||
console.log(event.req.headers)
|
||||
console.log(event.node.req.headers)
|
||||
|
||||
return {
|
||||
|
||||
|
||||
2221
pnpm-lock.yaml
generated
2221
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -26,12 +26,12 @@ export default defineNuxtModule<ModuleOptions>({
|
||||
async setup(options, nuxt) {
|
||||
const logger = useLogger(metaName)
|
||||
|
||||
const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
|
||||
nuxt.options.build.transpile.push(runtimeDir, '#build/trpc-handler')
|
||||
|
||||
const handlerPath = join(nuxt.options.buildDir, 'trpc-handler.ts')
|
||||
const trpcOptionsPath = join(nuxt.options.srcDir, 'server/trpc')
|
||||
|
||||
const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
|
||||
nuxt.options.build.transpile.push(runtimeDir, handlerPath)
|
||||
|
||||
// Final resolved configuration
|
||||
const finalConfig = nuxt.options.runtimeConfig.public.trpc = defu(nuxt.options.runtimeConfig.public.trpc, {
|
||||
baseURL: options.baseURL,
|
||||
@@ -49,7 +49,7 @@ export default defineNuxtModule<ModuleOptions>({
|
||||
write: true,
|
||||
getContents() {
|
||||
return dedent`
|
||||
import { createTRPCHandler } from 'trpc-nuxt/api'
|
||||
import { createTRPCHandler } from ${JSON.stringify(join(runtimeDir, 'api'))}
|
||||
import * as functions from '${trpcOptionsPath}'
|
||||
|
||||
export default createTRPCHandler({
|
||||
@@ -77,4 +77,3 @@ export default defineNuxtModule<ModuleOptions>({
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
@@ -30,7 +30,7 @@ export interface OnErrorPayload<TRouter extends AnyRouter> {
|
||||
error: TRPCError
|
||||
type: ProcedureType | 'unknown'
|
||||
path: string | undefined
|
||||
req: H3Event['req']
|
||||
req: H3Event['node']['req']
|
||||
input: unknown
|
||||
ctx: undefined | inferRouterContext<TRouter>
|
||||
}
|
||||
@@ -54,7 +54,7 @@ export function createTRPCHandler<Router extends AnyRouter>({
|
||||
const {
|
||||
req,
|
||||
res,
|
||||
} = event
|
||||
} = event.node
|
||||
|
||||
const $url = createURL(req.url!)
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ import type { ProcedureRecord, inferHandlerInput, inferProcedureInput, inferProc
|
||||
import type { TRPCClient, TRPCClientErrorLike } from '@trpc/client'
|
||||
import { objectHash } from 'ohash'
|
||||
import type { Ref } from 'vue'
|
||||
import { useAsyncData, useNuxtApp, useState } from '#app'
|
||||
import { useAsyncData, useNuxtApp, useState } from '#imports'
|
||||
import type { router } from '~/server/trpc'
|
||||
|
||||
type MaybeRef<T> = T | Ref<T>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import * as trpc from '@trpc/client'
|
||||
import { unref } from 'vue'
|
||||
import { FetchError } from 'ohmyfetch'
|
||||
import { FetchError } from 'ofetch'
|
||||
import { useClientHeaders } from './client'
|
||||
import { defineNuxtPlugin, useRequestHeaders, useRuntimeConfig } from '#app'
|
||||
import { defineNuxtPlugin, useRequestHeaders, useRuntimeConfig } from '#imports'
|
||||
import type { router } from '~/server/trpc'
|
||||
|
||||
declare type AppRouter = typeof router
|
||||
|
||||
Reference in New Issue
Block a user