https://github.com/michealroberts/usetrpc
A composables Vue 3 library for using a tRPC.io client.
https://github.com/michealroberts/usetrpc
trpc typescript vue3 vue3-composition-api vue3-typescript
Last synced: 7 months ago
JSON representation
A composables Vue 3 library for using a tRPC.io client.
- Host: GitHub
- URL: https://github.com/michealroberts/usetrpc
- Owner: michealroberts
- License: mit
- Created: 2022-05-26T12:07:38.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-06-07T13:43:52.000Z (about 4 years ago)
- Last Synced: 2025-02-14T16:46:43.048Z (over 1 year ago)
- Topics: trpc, typescript, vue3, vue3-composition-api, vue3-typescript
- Language: TypeScript
- Homepage:
- Size: 47.9 KB
- Stars: 52
- Watchers: 5
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# useTRPC
A composables Vue 3 library for using a tRPC.io client, bringing end-to-end typesafe APIs to Vue 3.
Please reference the tRPC documenation (https://trpc.io/docs/)[https://trpc.io/docs/] before using this library.
**N.B**. *This library is a work in progress and is not yet ready for usage in production.*
## Installation
```bash
npm install @trpc/vue
```
or
```bash
yarn(pnpm) add @trpc/vue
```
Then, you can simply import what you need:
```
import { useTRPCClient, useTRPCQuery, useTRPCMutation } from '@trpc/vue'
```
## Usage
### Define AppRouter
Be sure to define a tRPC router of type `AppRputer`, e.g.:
```ts
import * as trpc from '@trpc/server';
export const appRouter = trpc
.router()
.query('all', {
resolve({ ctx }) {
return {
greeting: `world`,
};
},
});
export type AppRouter = typeof appRouter
```
Please see [https://trpc.io/docs/router](https://trpc.io/docs/router) for further explanation of defining the router and the `AppRouter` type.
### Instantiating a tRPC client:
```ts
import { useTRPCClient } from '@trpc/vue'
// import your router, e.g.:
import type { AppRouter } from './server/router'
const { client } = useTRPCClient({
url: 'http://localhost:3000/trpc'
})
```
### Making a tRPC Query
```ts
import { TRPCClient } from '@trpc/client'
import type { AppRouter } from '@observerly/pleiades'
import { useTRPCQuery } from '@trpc/vue'
export const useTelescopes = (client: TRPCClient) => {
const telescopes = useTRPCQuery(client, ['telescopes.all'])
return {
telescopes
}
}
```
## To-Do
- [ ] Publish as npm public package
- [X] Add useClient() composable
- [ ] Add comprehensive usage tests for useClient()
- [X] Add useQuery() composable
- [X] Improve type inference for useQuery()
- [ ] Add comprehensive usage tests for useQuery()
- [X] Add useMutation()
- [ ] Add comprehensive usage tests for useMutation()
- [ ] Add useSubscription()
- [ ] Add comprehensive usage tests for useSubscription()
- [ ] Add usage documentation and demo examples.