世界上最伟大的投资就是投资自己的教育
client/src/queries/queries.js
import gql from 'graphql-tag';
const getBooksQuery = gql`
{
books {
name
id
}
}
`;
const getAuthorsQuery = gql`
{
authors {
name
id
}
}
`;
export { getBooksQuery, getAuthorsQuery }
client/src/components/BookList.js
import React, { Component } from 'react';
import { graphql } from 'react-apollo';
import { getBooksQuery } from '../queries/queries';
class BookList extends Component {
displayBooks = () => {
const data = this.props.data;
if (data.loading) {
return (<div>Loading books...</div>)
} else {
return (
<ul id="book-list">
{
data.books.map(book => {
return (
<li key={ book.id }>{ book.name }</li>
)
})
}
</ul>
)
}
}
render() {
console.log(this.props);
return (
<div>
{ this.displayBooks() }
</div>
);
}
}
export default graphql(getBooksQuery)(BookList);
client/src/components/AddBook.js
import React, { Component } from 'react';
import { graphql } from 'react-apollo';
import { getAuthorsQuery } from '../queries/queries';
class AddBook extends Component {
displayAuthors = () => {
const data = this.props.data;
if (data.loading) {
return (<option disabled>Loading authors...</option>)
} else {
return (
data.authors.map(author => {
return (
<option key={ author.id } value={ author.id }>{ author.name }</option>
)
})
)
}
}
render() {
return (
<form>
<div className="field">
<label>Book name:</label>
<input type="text" />
</div>
<div className="field">
<label>Genre:</label>
<input type="text" />
</div>
<div className="field">
<label>Author:</label>
<select>
<option>Select author</option>
{ this.displayAuthors() }
</select>
</div>
</form>
);
}
}
export default graphql(getAuthorsQuery)(AddBook);
06:591Free诱人的 GraphQL & React & Apollo 实战视频教程 #1 介绍
05:402Free诱人的 GraphQL & React & Apollo 实战视频教程 #2 搭建 Express 项目框架
04:063Free诱人的 GraphQL & React & Apollo 实战视频教程 #3 搭建 GraphQL 项目框架
04:264Free诱人的 GraphQL & React & Apollo 实战视频教程 #4 创建第一个 GraphQL Schema
04:245Free诱人的 GraphQL & React & Apollo 实战视频教程 #5 Root Query
05:186Free诱人的 GraphQL & React & Apollo 实战视频教程 #6 Resolve Function
05:467Free诱人的 GraphQL & React & Apollo 实战视频教程 #7 在 Graphiql 中测试查询
03:498Free诱人的 GraphQL & React & Apollo 实战视频教程 #8 酷炫的本地测试软件 graphql-playground
03:119Free诱人的 GraphQL & React & Apollo 实战视频教程 #9 GraphQLID
05:1110Free诱人的 GraphQL & React & Apollo 实战视频教程 #10 Author Type 和 GraphQLInt
07:5311Free诱人的 GraphQL & React & Apollo 实战视频教程 #11 关联关系
05:3012Free诱人的 GraphQL & React & Apollo 实战视频教程 #12 GraphQLList
04:2713Free诱人的 GraphQL & React & Apollo 实战视频教程 #13 返回 GraphQL 列表
07:0414Free诱人的 GraphQL & React & Apollo 实战视频教程 #14 连接到 mLab 线上的 MongoDB 数据库
06:3615Free诱人的 GraphQL & React & Apollo 实战视频教程 #15 Mongoose Models
08:2716Free诱人的 GraphQL & React & Apollo 实战视频教程 #16 Mutations
06:0417Free诱人的 GraphQL & React & Apollo 实战视频教程 #17 更多的 Mutations
08:3618Free诱人的 GraphQL & React & Apollo 实战视频教程 #18 更新 Resolve
04:1519Free诱人的 GraphQL & React & Apollo 实战视频教程 #19 GraphQLNonNull
08:1020Free诱人的 GraphQL & React & Apollo 实战视频教程 #20 添加 React 前端
08:3021Free诱人的 GraphQL & React & Apollo 实战视频教程 #21 建立 Apollo React 客户端
09:2822Free诱人的 GraphQL & React & Apollo 实战视频教程 #22 在 React 中发送查询语句
05:0723Free诱人的 GraphQL & React & Apollo 实战视频教程 #23 在组件中显示远程的数据
06:4524Free诱人的 GraphQL & React & Apollo 实战视频教程 #24 添加增加 Book 的表单组件
03:38Free诱人的 GraphQL & React & Apollo 实战视频教程 #25 组织代码 - 外部查询文件
03:4026Free诱人的 GraphQL & React & Apollo 实战视频教程 #26 更新组件的 state
10:5927Free诱人的 GraphQL & React & Apollo 实战视频教程 #27 组合 Mutations 和 Queries
04:2928Free诱人的 GraphQL & React & Apollo 实战视频教程 #28 Mutation 查询变量
05:1229Free诱人的 GraphQL & React & Apollo 实战视频教程 #29 Mutation refetchQueries
07:3030Free诱人的 GraphQL & React & Apollo 实战视频教程 #30 Book Details Component
08:5731Free诱人的 GraphQL & React & Apollo 实战视频教程 #31 发送请求显示 Book Details
06:5832Free诱人的 GraphQL & React & Apollo 实战视频教程 #32 增加 CSS 样式
▬▬▬▬▬▬ 联系我 👋 ▬▬▬▬▬▬
微信:qiuzhi99pro
b 站:https://space.bilibili.com/31152817
知乎:https://www.zhihu.com/people/rails365
Youtube:https://www.youtube.com/channel/UCA-Jkgr40A9kl5vsIqg-BIg
© 汕尾市求知科技有限公司 | 专业版网站 | 关于我们 | 在线学员:1143
粤公网安备 44152102000088号
| 粤ICP备19038915号