Update query hooks and introduce window state getters (#36257)

* Add useWindowStateQuery

* changelog

* Move hook to get function

* Fix typo

* Update query hooks

* Remove explicitKey param

Author: robertsreberski

projects/packages/my-jetpack/_inc/components/add-license-screen/index.jsx

@@ -20,10 +20,10 @@ import GoBackLink from '../go-back-link';
  */
 export default function AddLicenseScreen() {
 	const { recordEvent } = useAnalytics();
-	const { data: licenses = [], isLoading: fetchingAvailableLicenses } = useJetpackApiQuery(
-		QUERY_LICENSES_KEY,
-		async api => ( await api.getUserLicenses() )?.items
-	);
+	const { data: licenses = [], isLoading: fetchingAvailableLicenses } = useJetpackApiQuery( {
+		name: QUERY_LICENSES_KEY,
+		queryFn: async api => ( await api.getUserLicenses() )?.items,
+	} );
 	const { userConnectionData } = useConnection();
 	const [ hasActivatedLicense, setHasActivatedLicense ] = useState( false );
 

projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx

@@ -29,6 +29,7 @@ import {
 } from '../../data/constants';
 import useProduct from '../../data/products/use-product';
 import useSimpleQuery from '../../data/use-simple-query';
+import getMyJetpackWindowState from '../../data/utils/get-my-jetpack-window-state';
 import useAnalytics from '../../hooks/use-analytics';
 import useConnectionWatcher from '../../hooks/use-connection-watcher';
 import ConnectionsSection from '../connections-section';
@@ -94,28 +95,27 @@ const GlobalNotice = ( { message, options } ) => {
 export default function MyJetpackScreen() {
 	useConnectionWatcher();
 	// Check using the global state instead of Redux so it only has effect after refreshing the page
-	const welcomeBannerHasBeenDismissed =
-		window?.myJetpackInitialState?.welcomeBanner.hasBeenDismissed;
-	const { showJetpackStatsCard = false } = window.myJetpackInitialState?.myJetpackFlags ?? {};
-	const jetpackManage = window?.myJetpackInitialState?.jetpackManage;
+	const { hasBeenDismissed: welcomeBannerHasBeenDismissed } = getMyJetpackWindowState(
+		'welcomeBanner',
+		{ hasBeenDismissed: false }
+	);
+	const { showJetpackStatsCard } = getMyJetpackWindowState( 'myJetpackFlags', {
+		showJetpackStatsCard: false,
+	} );
+	const jetpackManage = getMyJetpackWindowState( 'jetpackManage', {} );
 
 	const { currentNotice } = useContext( NoticeContext );
 	const { message, options } = currentNotice || {};
 	const { hasConnectionError } = useConnectionErrorNotice();
-	const { data: availabilityData, isLoading: isChatAvailabilityLoading } = useSimpleQuery(
-		QUERY_CHAT_AVAILABILITY_KEY,
-		{
-			path: REST_API_CHAT_AVAILABILITY_ENDPOINT,
-		}
-	);
+	const { data: availabilityData, isLoading: isChatAvailabilityLoading } = useSimpleQuery( {
+		name: QUERY_CHAT_AVAILABILITY_KEY,
+		query: { path: REST_API_CHAT_AVAILABILITY_ENDPOINT },
+	} );
 	const { detail: statsDetails } = useProduct( 'stats' );
-
-	const { data: authData, isLoading: isJwtLoading } = useSimpleQuery(
-		QUERY_CHAT_AUTHENTICATION_KEY,
-		{
-			path: REST_API_CHAT_AUTHENTICATION_ENDPOINT,
-		}
-	);
+	const { data: authData, isLoading: isJwtLoading } = useSimpleQuery( {
+		name: QUERY_CHAT_AUTHENTICATION_KEY,
+		query: { path: REST_API_CHAT_AUTHENTICATION_ENDPOINT },
+	} );
 
 	const isAvailable = availabilityData?.is_available;
 	const jwt = authData?.user?.jwt;

projects/packages/my-jetpack/_inc/components/plans-section/index.jsx

@@ -166,7 +166,10 @@ export default function PlansSection() {
 		data: purchases,
 		isLoading,
 		isError,
-	} = useSimpleQuery( QUERY_PURCHASES_KEY, { path: REST_API_SITE_PURCHASES_ENDPOINT } );
+	} = useSimpleQuery( {
+		name: QUERY_PURCHASES_KEY,
+		query: { path: REST_API_SITE_PURCHASES_ENDPOINT },
+	} );
 
 	const isDataLoaded = purchases && ! isLoading && ! isError;
 	const numberOfPurchases = isDataLoaded ? purchases.length : 0;

projects/packages/my-jetpack/_inc/components/product-cards-section/backup-card/index.jsx

@@ -134,8 +134,11 @@ const BackupCard = ( { admin } ) => {
 };
 
 const WithBackupsValueSection = ( { admin, slug } ) => {
-	const { data, isLoading } = useSimpleQuery( QUERY_BACKUP_HISTORY_KEY, {
-		path: REST_API_REWINDABLE_BACKUP_EVENTS_ENDPOINT,
+	const { data, isLoading } = useSimpleQuery( {
+		name: QUERY_BACKUP_HISTORY_KEY,
+		query: {
+			path: REST_API_REWINDABLE_BACKUP_EVENTS_ENDPOINT,
+		},
 	} );
 	const lastRewindableEvent = data?.last_rewindable_event;
 	const lastRewindableEventTime = lastRewindableEvent?.published;
@@ -192,8 +195,11 @@ const WithBackupsValueSection = ( { admin, slug } ) => {
 
 const NoBackupsValueSection = ( { admin, slug } ) => {
 	const [ itemsToShow, setItemsToShow ] = useState( 3 );
-	const { data: backupStats, isLoading } = useSimpleQuery( QUERY_BACKUP_STATS_KEY, {
-		path: REST_API_COUNT_BACKUP_ITEMS_ENDPOINT,
+	const { data: backupStats, isLoading } = useSimpleQuery( {
+		name: QUERY_BACKUP_STATS_KEY,
+		query: {
+			path: REST_API_COUNT_BACKUP_ITEMS_ENDPOINT,
+		},
 	} );
 
 	const sortedStats = useMemo( () => {

projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card.jsx

@@ -20,7 +20,10 @@ const useVideoPressStats = () => {
 		data: stats,
 		isLoading,
 		isError,
-	} = useSimpleQuery( QUERY_VIDEOPRESS_STATS_KEY, { path: REST_API_VIDEOPRESS_FEATURED_STATS } );
+	} = useSimpleQuery( {
+		name: QUERY_VIDEOPRESS_STATS_KEY,
+		query: { path: REST_API_VIDEOPRESS_FEATURED_STATS },
+	} );
 
 	const views = stats?.data?.views ?? {};
 	const { previous = null, current = null } = views;

projects/packages/my-jetpack/_inc/components/redeem-token-screen/index.jsx

@@ -18,8 +18,11 @@ export default function RedeemTokenScreen() {
 		userConnectionData?.currentUser?.wpcomUser?.display_name ||
 		userConnectionData?.currentUser?.wpcomUser?.login ||
 		userConnectionData?.currentUser?.username;
-	const { isLoading, data: purchases } = useSimpleQuery( QUERY_PURCHASES_KEY, {
-		path: REST_API_SITE_PURCHASES_ENDPOINT,
+	const { isLoading, data: purchases } = useSimpleQuery( {
+		name: QUERY_PURCHASES_KEY,
+		query: {
+			path: REST_API_SITE_PURCHASES_ENDPOINT,
+		},
 	} );
 
 	const tokenRedeemed = includesLifetimePurchase( purchases );

projects/packages/my-jetpack/_inc/components/stats-section/index.jsx

@@ -15,8 +15,11 @@ const StatsSection = () => {
 	const { detail } = useProduct( slug );
 	const { status } = detail;
 	const isAdmin = !! window?.myJetpackInitialState?.userIsAdmin;
-	const { data: statsCounts } = useSimpleQuery( QUERY_STATS_COUNTS_KEY, {
-		path: getStatsHighlightsEndpoint( blogID ),
+	const { data: statsCounts } = useSimpleQuery( {
+		name: QUERY_STATS_COUNTS_KEY,
+		query: {
+			path: getStatsHighlightsEndpoint( blogID ),
+		},
 	} );
 	const counts = statsCounts?.past_seven_days || {};
 	const previousCounts = statsCounts?.between_past_eight_and_fifteen_days || {};

projects/packages/my-jetpack/_inc/components/welcome-banner/index.jsx

@@ -3,6 +3,7 @@ import { useConnection } from '@automattic/jetpack-connection';
 import { __ } from '@wordpress/i18n';
 import { close } from '@wordpress/icons';
 import { useEffect, useCallback, useState } from 'react';
+import getMyJetpackWindowState from '../../data/utils/get-my-jetpack-window-state';
 import useWelcomeBanner from '../../data/welcome-banner/use-welcome-banner';
 import useAnalytics from '../../hooks/use-analytics';
 import useMyJetpackNavigate from '../../hooks/use-my-jetpack-navigate';
@@ -15,7 +16,7 @@ import styles from './style.module.scss';
  * @returns {object} The WelcomeBanner component.
  */
 const WelcomeBanner = () => {
-	const isNewUser = window.myJetpackInitialState.userIsNewToJetpack === '1';
+	const isNewUser = getMyJetpackWindowState( 'userIsNewToJetpack', '0' ) === '1';
 	const { recordEvent } = useAnalytics();
 	const { isDismissed, dismissWelcomeBanner } = useWelcomeBanner();
 	const { isRegistered, isUserConnected } = useConnection();

projects/packages/my-jetpack/_inc/data/products/use-activate.ts

@@ -7,22 +7,21 @@ import useProduct from './use-product';
 const useActivate = ( productId: string ) => {
 	const { detail, refetch } = useProduct( productId );
 
-	const { mutate: activate, isPending } = useSimpleMutation(
-		QUERY_ACTIVATE_PRODUCT_KEY,
-		{
+	const { mutate: activate, isPending } = useSimpleMutation( {
+		name: QUERY_ACTIVATE_PRODUCT_KEY,
+		query: {
 			path: `${ REST_API_SITE_PRODUCTS_ENDPOINT }/${ productId }`,
 			method: 'POST',
 		},
-		{
+		options: {
 			onSuccess: refetch,
 		},
-		null,
-		sprintf(
+		errorMessage: sprintf(
 			// translators: %$1s: Jetpack Product name
 			__( 'Failed to activate %1$s. Please try again', 'jetpack-my-jetpack' ),
 			detail.name
-		)
-	);
+		),
+	} );
 
 	return {
 		activate,

projects/packages/my-jetpack/_inc/data/products/use-install-standalone-plugin.ts

@@ -7,22 +7,21 @@ import useProduct from './use-product';
 const useInstallStandalonePlugin = ( productId: string ) => {
 	const { detail, refetch } = useProduct( productId );
 
-	const { mutate: install, isPending } = useSimpleMutation(
-		QUERY_INSTALL_PRODUCT_KEY,
-		{
+	const { mutate: install, isPending } = useSimpleMutation( {
+		name: QUERY_INSTALL_PRODUCT_KEY,
+		query: {
 			path: `${ REST_API_SITE_PRODUCTS_ENDPOINT }/${ productId }/install-standalone`,
 			method: 'POST',
 		},
-		{
+		options: {
 			onSuccess: refetch,
 		},
-		null,
-		sprintf(
+		errorMessage: sprintf(
 			// translators: %$1s: Jetpack Product name
 			__( 'Failed to install standalone plugin for %1$s. Please try again', 'jetpack-my-jetpack' ),
 			detail.name
-		)
-	);
+		),
+	} );
 
 	return {
 		install,

projects/packages/my-jetpack/_inc/data/products/use-product.ts

@@ -3,7 +3,7 @@ import { REST_API_SITE_PRODUCTS_ENDPOINT } from '../constants';
 import { QUERY_PRODUCT_KEY } from '../constants';
 import useSimpleQuery from '../use-simple-query';
 import mapObjectKeysToCamel from '../utils/to-camel';
-import type { ProductCamelCase, ProductSnakeCase } from '../types';
+import type { ProductCamelCase, ProductSnakeCase, WP_Error } from '../types';
 import type { RefetchOptions, QueryObserverResult } from '@tanstack/react-query';
 
 const getFullPricePerMonth = ( product: ProductCamelCase ) => {
@@ -27,21 +27,23 @@ export const useAllProducts = () => {
 
 // Create query to fetch new product data from the server
 const useFetchProduct = ( productId: string ) => {
-	const queryResult = useSimpleQuery< ProductSnakeCase >(
-		QUERY_PRODUCT_KEY,
-		{
+	const queryResult = useSimpleQuery< ProductSnakeCase >( {
+		name: QUERY_PRODUCT_KEY,
+		query: {
 			path: `${ REST_API_SITE_PRODUCTS_ENDPOINT }/${ productId }`,
 		},
-		{ enabled: false }
-	);
+		options: { enabled: false },
+	} );
 
 	return queryResult;
 };
 
 // Fetch the product data from the server and update the global state
 const refetchProduct = async (
 	productId: string,
-	refetch: ( options?: RefetchOptions ) => Promise< QueryObserverResult< ProductSnakeCase, Error > >
+	refetch: (
+		options?: RefetchOptions
+	) => Promise< QueryObserverResult< ProductSnakeCase, WP_Error > >
 ) => {
 	const { data: refetchedProduct } = await refetch();
 

projects/packages/my-jetpack/_inc/data/use-jetpack-api-query.ts

@@ -1,24 +1,28 @@
 import restApi from '@automattic/jetpack-api';
 import { useQuery } from '@tanstack/react-query';
 import { useFetchingErrorNotice } from './notices/use-fetching-error-notice';
+import type { UseQueryResult } from '@tanstack/react-query';
 
 /**
- * A hook to fetch data from the Jetpack API using react-query
+ * Custom hook for fetching data from the Jetpack API, utilizing the react-query library for data fetching and caching.
+ * This hook abstracts the common setup needed for calling the Jetpack API, such as setting the API root and nonce,
+ * and provides react-query's powerful features like caching and automatic refetching.
  *
- * @param {string} name - The name of the query.
- * @param {Function} queryFn - The function that fetches the data.
- * @param {string} explicitKey - An optional key to use for the query cache.
- * @param {string} errorMessage - An optional custom error message to display.
- * @returns {Array} The result of the query.
+ * @template T The type of data expected to be returned by the query function.
+ * @param {object} params - The parameters for configuring the API query.
+ * @param {string} params.name - The unique name for the query. This name, along with the optional `explicitKey`, forms the cache key for the query's result.
+ * @param {Function} params.queryFn - The function to fetch data from the API. It receives a configured instance of `restApi` and must return a promise that resolves to the data of type `T`.
+ * @param {string} [params.errorMessage] - Optional. A custom error message to be displayed in case the query fails. This message overrides the default error handling behavior.
+ * @returns {UseQueryResult<T>} The result object from the useQuery hook, containing data and state information about the query (e.g., isLoading, isError).
  */
-const useJetpackApiQuery = < T >(
-	name: string,
-	queryFn: ( api: typeof restApi ) => Promise< T >,
-	explicitKey?: string,
-	errorMessage?: string
-) => {
+type QueryParams< T > = {
+	name: string;
+	queryFn: ( api: typeof restApi ) => Promise< T >;
+	errorMessage?: string;
+};
+const useJetpackApiQuery = < T >( { name, queryFn, errorMessage }: QueryParams< T > ) => {
 	const queryResult = useQuery( {
-		queryKey: [ name, explicitKey ],
+		queryKey: [ name ],
 		queryFn: () => {
 			const { apiRoot, apiNonce } = window?.myJetpackRest || {};
 			restApi.setApiRoot( apiRoot );

projects/packages/my-jetpack/_inc/data/use-simple-mutation.ts

@@ -1,26 +1,32 @@
 import { useMutation } from '@tanstack/react-query';
 import apiFetch from '@wordpress/api-fetch';
 import { useFetchingErrorNotice } from './notices/use-fetching-error-notice';
-import type { UseMutationOptions } from '@tanstack/react-query';
+import type { UseMutationOptions, UseMutationResult } from '@tanstack/react-query';
 import type { APIFetchOptions } from '@wordpress/api-fetch';
 
-/*
- * Simple wrapper for useQuery that handles error notices.
+/**
+ * Executes a mutation with the specified parameters and options. This hook is designed
+ * for performing data modification operations (e.g., POST, PUT, DELETE requests) and handling
+ * the mutation's lifecycle events, such as success or failure. Additionally, it can display
+ * an error notice if the mutation encounters an error.
  *
- * This query is meant for any methods that include updating data (e.g. POST or DELETE), if you need to use a GET request, use useSimpleQuery.
- *
- * The options object is optional and is a strictly defined subset of the UseMutationOptions type.
- * If you want to pass more options, you can add them to the options type above.
+ * @template T The type of data expected to be returned by the mutation.
+ * @param {object} params - The parameters for executing the mutation.
+ * @param {string} params.name - A unique name for the mutation, used as part of the mutation key.
+ * @param {APIFetchOptions} params.query - The options to be passed to the API fetch function for the mutation.
+ * @param {Pick<UseMutationOptions, 'onSuccess'>} [params.options] - Optional. Mutation options from react-query, currently supports only the 'onSuccess' option.
+ * @param {string} [params.errorMessage] - Optional. A custom error message that can be displayed if the mutation fails.
+ * @returns {UseMutationResult<T>} The result object from the useMutation hook, containing data and state information about the mutation (e.g., isPending, isError).
  */
-const useSimpleMutation = < T >(
-	name: string,
-	query: APIFetchOptions,
-	options?: Pick< UseMutationOptions, 'onSuccess' >,
-	explicitKey?: string,
-	errorMessage?: string
-) => {
+type QueryParams = {
+	name: string;
+	query: APIFetchOptions;
+	options?: Pick< UseMutationOptions, 'onSuccess' >;
+	errorMessage?: string;
+};
+const useSimpleMutation = < T >( { name, query, options, errorMessage }: QueryParams ) => {
 	const mutationResult = useMutation< T >( {
-		mutationKey: [ name, explicitKey ],
+		mutationKey: [ name ],
 		mutationFn: () => apiFetch< T >( query ),
 		...options,
 	} );