react使用apollo简单的获取列表
react
yarn add apollo-boost apollo-client react-apollo apollo-cache-inmemory apollo-link-http graphql-tag graphql
src/index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
// import { ApolloClient } from "apollo-client";
import ApolloClient from "apollo-boost";
import { ApolloProvider } from "react-apollo";
import gql from "graphql-tag";
const client = new ApolloClient({
uri: "http://localhost:4000/graphql",
});
// 普通的JavaScript发送查询
client
.query({
query: gql`
{
hello
}
`,
})
.then(({ data }) => console.log(data));
ReactDOM.render(
<ApolloProvider client={client}>
<App />
</ApolloProvider>,
document.getElementById("root"),
);
src/App.js
import React, { Component, Fragment } from "react";
import { Query, ApolloConsumer } from "react-apollo";
import gql from "graphql-tag";
class QueryAllCat extends Component {
render() {
const { title } = this.props;
const GET_CATS = gql`
query Getcats {
cats {
id
name
}
}
`;
return (
<Fragment>
<h3>{title}</h3>
<Query query={GET_CATS}>
{({ loading, error, data, refetch }) => {
if (error) return "error";
if (loading || !data) return "loading";
return (
<Fragment>
<ul>
{data.cats.map(el => (
<li key={el.id}>{el.name}</li>
))}
</ul>
<button onClick={() => refetch()}>重取!</button>
</Fragment>
);
}}
</Query>
</Fragment>
);
}
}
class FindCat extends Component {
state = {
id: "",
cat: null,
};
render() {
const { id, cat } = this.state;
const { title } = this.props;
const FIND_CAT = gql`
query findCat($id: ID!) {
findCat(id: $id) {
id
name
}
}
`;
return (
<Fragment>
<h3>{title}</h3>
<ApolloConsumer>
{client => (
<Fragment>
<input
type="text"
value={id}
onChange={e =>
this.setState({
id: e.target.value,
})
}
/>
<button
onClick={async () => {
const { data } = await client.query({
query: FIND_CAT,
variables: { id },
});
this.setState({
cat: data.findCat,
});
}}
>
findCat
</button>
{!!cat && (
<p>
{cat.id}::{cat.name}
</p>
)}
</Fragment>
)}
</ApolloConsumer>
</Fragment>
);
}
}
class App extends Component {
render() {
return (
<Fragment>
<QueryAllCat title="所有列表" />
<FindCat title="id查询" />
</Fragment>
);
}
}
export default App;
server
yarn add apollo-server graphql
index.js
const { ApolloServer, gql } = require("apollo-server");
const cats = [
{ id: 1, name: "ajanuw", age: 12 },
{ id: 2, name: "suou", age: 14 },
];
const typeDefs = gql`
type Query {
hello: String!
cats: [Cat]!
}
type Cat {
id: String
name: String
age: String
}
`;
const resolvers = {
Query: {
hello: () => "hello world",
cats() {
return cats;
},
},
};
const server = new ApolloServer({
typeDefs,
resolvers,
});
server.listen().then(({ url }) => {
console.log(`
react使用apollo简单的获取列表的更多相关文章
- react UI交互 简单实例
<body><!-- React 真实 DOM 将会插入到这里 --><div id="example"></div> <!- ...
- Android BLE与终端通信(一)——Android Bluetooth基础API以及简单使用获取本地蓝牙名称地址
Android BLE与终端通信(一)--Android Bluetooth基础API以及简单使用获取本地蓝牙名称地址 Hello,工作需要,也必须开始向BLE方向学习了,公司的核心技术就是BLE终端 ...
- React.js 小书 Lesson13 - 渲染列表数据
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson13 转载请注明出处,保留原文链接和作者信息. 列表数据在前端非常常见,我们经常要处理这种类型 ...
- React Native :加载新闻列表
代码地址如下:http://www.demodashi.com/demo/13212.html 标签与内容页联动 上一节(React Native : 自定义视图)做到了点击标签自动移动,还差跟下面的 ...
- WPF 微信 MVVM 【续】修复部分用户无法获取列表
看过我WPF 微信 MVVM这篇文章的朋友,应该知道我里面提到了我有一个小号是无法获取列表的,始终也没找到原因. 前两天经过GitHub上h4dex大神的指导,知道了原因,是因为微信在登录以后,web ...
- SharePoint 快捷获取列表栏内部名称
在列表设置页面点击浏览器书签获取列表字段内部名称,使用效果如下图: 如何使用: 修改浏览器上任意书签的url地址为以下代码,注意:代码中不能有换行符 javascript:(function(){va ...
- MSCRM 获取列表所选记录相关信息
问题:如何通过JS获取列表中所选记录信息? 解决办法: The CRM2011 Ribbon has a special set of parameters called 'CrmParameters ...
- SharePoint 2010 获取列表中所有数据(包括文件夹内)的方法
转: http://blog.csdn.net/wangwenism/article/details/8751411 SharePoint的列表能存储文件以及文件夹,用户使用的时候,经常会建几个分类文 ...
- 获取列表的索引操作:enumerate
通过循环获取列表的索引操作: 主要使用:enumerate product_list = [['Iphone7',5800], ['Coffee',30], ['疙瘩汤',10], ['Python ...
随机推荐
- float 浮点数与零值0比较大小 ZZ
float x: 千万不要写x==0; 写出float x 与“零值”比较的if语句——一道面试题分析 写出float x 与“零值”比较的if语句 请写出 float x 与“零值”比较的 if ...
- java利用Tesseract 识别身份证号码
安装Tesseract http://blog.csdn.net/hiredme/article/details/50894814 http://blog.csdn.net/yoara/article ...
- 第三天:MDN CSS学习笔记
一:CSS基础 1:DOM 当浏览器显示文档时,它必须将文档的内容与其样式信息结合.它分两个阶段处理文档: 浏览器将 HTML 和 CSS 转化成 DOM (文档对象模型).DOM在计算机内存中表示文 ...
- 全面解决.Net与Java互通时的RSA加解密问题,使用PEM格式的密钥文件
作者: zyl910 一.缘由 RSA是一种常用的非对称加密算法.所以有时需要在不用编程语言中分别使用RSA的加密.解密.例如用Java做后台服务端,用C#开发桌面的客户端软件时. 由于 .Net.J ...
- python数据分析实用小抄
1. python数据分析基础 2. numpy 3. Scikit-Learn 4. Bokeh 5. Scipy 6. Pandas 转载于:http://www.jianshu.com/p/ ...
- git上传本地Intellij idea 项目到码云的git仓库中
.安装git客户端 Window下安装git客户端. 二.配置Intellij idea中的Git/ GitHub 打开Preference-- Version Control. 下拉选择Github ...
- Unity应用架构设计(4)——设计可复用的SubView和SubViewModel(Part 2)
在我们设计和开发应用程序时,经常要用到控件.比如开发一个客户端WinForm应用程序时,微软就为我们提供了若干控件,这些控件为我们提供了可被定制的属性和事件.属性可以更改它的外观,比如背景色,标题等, ...
- 很烦人的maven和gradle的jar缓存
1. 起因 a. 最近在学习大数据相关东西,自然就少不免去操作linux系统,更别说不敲命令 b. 然而那个配置软件时,很经常使用ln -s为一个软件目录(带着版本或者其他信息的长命名)创建别名(软连 ...
- vue中如何动态的绑定图片,vue中通过data返回图片路径
在项目中遇到需要动态的改变图片路径,图片路径并非是从后台获取过来的数据. 因此在data中必须用require加载,否则会当成字符串来处理. 效果:
- idea 修改单个项目的 默认编码格式