Do not refetch the entire feed when a comment/update is edited

pbteja1998 · pbteja1998 · commit 22169e352364 · 2021-02-28T10:44:49.000+05:30
diff --git a/src/components/goals/EditComment.tsx b/src/components/goals/EditComment.tsx
@@ -6,18 +6,17 @@ import { useMutation, useQueryClient } from 'react-query'
 import toast, { Toaster } from 'react-hot-toast'
 import { useRef, useState } from 'react'
 import { Markdown, A } from '@/components'
+import { HomePageFeedUpdateType, UpdateCommentType } from 'src/pages'
 
 type Inputs = {
   description: string
 }
 
 export default function EditComment({
-  updateId,
   comment,
   cancelEditMode,
 }: {
-  updateId: string
-  comment: { id: string; description: string }
+  comment: UpdateCommentType
   cancelEditMode: () => void
 }) {
   const [descriptionStorage, setDescriptionStorage] = useState(
@@ -45,11 +44,30 @@ export default function EditComment({
         return res.json()
       }),
     {
-      onSuccess: () => {
+      onSuccess: (data) => {
         toast.success('You have successfully updated your comment.', {
           id: toastId.current,
         })
-        queryClient.refetchQueries('/api/fauna/all-updates')
+        if (queryClient.getQueryState('/api/fauna/all-updates')) {
+          queryClient.setQueryData<{ updates: HomePageFeedUpdateType[] }>(
+            '/api/fauna/all-updates',
+            (oldData) => ({
+              updates: oldData.updates.map((_update) => {
+                if (_update.id === comment.updateId) {
+                  _update.comments.data = _update.comments.data.map(
+                    (_comment) => {
+                      if (_comment.id === comment.id) {
+                        _comment = data.response
+                      }
+                      return _comment
+                    }
+                  )
+                }
+                return _update
+              }),
+            })
+          )
+        }
         cancelEditMode()
         reset()
       },
diff --git a/src/components/goals/EditUpdate.tsx b/src/components/goals/EditUpdate.tsx
@@ -6,6 +6,8 @@ import { useMutation, useQueryClient } from 'react-query'
 import toast, { Toaster } from 'react-hot-toast'
 import { useRef, useState } from 'react'
 import { Markdown, A } from '@/components'
+import { GoalResponse } from 'src/pages/[username]'
+import { HomePageFeedUpdateType } from 'src/pages'
 
 type Inputs = {
   description: string
@@ -47,14 +49,69 @@ export default function EditUpdate({
         return res.json()
       }),
     {
-      onSuccess: () => {
+      onSuccess: (data) => {
         toast.success('You have successfully edited the update.', {
           id: toastId.current,
         })
-        queryClient.refetchQueries('/api/fauna/goals/all-goals-by-user')
+
+        queryClient.setQueryData<GoalResponse[]>(
+          '/api/fauna/goals/all-goals-by-user',
+          (oldData) => {
+            if (!oldData) {
+              return oldData
+            }
+            return oldData.map((goalResponse) => {
+              if (goalResponse.id === goalId) {
+                goalResponse.updates = {
+                  data: [
+                    ...goalResponse.updates.data,
+                    {
+                      id: data.id,
+                      description: data.description,
+                      createdAt: data.createdAt,
+                      postedBy: data.postedBy,
+                    },
+                  ],
+                }
+              }
+              return goalResponse
+            })
+          }
+        )
+
         if (updateFromHomePage) {
-          queryClient.refetchQueries('/api/fauna/all-updates')
-          queryClient.refetchQueries(['/api/fauna/recent-updates', goalId])
+          if (queryClient.getQueryState('/api/fauna/all-updates')) {
+            queryClient.setQueryData<{ updates: HomePageFeedUpdateType[] }>(
+              '/api/fauna/all-updates',
+              (oldData) => ({
+                updates: [data, ...oldData.updates],
+              })
+            )
+          }
+
+          if (
+            queryClient.getQueryState(['/api/fauna/recent-updates', goalId])
+          ) {
+            queryClient.setQueryData<{ response: GoalResponse }>(
+              ['/api/fauna/recent-updates', goalId],
+              (oldData) => ({
+                response: {
+                  ...oldData.response,
+                  updates: {
+                    data: [
+                      ...oldData.response.updates.data,
+                      {
+                        id: data.id,
+                        description: data.description,
+                        createdAt: data.createdAt,
+                        postedBy: data.postedBy,
+                      },
+                    ],
+                  },
+                },
+              })
+            )
+          }
         }
         reset()
         cancelEditMode()
diff --git a/src/components/goals/UpdateComment.tsx b/src/components/goals/UpdateComment.tsx
@@ -105,7 +105,6 @@ export default function UpdateComment({
       <li>
         {isInEditMode ? (
           <EditComment
-            updateId={comment.updateId}
             comment={comment}
             cancelEditMode={() => setIsInEditMode(false)}
           />
diff --git a/src/pages/api/fauna/goals/edit-comment.ts b/src/pages/api/fauna/goals/edit-comment.ts
@@ -1,3 +1,4 @@
+import { getCommentFromCommentRef } from 'src/utils/fauna'
 import { NextApiHandler, NextApiRequest, NextApiResponse } from 'next'
 import { getSession } from 'next-auth/client'
 
@@ -29,11 +30,19 @@ const FaunaCreateHandler: NextApiHandler = async (
     const response = await client.query(
       q.If(
         q.Equals(commentPostedById, userId),
-        q.Update(q.Ref(q.Collection('update_comments'), id), {
-          data: {
-            description,
+        q.Let(
+          {
+            commentDoc: q.Update(q.Ref(q.Collection('update_comments'), id), {
+              data: {
+                description,
+              },
+            }),
           },
-        }),
+          getCommentFromCommentRef({
+            ref: q.Select(['ref'], q.Var('commentDoc')),
+            session,
+          })
+        ),
         q.Abort('You are not authorized to edit this!!!')
       )
     )
diff --git a/src/pages/api/fauna/goals/edit-update.ts b/src/pages/api/fauna/goals/edit-update.ts
@@ -3,6 +3,7 @@ import { getSession } from 'next-auth/client'
 
 import faunadb from 'faunadb'
 import { User } from 'src/pages/members'
+import { getUpdateFromUpdateRef } from 'src/utils/fauna'
 const q = faunadb.query
 const isProduction = process.env.NODE_ENV === 'production'
 const client = new faunadb.Client({
@@ -29,16 +30,24 @@ const FaunaCreateHandler: NextApiHandler = async (
     const response = await client.query(
       q.If(
         q.Equals(updatePostedById, userId),
-        q.Update(q.Ref(q.Collection('goal_updates'), id), {
-          data: {
-            description,
+        q.Let(
+          {
+            updateDoc: q.Update(q.Ref(q.Collection('goal_updates'), id), {
+              data: {
+                description,
+              },
+            }),
           },
-        }),
+          getUpdateFromUpdateRef({
+            ref: q.Select(['ref'], q.Var('updateDoc')),
+            session,
+          })
+        ),
         q.Abort('You are not authorized to edit this!!!')
       )
     )
 
-    res.status(200).json({ response })
+    res.status(200).json(response)
   } catch (error) {
     console.error(error)
     console.error({ msg: error.message })
