Add QueryClientProvider to QueryInspectorControls

tomusborne · Dec 28, 2024 · 18d89af · 18d89af
1 parent ee29cc9
commit 18d89af
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 5 deletions.
diff --git a/src/blocks/query/components/ControlBuilder.jsx b/src/blocks/query/components/ControlBuilder.jsx
@@ -85,6 +85,7 @@ export function ControlBuilder( props ) {
 		dependencies,
 		placeholder,
 		postType,
+		queryClient,
 	} = props;
 
 	let controlDescription = description;
@@ -114,6 +115,7 @@ export function ControlBuilder( props ) {
 		onChange,
 		min: isPostsPerPage ? -1 : undefined,
 		postType,
+		queryClient,
 		...dependencies,
 	};
 

diff --git a/src/blocks/query/components/ParameterControl.jsx b/src/blocks/query/components/ParameterControl.jsx
@@ -2,7 +2,7 @@ import { useCallback } from '@wordpress/element';
 
 import { ControlBuilder } from './ControlBuilder';
 
-export function ParameterControl( { parameter, query, setParameter, removeParameter } ) {
+export function ParameterControl( { parameter, query, setParameter, removeParameter, queryClient } ) {
 	const { dependencies = {} } = parameter;
 	const parameterValue = query[ parameter.id ];
 	const postType = query?.post_type ?? [ 'post' ];
@@ -21,6 +21,7 @@ export function ParameterControl( { parameter, query, setParameter, removeParame
 		return (
 			<ControlBuilder
 				{ ...parameter }
+				queryClient={ queryClient }
 				postType={ postType }
 				value={ parameterValue }
 				onChange={ onChangeControl }
@@ -34,6 +35,7 @@ export function ParameterControl( { parameter, query, setParameter, removeParame
 		Array.isArray( parameterValue ) && parameterValue.map( ( value, i ) => (
 			<ControlBuilder
 				{ ...parameter }
+				queryClient={ queryClient }
 				key={ `${ parameter.id }-${ i }` }
 				postType={ postType }
 				value={ value }

diff --git a/src/blocks/query/components/ParameterList.jsx b/src/blocks/query/components/ParameterList.jsx
@@ -12,7 +12,7 @@ const getParametersList = ( query ) => {
 	) ).filter( Boolean ) );
 };
 
-export function ParameterList( { query, setParameter, removeParameter } ) {
+export function ParameterList( { query, setParameter, removeParameter, queryClient } ) {
 	const parameterList = getParametersList( query );
 
 	return (
@@ -24,6 +24,7 @@ export function ParameterList( { query, setParameter, removeParameter } ) {
 					query={ query }
 					setParameter={ setParameter }
 					removeParameter={ removeParameter }
+					queryClient={ queryClient }
 				/>
 			) ) }
 		</Stack>

diff --git a/src/blocks/query/components/QueryInspectorControls.jsx b/src/blocks/query/components/QueryInspectorControls.jsx
@@ -4,13 +4,19 @@ import { ToggleControl, SelectControl } from '@wordpress/components';
 import { applyFilters } from '@wordpress/hooks';
 
 import { isEqual } from 'lodash';
+import {
+	QueryClient,
+	QueryClientProvider,
+} from '@tanstack/react-query';
 
+import useQueryReducer from '@hooks/useQueryReducer';
 import { SelectQueryParameter } from './SelectQueryParameter';
 import { AddQueryParameterButton } from './AddQueryParameterButton';
 import { ParameterList } from './ParameterList';
-import useQueryReducer from '@hooks/useQueryReducer';
 import { getParameters } from '../query-parameters';
 
+const queryClient = new QueryClient();
+
 export function QueryInspectorControls( { attributes, setAttributes, context } ) {
 	const { queryState, setParameter, removeParameter } = useQueryReducer( attributes.query );
 	const [ displayParameterSelect, setDisplayParameterSelect ] = useState( false );
@@ -44,7 +50,7 @@ export function QueryInspectorControls( { attributes, setAttributes, context } )
 	}, [ queryTypes, attributes.queryType ] );
 
 	return (
-		<>
+		<QueryClientProvider client={ queryClient }>
 			{ queryTypes.length > 1 && (
 				<SelectControl
 					value={ attributes.queryType }
@@ -83,6 +89,7 @@ export function QueryInspectorControls( { attributes, setAttributes, context } )
 								query={ queryState }
 								setParameter={ setParameter }
 								removeParameter={ removeParameter }
+								queryClient={ queryClient }
 							/>
 
 							{ ! displayParameterSelect &&
@@ -129,9 +136,10 @@ export function QueryInspectorControls( { attributes, setAttributes, context } )
 						setParameter,
 						removeParameter,
 						context,
+						queryClient,
 					}
 				)
 			}
-		</>
+		</QueryClientProvider>
 	);
 }