@automattic/data-stores 3.1.2 → 3.2.1

package/src/reader/mutations/test/use-site-subscription-mutations.test.tsx

@@ -0,0 +1,208 @@
+/**
+ * @jest-environment jsdom
+ */
+import {
+	getSiteSubscriptionsQueryKey,
+	type SiteSubscriptionsInfiniteData,
+} from '@automattic/api-queries';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { act, renderHook, waitFor } from '@testing-library/react';
+import React from 'react';
+import { callApi } from '../../helpers';
+import useSiteSubscribeMutation from '../../mutations/use-site-subscribe-mutation';
+import useSiteUnsubscribeMutation from '../../mutations/use-site-unsubscribe-mutation';
+import type { SiteSubscriptionItem } from '../../types';
+import type { ReactNode } from 'react';
+
+jest.mock( '../../hooks', () => ( {
+	useIsLoggedIn: jest.fn().mockReturnValue( { isLoggedIn: true, id: 1 } ),
+	useCacheKey: jest.fn( ( key ) => [ ...key, true, 1 ] ),
+} ) );
+
+jest.mock( '../../helpers', () => ( {
+	...jest.requireActual( '../../helpers' ),
+	callApi: jest.fn(),
+} ) );
+
+const makeQueryClient = () => new QueryClient( { defaultOptions: { queries: { retry: false } } } );
+
+const makeWrapper = ( queryClient: QueryClient ) =>
+	function Wrapper( { children }: { children: ReactNode } ) {
+		return <QueryClientProvider client={ queryClient }>{ children }</QueryClientProvider>;
+	};
+
+const makeSubscription = (
+	overrides: Partial< SiteSubscriptionItem > = {}
+): SiteSubscriptionItem => ( {
+	ID: 123,
+	URL: 'https://example.com',
+	feed_URL: 'https://example.com/feed',
+	blog_ID: 123,
+	feed_ID: 456,
+	is_following: true,
+	isDeleted: false,
+	...overrides,
+} );
+
+const makeSiteSubscriptionsData = (
+	subscriptions: SiteSubscriptionItem[],
+	totalCount = subscriptions.length
+): SiteSubscriptionsInfiniteData => ( {
+	pages: [
+		{
+			subscriptions,
+			totalCount,
+			page: 1,
+			number: 200,
+		},
+	],
+	pageParams: [ 1 ],
+} );
+
+const getCachedSubscriptions = ( queryClient: QueryClient ) =>
+	queryClient.getQueryData< SiteSubscriptionsInfiniteData >( getSiteSubscriptionsQueryKey() )
+		?.pages[ 0 ];
+
+describe( 'site subscription mutations', () => {
+	beforeEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'optimistically restores a deleted site subscription and increments total count', async () => {
+		const queryClient = makeQueryClient();
+		queryClient.setQueryData(
+			getSiteSubscriptionsQueryKey(),
+			makeSiteSubscriptionsData(
+				[ makeSubscription( { is_following: false, isDeleted: true } ) ],
+				0
+			)
+		);
+		( callApi as jest.Mock ).mockResolvedValue( { subscribed: true } );
+
+		const { result } = renderHook( () => useSiteSubscribeMutation(), {
+			wrapper: makeWrapper( queryClient ),
+		} );
+
+		act( () => {
+			result.current.mutate( {
+				blog_id: 123,
+				url: 'https://example.com/feed',
+				doNotInvalidateSiteSubscriptions: true,
+			} );
+		} );
+
+		await waitFor( () => expect( callApi ).toHaveBeenCalled() );
+		const page = getCachedSubscriptions( queryClient );
+		expect( page?.totalCount ).toBe( 1 );
+		expect( page?.subscriptions[ 0 ] ).toMatchObject( {
+			is_following: true,
+			isDeleted: false,
+		} );
+	} );
+
+	it( 'rolls back site subscription restore when subscribe fails', async () => {
+		const queryClient = makeQueryClient();
+		const previousData = makeSiteSubscriptionsData(
+			[ makeSubscription( { is_following: false, isDeleted: true } ) ],
+			0
+		);
+		queryClient.setQueryData( getSiteSubscriptionsQueryKey(), previousData );
+		( callApi as jest.Mock ).mockRejectedValue( new Error( 'subscribe failed' ) );
+
+		const { result } = renderHook( () => useSiteSubscribeMutation(), {
+			wrapper: makeWrapper( queryClient ),
+		} );
+
+		act( () => {
+			result.current.mutate( {
+				blog_id: 123,
+				url: 'https://example.com/feed',
+				doNotInvalidateSiteSubscriptions: true,
+			} );
+		} );
+
+		await waitFor( () => expect( result.current.isError ).toBe( true ) );
+		expect( queryClient.getQueryData( getSiteSubscriptionsQueryKey() ) ).toEqual( previousData );
+	} );
+
+	it( 'optimistically marks a site subscription deleted and decrements total count', async () => {
+		const queryClient = makeQueryClient();
+		queryClient.setQueryData(
+			getSiteSubscriptionsQueryKey(),
+			makeSiteSubscriptionsData( [ makeSubscription() ], 1 )
+		);
+		( callApi as jest.Mock ).mockResolvedValue( { subscribed: false } );
+
+		const { result } = renderHook( () => useSiteUnsubscribeMutation(), {
+			wrapper: makeWrapper( queryClient ),
+		} );
+
+		act( () => {
+			result.current.mutate( {
+				subscriptionId: 123,
+				blog_id: 123,
+				doNotInvalidateSiteSubscriptions: true,
+			} );
+		} );
+
+		await waitFor( () => expect( callApi ).toHaveBeenCalled() );
+		const page = getCachedSubscriptions( queryClient );
+		expect( page?.totalCount ).toBe( 0 );
+		expect( page?.subscriptions[ 0 ] ).toMatchObject( {
+			is_following: false,
+			isDeleted: true,
+			resubscribed: false,
+		} );
+	} );
+
+	it( 'does not decrement total count when unsubscribe cannot match a cached subscription', async () => {
+		const queryClient = makeQueryClient();
+		queryClient.setQueryData(
+			getSiteSubscriptionsQueryKey(),
+			makeSiteSubscriptionsData( [ makeSubscription( { ID: 456, blog_ID: 456 } ) ], 1 )
+		);
+		( callApi as jest.Mock ).mockResolvedValue( { subscribed: false } );
+
+		const { result } = renderHook( () => useSiteUnsubscribeMutation(), {
+			wrapper: makeWrapper( queryClient ),
+		} );
+
+		act( () => {
+			result.current.mutate( {
+				subscriptionId: 123,
+				blog_id: 123,
+				doNotInvalidateSiteSubscriptions: true,
+			} );
+		} );
+
+		await waitFor( () => expect( callApi ).toHaveBeenCalled() );
+		const page = getCachedSubscriptions( queryClient );
+		expect( page?.totalCount ).toBe( 1 );
+		expect( page?.subscriptions[ 0 ] ).toMatchObject( {
+			is_following: true,
+			isDeleted: false,
+		} );
+	} );
+
+	it( 'rolls back site subscription delete when unsubscribe fails', async () => {
+		const queryClient = makeQueryClient();
+		const previousData = makeSiteSubscriptionsData( [ makeSubscription() ], 1 );
+		queryClient.setQueryData( getSiteSubscriptionsQueryKey(), previousData );
+		( callApi as jest.Mock ).mockRejectedValue( new Error( 'unsubscribe failed' ) );
+
+		const { result } = renderHook( () => useSiteUnsubscribeMutation(), {
+			wrapper: makeWrapper( queryClient ),
+		} );
+
+		act( () => {
+			result.current.mutate( {
+				subscriptionId: 123,
+				blog_id: 123,
+				doNotInvalidateSiteSubscriptions: true,
+			} );
+		} );
+
+		await waitFor( () => expect( result.current.isError ).toBe( true ) );
+		expect( queryClient.getQueryData( getSiteSubscriptionsQueryKey() ) ).toEqual( previousData );
+	} );
+} );

package/src/reader/mutations/use-pending-site-confirm-mutation.ts

@@ -1,7 +1,7 @@
+import { getSiteSubscriptionsQueryKey } from '@automattic/api-queries';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { callApi } from '../helpers';
 import { useCacheKey, useIsLoggedIn } from '../hooks';
-import { siteSubscriptionsQueryKeyPrefix } from '../queries';
 import { subscriptionsCountQueryKeyPrefix } from '../queries/use-subscriptions-count-query';
 import { PendingSiteSubscriptionsResult, SubscriptionManagerSubscriptionsCount } from '../types';
 
@@ -17,7 +17,7 @@ type PendingSiteConfirmResponse = {
 const usePendingSiteConfirmMutation = () => {
 	const { isLoggedIn } = useIsLoggedIn();
 	const queryClient = useQueryClient();
-	const subscriptionsCacheKey = useCacheKey( siteSubscriptionsQueryKeyPrefix );
+	const subscriptionsCacheKey = getSiteSubscriptionsQueryKey();
 	const countCacheKey = useCacheKey( subscriptionsCountQueryKeyPrefix );
 
 	return useMutation( {

package/src/reader/mutations/use-site-delivery-frequency-mutation.ts

@@ -1,16 +1,16 @@
+import {
+	getSiteSubscriptionsQueryKey,
+	type SiteSubscriptionsInfiniteData,
+} from '@automattic/api-queries';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { EmailDeliveryFrequency } from '../constants';
-import { callApi, applyCallbackToPages, buildQueryKey } from '../helpers';
+import { callApi } from '../helpers';
 import {
 	alterSiteSubscriptionDetails,
 	invalidateSiteSubscriptionDetails,
 } from '../helpers/optimistic-update';
 import { useIsLoggedIn } from '../hooks';
-import type {
-	PagedQueryResult,
-	SiteSubscriptionsResponseItem,
-	SiteSubscriptionDetails,
-} from '../types';
+import type { SiteSubscriptionDetails } from '../types';
 
 type SiteSubscriptionDeliveryFrequencyParams = {
 	delivery_frequency: EmailDeliveryFrequency;
@@ -63,39 +63,35 @@ const useSiteDeliveryFrequencyMutation = () => {
 			return response;
 		},
 		onMutate: async ( { blog_id, delivery_frequency, subscriptionId } ) => {
-			const siteSubscriptionsCacheKey = buildQueryKey(
-				[ 'read', 'site-subscriptions' ],
-				isLoggedIn,
-				id
-			);
+			const siteSubscriptionsCacheKey = getSiteSubscriptionsQueryKey();
 
 			await queryClient.cancelQueries( { queryKey: siteSubscriptionsCacheKey } );
 
 			const previousSiteSubscriptions =
-				queryClient.getQueryData<
-					PagedQueryResult< SiteSubscriptionsResponseItem, 'subscriptions' >
-				>( siteSubscriptionsCacheKey );
-			const mutatedSiteSubscriptions = applyCallbackToPages<
-				'subscriptions',
-				SiteSubscriptionsResponseItem
-			>( previousSiteSubscriptions, ( page ) => ( {
-				...page,
-				subscriptions: page.subscriptions.map( ( siteSubscription ) => {
-					if ( siteSubscription.blog_ID === blog_id ) {
-						return {
-							...siteSubscription,
-							delivery_methods: {
-								...siteSubscription.delivery_methods,
-								email: {
-									...( siteSubscription.delivery_methods?.email ?? { send_posts: false } ),
-									post_delivery_frequency: delivery_frequency,
-								},
-							},
-						};
-					}
-					return siteSubscription;
-				} ),
-			} ) );
+				queryClient.getQueryData< SiteSubscriptionsInfiniteData >( siteSubscriptionsCacheKey );
+			const mutatedSiteSubscriptions = previousSiteSubscriptions
+				? {
+						...previousSiteSubscriptions,
+						pages: previousSiteSubscriptions.pages.map( ( page ) => ( {
+							...page,
+							subscriptions: page.subscriptions.map( ( siteSubscription ) => {
+								if ( Number( siteSubscription.blog_ID ) === Number( blog_id ) ) {
+									return {
+										...siteSubscription,
+										delivery_methods: {
+											...siteSubscription.delivery_methods,
+											email: {
+												...( siteSubscription.delivery_methods?.email ?? { send_posts: false } ),
+												post_delivery_frequency: delivery_frequency,
+											},
+										},
+									};
+								}
+								return siteSubscription;
+							} ),
+						} ) ),
+				  }
+				: previousSiteSubscriptions;
 			queryClient.setQueryData( siteSubscriptionsCacheKey, mutatedSiteSubscriptions );
 
 			const previousSiteSubscriptionDetails = await alterSiteSubscriptionDetails(
@@ -122,7 +118,7 @@ const useSiteDeliveryFrequencyMutation = () => {
 		},
 		onError: ( err, _, context ) => {
 			queryClient.setQueryData(
-				buildQueryKey( [ 'read', 'site-subscriptions' ], isLoggedIn, id ),
+				getSiteSubscriptionsQueryKey(),
 				context?.previousSiteSubscriptions
 			);
 			if ( context?.previousSiteSubscriptionDetails ) {

package/src/reader/mutations/use-site-email-me-new-comments-mutation.ts

@@ -1,11 +1,15 @@
+import {
+	getSiteSubscriptionsQueryKey,
+	type SiteSubscriptionsInfiniteData,
+} from '@automattic/api-queries';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { buildQueryKey, callApi } from '../helpers';
+import { callApi } from '../helpers';
 import {
 	alterSiteSubscriptionDetails,
 	invalidateSiteSubscriptionDetails,
 } from '../helpers/optimistic-update';
 import { useIsLoggedIn } from '../hooks';
-import type { SiteSubscriptionsPages, SiteSubscriptionDetails } from '../types';
+import type { SiteSubscriptionDetails } from '../types';
 
 type SiteSubscriptionEmailMeNewCommentsParams = {
 	send_comments: boolean;
@@ -50,16 +54,12 @@ const useSiteEmailMeNewCommentsMutation = () => {
 			return response;
 		},
 		onMutate: async ( { blog_id, send_comments, subscriptionId } ) => {
-			const siteSubscriptionsQueryKey = buildQueryKey(
-				[ 'read', 'site-subscriptions' ],
-				isLoggedIn,
-				id
-			);
+			const siteSubscriptionsQueryKey = getSiteSubscriptionsQueryKey();
 
 			await queryClient.cancelQueries( { queryKey: siteSubscriptionsQueryKey } );
 
 			const previousSiteSubscriptions =
-				queryClient.getQueryData< SiteSubscriptionsPages >( siteSubscriptionsQueryKey );
+				queryClient.getQueryData< SiteSubscriptionsInfiniteData >( siteSubscriptionsQueryKey );
 
 			if ( previousSiteSubscriptions ) {
 				queryClient.setQueryData( siteSubscriptionsQueryKey, {
@@ -68,7 +68,7 @@ const useSiteEmailMeNewCommentsMutation = () => {
 						return {
 							...page,
 							subscriptions: page.subscriptions.map( ( siteSubscription ) => {
-								if ( siteSubscription.blog_ID === blog_id ) {
+								if ( Number( siteSubscription.blog_ID ) === Number( blog_id ) ) {
 									return {
 										...siteSubscription,
 										delivery_methods: {
@@ -112,7 +112,7 @@ const useSiteEmailMeNewCommentsMutation = () => {
 		onError: ( _err, _, context ) => {
 			if ( context?.previousSiteSubscriptions ) {
 				queryClient.setQueryData(
-					buildQueryKey( [ 'read', 'site-subscriptions' ], isLoggedIn, id ),
+					getSiteSubscriptionsQueryKey(),
 					context.previousSiteSubscriptions
 				);
 			}

package/src/reader/mutations/use-site-email-me-new-posts-mutation.ts

@@ -1,11 +1,15 @@
+import {
+	getSiteSubscriptionsQueryKey,
+	type SiteSubscriptionsInfiniteData,
+} from '@automattic/api-queries';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { buildQueryKey, callApi } from '../helpers';
+import { callApi } from '../helpers';
 import {
 	alterSiteSubscriptionDetails,
 	invalidateSiteSubscriptionDetails,
 } from '../helpers/optimistic-update';
 import { useIsLoggedIn } from '../hooks';
-import type { SiteSubscriptionsPages, SiteSubscriptionDetails } from '../types';
+import type { SiteSubscriptionDetails } from '../types';
 
 type SiteSubscriptionEmailMeNewPostsParams = {
 	send_posts: boolean;
@@ -50,16 +54,12 @@ const useSiteEmailMeNewPostsMutation = () => {
 			return response;
 		},
 		onMutate: async ( { blog_id, send_posts, subscriptionId } ) => {
-			const siteSubscriptionsQueryKey = buildQueryKey(
-				[ 'read', 'site-subscriptions' ],
-				isLoggedIn,
-				id
-			);
+			const siteSubscriptionsQueryKey = getSiteSubscriptionsQueryKey();
 
 			await queryClient.cancelQueries( { queryKey: siteSubscriptionsQueryKey } );
 
 			const previousSiteSubscriptions =
-				queryClient.getQueryData< SiteSubscriptionsPages >( siteSubscriptionsQueryKey );
+				queryClient.getQueryData< SiteSubscriptionsInfiniteData >( siteSubscriptionsQueryKey );
 			if ( previousSiteSubscriptions ) {
 				queryClient.setQueryData( siteSubscriptionsQueryKey, {
 					...previousSiteSubscriptions,
@@ -67,7 +67,7 @@ const useSiteEmailMeNewPostsMutation = () => {
 						return {
 							...page,
 							subscriptions: page.subscriptions.map( ( siteSubscription ) => {
-								if ( siteSubscription.blog_ID === blog_id ) {
+								if ( Number( siteSubscription.blog_ID ) === Number( blog_id ) ) {
 									return {
 										...siteSubscription,
 										delivery_methods: {
@@ -116,7 +116,7 @@ const useSiteEmailMeNewPostsMutation = () => {
 		onError: ( _err, _, context ) => {
 			if ( context?.previousSiteSubscriptions ) {
 				queryClient.setQueryData(
-					buildQueryKey( [ 'read', 'site-subscriptions' ], isLoggedIn, id ),
+					getSiteSubscriptionsQueryKey(),
 					context.previousSiteSubscriptions
 				);
 			}

package/src/reader/mutations/use-site-notify-me-of-new-posts-mutation.ts

@@ -1,11 +1,15 @@
+import {
+	getSiteSubscriptionsQueryKey,
+	type SiteSubscriptionsInfiniteData,
+} from '@automattic/api-queries';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { buildQueryKey, callApi } from '../helpers';
+import { callApi } from '../helpers';
 import {
 	alterSiteSubscriptionDetails,
 	invalidateSiteSubscriptionDetails,
 } from '../helpers/optimistic-update';
 import { useIsLoggedIn } from '../hooks';
-import type { SiteSubscriptionsPages, SiteSubscriptionDetails } from '../types';
+import type { SiteSubscriptionDetails } from '../types';
 
 type SiteSubscriptionNotifyMeOfNewPostsParams = {
 	send_posts: boolean;
@@ -51,16 +55,12 @@ const useSiteNotifyMeOfNewPostsMutation = () => {
 			return response;
 		},
 		onMutate: async ( { blog_id, send_posts, subscriptionId } ) => {
-			const siteSubscriptionsQueryKey = buildQueryKey(
-				[ 'read', 'site-subscriptions' ],
-				isLoggedIn,
-				id
-			);
+			const siteSubscriptionsQueryKey = getSiteSubscriptionsQueryKey();
 
 			await queryClient.cancelQueries( { queryKey: siteSubscriptionsQueryKey } );
 
 			const previousSiteSubscriptions =
-				queryClient.getQueryData< SiteSubscriptionsPages >( siteSubscriptionsQueryKey );
+				queryClient.getQueryData< SiteSubscriptionsInfiniteData >( siteSubscriptionsQueryKey );
 
 			if ( previousSiteSubscriptions ) {
 				queryClient.setQueryData( siteSubscriptionsQueryKey, {
@@ -69,7 +69,7 @@ const useSiteNotifyMeOfNewPostsMutation = () => {
 						return {
 							...page,
 							subscriptions: page.subscriptions.map( ( siteSubscription ) => {
-								if ( siteSubscription.blog_ID === blog_id ) {
+								if ( Number( siteSubscription.blog_ID ) === Number( blog_id ) ) {
 									return {
 										...siteSubscription,
 										delivery_methods: {
@@ -118,7 +118,7 @@ const useSiteNotifyMeOfNewPostsMutation = () => {
 		onError: ( err, _, context ) => {
 			if ( context?.previousSiteSubscriptions ) {
 				queryClient.setQueryData(
-					buildQueryKey( [ 'read', 'site-subscriptions' ], isLoggedIn, id ),
+					getSiteSubscriptionsQueryKey(),
 					context.previousSiteSubscriptions
 				);
 			}

package/src/reader/mutations/use-site-subscribe-mutation.ts

@@ -1,7 +1,10 @@
+import {
+	getSiteSubscriptionsQueryKey,
+	type SiteSubscriptionsInfiniteData,
+} from '@automattic/api-queries';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { buildQueryKey, callApi, getSubscriptionMutationParams, isValidId } from '../helpers';
 import { useIsLoggedIn } from '../hooks';
-import { SiteSubscriptionsPages } from '../types';
 import type { SiteSubscriptionDetails } from '../types';
 
 type SubscribeParams = {
@@ -20,6 +23,7 @@ type SubscribeResponse = {
 	success?: boolean;
 	subscribed?: boolean;
 	subscription?: {
+		ID: string;
 		blog_ID: string;
 		delivery_frequency: string;
 		status: string;
@@ -38,11 +42,7 @@ const buildSubscriptionDetailsByBlogIdQueryKey = (
 const useSiteSubscribeMutation = () => {
 	const { isLoggedIn, id: userId } = useIsLoggedIn();
 	const queryClient = useQueryClient();
-	const siteSubscriptionsCacheKey = buildQueryKey(
-		[ 'read', 'site-subscriptions' ],
-		isLoggedIn,
-		userId
-	);
+	const siteSubscriptionsCacheKey = getSiteSubscriptionsQueryKey();
 	const subscriptionsCountCacheKey = buildQueryKey(
 		[ 'read', 'subscriptions-count' ],
 		isLoggedIn,
@@ -68,7 +68,8 @@ const useSiteSubscribeMutation = () => {
 			if ( ! response.subscribed ) {
 				throw new Error(
 					// reminder: translate this string when we add it to the UI
-					'Something went wrong while subscribing.'
+					'Something went wrong while subscribing.',
+					{ cause: response.info }
 				);
 			}
 
@@ -98,20 +99,30 @@ const useSiteSubscribeMutation = () => {
 			}
 
 			const previousSiteSubscriptions =
-				queryClient.getQueryData< SiteSubscriptionsPages >( siteSubscriptionsCacheKey );
+				queryClient.getQueryData< SiteSubscriptionsInfiniteData >( siteSubscriptionsCacheKey );
 
 			if ( previousSiteSubscriptions ) {
 				queryClient.setQueryData( siteSubscriptionsCacheKey, {
 					...previousSiteSubscriptions,
 					pages: previousSiteSubscriptions.pages.map( ( page ) => {
+						const shouldIncreaseTotalCount = page.subscriptions.some(
+							( siteSubscription ) =>
+								Number( siteSubscription.blog_ID ) === Number( params.blog_id ) &&
+								( siteSubscription.isDeleted || ! siteSubscription.is_following )
+						);
+
 						return {
 							...page,
-							total_subscriptions: page.total_subscriptions - 1,
+							totalCount:
+								typeof page.totalCount === 'number' && shouldIncreaseTotalCount
+									? page.totalCount + 1
+									: page.totalCount,
 							subscriptions: page.subscriptions.map( ( siteSubscription ) =>
-								siteSubscription.blog_ID === params.blog_id
+								Number( siteSubscription.blog_ID ) === Number( params.blog_id )
 									? {
 											...siteSubscription,
 											date_subscribed: new Date(),
+											is_following: true,
 											isDeleted: false,
 											resubscribed: params.resubscribed ?? false,
 									  }

package/src/reader/mutations/use-site-unsubscribe-mutation.ts

@@ -1,11 +1,12 @@
+import {
+	getSiteSubscriptionsQueryKey,
+	type SiteSubscriptionsInfiniteData,
+} from '@automattic/api-queries';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { buildQueryKey, callApi, getSubscriptionMutationParams, isValidId } from '../helpers';
 import { useCacheKey, useIsLoggedIn } from '../hooks';
-import {
-	SiteSubscriptionsPages,
-	SubscriptionManagerSubscriptionsCount,
-	SiteSubscriptionDetails,
-} from '../types';
+import { SubscriptionManagerSubscriptionsCount, SiteSubscriptionDetails } from '../types';
+import type { SiteSubscriptionItem } from '@automattic/api-core';
 
 type UnsubscribeParams = {
 	subscriptionId: number;
@@ -46,7 +47,7 @@ const buildSiteSubscriptionDetailsQueryKey = (
 const useSiteUnsubscribeMutation = () => {
 	const { isLoggedIn, id: userId } = useIsLoggedIn();
 	const queryClient = useQueryClient();
-	const siteSubscriptionsQueryKey = useCacheKey( [ 'read', 'site-subscriptions' ] );
+	const siteSubscriptionsQueryKey = getSiteSubscriptionsQueryKey();
 	const subscriptionsCountQueryKey = useCacheKey( [ 'read', 'subscriptions-count' ] );
 
 	return useMutation( {
@@ -93,21 +94,30 @@ const useSiteUnsubscribeMutation = () => {
 			await queryClient.cancelQueries( { queryKey: siteSubscriptionDetailsQueryKey } );
 
 			const previousSiteSubscriptions =
-				queryClient.getQueryData< SiteSubscriptionsPages >( siteSubscriptionsQueryKey );
+				queryClient.getQueryData< SiteSubscriptionsInfiniteData >( siteSubscriptionsQueryKey );
 
 			// remove blog from site subscriptions
 			if ( previousSiteSubscriptions ) {
 				queryClient.setQueryData( siteSubscriptionsQueryKey, {
 					...previousSiteSubscriptions,
 					pages: previousSiteSubscriptions.pages.map( ( page ) => {
+						const isTargetSubscription = ( siteSubscription: SiteSubscriptionItem ) =>
+							Number( siteSubscription.ID ) === params.subscriptionId ||
+							( isValidId( params.blog_id ) &&
+								Number( siteSubscription.blog_ID ) === Number( params.blog_id ) );
+						const shouldDecrementTotalCount = page.subscriptions.some( isTargetSubscription );
+
 						return {
 							...page,
-							total_subscriptions: page.total_subscriptions - 1,
+							totalCount:
+								typeof page.totalCount === 'number' && shouldDecrementTotalCount
+									? page.totalCount - 1
+									: page.totalCount,
 							subscriptions: page.subscriptions.map( ( siteSubscription ) =>
-								Number( siteSubscription.ID ) === params.subscriptionId ||
-								( isValidId( params.blog_id ) && siteSubscription.blog_ID === params.blog_id ) //siteSubscription.blog_ID is not valid ID for non-wpcom subscriptions, so when unsubscribing from such site, the param.blog_id will also be not valid, this would create false positive
+								isTargetSubscription( siteSubscription )
 									? {
 											...siteSubscription,
+											is_following: false,
 											isDeleted: true,
 											resubscribed: false,
 									  }

package/src/reader/queries/index.ts

@@ -1,15 +1,13 @@
 export { default as usePendingPostSubscriptionsQuery } from './use-pending-post-subscriptions-query';
 export { default as usePendingSiteSubscriptionsQuery } from './use-pending-site-subscriptions-query';
 export { default as usePostSubscriptionsQuery } from './use-post-subscriptions-query';
-export { default as useReadFeedSearchQuery, FeedSort } from './use-read-feed-search-query';
-export { default as useReadFeedSiteQuery } from './use-read-feed-site-query';
-export { default as useReadFeedQuery } from './use-read-feed-query';
 export { default as useSiteSubscriptionDetailsQuery } from './use-site-subscription-details-query';
 export {
 	default as useSiteSubscriptionsQuery,
 	siteSubscriptionsQueryKeyPrefix,
 } from './use-site-subscriptions-query';
-export { default as useSubscriptionsCountQuery } from './use-subscriptions-count-query';
+export {
+	default as useSubscriptionsCountQuery,
+	subscriptionsCountQueryKeyPrefix,
+} from './use-subscriptions-count-query';
 export { default as useUserSettingsQuery } from './use-user-settings-query';
-
-export type { FeedItem } from './use-read-feed-search-query';