zoukankan      html  css  js  c++  java
  • [React + GraphQL] Use useLazyQuery to manually execute a query with Apollo React Hooks

    When using useQuery from Apollo React Hooks, the request will be sent automatically after the component has been mounted. This might not be the desired behaviour as we might want to send the request in response to user action (for instance, after a button click).

    In this lesson we're going to learn how to use useLazyQuery hook to execute a query manually in order to fetch dog pictures.

    import React, { Fragment, useState } from "react";
    import { gql } from "apollo-boost";
    import { useLazyQuery } from "@apollo/react-hooks";
    
    const GET_DOGGO = gql`
      query Dog($breed: String!) {
        dog(breed: $breed) {
          id
          displayImage
        }
      }
    `;
    
    const App = () => {
      const [breed, setBreed] = useState("dingo");
      const [getDog, { loading, data }] = useLazyQuery(GET_DOGGO);
    
      if (loading) {
        return <h2>Loading...</h2>;
      }
    
      return (
        <Fragment>
          {data && data.dog ? (
            <img
              alt="Cute Doggo"
              src={data.dog.displayImage}
              style={{ height: 500,  500 }}
            />
          ) : null}
          <input
            type="text"
            onChange={event => setBreed(event.target.value)}
            placeholder="Choose breed"
          />
          <button
            onClick={() =>
              getDog({
                variables: { breed }
              })
            }
          >
            Get dog
          </button>
        </Fragment>
      );
    };
    
    export default App;
  • 相关阅读:
    阅读13-17章
    阅读<构建之法>10、11、12章
    作业5.2
    作业5.1
    作业四:构建之法的困惑和思考(5-7)
    做汉堡
    作业三:构建之法的困惑和思考(1-5)
    实验二 合作:王宏财 http://www.cnblogs.com/wanghongcai/
    实验一--四则运算
    数独九宫格
  • 原文地址:https://www.cnblogs.com/Answer1215/p/11431567.html
Copyright © 2011-2022 走看看