一个基于 React、Apollo 和 GraphQL 的 GitHub 客户端

特征

• React 16 与 create-react-app
• 响应式
• React Router 4
• Apollo 与 GitHub GraphQL API
  • 使用渲染属性的查询和变更
  • 乐观的最新消息
  • 分页
  • 乐观检索（例如问题）
    • 虽然并非在所有地方都如此，但目的是为了演示。

安装

• git clone git@github.com:the-road-to-graphql/react-graphql-github-apollo.git
• cd react-graphql-github-apollo
• 在根目录下的 .env 文件中 添加您自己的GitHub 个人访问令牌
  • 需要检查的权限范围/权限：admin:org、repo、user、notifications
  • REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN=xxxXXX
• npm 安装
• npm start
• 访问http://localhost:3000

贡献

• 请将Prettier 集成安装到您的编辑器中，并启用保存时格式化选项。
  • 更美观的Atom
  • 适用于 VSCode 的 Prettier
  • 更美观的EMACS
  • Prettier for VIM
  • 其他的...

想了解更多关于 React + GraphQL + Apollo 的知识吗？

• 不要错过即将推出的教程和课程
• 查看当前的React 课程

react-graphql-github-vanilla

这是一个简单的 React 应用，它使用纯 HTTP 请求来调用 GitHub GraphQL API。点击此处了解更多信息。

特征

• React 16 与 create-react-app
• GitHub GraphQL API
• 使用纯 JavaScript 调用 GraphQL
• 没有阿波罗/中继计划
  • 你对阿波罗感兴趣吗？

安装

• git clone git@github.com:the-road-to-graphql/react-graphql-github-vanilla.git
• cd react-graphql-github-vanilla
• npm 安装
• 在 .env 文件中添加您自己的 REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN
  • 需要检查的权限范围/权限：admin:org、repo、user、notifications
• npm start
• 访问http://localhost:3000

想了解更多关于 React + GraphQL + Apollo 的知识吗？

• 不要错过即将推出的教程和课程
• 查看当前的React 课程

react-apollo-link-state-example

这是一个使用 Apollo Client 和apollo-link-state进行本地状态管理的 React 应用。apollo -link-state（作为 React 本地状态、Redux 或 MobX 的替代方案）用于管理列表中选定的项作为本地数据，而其余的查询和变更操作则用于远程数据。

安装

• git clone git@github.com:the-road-to-graphql/react-apollo-link-state-example.git
• cd react-apollo-link-state-example
• npm 安装
• 在 .env 文件中添加您自己的 REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN
  • 需要检查的权限范围/权限：admin:org、repo、user、notifications
• npm start
• 访问http://localhost:3000

想了解更多关于 React + GraphQL + Apollo 的知识吗？

• 不要错过即将推出的教程和课程
• 查看当前的React 课程

健谈

使用 React Native 和 Apollo 开发的 WhatsApp 克隆版

• 概述
• 步骤
• 安装
• 入门
• 贡献
• 执照

概述

点击此处查看本教程的Medium博客。

本教程使用Tortilla创建，Tortilla 是一个非常棒的教程构建框架。

从第一次提交开始，Chatty 中的每一次提交都代表着教程的下一步。您可以跟随教程逐步了解代码，也可以查看某个提交，了解特定步骤中具体的代码更改。由于这是 Git，您甚至可以在教程的任何步骤下载应用程序——是不是很棒？！

步骤

1. 设置
2. 使用 ApolloServer 进行 GraphQL 查询
3. 使用 React Apollo 进行 GraphQL 查询
4. GraphQL Mutations 和乐观 UI
5. GraphQL 分页
6. GraphQL订阅
7. GraphQL 身份验证
8. GraphQL 输入类型

安装

npm install                        #安装服务器依赖项
cd client && npm install           #安装客户端依赖项

对于第 7 步及以上步骤，请输入您的……

Apollo React Native Hello World 应用

这是一个简单的 React Native/Apollo 应用示例，位于 dev.apollodata.com。

安装

克隆仓库并运行npm install：

git clone https://github.com/apollostack/frontpage-react-native-app
cd frontpage-react-native-app
npm install

启动应用程序

请确保您已安装 React Native。

此应用与 Hello World 服务器通信，服务器地址为：https ://github.com/apollostack/frontpage-server

服务器安装并启动后，请使用以下命令启动此应用程序：

react-native run-ios

它将打开一个iOS模拟器。

宝可梦图鉴 React Native

基于 CRNA 和 Expo 的宝可梦图鉴 React Native 应用，使用 Apollo 和 GraphQL 进行教学

在线演示：http://demo.learnapollo.com

入门

如果你还没有看过，请查看一下Apollo 实战教程。

git clone git@github.com:learnapollo/pokedex-react-native.git
 cd pokedex-react-native
 cd exercise-01
纱
纱线开始

工作流程

在学习 Apollo 教程的过程中，您将完成不同的编程练习。每个练习都有一个文件夹供您开始编写代码，还有一个解决方案文件夹供您参考，以防 Apollo 教程中的说明不够清晰。

完成此步骤后，您可以查看相应文件夹，将结果与官方解决方案进行比较。如果您找到了与我们建议的解决方案不同的方案，欢迎随时告知我们。 💡

帮助与社区

如果您遇到问题或有任何疑问，请加入我们的Slack 社区。我们非常乐意与您交流……

介绍

这是一个 React Native 入门应用，用于在构建 GraphQL API 时使用 AWS AppSync 控制台中的示例应用。该示例应用会创建一个 GraphQL 模式并配置 Amazon DynamoDB 资源，然后使用解析器将它们正确连接起来。该应用演示了如何使用 AWS AppSync 实现 GraphQL 的变更、查询和订阅。您可以将其用于学习目的，也可以根据需要调整应用或 GraphQL 模式。

特征

• GraphQL 突变

  • 创建新事件
  • 对现有事件发表评论

• GraphQL 查询

  • 获取所有事件（支持分页）
  • 通过 ID 获取事件

• GraphQL订阅

  • 实时更新事件评论

• 授权

  • 该应用使用 API 密钥作为授权机制

AWS 设置

1. 使用以下 URL 导航至 AWS AppSync 控制台：http://console.aws.amazon.com/appsync/home

2. 点击Create API并选择该Sample Schema选项。输入您选择的 API 名称。点击Create。

React Native

适用于 React 和 Node.js 的全栈 GraphQL 样板代码

特征

• 快速搭建脚手架：只需使用graphql create（从GraphQL CLI）下载所需的样板即可。
• 易于扩展：样板代码仅提供最低限度的设置，因此您可以根据自己的用例定制 API。
• 最佳实践：每个样板代码都融入了 GraphQL 社区的最佳实践。

想要学习完整的React 和 Apollo 教程，请访问How to GraphQL 。您可以在这里了解更多关于 GraphQL 样板代码背后的理念。

快速入门

选择一个模板，然后按照相应 README 文件中的说明进行操作即可开始：

• minimal：包含基本“Hello World”功能的极简样板代码
• basic基于简单数据模型的基本样板代码……