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

feat: add custom Nuxt client

Browse Source
This commit is contained in:
wobsoriano
2022-12-18 15:35:56 -08:00
parent d8d4c92ae8
commit ee85f3ccd1
9 changed files with 901 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
playground/pages/index.vue
View File

@@ -1,15 +1,12 @@
<script setup lang="ts">
import { TRPCClientError } from '@trpc/client';
import type { inferRouterOutputs } from '@trpc/server';
import type { AppRouter } from '~~/server/trpc/routers';
const { $client } = useNuxtApp()
const { mutate } = $client.todo.addTodo.useMutation()
const addTodo = async () => {
const title = Math.random().toString(36).slice(2, 7)
try {
const x = await $client.todo.addTodo.mutate({
const x = await mutate({
id: Date.now(),
userId: 69,
title,
@@ -21,10 +18,7 @@ const addTodo = async () => {
}
}
type RouterOutput = inferRouterOutputs<AppRouter>;
type ErrorOutput = TRPCClientError<AppRouter>
const { data: todos, pending, error, refresh } = await useAsyncData<RouterOutput['todo']['getTodos'], ErrorOutput>(() => $client.todo.getTodos.query())
const { data: todos, pending, error, refresh } = await $client.todo.getTodos.useQuery()
</script>
<template>