refactor: clean up unused code and add query filtering logic

Author: peterbud

client/app/pages/vue-query.vue

@@ -2,15 +2,6 @@
 import { useDevtoolsClient } from '@nuxt/devtools-kit/iframe-client'
 import type { Query, QueryCacheNotifyEvent, QueryClient } from '@tanstack/vue-query'
 
-// function mapQuery(query: Query) {
-//   return {
-//     queryKey: query.queryKey,
-//     queryHash: query.queryHash,
-//     observerCount: query.observers?.length ?? 0,
-//     state: ref(query.state),
-//   }
-// }
-
 const searchString = ref('')
 const queries = ref(new Array<Query>())
 const selectedQuery = ref<Query | null>(null)
@@ -19,33 +10,33 @@ const devtoolsClient = useDevtoolsClient()
 const queryClient = computed(() => devtoolsClient.value?.host?.nuxt.vueApp.config.globalProperties?.$queryClient as QueryClient | undefined)
 const queryCache = computed(() => queryClient.value?.getQueryCache())
 const filteredQueries = computed(() => {
-  if (!queries.value) {
-    return [] as Query[]
-  }
-  return queries.value
+  return !queries.value
+    ? [] as Query[]
+    : !searchString.value
+        ? queries.value
+        : queries.value.filter((query) => {
+            return query.queryKey.toString().toLowerCase().includes(searchString.value.toLowerCase())
+          })
 })
 
 function onQueryNotification(event: QueryCacheNotifyEvent) {
   switch (event.type) {
     case 'updated': {
-      console.log('Query updated', event.query.queryKey)
       const query = queries.value.find(q => q.queryHash === event.query.queryHash)
       if (query) {
         query.state = { ...event.query.state }
       }
       break
     }
     case 'observerResultsUpdated': {
-      // when data becomes stale, the query is updated
+      // TODO: when data becomes stale, the query is updated
       console.log('Query observerResultsUpdated', event.query.queryKey, event.query.isStale(), event.query.state)
       break
     }
     case 'added':
-      console.log('Query added', event.query.queryKey)
       queries.value.push(event.query)
       break
     case 'removed': {
-      console.log('Query removed', event.query.queryKey)
       const index = queries.value.findIndex(q => q.queryHash === event.query.queryHash)
       if (index !== -1) {
         queries.value.splice(index, 1)
@@ -79,7 +70,6 @@ watchEffect(() => {
 })
 
 function selectQuery(query: Query) {
-  console.log('Selected query', query.queryKey)
   selectedQuery.value = toRaw(query)
 }
 </script>

playground/app/app.vue

@@ -21,8 +21,8 @@ const selectedUserId = computed(() => selectedUser.value?.id)
 const { isPending, isFetching, isError, data: posts, error } = useQuery({
   queryKey: ['posts', selectedUserId],
   queryFn: () => getPosts(selectedUserId.value),
-  staleTime: 1000 * 10,
-  gcTime: 1000 * 20,
+  staleTime: 1000 * 10, // for 10 seconds it fill be considered as "fresh"
+  gcTime: 1000 * 20, // after 20 seconds it will be garbage collected
   enabled: !selectedUser.value,
 
 })

playground/app/plugins/nuxt-query.ts

@@ -7,13 +7,13 @@ export default defineNuxtPlugin({
     nuxtApp.hook('nuxt-query:configure', (getPluginOptions) => {
       const clientOptions = useRuntimeConfig().public.nuxtQuery?.queryClientOptions || {}
 
+      // create custom query cache
+      // e.g for centrally logging successful or failed queries
       const queryClient = new QueryClient({
         ...clientOptions,
         queryCache: new QueryCache({
-          onSuccess: (data: unknown) => console.log('onSuccess',
-            Array.isArray(data)
-              ? { firstChild: data[0], length: data.length }
-              : { data }),
+          // onSuccess: (data: unknown) => console.log('onSuccess', { data }),
+          onError: (error: unknown) => console.error('Query failed:', { error }),
         }),
       })