arthur/trpc-nuxt
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/trpc-nuxt.git synced 2026-01-14 12:14:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

remove asyncdata helpers

Browse Source
This commit is contained in:
Robert Soriano
2022-05-17 18:04:30 -07:00
parent f4a9d7e127
commit d3b99a6e72
6 changed files with 3 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
README.md
View File

@@ -58,24 +58,6 @@ Use the client like so:
<script setup lang="ts">
const client = useClient()
const data = await client.query('hello')
console.log(data) // => 👈 world
</script>
```
## Composables
Composables are auto-imported.
### `useClient()`
A typesafe client with the `createTRPCClient` method from `@trpc/client`.
```html
<script setup lang="ts">
const client = useClient()
const bilbo = await client.query('getUser', 'id_bilbo');
// => { id: 'id_bilbo', name: 'Bilbo' };
@@ -83,28 +65,3 @@ const frodo = await client.mutation('createUser', { name: 'Frodo' });
// => { id: 'id_frodo', name: 'Frodo' };
</script>
```
### `useClientQuery`
`client.query` wrapped in [`useAsyncData`](https://v3.nuxtjs.org/guide/features/data-fetching/#useasyncdata).
```html
<script setup lang="ts">
const { data, pending, refresh, error } = await useClientQuery('getUser', 'id_bilbo');
console.log(data.value) // => { id: 'id_frodo', name: 'Frodo' };
</script>
```
### `useLazyClientQuery`
`client.query` wrapped in [`useLazyAsyncData`](https://v3.nuxtjs.org/guide/features/data-fetching/#uselazyasyncdata).
```html
<script setup lang="ts">
const { data, pending, refresh, error } = await useLazyClientQuery('getUser', 'id_bilbo');
console.log(data.value) // => { id: 'id_frodo', name: 'Frodo' };
</script>
```

1
client.d.ts vendored
View File

@@ -1 +0,0 @@
export * from './dist/runtime/client'

5
package.json
View File

@@ -15,10 +15,6 @@
"./api": {
"import": "./dist/runtime/api.mjs",
"types": "./dist/runtime/api.d.ts"
},
"./client": {
"import": "./dist/runtime/client.mjs",
"types": "./dist/runtime/client.d.ts"
}
},
"files": [
@@ -39,7 +35,6 @@
"@trpc/server": "^9.23.2",
"fs-extra": "^10.1.0",
"h3": "^0.7.8",
"ohash": "^0.1.0",
"pathe": "^0.3.0",
"ufo": "^0.8.4"
},

3
pnpm-lock.yaml generated
View File

@@ -16,7 +16,6 @@ importers:
fs-extra: ^10.1.0
h3: ^0.7.8
nuxt: ^3.0.0-rc.3
ohash: ^0.1.0
pathe: ^0.3.0
pnpm: ^7.1.0
trpc-nuxt: workspace:*
@@ -28,7 +27,6 @@ importers:
'@trpc/server': 9.23.4
fs-extra: 10.1.0
h3: 0.7.8
ohash: 0.1.0
pathe: 0.3.0
ufo: 0.8.4
devDependencies:
@@ -4668,6 +4666,7 @@ packages:
/ohash/0.1.0:
resolution: {integrity: sha512-KvclyhWseX6F2UTEEp9Qzybb0LTGorTSVufAToV5tR2B6Q64rVhKhkcU/o+mBaiqGa5+PdobtfSVelp8VOCR6A==}
dev: true
/ohmyfetch/0.4.17:
resolution: {integrity: sha512-jUpCDJIDlTZdS4PE3veoHIXoUSm2NRJfFMIROd29/qeOsbJEoEYBzJ6re+W1hskc44ej11IL//scfhckIcCN8Q==}

17
src/module.ts
View File

@@ -15,10 +15,6 @@ export default defineNuxtModule<ModuleOptions>({
const clientPath = join(nuxt.options.buildDir, 'trpc-client.ts')
const handlerPath = join(nuxt.options.buildDir, 'trpc-handler.ts')
nuxt.hook('config', (options) => {
options?.build?.transpile?.push('trpc-nuxt/client')
})
addServerHandler({
route: '/trpc/*',
handler: handlerPath,
@@ -26,8 +22,6 @@ export default defineNuxtModule<ModuleOptions>({
nuxt.hook('autoImports:extend', (imports) => {
imports.push(
{ name: 'useTrpcQuery', from: clientPath },
{ name: 'useLazyTrpcQuery', from: clientPath },
{ name: 'useClient', from: clientPath },
)
})
@@ -36,22 +30,15 @@ export default defineNuxtModule<ModuleOptions>({
await fs.writeFile(clientPath, `
import * as trpc from '@trpc/client'
import { createTRPCComposables } from 'trpc-nuxt/client'
import type { router } from '~/trpc'
const client = trpc.createTRPCClient<typeof router>({
url: process.browser ? '/trpc' : 'http://localhost:3000/trpc',
})
const {
useClientQuery,
useLazyClientQuery,
useClient
} = createTRPCComposables<typeof router>(client)
const useClient = () => client
export {
useClientQuery,
useLazyClientQuery,
useClient
}
`)

62
src/runtime/client.ts
View File

@@ -1,62 +0,0 @@
import { objectHash } from 'ohash'
import type { TRPCClient } from '@trpc/client'
import type { AnyRouter, inferProcedureInput, inferProcedureOutput } from '@trpc/server'
import type { AsyncData, KeyOfRes, PickFrom, _Transform } from 'nuxt/dist/app/composables/asyncData'
// @ts-expect-error: Resolved by Nuxt
import { useAsyncData, useLazyAsyncData } from '#imports'
export function createTRPCComposables<
Router extends AnyRouter,
Client extends TRPCClient<Router> = TRPCClient<Router>,
TQuery extends keyof Router['_def']['queries'] = keyof Router['_def']['queries'],
>(
client: Client
): {
useClientQuery: <
TRouteKey extends TQuery,
ProcedureInput = inferProcedureInput<Router['_def']['queries'][TRouteKey]>,
ProcedureOutput = inferProcedureOutput<Router['_def']['queries'][TRouteKey]>,
>(
path: TRouteKey,
input: ProcedureInput
) => AsyncData<
PickFrom<
ProcedureOutput,
KeyOfRes<_Transform<ProcedureOutput, ProcedureOutput>>
>,
true | Error
>
useLazyClientQuery: <
TRouteKey extends TQuery,
ProcedureInput = inferProcedureInput<Router['_def']['queries'][TRouteKey]>,
ProcedureOutput = inferProcedureOutput<Router['_def']['queries'][TRouteKey]>,
>(
path: TRouteKey,
input: ProcedureInput
) => AsyncData<
PickFrom<
ProcedureOutput,
KeyOfRes<_Transform<ProcedureOutput, ProcedureOutput>>
>,
true | Error
>
useClient: () => Client
}
export function createTRPCComposables(client) {
const useClientQuery = (...args) => {
return useAsyncData(`trpc-${objectHash(args[0] + (args[1] ? JSON.stringify(args[1]) : ''))}`, () => client.query(...args))
}
const useLazyClientQuery = (...args) => {
return useLazyAsyncData(`trpc-${objectHash(args[0] + (args[1] ? JSON.stringify(args[1]) : ''))}`, () => client.query(...args))
}
const useClient = () => client
return {
useClientQuery,
useLazyClientQuery,
useClient,
}
}