Do not refetch the entire feed when a new comment is added

pbteja1998 · pbteja1998 · commit 7365def2b755 · 2021-02-28T10:44:49.000+05:30
diff --git a/src/components/goals/NewComment.tsx b/src/components/goals/NewComment.tsx
@@ -6,6 +6,7 @@ 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
@@ -35,11 +36,23 @@ export default function NewComment({ updateId }: { updateId: string }) {
         return res.json()
       }),
     {
-      onSuccess: () => {
+      onSuccess: (data: UpdateCommentType) => {
         toast.success('You have successfully added 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 === data.updateId) {
+                  _update.comments.data = [..._update.comments.data, data]
+                }
+                return _update
+              }),
+            })
+          )
+        }
         reset()
       },
       onError: () => {
diff --git a/src/pages/api/fauna/add-comment.ts b/src/pages/api/fauna/add-comment.ts
@@ -3,6 +3,7 @@ import { getSession } from 'next-auth/client'
 
 import faunadb from 'faunadb'
 import { User } from 'src/pages/members'
+import { getCommentFromCommentRef, getUserFromUserRef } from 'src/utils/fauna'
 const q = faunadb.query
 const isProduction = process.env.NODE_ENV === 'production'
 const client = new faunadb.Client({
@@ -26,25 +27,34 @@ const FaunaCreateHandler: NextApiHandler = async (
 
   try {
     const response: any = await client.query(
-      q.Create(q.Collection('update_comments'), {
-        data: {
-          postedBy: q.Ref(q.Collection('users'), userId),
-          update: q.Ref(q.Collection('goal_updates'), updateId),
-          description,
-          timestamps: {
-            createdAt: q.Now(),
-            updatedAt: q.Now(),
-          },
+      q.Let(
+        {
+          commentDoc: q.Create(q.Collection('update_comments'), {
+            data: {
+              postedBy: q.Ref(q.Collection('users'), userId),
+              update: q.Ref(q.Collection('goal_updates'), updateId),
+              description,
+              timestamps: {
+                createdAt: q.Now(),
+                updatedAt: q.Now(),
+              },
+            },
+          }),
         },
-      })
+        getCommentFromCommentRef({
+          ref: q.Select(['ref'], q.Var('commentDoc')),
+          session,
+        })
+      )
     )
+
     await client.query(
       q.Let(
         {
           activityDoc: q.Create(q.Collection('activities'), {
             data: {
               user: q.Ref(q.Collection('users'), userId),
-              resource: q.Ref(q.Collection('update_comments'), response.ref.id),
+              resource: q.Ref(q.Collection('update_comments'), response.id),
               type: 'COMMENTED_ON_UPDATE',
               timestamps: {
                 createdAt: q.Now(),
@@ -73,7 +83,7 @@ const FaunaCreateHandler: NextApiHandler = async (
         {}
       )
     )
-    res.status(201).json({ response })
+    res.status(201).json(response)
   } catch (error) {
     console.error(error)
     console.error({ msg: error.message })
diff --git a/src/pages/api/fauna/all-updates.ts b/src/pages/api/fauna/all-updates.ts
@@ -2,8 +2,7 @@ import { NextApiHandler, NextApiRequest, NextApiResponse } from 'next'
 
 import faunadb from 'faunadb'
 import { getSession } from 'next-auth/client'
-import { User } from 'src/pages/members'
-import { getUpdateFromUpdateRef, getUserFromUserRef } from 'src/utils/fauna'
+import { getUpdateFromUpdateRef } from 'src/utils/fauna'
 const q = faunadb.query
 const isProduction = process.env.NODE_ENV === 'production'
 const client = new faunadb.Client({
