[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'
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的更多相关文章
- React + GraphQL 2020 速成课程
React + GraphQL 2020 速成课程 technologies React (to build our user interface) GraphQL (to get and chang ...
- vulcanjs 开源工具方便快速开发react graphql meteor 应用
vulcan 开源工具方便快速开发react graphql meteor 应用 操作环境mac os 安装 meteor 安装(此安装有点慢,可以通过正确上网解决) curl https://ins ...
- 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 ...
- React与ES6(四)ES6如何处理React mixins
React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...
- react看这篇就够了(react+webpack+redux+reactRouter+sass)
本帖将对一下内容进行分享: 1.webpack环境搭建: 2.如何使用react-router: 3.引入sass预编译: 4.react 性能优化方案: 5.redux结合react使用: 6.fe ...
- 玩转 React 【第03期】:邂逅 React 组件
上期回顾 前文我们讲解了 React 模板 JSX,接着我们继续来看看 React 组件又是如何工作的呢? 组件化开发到了今天已经是大家的共识,在 React 中,组件同样也是组成我们整个项目的基本单 ...
- [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 ...
- 30分钟精通React今年最劲爆的新特性——React Hooks
你还在为该使用无状态组件(Function)还是有状态组件(Class)而烦恼吗? --拥有了hooks,你再也不需要写Class了,你的所有组件都将是Function. 你还在为搞不清使用哪个生命周 ...
- 【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目
前言 一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...
随机推荐
- Power OJ 2605 SPFA+dp思想
题目链接[https://www.oj.swust.edu.cn/problem/show/2605] 题意:给出包含N(N <= 5000)个点M条边的有向图,然后求1 - N在满足距离小于T ...
- 在Kali Linux上编译Windows EXP
使用vc6.0去编译的时候,难免会出现点问题 这里找到MS11-046的exp来编译 poc地址:https://www.exploit-db.com/exploits/40564/ 首先需要安装mi ...
- [ZHOJ1956]vfk的地雷
题目大意: 有$n$个开关,$r$句话. 每个开关$i$有$p_i$的概率被触发,并造成$d_i$的代价. 每个开关至多被触发一次,一句话至多触发一个开关. 每个开关按照顺序被尝试触发. 求期望代价. ...
- 【BZOJ】2561: 最小生成树【网络流】【最小割】
2561: 最小生成树 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 2685 Solved: 1253[Submit][Status][Discu ...
- poj 1279 Art Gallery - 求多边形核的面积
/* poj 1279 Art Gallery - 求多边形核的面积 */ #include<stdio.h> #include<math.h> #include <al ...
- C#遍历系统所安装的打印机,使用WMI方式获取打印机的所有属性
有网友发消息来询问,C#如何遍历系统已经安装的所有打印机,并获得每个打印机的相关信息,如:端口,名称等等 C#里面,虽然在 System.Drawing.Printing 这个namespace下,提 ...
- Ext.Toolbar.Fill()
tbar : ['-',new Ext.form.Label({ text : '产品代码:' }),new Ext.form.TextField({ id : 'cpdm', name : 'cpd ...
- html5-语义化标签(一)
1.什么是语义化标签? 根据内容的结构化(内容化),选择合适标签 2.为什么要语义化 为了在没有css样式的情况下,页面也能很好的呈现出很好的内容结构.代码结构 方便其他设备的解析(屏幕阅读器.盲人阅 ...
- tcp_client.c tcp_server.c
#include <stdlib.h> #include <stdio.h> #include <errno.h> #include <string.h> ...
- Latex:表格制作全攻略
给出一个制作复杂表格的例子,制作表格主要用到multicolumn,multirow和cline,其中,要使用multirow,必须usepackage{multirow} 如果要制作出如下图所示的表 ...