From e56b7e00b57ac86b50dc106bfd28fb5236fa01d4 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Thu, 21 Mar 2024 22:47:02 +0000 Subject: [PATCH] Pass queryClient explicitly to updatePostShadow --- src/state/cache/post-shadow.ts | 18 +++++++++++------ src/state/queries/post.ts | 36 +++++++++++++++++++--------------- 2 files changed, 32 insertions(+), 22 deletions(-) diff --git a/src/state/cache/post-shadow.ts b/src/state/cache/post-shadow.ts index 7cf72fae43..6225cbdba0 100644 --- a/src/state/cache/post-shadow.ts +++ b/src/state/cache/post-shadow.ts @@ -1,13 +1,14 @@ -import {useEffect, useState, useMemo} from 'react' -import EventEmitter from 'eventemitter3' +import {useEffect, useMemo, useState} from 'react' import {AppBskyFeedDefs} from '@atproto/api' +import {QueryClient} from '@tanstack/react-query' +import EventEmitter from 'eventemitter3' + import {batchedUpdates} from '#/lib/batchedUpdates' -import {Shadow, castAsShadow} from './types' import {findAllPostsInQueryData as findAllPostsInNotifsQueryData} from '../queries/notifications/feed' import {findAllPostsInQueryData as findAllPostsInFeedQueryData} from '../queries/post-feed' import {findAllPostsInQueryData as findAllPostsInThreadQueryData} from '../queries/post-thread' 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 interface PostShadow { @@ -93,8 +94,12 @@ function mergeShadow( }) } -export function updatePostShadow(uri: string, value: Partial) { - const cachedPosts = findPostsInCache(uri) +export function updatePostShadow( + queryClient: QueryClient, + uri: string, + value: Partial, +) { + const cachedPosts = findPostsInCache(queryClient, uri) for (let post of cachedPosts) { shadows.set(post, {...shadows.get(post), ...value}) } @@ -104,6 +109,7 @@ export function updatePostShadow(uri: string, value: Partial) { } function* findPostsInCache( + queryClient: QueryClient, uri: string, ): Generator { for (let post of findAllPostsInFeedQueryData(queryClient, uri)) { diff --git a/src/state/queries/post.ts b/src/state/queries/post.ts index e3682e304d..b868a1daca 100644 --- a/src/state/queries/post.ts +++ b/src/state/queries/post.ts @@ -1,12 +1,13 @@ import {useCallback} from 'react' 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 {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] @@ -62,6 +63,7 @@ export function usePostLikeMutationQueue( logContext: LogEvents['post:like']['logContext'] & LogEvents['post:unlike']['logContext'], ) { + const queryClient = useQueryClient() const postUri = post.uri const postCid = post.cid const initialLikeUri = post.viewer?.like @@ -89,7 +91,7 @@ export function usePostLikeMutationQueue( }, onSuccess(finalLikeUri) { // finalize - updatePostShadow(postUri, { + updatePostShadow(queryClient, postUri, { likeUri: finalLikeUri, }) }, @@ -97,19 +99,19 @@ export function usePostLikeMutationQueue( const queueLike = useCallback(() => { // optimistically update - updatePostShadow(postUri, { + updatePostShadow(queryClient, postUri, { likeUri: 'pending', }) return queueToggle(true) - }, [postUri, queueToggle]) + }, [queryClient, postUri, queueToggle]) const queueUnlike = useCallback(() => { // optimistically update - updatePostShadow(postUri, { + updatePostShadow(queryClient, postUri, { likeUri: undefined, }) return queueToggle(false) - }, [postUri, queueToggle]) + }, [queryClient, postUri, queueToggle]) return [queueLike, queueUnlike] } @@ -149,6 +151,7 @@ export function usePostRepostMutationQueue( logContext: LogEvents['post:repost']['logContext'] & LogEvents['post:unrepost']['logContext'], ) { + const queryClient = useQueryClient() const postUri = post.uri const postCid = post.cid const initialRepostUri = post.viewer?.repost @@ -176,7 +179,7 @@ export function usePostRepostMutationQueue( }, onSuccess(finalRepostUri) { // finalize - updatePostShadow(postUri, { + updatePostShadow(queryClient, postUri, { repostUri: finalRepostUri, }) }, @@ -184,19 +187,19 @@ export function usePostRepostMutationQueue( const queueRepost = useCallback(() => { // optimistically update - updatePostShadow(postUri, { + updatePostShadow(queryClient, postUri, { repostUri: 'pending', }) return queueToggle(true) - }, [postUri, queueToggle]) + }, [queryClient, postUri, queueToggle]) const queueUnrepost = useCallback(() => { // optimistically update - updatePostShadow(postUri, { + updatePostShadow(queryClient, postUri, { repostUri: undefined, }) return queueToggle(false) - }, [postUri, queueToggle]) + }, [queryClient, postUri, queueToggle]) return [queueRepost, queueUnrepost] } @@ -234,12 +237,13 @@ function usePostUnrepostMutation( } export function usePostDeleteMutation() { + const queryClient = useQueryClient() return useMutation({ mutationFn: async ({uri}) => { await getAgent().deletePost(uri) }, onSuccess(data, variables) { - updatePostShadow(variables.uri, {isDeleted: true}) + updatePostShadow(queryClient, variables.uri, {isDeleted: true}) track('Post:Delete') }, })