@elementor/query v0.2.0

Query

This package is a wrapper around @tanstack/react-query in order to easily expose it in the Editor.

For more information about @tanstack/react-query please refer to the official documentation.

!WARNING Please refrain from accessing or depending on functions and variables starting with double underscores, as they are subject to change without notice. Naming convention involving double underscores (__) as a prefix to indicate that a function or variable is meant for internal use and should not be accessed or relied upon by third-party developers.

Usage

import { createQueryClient, QueryClientProvider, useQuery } from '@elementor/query';

const queryClient = createQueryClient();

const App = () => (
	<QueryClientProvider client={ queryClient }>
		<MyComponent />
	</QueryClientProvider>
);

const MyComponent = () => {
	const { data: todos, isLoading } = useQuery( {
		queryKey: 'todos',
		queryFn: () => fetch( '/todos' ).then( ( res ) => res.json() ),
	} );
	
	if ( isLoading ) {
		return <div>Loading...</div>;
	}
	
	return todos.map( /* ... */ );
};