Showing how to use 'uqrl' library to do GraphQL in React.

import React, {useState} from 'react'
import {useQuery} from 'urql' const courseQuery = `
query courses($page: Int) {
courses(page: $page) {
title
}
}
` function App() {
const [page, setPage] = useState(1)
const [result] = useQuery({
query: courseQuery,
variables: {
page,
},
}) if (result.error) {
return 'There was an error :('
} return (
<div>
<h1>egghead courses</h1>
<button onClick={() => setPage(page + 1)}>Next Page</button>
{result && result.data && (
<ul style={{listStyle: 'none'}}>
{result.data.courses.map(({title}) => (
<li
key={title}
style={{
display: 'flex',
alignItems: 'center',
fontSize: 16,
fontFamily: 'sans-serif',
marginBottom: 10,
}}
>
{title}
</li>
))}
</ul>
)}
</div>
)
} export default App

[React GraphQL] Pass Parameters to urql's useQuery React Hook的更多相关文章

  1. React + GraphQL 2020 速成课程

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

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

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

  3. Wait… What Happens When my React Native Application Starts? — An In-depth Look Inside React Native

    Discover how React Native functions internally, and what it does for you without you knowing it. Dis ...

  4. React与ES6(四)ES6如何处理React mixins

    React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...

  5. react看这篇就够了(react+webpack+redux+reactRouter+sass)

    本帖将对一下内容进行分享: 1.webpack环境搭建: 2.如何使用react-router: 3.引入sass预编译: 4.react 性能优化方案: 5.redux结合react使用: 6.fe ...

  6. 玩转 React 【第03期】:邂逅 React 组件

    上期回顾 前文我们讲解了 React 模板 JSX,接着我们继续来看看 React 组件又是如何工作的呢? 组件化开发到了今天已经是大家的共识,在 React 中,组件同样也是组成我们整个项目的基本单 ...

  7. [React] Use the Fragment Short Syntax in Create React App 2.0

    create-react-app version 2.0 added a lot of new features. One of the new features is upgrading to Ba ...

  8. 30分钟精通React今年最劲爆的新特性——React Hooks

    你还在为该使用无状态组件(Function)还是有状态组件(Class)而烦恼吗? --拥有了hooks,你再也不需要写Class了,你的所有组件都将是Function. 你还在为搞不清使用哪个生命周 ...

  9. 【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目

    前言 一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...

随机推荐

  1. Power OJ 2605 SPFA+dp思想

    题目链接[https://www.oj.swust.edu.cn/problem/show/2605] 题意:给出包含N(N <= 5000)个点M条边的有向图,然后求1 - N在满足距离小于T ...

  2. 在Kali Linux上编译Windows EXP

    使用vc6.0去编译的时候,难免会出现点问题 这里找到MS11-046的exp来编译 poc地址:https://www.exploit-db.com/exploits/40564/ 首先需要安装mi ...

  3. [ZHOJ1956]vfk的地雷

    题目大意: 有$n$个开关,$r$句话. 每个开关$i$有$p_i$的概率被触发,并造成$d_i$的代价. 每个开关至多被触发一次,一句话至多触发一个开关. 每个开关按照顺序被尝试触发. 求期望代价. ...

  4. 【BZOJ】2561: 最小生成树【网络流】【最小割】

    2561: 最小生成树 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 2685  Solved: 1253[Submit][Status][Discu ...

  5. poj 1279 Art Gallery - 求多边形核的面积

    /* poj 1279 Art Gallery - 求多边形核的面积 */ #include<stdio.h> #include<math.h> #include <al ...

  6. C#遍历系统所安装的打印机,使用WMI方式获取打印机的所有属性

    有网友发消息来询问,C#如何遍历系统已经安装的所有打印机,并获得每个打印机的相关信息,如:端口,名称等等 C#里面,虽然在 System.Drawing.Printing 这个namespace下,提 ...

  7. Ext.Toolbar.Fill()

    tbar : ['-',new Ext.form.Label({ text : '产品代码:' }),new Ext.form.TextField({ id : 'cpdm', name : 'cpd ...

  8. html5-语义化标签(一)

    1.什么是语义化标签? 根据内容的结构化(内容化),选择合适标签 2.为什么要语义化 为了在没有css样式的情况下,页面也能很好的呈现出很好的内容结构.代码结构 方便其他设备的解析(屏幕阅读器.盲人阅 ...

  9. tcp_client.c tcp_server.c

    #include <stdlib.h> #include <stdio.h> #include <errno.h> #include <string.h> ...

  10. Latex:表格制作全攻略

    给出一个制作复杂表格的例子,制作表格主要用到multicolumn,multirow和cline,其中,要使用multirow,必须usepackage{multirow} 如果要制作出如下图所示的表 ...