Meetup hack project: try react-query for dispute data fetching #7502

Jinksi · 2023-10-17T20:59:04Z

Changes proposed in this Pull Request

This PR is an example of using React Query for data fetching and caching, rather than @wordpress/data (redux).

This gives us:

a more streamlined and intuitive API for data fetching and caching/invalidation
less code to maintain
easier ways to implement complex cache invalidation strategies to benefit our customers (e.g. refresh on window focus)

✅ For example, fetching a dispute with React Query may be handled with:

// client/data/disputes/hooks.ts
export const useDispute = ( id: string ) => {
	const { data, isLoading, error } = useQuery< Dispute, ApiError >( {
		queryKey: [ 'disputes', id ],
		queryFn: async () => {
			const path = addQueryArgs( `${ NAMESPACE }/disputes/${ id }` );
			return apiFetch< Dispute >( { path } );
		},
		refetchOnMount: false,
		retry: false,
	} );

	return {
		dispute: data,
		error,
		isLoading,
	};
};

❌ The following data fetching and caching logic across 5 files via `@wordpress/data` can now be removed:

// client/data/disputes/actions.ts
export function updateDispute( data ) {
	return {
		type: TYPES.SET_DISPUTE,
		data,
	};
}

export function updateErrorForDispute( id, data, error ) {
	return {
		type: TYPES.SET_ERROR_FOR_DISPUTE,
		id,
		data,
		error,
	};
}

// client/data/disputes/reducer.ts
const receiveDisputes = (
	state = defaultState,
	{ type, query = {}, data = [], id, error }
) => {
	switch ( type ) {
		case TYPES.SET_DISPUTE:
			return {
				...state,
				byId: { ...state.byId, [ data.id ]: data },
			};
		case TYPES.SET_ERROR_FOR_DISPUTE:
			state = {
				...state,
				byId: { ...state.byId, [ id ]: { error } },
			};
			break;
	}

	return state;
};

// client/data/disputes/resolvers.ts
export function* getDispute( id ) {
	const path = addQueryArgs( `${ NAMESPACE }/disputes/${ id }` );

	try {
		const result = yield apiFetch( { path } );
		yield updateDispute( result );
	} catch ( e ) {
		yield controls.dispatch(
			'core/notices',
			'createErrorNotice',
			__( 'Error retrieving dispute.', 'woocommerce-payments' )
		);
		yield updateErrorForDispute( id, undefined, e );
	}
}

// client/data/disputes/selectors.ts
export const getDispute = ( state, id ) => {
	const disputeById = getDisputesState( state ).byId || {};
	return disputeById[ id ];
};

export const getDisputeError = ( state, id ) => {
	const disputeById = getDisputesState( state ).byId || {};
	return disputeById[ id ]?.error;
};

// client/data/disputes/hooks.ts
export const useDispute = ( id: string ) => {
	const { dispute, error, isLoading } = useSelect(
		( select ) => {
			const { getDispute, getDisputeError, isResolving } = select(
				STORE_NAME
			);

			return {
				dispute: <Dispute | undefined>getDispute( id ),
				error: <ApiError | undefined>getDisputeError( id ),
				isLoading: <boolean>isResolving( 'getDispute', [ id ] ),
			};
		},
		[ id ]
	);
};

Testing instructions

Run npm run changelog to add a changelog file, choose patch to leave it empty if the change is not significant. You can add multiple changelog files in one PR by running this command a few times.
Covered with tests (or have a good reason not to test in description ☝️)
Tested on mobile (or does not apply)

Post merge

Link to testing instructions from release testing doc following these instructions : Add link here / 'QA Testing Not Applicable'
Add or update critical flows and testing instructions for critical flows, if applicable.
Add what's changed (description, screenshot, demo videos etc.) to the release announcement post, if applicable.

botwoo · 2023-10-17T21:03:53Z

Test the build

Option 1. Jetpack Beta

Install and activate Jetpack Beta.
Use this build by searching for PR number 7502 or branch name try/react-query-disputes in your-test.site/wp-admin/admin.php?page=jetpack-beta&plugin=woocommerce-payments

Option 2. Jurassic Ninja - available for logged-in A12s

🚀 Launch a JN site with this branch 🚀

ℹ️ Install this Tampermonkey script to get more options.

Build info:

Latest commit: 2acfe7f
Build time: 2023-12-18 00:31:26 UTC

Note: the build is updated when a new commit is pushed to this PR.

github-actions · 2023-10-17T21:06:45Z

Size Change: +4.98 kB (0%)

Total Size: 1.27 MB

Filename	Size	Change
`release/woocommerce-payments/dist/index.js`	297 kB	+9.13 kB (+3%)
`release/woocommerce-payments/dist/multi-currency-switcher-block.js`	59.6 kB	-891 B (-1%)
`release/woocommerce-payments/dist/multi-currency.js`	54.9 kB	-830 B (-1%)
`release/woocommerce-payments/dist/order.js`	41 kB	-684 B (-2%)
`release/woocommerce-payments/dist/payment-gateways.js`	38.5 kB	-852 B (-2%)
`release/woocommerce-payments/dist/settings.js`	232 kB	-892 B (0%)

ℹ️ View Unchanged

Filename	Size
`release/woocommerce-payments/assets/css/admin.css`	1.06 kB
`release/woocommerce-payments/assets/css/success.css`	158 B
`release/woocommerce-payments/dist/blocks-checkout-rtl.css`	1.8 kB
`release/woocommerce-payments/dist/blocks-checkout.css`	1.8 kB
`release/woocommerce-payments/dist/blocks-checkout.js`	85.5 kB
`release/woocommerce-payments/dist/checkout-rtl.css`	318 B
`release/woocommerce-payments/dist/checkout.css`	319 B
`release/woocommerce-payments/dist/checkout.js`	37.1 kB
`release/woocommerce-payments/dist/index-rtl.css`	36.8 kB
`release/woocommerce-payments/dist/index.css`	36.8 kB
`release/woocommerce-payments/dist/multi-currency-analytics.js`	1.05 kB
`release/woocommerce-payments/dist/multi-currency-rtl.css`	3.4 kB
`release/woocommerce-payments/dist/multi-currency.css`	3.4 kB
`release/woocommerce-payments/dist/order-rtl.css`	676 B
`release/woocommerce-payments/dist/order.css`	679 B
`release/woocommerce-payments/dist/payment-gateways-rtl.css`	1.31 kB
`release/woocommerce-payments/dist/payment-gateways.css`	1.31 kB
`release/woocommerce-payments/dist/payment-request-rtl.css`	153 B
`release/woocommerce-payments/dist/payment-request.css`	153 B
`release/woocommerce-payments/dist/payment-request.js`	13.6 kB
`release/woocommerce-payments/dist/product-details.js`	919 B
`release/woocommerce-payments/dist/settings-rtl.css`	10.4 kB
`release/woocommerce-payments/dist/settings.css`	10.4 kB
`release/woocommerce-payments/dist/subscription-edit-page.js`	669 B
`release/woocommerce-payments/dist/subscription-product-onboarding-modal-rtl.css`	519 B
`release/woocommerce-payments/dist/subscription-product-onboarding-modal.css`	519 B
`release/woocommerce-payments/dist/subscription-product-onboarding-modal.js`	20.4 kB
`release/woocommerce-payments/dist/subscription-product-onboarding-toast.js`	710 B
`release/woocommerce-payments/dist/subscriptions-empty-state-rtl.css`	117 B
`release/woocommerce-payments/dist/subscriptions-empty-state.css`	117 B
`release/woocommerce-payments/dist/subscriptions-empty-state.js`	19.5 kB
`release/woocommerce-payments/dist/tos-rtl.css`	230 B
`release/woocommerce-payments/dist/tos.css`	231 B
`release/woocommerce-payments/dist/tos.js`	22 kB
`release/woocommerce-payments/dist/woopay-express-button-rtl.css`	153 B
`release/woocommerce-payments/dist/woopay-express-button.css`	153 B
`release/woocommerce-payments/dist/woopay-express-button.js`	52.6 kB
`release/woocommerce-payments/dist/woopay-rtl.css`	4.18 kB
`release/woocommerce-payments/dist/woopay.css`	4.19 kB
`release/woocommerce-payments/dist/woopay.js`	71.8 kB
`release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css`	622 B
`release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js`	812 B
`release/woocommerce-payments/vendor/automattic/jetpack-assets/build/i18n-loader.js`	2.43 kB
`release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/i18n-loader.js`	1.01 kB
`release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-ajax.js`	522 B
`release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-callables.js`	581 B
`release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/babel.config.js`	160 B
`release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.css`	2.32 kB
`release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.js`	13.8 kB
`release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.rtl.css`	2.32 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/about.css`	1.03 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-empty-state.css`	291 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-order-statuses.css`	403 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin.css`	3.6 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/checkout.css`	299 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/modal.css`	742 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/view-subscription.css`	572 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/wcs-upgrade.css`	411 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin-pointers.js`	544 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin.js`	9.4 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.js`	6.8 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.min.js`	3.83 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-coupon.js`	544 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-subscription.js`	2.38 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.js`	22.1 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.min.js`	11.6 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/payment-method-restrictions.js`	1.29 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/wcs-meta-boxes-order.js`	502 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/payment-methods.js`	355 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/single-product.js`	429 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/view-subscription.js`	1.38 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/wcs-cart.js`	781 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/modal.js`	1.1 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/wcs-upgrade.js`	1.27 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.css`	392 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.js`	3.05 kB

_{compressed-size-action}

Jinksi added 6 commits October 17, 2023 22:52

npm install react-query

d1879e6

Use QueryClientProvider for some pages

eb4d282

Change dispute data hooks to useQuery

81fc849

Change dispute summary data hook to useQuery

25108cf

Remove most of the dispute data dir

fd798e5

Don't refetch disputes on interval

8ee2ab1

Jinksi added pr: in progress category: refactor The issue/PR is related to refactoring. type: developer experience labels Oct 17, 2023

Jinksi added 9 commits October 18, 2023 22:59

Change dispute accept hook to useMutation

32a40c0

Reorder imports

9f81537

Remove dispute data tests

ff1d278

Update to react-query v5

cb0f070

In-line queryFns to simplify code

817681e

Use rest endpoint namespace const

2289586

Merge branch 'develop' into try/react-query-disputes

20bb994

Merge branch 'develop' into try/react-query-disputes

7a1ce9d

Merge branch 'develop' into try/react-query-disputes

2acfe7f

Jinksi mentioned this pull request Dec 18, 2023

Correct the AccountOverview.OverviewsResponse TS interface account type to show it is nullable #7921

Merged

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Meetup hack project: try react-query for dispute data fetching #7502

Meetup hack project: try react-query for dispute data fetching #7502

Jinksi commented Oct 17, 2023 •

edited

Loading

botwoo commented Oct 17, 2023 •

edited

Loading

github-actions bot commented Oct 17, 2023 •

edited

Loading

Meetup hack project: try react-query for dispute data fetching #7502

Are you sure you want to change the base?

Meetup hack project: try react-query for dispute data fetching #7502

Conversation

Jinksi commented Oct 17, 2023 • edited Loading

Changes proposed in this Pull Request

Testing instructions

botwoo commented Oct 17, 2023 • edited Loading

Test the build

Option 1. Jetpack Beta

Option 2. Jurassic Ninja - available for logged-in A12s

github-actions bot commented Oct 17, 2023 • edited Loading

Jinksi commented Oct 17, 2023 •

edited

Loading

botwoo commented Oct 17, 2023 •

edited

Loading

github-actions bot commented Oct 17, 2023 •

edited

Loading