UseLazyQuery

Asked
Active3 hr before
Viewed126 times

7 Answers

uselazyquery
90%

We can do this using the useLazyQuery hook that Apollo provides, This hook lets us run a query in response to an event like a button click instead of just when a component renders

Example_snippet/controller/utility/_uselazyquery.js/ // src/App.js export const HAB. . .
// src/App.js
export const HABITS_QUERY = gql`
  query HABITS_QUERY {
    habits {
      id
      description
      points
    }

    totalPoints {
      points
      totalCompletedEntries
    }
  }
`;
load more v
88%

This property is part of Apollo Client's React integration, and it is not available in the core ApolloClient API,,If true, the query is not executed

Example_snippet/controller/utility/_uselazyquery.js/ import { ApolloProvider } from. . .
import {
   ApolloProvider
} from '@apollo/client';
load more v
72%

Example_snippet/controller/utility/_uselazyquery.js/ const GET_DOG_PHOTO = gql` q. . .
const GET_DOG_PHOTO = gql`
  query Dog($breed: String!) {
    dog(breed: $breed) {
      id
      displayImage
    }
  }
`;

function DogPhoto({ breed }) {
  const { loading, error, data } = useQuery(GET_DOG_PHOTO, {
    variables: { breed },
  });

  if (loading) return null;
  if (error) return `Error! ${error}`;

  return (
    <img src={data.dog.displayImage} style={{ height: 100, width: 100 }} />
  );
}
load more v
65%

3Use useLazyQuery to manually execute a query with Apollo React Hooks 1m 50s,In this lesson we're going to learn how to use useLazyQuery hook to execute a query manually in order to fetch dog pictures,,4Use useMutation hook to trigger GraphQL mutations with Apollo React Hooks 59s,2Automatically poll data from GraphQL API with Apollo Client useQuery hook 1m 19s

Example_snippet/controller/utility/_uselazyquery.js/ useQuery. . .
useQuery
load more v
75%

Apollo's useLazyQuery provides a function to trigger the query on-demand, This is the purpose of laziness; don't do something now, but maybe do it later

Example_snippet/controller/utility/_uselazyquery.js/ import React, { useState, Frag. . .
import React, { useState, Fragment } from 'react';
import { useLazyQuery } from 'react-apollo';

const Menu = () => {
    const [food, setFood] = useState('pizza');
    const [search, { data, error, loading }] = useLazyQuery(
        GET_INGREDIENTS,
        { variables: { food } }
    );

    useEffect(() => {
        const shouldSearch = food !== 'pizza';

        if (shouldSearch) {
            search();
        }
    }, [food]);

    return (
        <Fragment>
            <input type='text' onChange={setFood} />
            <Ingredients data={data || []} />
        </Fragment>
    );
};

const Ingredients = ({ data }) => data.map(({ name, description }) => (
    <div key={name}>
        <span>{description}</span>
    </div>
));
load more v
40%

The useLazyQuery hook provides another way to perform a query, which is intended to be executed at some time after the component is rendered or in response to a given data change,,It executes our subscription immediately when the component is rendered

Example_snippet/controller/utility/_model.js/ // with npm: npm i @apollo/rea. . .
// with npm:
npm i @apollo / react - hooks apollo - boost graphql

// with yarn:
yarn add @apollo / react - hooks apollo - boost graphql
load more v
22%

And saw there are two queries hooks to use for which is useQuery and useLazyQuery, I was using "useLazyQuery" and I was sending variables from a state with the request and every time I change the state of the inputs the request executed every time the component mount, although I was using it onClick event, – Sharif Al-Hayek May 24 at 6:58 ,But when useLazyQuery is called, it does not trigger the query subsequently, and instead return a function that can be used to trigger the query manually

Example_snippet/controller/utility/_model.js/ import React, { useState } fro. . .
import React, { useState } from 'react';
import { useLazyQuery } from '@apollo/client';

function DelayedQuery() {
  const [dog, setDog] = useState(null);
  const [getDog, { loading, data }] = useLazyQuery(GET_DOG_PHOTO);

  if (loading) return <p>Loading ...</p>;

  if (data && data.dog) {
    setDog(data.dog);
  }

  return (
    <div>
      {dog && <img src={dog.displayImage} />}
      <button onClick={() => getDog({ variables: { breed: 'bulldog' } })}>
        Click me!
      </button>
    </div>
  );
}