docs: add getQueryKey usage

wobsoriano · Dec 7, 2023 · 3e34102 · 3e34102
1 parent fc2c7f9
commit 3e34102
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/docs/content/1.get-started/5.tips/7.mutation.md b/docs/content/1.get-started/5.tips/7.mutation.md
@@ -10,17 +10,21 @@ The example below shows how you can use Nuxt's [`useNuxtData`](https://nuxt.com/
 <script setup lang="ts">
 const { $client } = useNuxtApp()
 
-const { data } = await $client.getTodos.useQuery(undefined, { queryKey: 'todos' });
+const { data } = await $client.getTodos.useQuery(undefined);
 </script>
 ```
 
 ```vue [components/NewTodo.vue]
 <script setup lang="ts">
+import { getQueryKey } from 'trpc-nuxt/client'
+
 const { $client } = useNuxtApp()
 const previousTodos = ref([])
 
+const queryKey = getQueryKey($client.getTodos, undefined)
+
 // Access to the cached value of useQuery in todos.vue
-const { data: todos } = useNuxtData('todos')
+const { data: todos } = useNuxtData(queryKey)
 
 async function addTodo(payload) {
  // Store the previously cached value to restore if mutation fails.
@@ -32,7 +36,7 @@ async function addTodo(payload) {
  try {
  await $client.addTodo.mutate(payload)
  // Invalidate todos in the background if the mutation succeeded.
- await refreshNuxtData('todos')
+ await refreshNuxtData(queryKey)
  } catch {
  // Rollback the data if the mutation failed.
  todos.value = previousTodos.value 

diff --git a/playground/pages/index.vue b/playground/pages/index.vue
@@ -3,7 +3,7 @@ import { getQueryKey } from 'trpc-nuxt/client'
 
 const { $client } = useNuxtApp()
 
-const todosKey = getQueryKey('asd', undefined)
+const todosKey = getQueryKey($client.todo.getTodos, undefined)
 const { data } = useNuxtData(todosKey)
 
 const { data: todos, pending, error, refresh } = await $client.todo.getTodos.useQuery()