chore: playground

Author: posva

playground/package.json

@@ -7,6 +7,7 @@
     "build": "vite build"
   },
   "devDependencies": {
+    "@tanstack/vue-query-devtools": "^5.69.0",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/compiler-sfc": "^3.5.13",
     "@vue/tsconfig": "^0.7.0",

playground/src/App.vue

@@ -12,7 +12,8 @@ import { useMutationState, useQueryClient } from '@tanstack/vue-query'
 console.log(`We have ${routes.length} routes.`)
 
 const queryClient = useQueryClient()
-const states = useMutationState({ filters: { mutationKey: ['hey'] } })
+// const states = useMutationState({ filters: { mutationKey: ['hey'] } })
+const states = useMutationState()
 watch(states, () => {
   window.ss = states
 })

playground/src/pages/users/tq-query.[id].vue

@@ -4,6 +4,7 @@ const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
+import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
 import {
   useQuery,
   useQueries,
@@ -20,6 +21,7 @@ const simulateError = ref(false)
 
 const enabled = ref(true)
 const queryClient = useQueryClient()
+window.qc = queryClient
 // queryClient.prefetchQuery({
 //   queryKey: ['user-id', computed(() => route.params.id)],
 //   // queryFn: async () => {
@@ -119,6 +121,7 @@ const {
     await delay(5000)
     return 'hey'
   },
+  // gcTime: 5_000,
 })
 </script>
 
@@ -176,4 +179,6 @@ const {
     <pre v-if="tqError">Error: {{ tqError }}</pre>
     <pre>data: {{ tqUser == null ? String(tqUser) : tqUser }}</pre>
   </main>
+
+  <VueQueryDevtools />
 </template>