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: , width: }}
/>
) : 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;

[React + GraphQL] Use useLazyQuery to manually execute a query with Apollo React Hooks的更多相关文章

  1. vulcanjs 开源工具方便快速开发react graphql meteor 应用

    vulcan 开源工具方便快速开发react graphql meteor 应用 操作环境mac os 安装 meteor 安装(此安装有点慢,可以通过正确上网解决) curl https://ins ...

  2. GraphQL + React Apollo + React Hook + Express + Mongodb 大型前后端分离项目实战之后端(19 个视频)

    GraphQL + React Apollo + React Hook + Express + Mongodb 大型前后端分离项目实战之后端(19 个视频) GraphQL + React Apoll ...

  3. GraphQL + React Apollo + React Hook 大型项目实战(32 个视频)

    GraphQL + React Apollo + React Hook 大型项目实战(32 个视频) GraphQL + React Apollo + React Hook 大型项目实战 #1 介绍「 ...

  4. React + GraphQL 2020 速成课程

    React + GraphQL 2020 速成课程 technologies React (to build our user interface) GraphQL (to get and chang ...

  5. React Native Android原生模块开发实战|教程|心得|怎样创建React Native Android原生模块

    尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://blog.csdn.net/fengyuzhengfan/article/details/54691503) 告诉大家一个好消息. ...

  6. [React GraphQL] Pass Parameters to urql's useQuery React Hook

    Showing how to use 'uqrl' library to do GraphQL in React. import React, {useState} from 'react' impo ...

  7. [GraphQL] Apollo React Query Component

    In this lesson I refactor a React component that utilizes the graphql higher-order component to the ...

  8. [GraphQL] Apollo React Mutation Component

    In this lesson I refactor a React component that utilizes a higher-order component for mutations to ...

  9. urql 高度可自定义&&多功能的react graphql client

    urql 是一个很不错的graphql client,使用简单,功能强大,通过exchanges 实现了完整的自定义特性 通过urql 的exchanges 我们可以实现灵活的cache策略 参考资料 ...

随机推荐

  1. C++ 中的 多态性

    一 .多态性 1.多态性概述:多态是指同样的消息被不同类型的对象接受时导致不同的行为 2.多态实现:编译时的多态:在编译的过程中确定了同名操作的具体对象.   运行时的多态:在程序运行过程中动态地确定 ...

  2. PowerShell自动部署ASP.NET Core程序到 IIS

    Windows PowerShell 是一种命令行外壳程序和脚本环境,使命令行用户和脚本编写者可以利用 .NET Framework的强大功能.有关于更多PowerShell的信息,可参阅百度词条 接 ...

  3. prometheus环境搭建

    1. 下载文件 wget https://dl.grafana.com/oss/release/grafana-6.2.4.linux-amd64.tar.gz tar -zxvf grafana-. ...

  4. iOS 动画基础-显式动画

    摘要 显式动画 属性动画 CABasicAnimation *animation = [CABasicAnimation animation];         [self updateHandsAn ...

  5. Ubuntu下编译 Hadoop2.9

    Ubuntu 下编译 Hadoop-2.9.2 系统环境 系统: ubuntu-18.10-desktop-amd64 maven: Apache Maven 3.6.0 jdk: jdk_1.8.0 ...

  6. 【转载】Sqlserver使用Right函数从最右边向前截取固定长度字符串

    在SQL语句查询过程中,Sqlserver支持使用LEFT().RIGHT().SUBSTRING()等几个函数对字符串进行截取操作,其中Left函数表示从开始字符向后截取多少个字符,Right函数表 ...

  7. 关于微信小程序iOS端时间格式兼容问题

    经过测试发现,当时间格式为 2018-08-08 08:00 ,需要将时间转为其他格式时,Android端转换成功,iOS端报错或是转为NaN 这是因为iOS端对符号‘ - ’不支持,也就是说iOS端 ...

  8. HTML5页面介绍

    1.<!DOCTYPE html>     文档声明:用于告诉浏览器使用html哪个版本的标准解析页面,此写法代表使用html5的标准去解析 2.<html>     根标签, ...

  9. Ipython 和 python 的区别

    IPython是一个python交互shell,它比默认的python shell更易于使用.它支持自动变量完成.自动缩进.bash shell命令,并且内置了许多有用的函数和函数. IPython是 ...

  10. Java 之 序列化流

    一.序列化概述 Java 提供了一种对象 序列化 的机制.用一个字节序列可以表示一个对象,该字节序列包含该 对象的数据 . 对象的类型 和 对象中存储的属性 等信息.字节序列写出到文件之后,相当于文件 ...