Pass queryClient explicitly to updatePostShadow

This commit is contained in:
Dan Abramov
2024-03-21 22:47:02 +00:00
parent 698ba036dd
commit e56b7e00b5
2 changed files with 32 additions and 22 deletions
+12 -6
View File
@@ -1,13 +1,14 @@
import {useEffect, useState, useMemo} from 'react' import {useEffect, useMemo, useState} from 'react'
import EventEmitter from 'eventemitter3'
import {AppBskyFeedDefs} from '@atproto/api' import {AppBskyFeedDefs} from '@atproto/api'
import {QueryClient} from '@tanstack/react-query'
import EventEmitter from 'eventemitter3'
import {batchedUpdates} from '#/lib/batchedUpdates' import {batchedUpdates} from '#/lib/batchedUpdates'
import {Shadow, castAsShadow} from './types'
import {findAllPostsInQueryData as findAllPostsInNotifsQueryData} from '../queries/notifications/feed' import {findAllPostsInQueryData as findAllPostsInNotifsQueryData} from '../queries/notifications/feed'
import {findAllPostsInQueryData as findAllPostsInFeedQueryData} from '../queries/post-feed' import {findAllPostsInQueryData as findAllPostsInFeedQueryData} from '../queries/post-feed'
import {findAllPostsInQueryData as findAllPostsInThreadQueryData} from '../queries/post-thread' import {findAllPostsInQueryData as findAllPostsInThreadQueryData} from '../queries/post-thread'
import {findAllPostsInQueryData as findAllPostsInSearchQueryData} from '../queries/search-posts' import {findAllPostsInQueryData as findAllPostsInSearchQueryData} from '../queries/search-posts'
import {queryClient} from 'lib/react-query' import {castAsShadow, Shadow} from './types'
export type {Shadow} from './types' export type {Shadow} from './types'
export interface PostShadow { export interface PostShadow {
@@ -93,8 +94,12 @@ function mergeShadow(
}) })
} }
export function updatePostShadow(uri: string, value: Partial<PostShadow>) { export function updatePostShadow(
const cachedPosts = findPostsInCache(uri) queryClient: QueryClient,
uri: string,
value: Partial<PostShadow>,
) {
const cachedPosts = findPostsInCache(queryClient, uri)
for (let post of cachedPosts) { for (let post of cachedPosts) {
shadows.set(post, {...shadows.get(post), ...value}) shadows.set(post, {...shadows.get(post), ...value})
} }
@@ -104,6 +109,7 @@ export function updatePostShadow(uri: string, value: Partial<PostShadow>) {
} }
function* findPostsInCache( function* findPostsInCache(
queryClient: QueryClient,
uri: string, uri: string,
): Generator<AppBskyFeedDefs.PostView, void> { ): Generator<AppBskyFeedDefs.PostView, void> {
for (let post of findAllPostsInFeedQueryData(queryClient, uri)) { for (let post of findAllPostsInFeedQueryData(queryClient, uri)) {
+20 -16
View File
@@ -1,12 +1,13 @@
import {useCallback} from 'react' import {useCallback} from 'react'
import {AppBskyFeedDefs, AtUri} from '@atproto/api' import {AppBskyFeedDefs, AtUri} from '@atproto/api'
import {useQuery, useMutation, useQueryClient} from '@tanstack/react-query' import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
import {track} from '#/lib/analytics/analytics'
import {useToggleMutationQueue} from '#/lib/hooks/useToggleMutationQueue'
import {logEvent, LogEvents} from '#/lib/statsig/statsig'
import {updatePostShadow} from '#/state/cache/post-shadow'
import {Shadow} from '#/state/cache/types' import {Shadow} from '#/state/cache/types'
import {getAgent} from '#/state/session' import {getAgent} from '#/state/session'
import {updatePostShadow} from '#/state/cache/post-shadow'
import {track} from '#/lib/analytics/analytics'
import {logEvent, LogEvents} from '#/lib/statsig/statsig'
import {useToggleMutationQueue} from '#/lib/hooks/useToggleMutationQueue'
export const RQKEY = (postUri: string) => ['post', postUri] export const RQKEY = (postUri: string) => ['post', postUri]
@@ -62,6 +63,7 @@ export function usePostLikeMutationQueue(
logContext: LogEvents['post:like']['logContext'] & logContext: LogEvents['post:like']['logContext'] &
LogEvents['post:unlike']['logContext'], LogEvents['post:unlike']['logContext'],
) { ) {
const queryClient = useQueryClient()
const postUri = post.uri const postUri = post.uri
const postCid = post.cid const postCid = post.cid
const initialLikeUri = post.viewer?.like const initialLikeUri = post.viewer?.like
@@ -89,7 +91,7 @@ export function usePostLikeMutationQueue(
}, },
onSuccess(finalLikeUri) { onSuccess(finalLikeUri) {
// finalize // finalize
updatePostShadow(postUri, { updatePostShadow(queryClient, postUri, {
likeUri: finalLikeUri, likeUri: finalLikeUri,
}) })
}, },
@@ -97,19 +99,19 @@ export function usePostLikeMutationQueue(
const queueLike = useCallback(() => { const queueLike = useCallback(() => {
// optimistically update // optimistically update
updatePostShadow(postUri, { updatePostShadow(queryClient, postUri, {
likeUri: 'pending', likeUri: 'pending',
}) })
return queueToggle(true) return queueToggle(true)
}, [postUri, queueToggle]) }, [queryClient, postUri, queueToggle])
const queueUnlike = useCallback(() => { const queueUnlike = useCallback(() => {
// optimistically update // optimistically update
updatePostShadow(postUri, { updatePostShadow(queryClient, postUri, {
likeUri: undefined, likeUri: undefined,
}) })
return queueToggle(false) return queueToggle(false)
}, [postUri, queueToggle]) }, [queryClient, postUri, queueToggle])
return [queueLike, queueUnlike] return [queueLike, queueUnlike]
} }
@@ -149,6 +151,7 @@ export function usePostRepostMutationQueue(
logContext: LogEvents['post:repost']['logContext'] & logContext: LogEvents['post:repost']['logContext'] &
LogEvents['post:unrepost']['logContext'], LogEvents['post:unrepost']['logContext'],
) { ) {
const queryClient = useQueryClient()
const postUri = post.uri const postUri = post.uri
const postCid = post.cid const postCid = post.cid
const initialRepostUri = post.viewer?.repost const initialRepostUri = post.viewer?.repost
@@ -176,7 +179,7 @@ export function usePostRepostMutationQueue(
}, },
onSuccess(finalRepostUri) { onSuccess(finalRepostUri) {
// finalize // finalize
updatePostShadow(postUri, { updatePostShadow(queryClient, postUri, {
repostUri: finalRepostUri, repostUri: finalRepostUri,
}) })
}, },
@@ -184,19 +187,19 @@ export function usePostRepostMutationQueue(
const queueRepost = useCallback(() => { const queueRepost = useCallback(() => {
// optimistically update // optimistically update
updatePostShadow(postUri, { updatePostShadow(queryClient, postUri, {
repostUri: 'pending', repostUri: 'pending',
}) })
return queueToggle(true) return queueToggle(true)
}, [postUri, queueToggle]) }, [queryClient, postUri, queueToggle])
const queueUnrepost = useCallback(() => { const queueUnrepost = useCallback(() => {
// optimistically update // optimistically update
updatePostShadow(postUri, { updatePostShadow(queryClient, postUri, {
repostUri: undefined, repostUri: undefined,
}) })
return queueToggle(false) return queueToggle(false)
}, [postUri, queueToggle]) }, [queryClient, postUri, queueToggle])
return [queueRepost, queueUnrepost] return [queueRepost, queueUnrepost]
} }
@@ -234,12 +237,13 @@ function usePostUnrepostMutation(
} }
export function usePostDeleteMutation() { export function usePostDeleteMutation() {
const queryClient = useQueryClient()
return useMutation<void, Error, {uri: string}>({ return useMutation<void, Error, {uri: string}>({
mutationFn: async ({uri}) => { mutationFn: async ({uri}) => {
await getAgent().deletePost(uri) await getAgent().deletePost(uri)
}, },
onSuccess(data, variables) { onSuccess(data, variables) {
updatePostShadow(variables.uri, {isDeleted: true}) updatePostShadow(queryClient, variables.uri, {isDeleted: true})
track('Post:Delete') track('Post:Delete')
}, },
}) })