diff --git a/README.md b/README.md index a3f87d9..9cd23a5 100644 --- a/README.md +++ b/README.md @@ -16,12 +16,15 @@ import { defineNuxtConfig } from 'nuxt' export default defineNuxtConfig({ modules: ['trpc-nuxt'], + typescript: { + strict: true // set this to true to infer input/output types + } }) ``` ## Usage -Expose your tRPC [routes](https://trpc.io/docs/router) and [context](https://trpc.io/docs/context) under `~/server/trpc/index.ts`: +Expose your tRPC [routes](https://trpc.io/docs/router) under `~/server/trpc/index.ts`: ```ts // ~/server/trpc/index.ts @@ -41,22 +44,6 @@ export const router = trpc } }, }) - -// Optional -export const createContext = (event: CompatibilityEvent) => { - // ... - return { - /** context data */ - } -} - -// Optional -export const responseMeta = () => { - // ... - return { - // { headers: ... } - } -} ``` Use the client like so: diff --git a/playground/app.vue b/playground/app.vue index ede1f0a..2ca4a57 100644 --- a/playground/app.vue +++ b/playground/app.vue @@ -1,18 +1,28 @@ diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts index 33734ba..33d6bbf 100644 --- a/playground/nuxt.config.ts +++ b/playground/nuxt.config.ts @@ -4,6 +4,9 @@ import Module from '..' // https://v3.nuxtjs.org/api/configuration/nuxt.config export default defineNuxtConfig({ modules: [Module], + runtimeConfig: { + baseURL: 'http://localhost:3000', + }, typescript: { strict: true, }, diff --git a/playground/plugins/trpc.ts b/playground/plugins/trpc.ts new file mode 100644 index 0000000..6c1edb8 --- /dev/null +++ b/playground/plugins/trpc.ts @@ -0,0 +1,17 @@ +import { defineNuxtPlugin } from '#app' + +export default defineNuxtPlugin((nuxtApp) => { + // if (process.server) { + // nuxtApp.hooks.hook('app:rendered', () => { + // nuxtApp.ssrContext[''] + // }) + // } + + // if (process.client) { + // nuxtApp.hooks.hook('app:created', () => { + // console.log('app:created') + // }) + // } + if (nuxtApp.ssrContext) + console.log('hello', nuxtApp.ssrContext) +}) diff --git a/playground/server/trpc/index.ts b/playground/server/trpc/index.ts index e3e6e9f..a59b23b 100644 --- a/playground/server/trpc/index.ts +++ b/playground/server/trpc/index.ts @@ -1,21 +1,45 @@ // ~/server/trpc/index.ts import { z } from 'zod' import * as trpc from '@trpc/server' +import type { inferAsyncReturnType } from '@trpc/server' const fakeUsers = [ - { id: 1, username: 'jcena', name: 'John Cena' }, - { id: 2, username: 'dbatista', name: 'Dave Batista' }, - { id: 3, username: 'jbiden', name: 'Joe Biden' }, + { id: 1, username: 'jcena' }, + { id: 2, username: 'dbatista' }, + { id: 3, username: 'jbiden' }, ] export const router = trpc - .router() + .router>() + .query('getUsers', { + resolve() { + return fakeUsers + }, + }) .query('getUser', { // validate input with Zod input: z.object({ username: z.string().min(5), }), resolve(req) { - return fakeUsers.find(i => i.username === req.input.username) + return fakeUsers.find(i => i.username === req.input.username) ?? null }, }) + .mutation('createUser', { + input: z.object({ username: z.string().min(5) }), + resolve(req) { + const newUser = { + id: fakeUsers.length + 1, + username: req.input.username, + } + fakeUsers.push(newUser) + return newUser + }, + }) + +export const createContext = () => { + // ... + return { + /** context data */ + } +} diff --git a/src/module.ts b/src/module.ts index 361279f..6e5119e 100644 --- a/src/module.ts +++ b/src/module.ts @@ -3,20 +3,26 @@ import { dirname, join } from 'pathe' import { addServerHandler, defineNuxtModule } from '@nuxt/kit' import fs from 'fs-extra' -export interface ModuleOptions {} +export interface ModuleOptions { + baseURL: string + trpcURL: string +} export default defineNuxtModule({ meta: { name: 'trpc-nuxt', configKey: 'trpc', }, - defaults: {}, - async setup(_options, nuxt) { + defaults: { + baseURL: 'http://localhost:3000', + trpcURL: '/api/trpc', + }, + async setup(options, nuxt) { const clientPath = join(nuxt.options.buildDir, 'trpc-client.ts') const handlerPath = join(nuxt.options.buildDir, 'trpc-handler.ts') addServerHandler({ - route: '/trpc/*', + route: `${options.trpcURL}/*`, handler: handlerPath, }) @@ -33,7 +39,7 @@ export default defineNuxtModule({ import type { router } from '~/server/trpc' const client = trpc.createTRPCClient({ - url: process.browser ? '/trpc' : 'http://localhost:3000/trpc', + url: '${options.baseURL}${options.trpcURL}', }) const useClient = () => client @@ -47,7 +53,10 @@ export default defineNuxtModule({ import { createTRPCHandler } from 'trpc-nuxt/api' import * as functions from '~/server/trpc' - export default createTRPCHandler(functions) + export default createTRPCHandler({ + router: functions.router, + ...functions + }) `) }, }) diff --git a/src/runtime/api.ts b/src/runtime/api.ts index 0792102..fbcfaa2 100644 --- a/src/runtime/api.ts +++ b/src/runtime/api.ts @@ -48,7 +48,7 @@ export function createTRPCHandler({ responseMeta?: ResponseMetaFn onError?: OnErrorFn }) { - const url = '/trpc' + const url = '/api/trpc' return defineEventHandler(async (event) => { const {