How to use the @magento/peregrine.useQuery function in @magento/peregrine

const Container = props => {
    const [cart, setCart] = useState({
        cartId: CART_ID,
        isEmpty: true,
        details: undefined,
        currencyCode: ''
    });
    const [isOpen, setIsOpen] = useState(false);
    const [isEditing, setIsEditing] = useState(false);

    const [queryResult, queryApi] = useQuery(CART_DETAILS_QUERY);
    const { data, error, loading } = queryResult;
    const { runQuery, setLoading } = queryApi;

    useEffect(() => {
        console.log(`Running the query...`);
        setLoading(true), runQuery({ variables: { cartId: CART_ID } });

        if (error) {
            console.log(`Error loading cart`);
        } else {
            setCart({
                cartId: CART_ID,
                isEmpty: !data || !data.cart || data.cart.items.length === 0,
                details: data && data.cart,
                currencyCode: data ? getCurrencyCode(data.cart) : ''
            });

const Search = () => {
    const [searchTerm, updateSearchTerm] = useState('');
    const [queryResult, queryApi] = useQuery(PRODUCT_SEARCH);

    const {data, error, loading} = queryResult;
    const {resetState, runQuery, setLoading} = queryApi;

    let message = '';
    if (error) {
        message = 'An error occurred while fetching results.';
    } else if (loading) {
        message = 'Fetching results...';
    } else if (!data) {
        message = 'Search for a product';
    } else if (!data.products.items.length) {
        message = 'No results were found.';
    } else {
        message = `${data.products.items.length} items`;
    }

const Autocomplete = props => {
    const { setVisible, visible } = props;

    const [queryResult, queryApi] = useQuery(PRODUCT_SEARCH);
    const { data, error, loading } = queryResult;
    const { resetState, runQuery, setLoading } = queryApi;

    const { value } = useFieldState('search_query');
    const valid = value && value.length > 2;

    const classes = mergeClasses(defaultClasses, props.classes);
    const rootClassName = visible ? classes.root_visible : classes.root_hidden;
    let message = '';

    if (error) {
        message = 'An error occurred while fetching results.';
    } else if (loading) {
        message = 'Fetching results...';
    } else if (!data) {
        message = 'Search for a product';

const SearchResults = () => {
    let [queryParam, setValue] = useState('');
    useSearchParam({location: window.location, parameter: 'q', setValue});

    let message = '';
    if (!queryParam) {
        message = `No query string, no results for you`;
    }

    const [queryResult, queryApi] = useQuery(PRODUCT_SEARCH);
    const {data, error, loading} = queryResult;
    const {resetState, runQuery, setLoading} = queryApi;

    useEffect(() => {
        if (queryParam) {
            setLoading(true), runQuery({variables: {inputText: queryParam}});
        } else {
            resetState();
        }
    }, [runQuery, setLoading, queryParam]);

    return (
        <div>
            {message}
            {loading &amp;&amp; <p>Loading...</p>}
            {data &amp;&amp; (</div>