mirror of
https://github.com/ArthurDanjou/trpc-nuxt.git
synced 2026-01-23 08:20:37 +01:00
Compare commits
19 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
a8e5538b05 | ||
|
|
24ecb41429 | ||
|
|
e8bf427d2b | ||
|
|
347d49482f | ||
|
|
2f7a1276ad | ||
|
|
f6db0c78cd | ||
|
|
d3203f0536 | ||
|
|
83e2b2810d | ||
|
|
2b4fff9faa | ||
|
|
752fe721a2 | ||
|
|
808cac4756 | ||
|
|
0c44f73c9f | ||
|
|
182875a781 | ||
|
|
0298f836b8 | ||
|
|
ea50430945 | ||
|
|
0e240663ca | ||
|
|
bdeada0e6e | ||
|
|
88214185a8 | ||
|
|
ad03ae7b65 |
2
.gitignore
vendored
2
.gitignore
vendored
@@ -49,3 +49,5 @@ coverage
|
|||||||
Network Trash Folder
|
Network Trash Folder
|
||||||
Temporary Items
|
Temporary Items
|
||||||
.apdisk
|
.apdisk
|
||||||
|
|
||||||
|
.vercel
|
||||||
|
|||||||
@@ -30,6 +30,7 @@ export default defineNuxtConfig({
|
|||||||
trpc: {
|
trpc: {
|
||||||
baseURL: '', // Set empty string (default) to make requests by relative address
|
baseURL: '', // Set empty string (default) to make requests by relative address
|
||||||
endpoint: '/trpc', // defaults to /trpc
|
endpoint: '/trpc', // defaults to /trpc
|
||||||
|
installPlugin: true, // defaults to true. Add @trpc/client plugin and composables
|
||||||
},
|
},
|
||||||
typescript: {
|
typescript: {
|
||||||
strict: true // required to make input/output types work
|
strict: true // required to make input/output types work
|
||||||
@@ -113,6 +114,8 @@ headers.value.Authorization = `Bearer ${token}`
|
|||||||
// All client calls will now include the Authorization header.
|
// All client calls will now include the Authorization header.
|
||||||
```
|
```
|
||||||
|
|
||||||
|
If your app needs transformers and other option that needs to be passed in `@trpc/client`, you will need to opt-out of the plugin by setting `installPlugin` to false in your `nuxt.config.ts` file and create your own. You can just copy the contents of the client plugin [here](https://github.com/wobsoriano/trpc-nuxt/blob/master/src/runtime/client.ts).
|
||||||
|
|
||||||
## Options
|
## Options
|
||||||
|
|
||||||
trpc-nuxt accepts the following options exposed under `~/server/trpc/index.ts`:
|
trpc-nuxt accepts the following options exposed under `~/server/trpc/index.ts`:
|
||||||
|
|||||||
27
package.json
27
package.json
@@ -1,20 +1,19 @@
|
|||||||
{
|
{
|
||||||
"name": "trpc-nuxt",
|
"name": "trpc-nuxt",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"version": "0.3.1",
|
"version": "0.3.3",
|
||||||
"packageManager": "pnpm@7.5.0",
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"main": "./dist/module.cjs",
|
"main": "./dist/module.cjs",
|
||||||
"types": "./dist/types.d.ts",
|
"types": "./dist/types.d.ts",
|
||||||
"exports": {
|
"exports": {
|
||||||
"./package.json": "./package.json",
|
"./package.json": "./package.json",
|
||||||
".": {
|
".": {
|
||||||
"import": "./dist/module.mjs",
|
"require": "./dist/module.cjs",
|
||||||
"require": "./dist/module.cjs"
|
"import": "./dist/module.mjs"
|
||||||
},
|
},
|
||||||
"./api": {
|
"./api": {
|
||||||
"import": "./dist/runtime/api.mjs",
|
"types": "./dist/runtime/api.d.ts",
|
||||||
"types": "./dist/runtime/api.d.ts"
|
"import": "./dist/runtime/api.mjs"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"files": [
|
"files": [
|
||||||
@@ -22,35 +21,37 @@
|
|||||||
"*.d.ts"
|
"*.d.ts"
|
||||||
],
|
],
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"prepublishOnly": "nr build",
|
"prepublishOnly": "pnpm build",
|
||||||
"build": "nuxt-module-build",
|
"build": "nuxt-module-build",
|
||||||
"play": "nr build && nuxi dev playground",
|
"play": "pnpm build && nuxi dev playground",
|
||||||
"build:playground": "nuxi build playground",
|
"build:playground": "nuxi build playground",
|
||||||
"lint": "eslint .",
|
"lint": "eslint .",
|
||||||
"lint:fix": "eslint . --fix",
|
"lint:fix": "eslint . --fix",
|
||||||
"release": "bumpp --commit --push --tag && npm publish",
|
"release": "bumpp --commit --push --tag && npm publish",
|
||||||
"prepare": "nuxi prepare playground"
|
"prepare": "nuxi prepare playground"
|
||||||
},
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@trpc/client": "<10.0.0",
|
||||||
|
"@trpc/server": "<10.0.0"
|
||||||
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nuxt/kit": "3.0.0-rc.12",
|
"@nuxt/kit": "3.0.0-rc.13",
|
||||||
"@trpc/client": "^9.27.4",
|
"@trpc/client": "^9.27.4",
|
||||||
"@trpc/server": "^9.27.4",
|
"@trpc/server": "^9.27.4",
|
||||||
"dedent": "^0.7.0",
|
"dedent": "^0.7.0",
|
||||||
"defu": "^6.1.0",
|
"defu": "^6.1.0",
|
||||||
"h3": "^0.8.5",
|
"h3": "^0.8.6",
|
||||||
"ohash": "^0.1.5",
|
"ohash": "^0.1.5",
|
||||||
"pathe": "^0.3.9",
|
"pathe": "^0.3.9",
|
||||||
"ufo": "^0.8.6"
|
"ufo": "^0.8.6"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@antfu/eslint-config": "^0.23.1",
|
"@antfu/eslint-config": "^0.23.1",
|
||||||
"@antfu/ni": "^0.16.2",
|
|
||||||
"@nuxt/module-builder": "^0.2.0",
|
"@nuxt/module-builder": "^0.2.0",
|
||||||
"@types/dedent": "^0.7.0",
|
"@types/dedent": "^0.7.0",
|
||||||
"bumpp": "^7.2.0",
|
"bumpp": "^7.2.0",
|
||||||
"eslint": "^8.25.0",
|
"eslint": "^8.25.0",
|
||||||
"nuxt": "3.0.0-rc.12",
|
"nuxt": "3.0.0-rc.13",
|
||||||
"pnpm": "^7.5.0",
|
|
||||||
"trpc-nuxt": "workspace:*",
|
"trpc-nuxt": "workspace:*",
|
||||||
"zod": "^3.19.1"
|
"zod": "^3.19.1"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -6,7 +6,4 @@ export default defineNuxtConfig({
|
|||||||
runtimeConfig: {
|
runtimeConfig: {
|
||||||
baseURL: '',
|
baseURL: '',
|
||||||
},
|
},
|
||||||
typescript: {
|
|
||||||
strict: true,
|
|
||||||
},
|
|
||||||
})
|
})
|
||||||
|
|||||||
1748
pnpm-lock.yaml
generated
1748
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -3,23 +3,29 @@ import { join, resolve } from 'pathe'
|
|||||||
import { defu } from 'defu'
|
import { defu } from 'defu'
|
||||||
import dedent from 'dedent'
|
import dedent from 'dedent'
|
||||||
|
|
||||||
import { addImports, addPlugin, addServerHandler, addTemplate, defineNuxtModule } from '@nuxt/kit'
|
import { addImports, addPlugin, addServerHandler, addTemplate, defineNuxtModule, useLogger } from '@nuxt/kit'
|
||||||
|
|
||||||
export interface ModuleOptions {
|
export interface ModuleOptions {
|
||||||
baseURL: string
|
baseURL: string
|
||||||
endpoint: string
|
endpoint: string
|
||||||
|
installPlugin?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const metaName = 'trpc-nuxt'
|
||||||
|
|
||||||
export default defineNuxtModule<ModuleOptions>({
|
export default defineNuxtModule<ModuleOptions>({
|
||||||
meta: {
|
meta: {
|
||||||
name: 'trpc-nuxt',
|
name: metaName,
|
||||||
configKey: 'trpc',
|
configKey: 'trpc',
|
||||||
},
|
},
|
||||||
defaults: {
|
defaults: {
|
||||||
baseURL: '',
|
baseURL: '',
|
||||||
endpoint: '/trpc',
|
endpoint: '/trpc',
|
||||||
|
installPlugin: true,
|
||||||
},
|
},
|
||||||
async setup(options, nuxt) {
|
async setup(options, nuxt) {
|
||||||
|
const logger = useLogger(metaName)
|
||||||
|
|
||||||
const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
|
const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
|
||||||
nuxt.options.build.transpile.push(runtimeDir, '#build/trpc-handler')
|
nuxt.options.build.transpile.push(runtimeDir, '#build/trpc-handler')
|
||||||
|
|
||||||
@@ -30,22 +36,14 @@ export default defineNuxtModule<ModuleOptions>({
|
|||||||
const finalConfig = nuxt.options.runtimeConfig.public.trpc = defu(nuxt.options.runtimeConfig.public.trpc, {
|
const finalConfig = nuxt.options.runtimeConfig.public.trpc = defu(nuxt.options.runtimeConfig.public.trpc, {
|
||||||
baseURL: options.baseURL,
|
baseURL: options.baseURL,
|
||||||
endpoint: options.endpoint,
|
endpoint: options.endpoint,
|
||||||
|
installPlugin: options.installPlugin,
|
||||||
})
|
})
|
||||||
|
|
||||||
addImports([
|
|
||||||
{ name: 'useClient', from: join(runtimeDir, 'client') },
|
|
||||||
{ name: 'useAsyncQuery', from: join(runtimeDir, 'client') },
|
|
||||||
{ name: 'useClientHeaders', from: join(runtimeDir, 'client') },
|
|
||||||
{ name: 'getQueryKey', from: join(runtimeDir, 'client') },
|
|
||||||
])
|
|
||||||
|
|
||||||
addServerHandler({
|
addServerHandler({
|
||||||
route: `${finalConfig.endpoint}/*`,
|
route: `${finalConfig.endpoint}/*`,
|
||||||
handler: handlerPath,
|
handler: handlerPath,
|
||||||
})
|
})
|
||||||
|
|
||||||
addPlugin(resolve(runtimeDir, 'plugin'))
|
|
||||||
|
|
||||||
addTemplate({
|
addTemplate({
|
||||||
filename: 'trpc-handler.ts',
|
filename: 'trpc-handler.ts',
|
||||||
write: true,
|
write: true,
|
||||||
@@ -61,6 +59,22 @@ export default defineNuxtModule<ModuleOptions>({
|
|||||||
`
|
`
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
if (finalConfig.installPlugin) {
|
||||||
|
addImports([
|
||||||
|
{ name: 'useClient', from: join(runtimeDir, 'client') },
|
||||||
|
{ name: 'useAsyncQuery', from: join(runtimeDir, 'client') },
|
||||||
|
{ name: 'useClientHeaders', from: join(runtimeDir, 'client') },
|
||||||
|
{ name: 'getQueryKey', from: join(runtimeDir, 'client') },
|
||||||
|
])
|
||||||
|
|
||||||
|
addPlugin(resolve(runtimeDir, 'plugin'))
|
||||||
|
|
||||||
|
logger.success('Plugin successfully installed.')
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
logger.info('Plugin not installed. Create your own @trpc/client client plugin and composables.')
|
||||||
|
}
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -51,25 +51,14 @@ export async function useAsyncQuery<
|
|||||||
): Promise<AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, TError>> {
|
): Promise<AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, TError>> {
|
||||||
const { $client } = useNuxtApp()
|
const { $client } = useNuxtApp()
|
||||||
const key = getQueryKey(pathAndInput)
|
const key = getQueryKey(pathAndInput)
|
||||||
const serverError = useState<TError | null>(`error-${key}`, () => null)
|
const result = await useAsyncData(
|
||||||
const { error, data, ...rest } = await useAsyncData(
|
|
||||||
key,
|
key,
|
||||||
() => $client.query(...pathAndInput),
|
() => $client.query(...pathAndInput),
|
||||||
// @ts-expect-error: Internal
|
// @ts-expect-error: Internal
|
||||||
options,
|
options,
|
||||||
)
|
)
|
||||||
|
|
||||||
if (process.server && error.value && !serverError.value)
|
return result as any
|
||||||
serverError.value = error.value as any
|
|
||||||
|
|
||||||
if (data.value)
|
|
||||||
serverError.value = null
|
|
||||||
|
|
||||||
return {
|
|
||||||
...rest,
|
|
||||||
data,
|
|
||||||
error: serverError,
|
|
||||||
} as any
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function useClient(): TRPCClient<AppRouter> {
|
export function useClient(): TRPCClient<AppRouter> {
|
||||||
|
|||||||
Reference in New Issue
Block a user