feat: add mutation functionality to playground

Author: peterbud

client/app/pages/vue-query.vue

@@ -21,18 +21,16 @@ const filteredQueries = computed(() => {
 
 function onQueryNotification(event: QueryCacheNotifyEvent) {
   switch (event.type) {
+    case 'observerResultsUpdated':
+      // TODO: when data becomes stale/invalidate etc, the query is updated
+      // fall through
     case 'updated': {
       const query = queries.value.find(q => q.queryHash === event.query.queryHash)
       if (query) {
         query.state = { ...event.query.state }
       }
       break
     }
-    case 'observerResultsUpdated': {
-      // 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':
       queries.value.push(event.query)
       break

playground/app/app.vue

@@ -1,5 +1,6 @@
 <script setup>
 const selectedUser = ref(null)
+const queryClient = useQueryClient()
 
 const getUsers = async () => {
   await new Promise(resolve => setTimeout(resolve, 2000))
@@ -21,63 +22,104 @@ const selectedUserId = computed(() => selectedUser.value?.id)
 const { isPending, isFetching, isError, data: posts, error } = useQuery({
   queryKey: ['posts', selectedUserId],
   queryFn: () => getPosts(selectedUserId.value),
-  staleTime: 1000 * 10, // for 10 seconds it fill be considered as "fresh"
+  staleTime: 1000 * 10, // for 10 seconds it will be considered as "fresh"
   gcTime: 1000 * 20, // after 20 seconds it will be garbage collected
-  enabled: !selectedUser.value,
+  enabled: computed(() => selectedUser.value !== null),
 
 })
+
+const { mutate: addPost, isPending: isMutationPending } = useMutation({
+  mutationFn: async (post) => {
+    const url = 'https://jsonplaceholder.typicode.com/posts'
+    return await $fetch(url, { method: 'POST', body: post })
+  },
+  onSuccess: () => {
+    queryClient.invalidateQueries({ queryKey: ['posts', selectedUserId] })
+  },
+})
+
 function selectUser(user) {
   selectedUser.value = user
 }
+
+function addNewPost() {
+  addPost({
+    title: 'New Post',
+    body: 'This is a new post',
+    userId: selectedUserId.value,
+  })
+}
 </script>
 
 <template>
-  <div>
-    <h1>Users</h1>
-    <div v-if="isUsersPending">
-      Loading...
-    </div>
-    <div
-      v-else
-      :style="{
-        display: 'grid',
-        gap: '0.5rem',
-        paddingLeft: '0.5rem',
-      }"
-    >
+  <div
+    :style="{
+      display: 'grid',
+      gridTemplateColumns: 'auto auto',
+      gap: '2rem',
+    }"
+  >
+    <div>
+      <h1>Users</h1>
+      <div v-if="isUsersPending">
+        Loading...
+      </div>
       <div
-        v-for="user in users"
-        :key="user.id"
+        v-else
         :style="{
-          cursor: 'pointer',
-          backgroundColor: selectedUserId === user.id ? 'blue' : 'white',
-          color: selectedUserId === user.id ? 'white' : 'black',
-          padding: '0.25rem',
+          display: 'grid',
+          gap: '0.5rem',
+          paddingLeft: '0.5rem',
         }"
-        @click="selectUser(user)"
       >
-        {{ user.name }} ({{ user.email }})
+        <div
+          v-for="user in users"
+          :key="user.id"
+          :style="{
+            cursor: 'pointer',
+            backgroundColor: selectedUserId === user.id ? 'blue' : 'white',
+            color: selectedUserId === user.id ? 'white' : 'black',
+            paddingTop: '0.25rem',
+          }"
+          @click="selectUser(user)"
+        >
+          {{ user.name }} ({{ user.email }})
+        </div>
       </div>
     </div>
-  </div>
-  <div>
-    <h1>Posts</h1>
-    <div v-if="isPending">
-      Loading...
-    </div>
-    <div v-else-if="isFetching">
-      Fetching...
-    </div>
-    <ul v-else-if="isError">
-      <li>Error: {{ error.message }}</li>
-    </ul>
-    <ul v-else>
-      <li
-        v-for="post in posts"
-        :key="post.id"
+    <div>
+      <div
+        :style="{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        }"
       >
-        {{ post.title }}
-      </li>
-    </ul>
+        <h1>Posts</h1>
+        <button @click="addNewPost">
+          Add Post
+        </button>
+      </div>
+      <div v-if="isPending">
+        Select a user first...
+      </div>
+      <div v-if="isMutationPending">
+        Adding post...
+      </div>
+      <div v-else-if="isFetching">
+        Fetching...
+      </div>
+      <ul v-else-if="isError">
+        <li>Error: {{ error.message }}</li>
+      </ul>
+      <ul v-else>
+        <li
+          v-for="post in posts"
+          :key="post.id"
+        >
+          {{ post.title }}
+        </li>
+      </ul>
+    </div>
   </div>
 </template>

playground/nuxt.config.ts

@@ -8,7 +8,7 @@ export default defineNuxtConfig({
   },
   compatibilityDate: '2025-02-14',
   nuxtQuery: {
-    autoImports: ['useQuery'],
+    autoImports: ['useQuery', 'useMutation', 'useQueryClient'],
     queryClientOptions: {
       defaultOptions: {
         queries: {