Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 22169e3

Browse files
pbteja1998pbteja1998
committed
Do not refetch the entire feed when a comment/update is edited
1 parent fe65842 commit 22169e3

File tree

5 files changed

+111
-19
lines changed

5 files changed

+111
-19
lines changed

‎src/components/goals/EditComment.tsx

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,17 @@ import { useMutation, useQueryClient } from 'react-query'
66
import toast, { Toaster } from 'react-hot-toast'
77
import { useRef, useState } from 'react'
88
import { Markdown, A } from '@/components'
9+
import { HomePageFeedUpdateType, UpdateCommentType } from 'src/pages'
910

1011
type Inputs = {
1112
description: string
1213
}
1314

1415
export default function EditComment({
15-
updateId,
1616
comment,
1717
cancelEditMode,
1818
}: {
19-
updateId: string
20-
comment: { id: string; description: string }
19+
comment: UpdateCommentType
2120
cancelEditMode: () => void
2221
}) {
2322
const [descriptionStorage, setDescriptionStorage] = useState(
@@ -45,11 +44,30 @@ export default function EditComment({
4544
return res.json()
4645
}),
4746
{
48-
onSuccess: () => {
47+
onSuccess: (data) => {
4948
toast.success('You have successfully updated your comment.', {
5049
id: toastId.current,
5150
})
52-
queryClient.refetchQueries('/api/fauna/all-updates')
51+
if (queryClient.getQueryState('/api/fauna/all-updates')) {
52+
queryClient.setQueryData<{ updates: HomePageFeedUpdateType[] }>(
53+
'/api/fauna/all-updates',
54+
(oldData) => ({
55+
updates: oldData.updates.map((_update) => {
56+
if (_update.id === comment.updateId) {
57+
_update.comments.data = _update.comments.data.map(
58+
(_comment) => {
59+
if (_comment.id === comment.id) {
60+
_comment = data.response
61+
}
62+
return _comment
63+
}
64+
)
65+
}
66+
return _update
67+
}),
68+
})
69+
)
70+
}
5371
cancelEditMode()
5472
reset()
5573
},

‎src/components/goals/EditUpdate.tsx

Lines changed: 61 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import { useMutation, useQueryClient } from 'react-query'
66
import toast, { Toaster } from 'react-hot-toast'
77
import { useRef, useState } from 'react'
88
import { Markdown, A } from '@/components'
9+
import { GoalResponse } from 'src/pages/[username]'
10+
import { HomePageFeedUpdateType } from 'src/pages'
911

1012
type Inputs = {
1113
description: string
@@ -47,14 +49,69 @@ export default function EditUpdate({
4749
return res.json()
4850
}),
4951
{
50-
onSuccess: () => {
52+
onSuccess: (data) => {
5153
toast.success('You have successfully edited the update.', {
5254
id: toastId.current,
5355
})
54-
queryClient.refetchQueries('/api/fauna/goals/all-goals-by-user')
56+
57+
queryClient.setQueryData<GoalResponse[]>(
58+
'/api/fauna/goals/all-goals-by-user',
59+
(oldData) => {
60+
if (!oldData) {
61+
return oldData
62+
}
63+
return oldData.map((goalResponse) => {
64+
if (goalResponse.id === goalId) {
65+
goalResponse.updates = {
66+
data: [
67+
...goalResponse.updates.data,
68+
{
69+
id: data.id,
70+
description: data.description,
71+
createdAt: data.createdAt,
72+
postedBy: data.postedBy,
73+
},
74+
],
75+
}
76+
}
77+
return goalResponse
78+
})
79+
}
80+
)
81+
5582
if (updateFromHomePage) {
56-
queryClient.refetchQueries('/api/fauna/all-updates')
57-
queryClient.refetchQueries(['/api/fauna/recent-updates', goalId])
83+
if (queryClient.getQueryState('/api/fauna/all-updates')) {
84+
queryClient.setQueryData<{ updates: HomePageFeedUpdateType[] }>(
85+
'/api/fauna/all-updates',
86+
(oldData) => ({
87+
updates: [data, ...oldData.updates],
88+
})
89+
)
90+
}
91+
92+
if (
93+
queryClient.getQueryState(['/api/fauna/recent-updates', goalId])
94+
) {
95+
queryClient.setQueryData<{ response: GoalResponse }>(
96+
['/api/fauna/recent-updates', goalId],
97+
(oldData) => ({
98+
response: {
99+
...oldData.response,
100+
updates: {
101+
data: [
102+
...oldData.response.updates.data,
103+
{
104+
id: data.id,
105+
description: data.description,
106+
createdAt: data.createdAt,
107+
postedBy: data.postedBy,
108+
},
109+
],
110+
},
111+
},
112+
})
113+
)
114+
}
58115
}
59116
reset()
60117
cancelEditMode()

‎src/components/goals/UpdateComment.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,6 @@ export default function UpdateComment({
105105
<li>
106106
{isInEditMode ? (
107107
<EditComment
108-
updateId={comment.updateId}
109108
comment={comment}
110109
cancelEditMode={() => setIsInEditMode(false)}
111110
/>

‎src/pages/api/fauna/goals/edit-comment.ts

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { getCommentFromCommentRef } from 'src/utils/fauna'
12
import { NextApiHandler, NextApiRequest, NextApiResponse } from 'next'
23
import { getSession } from 'next-auth/client'
34

@@ -29,11 +30,19 @@ const FaunaCreateHandler: NextApiHandler = async (
2930
const response = await client.query(
3031
q.If(
3132
q.Equals(commentPostedById, userId),
32-
q.Update(q.Ref(q.Collection('update_comments'), id), {
33-
data: {
34-
description,
33+
q.Let(
34+
{
35+
commentDoc: q.Update(q.Ref(q.Collection('update_comments'), id), {
36+
data: {
37+
description,
38+
},
39+
}),
3540
},
36-
}),
41+
getCommentFromCommentRef({
42+
ref: q.Select(['ref'], q.Var('commentDoc')),
43+
session,
44+
})
45+
),
3746
q.Abort('You are not authorized to edit this!!!')
3847
)
3948
)

‎src/pages/api/fauna/goals/edit-update.ts

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { getSession } from 'next-auth/client'
33

44
import faunadb from 'faunadb'
55
import { User } from 'src/pages/members'
6+
import { getUpdateFromUpdateRef } from 'src/utils/fauna'
67
const q = faunadb.query
78
const isProduction = process.env.NODE_ENV === 'production'
89
const client = new faunadb.Client({
@@ -29,16 +30,24 @@ const FaunaCreateHandler: NextApiHandler = async (
2930
const response = await client.query(
3031
q.If(
3132
q.Equals(updatePostedById, userId),
32-
q.Update(q.Ref(q.Collection('goal_updates'), id), {
33-
data: {
34-
description,
33+
q.Let(
34+
{
35+
updateDoc: q.Update(q.Ref(q.Collection('goal_updates'), id), {
36+
data: {
37+
description,
38+
},
39+
}),
3540
},
36-
}),
41+
getUpdateFromUpdateRef({
42+
ref: q.Select(['ref'], q.Var('updateDoc')),
43+
session,
44+
})
45+
),
3746
q.Abort('You are not authorized to edit this!!!')
3847
)
3948
)
4049

41-
res.status(200).json({ response })
50+
res.status(200).json(response)
4251
} catch (error) {
4352
console.error(error)
4453
console.error({ msg: error.message })

0 commit comments

Comments
 (0)