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. [WinForm] - "更新 DataSet 应用程序集对象失败,Visual Studio 自动重启" 之解决

    背景 在 WinForm 解决方案中,更新 DataSet 应用程序集对象失败,Visual Studio 自动重启. 试一试 1. 更新 .xsd 时打开对应的 .Designer.cs.2. 如果 ...

  2. Redis搭建Windows平台

    安装程序下载 从官网下载安装程序. https://redis.io/download https://github.com/MicrosoftArchive/redis/releases 新地址:h ...

  3. Visual Studio Code 中实现 C++ 函数定义跳转和代码自动补全功能(25)

    方法1: 1.1 安装插件 C++ Intellisense 名称: C++ Intellisense id: austin.code-gnu-global 说明: C/C++ Intellisens ...

  4. css特效实现透明渐变

    知乎发现栏目上的标题图一般都是以下图方式展现的,很显然它是利用渐变去实现的.思路很有意思,主要是要有两方面的认知: 这张图其实可以分成两部分,右边控制图形和渐变,左边就是一张纯色背景,和渐变无关 透明 ...

  5. WUSTOJ 1336: Lucky Boy(Java)博弈

    题目链接:1336: Lucky Boy 参考博客:LUCKY BOY 博弈--HandsomeHow Description Recently, Lur have a good luck. He i ...

  6. Missing android.support.FILE_PROVIDER_PATHS meta-data 报错原因分析

    此类错误多半因为拼写错误导致.有StackOverflow上便有网友将"FILE_PROVIDER_PATHS"误写成"FILE_PROVIDE_PATHS"的 ...

  7. TZOJ5703: C++实验:学生成绩类的实现

    #include<iostream> #include<string> #include<stdio.h> using namespace std; class s ...

  8. JDBC连接池的testQuery/validationQuery设置

    在<Tomcat中使用Connector/J连接MySQL的超时问题>帖子中想要增加对连接池中连接的测试/验证,防止数据库认为连接已死而Web应用服务器认为连接还有效的问题,Mysql文档 ...

  9. 模拟费用流 & 可撤销贪心

    1. CF730I Olympiad in Programming and Sports 大意: $n$个人, 第$i$个人编程能力$a_i$, 运动能力$b_i$, 要选出$p$个组成编程队, $s ...

  10. python学习笔记(CMD运行文件并传入参数)

    好久没更新博客了 最近换了份新工作 有时间来整理一篇 在命令行CMD中执行文件过程中如何传入并识别参数 # -*- coding: utf-8 -*- # CMD运行类 # 作者: # 时间: 201 ...