世界上最伟大的投资就是投资自己的教育
client/src/queries/queries.js
import gql from 'graphql-tag';
const getBooksQuery = gql`
{
books {
name
id
}
}
`;
const getAuthorsQuery = gql`
{
authors {
name
id
}
}
`;
const addBookMutation = gql`
mutation($name: String!, $genre: String!, $authorId: ID!) {
addBook(name: $name, genre: $genre, authorId: $authorId) {
name
id
}
}
`;
const getBookQuery = gql`
query($id: ID) {
book(id: $id) {
id
name
genre
author {
id
name
age
books {
name
id
}
}
}
}
`;
export { getBooksQuery, getAuthorsQuery, addBookMutation, getBookQuery }
client/src/components/BookDetails.js
import React, { Component } from 'react';
import { graphql } from 'react-apollo';
import { getBookQuery } from '../queries/queries';
class BookDetails extends Component {
render() {
return (
<div id="book-details">
<p>Output book details here.</p>
</div>
);
}
}
export default graphql(getBookQuery)(BookDetails);
client/src/components/BookList.js
import React, { Component } from 'react';
import { graphql } from 'react-apollo';
import { getBooksQuery } from '../queries/queries';
import BookDetails from './BookDetails';
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() {
return (
<div>
{ this.displayBooks() }
<BookDetails />
</div>
);
}
}
export default graphql(getBooksQuery)(BookList);
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:3825Free诱人的 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:30Free诱人的 GraphQL & React & Apollo 实战视频教程 #30 Book Details Component
08:5731Free诱人的 GraphQL & React & Apollo 实战视频教程 #31 发送请求显示 Book Details
06:5832Free诱人的 GraphQL & React & Apollo 实战视频教程 #32 增加 CSS 样式
▬▬▬▬▬▬ 联系我 👋 ▬▬▬▬▬▬
知乎:https://www.zhihu.com/people/rails365
掘金:https://juejin.cn/user/1574156379888263
b 站:https://space.bilibili.com/31152817
Github:https://github.com/hfpp2012
Youtube:https://www.youtube.com/channel/UCA-Jkgr40A9kl5vsIqg-BIg
Discord:https://discord.gg/5rdjnEnU7F
Twitter:https://twitter.com/qiuzhi99pro
Facebook:https://twitter.com/qiuzhi99pro
Instagram:https://www.facebook.com/pro.qiuzhi/
▬▬▬▬▬▬ 微信相关 👋 ▬▬▬▬▬▬




© 汕尾市求知科技有限公司 | 专业版网站 | 在线学员:1131
粤公网安备 44152102000088号
| 粤ICP备19038915号