资讯专栏INFORMATION COLUMN

全栈 React + GraphQL 教程(一)

luxixing / 3068人阅读

摘要:然而,尽管使用有诸多好处,但迈出第一步可能并不容易。为了简化初始教程,我们今天只构建一个简单的列表视图。是我们将在本教程系列中使用的客户端的名称。我们将列表组件命名为。在本教程的其余部分中,你将了解到我们构建一个真正的通信应用的基础。

首发于众成翻译

Part 1——前端:使用 Apollo 声明式地请求和 mock 数据

GraphQL 是一种新的 API 定义和查询语言,有可能成为新的 REST。它使 UI 组件易于声明式地获取数据,而不必关注后端实现细节。GraphQL 作为一种强大的抽象,可以加快应用开发速度,使代码更容易维护。

然而,尽管使用 GraphQL 有诸多好处,但迈出第一步可能并不容易。这就是为什么我编写了这一系列教程,带你一步步地编写一个包含 GraphQL 和 Apollo Client 的全栈 React 应用。该系列将引导你完整构建一个使用 GraphQL 的即时消息应用:

Part 1(本文):设置一个简单的客户端

Part 2:设置一个简单的服务器

Part 3:编写变更并保持客户端同步

Part 4:积极 UI 和客户端 store 更新

Part 5:输入类型和自定义缓存解析器

Part 6:服务器端的订阅

Part 7:客户端的 GraphQL 订阅

本教程——作为这一系列中的第一篇——是关于如何在前端开始使用 GraphQL。只需要大约20-30分钟,最终你会得到一个非常简单的 React UI,它使用 GraphQL 加载数据,看起来像这样:

一个使用 GraphQL 加载数据的简易 React UI

让我们开始吧!

1. 环境搭建

注意:要完成此教程,你需要在你的机器上安装 node,npm 和 git,并且对 React 有所了解。

我们将在本教程中使用 create-react-app,所以执行安装:

> npm install -g create-react-app

我们还需要从 GitHub 中克隆本教程的代码库,其中包含了我们稍后会使用到的 CSS 和图像。

> git clone https://github.com/apollographql/graphql-tutorial.git
> cd graphql-tutorial

接下来,我们使用 create-react-app 创建我们的 react 应用。

> create-react-app client
> cd client

为了确保它能工作,我们启动服务器:

> npm start

如果一切正常,你现在应该在浏览器中看到如下内容:

2. 编写第一个组件

由于我们正在使用 Apollo 构建一个应用,所以我们通过从 ../ resources 复制 logo.svgApp.css 来修改 logo 和 CSS。

> cd src
> cp ../../resources/* .

为了简化初始教程,我们今天只构建一个简单的列表视图。让我们修改 App.js 中的代码:

修改 “Welcome to React” 为 “Welcome to Apollo”。Apollo 是我们将在本教程系列中使用的 GraphQL 客户端的名称。

删除 “To get started ..”段落,并用纯 React 组件替换它,该组件将渲染一个具有两个列表项的无序列表,“Channel 1”和 “Channel 2”(是的,你猜到了,我们要构建一个通信应用!)。我们将列表组件命名为 ChannelsList

现在你的 App.js 应该如下所示:

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
const ChannelsList = () =>
     (
  • Channel 1
  • Channel 2
);
class App extends Component {
   render() {
     return (
       

Welcome to Apollo

); } }
export default App;

create-react-app 为你设置好了热加载,所以一旦你保存文件,你的应用所在的浏览器窗口将会更新以反映更改:

如果看起来像这样,你的设置就是正确的。

3. 编写你的 GraphQL schema

现在我们有一个简单的应用正在运行,现在是为它编写 GraphQL 类型定义的时候了。 Schema 将指定我们的应用中存在哪些对象类型,以及它们有哪些字段。此外,它指定了我们的 API 的入口。我们新建一个名为 schema.js 的文件:

export const typeDefs = `
type Channel {
   id: ID!                # "!" 为必填
   name: String
}
# 此类型指定了我们的 API 的入口点。在本例中,只有一个——"channels"——返回频道列表。
type Query {
   channels: [Channel]    # "[]" 意味着这是频道列表
}
`;

有了这个 schema,我们可以在下节中编写一个简单的查询来获取我们的 ChannelList 组件的数据。这是我们的查询:

query ChannelsListQuery {
  channels {
    id
    name
  }
}
4. 将你的组件连接 GraphQL 查询

好,现在我们有了 schema 和查询,我们只需要使用 Apollo Client 连接我们的组件!我们来安装 Apollo Client 和一些辅助软件包,我们需要将 GraphQL 添加到我们的应用中:

> npm i -S react-apollo

react-apollo 是 Apollo Client 与 React 的整合,可以让你使用名为 graphql 的高阶组件来装饰组件,它将你的 GraphQL 数据不费力地导入到组件中。React Apollo 还提供了 ApolloClient,它是 Apollo 的核心,处理所有数据获取,缓存和积极更新(我们将在另一个教程中讨论)。

现在,我们在 App.js 的顶部添加一些导入,并创建一个 Apollo Client 的实例:

import {
  ApolloClient,
  gql,
  graphql,
  ApolloProvider,
} from "react-apollo";
const client = new ApolloClient();

接下来,我们使用 GraphQL 高阶组件来装饰原来的 ChannelsList,该高阶组件接受查询并将数据传递给我们的组件:

const channelsListQuery = gql`
   query ChannelsListQuery {
     channels {
       id
       name
     }
   }
 `;
const ChannelsListWithData = graphql(channelsListQuery)(ChannelsList);

当我们的 ChannelsList 组件使用 graphql HOC 包装时,将会收到一个名为 data 的 prop,当它可用时会包含 channel,当有错误时会显示 error。另外 data 还包含一个 loading 属性,当 Apollo Client 在等待数据获取的时候它的值为 true

接下来修改我们的 ChannelsList 组件,以确保用户知道该组件是否正在加载,或者是否出现错误:

const ChannelsList = ({ data: {loading, error, channels }}) => {
   if (loading) {
     return 

Loading ...

; } if (error) { return

{error.message}

; }
   return 
    { channels.map( ch =>
  • {ch.name}
  • ) }
; };

最后,我们用 ChannelsListWithData 替换 App 的 render 函数中的 ChannelsList。 为了让我们刚创建的组件能够使用 Apollo Client 的实例,我们用 ApolloProvider 包裹顶级的应用组件,这会将 Apollo Client 的一个实例放在 UI 上。

现在你的 App 组件应该如下所示:

class App extends Component {
   render() {
     return (
       
         

Welcome to Apollo

); } }

好的,我们快完成了!如果你现在尝试运行,应该会看到以下错误:

起作用了!——好吧,至少部分如此。

这是怎么回事?尽管我们正确地连接了所有的组件,但我们还没有写一个服务器,所以当然没有数据可以获取或显示! 如果你没有为 GraphQL 端点指定 URL,Apollo Client 将假定它运行在同一个域下的 /graphql。因此我们需要创建一个具有自定义 URL 的网络接口。

但是,由于本教程不是关于编写服务器的,所以我们将利用 GraphQL 代码即文档这一特性,根据我们先前写过的类型定义自动创建 mock。要实现这一点,我们只需要停止服务器,安装一些其他的软件包,然后重新启动它:

npm i -S graphql-tools apollo-test-utils graphql

我们将使用这些软件包根据我们前面写的 schema 为 Apollo Client 创建一个模拟网络接口。将以下导入和定义添加到 App.js 的顶部:

import { 
  makeExecutableSchema,
  addMockFunctionsToSchema
} from "graphql-tools";
 import { mockNetworkInterfaceWithSchema } from "apollo-test-utils";
 import { typeDefs } from "./schema";
const schema = makeExecutableSchema({ typeDefs });
addMockFunctionsToSchema({ schema });
const mockNetworkInterface = mockNetworkInterfaceWithSchema({ schema });

现在你只需将 mockNetworkInterface 传递给 Apollo Client 的构造函数:

const client = new ApolloClient({
   networkInterface: mockNetworkInterface,
 });

就是这样,你已经完成了!你的屏幕现在应该如下所示:

我们做到了,我们的第一个使用 Apollo 的 React + GraphQL 应用!

注意:“Hello World” 只是字符串的默认模拟文本。 如果你想自定义酷炫的 mock,请查看我之前写的这篇文章。

如果某些代码不起作用,并且你搞不清是为什么,你可以将其与此文件进行比较,以发现代码差异。或者,你可以查看 t1-end Git 分支来检查代码。

恭喜,你已经正式完成了教程的第一部分!可能没什么感觉,但实际上已经做了很多工作:你已经编写了一个 GraphQL schema,从中生成模拟数据,并将 GraphQL 查询与 React 组件相连。在本教程的其余部分中,你将了解到我们构建一个真正的通信应用的基础。在第2部分中,我们将编写一个简单的服务器并将其连接到我们的应用!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/89037.html

相关文章

  • 2019 简易Web开发指南

    摘要:工具软件欲先攻其事必先利其器,用好工具是做好开发的基础。框架目前最流行简单易用,越来越多人用曾经很流行,现在有点衰退状态管理后端渲染开发工具依赖管理,应用打包,任务管理,编辑器扩展,,移动端有了前端的知识后,我们还可以开发手机。 2019年即将到来,各位同学2018年辛苦了。 不管大家2018年过的怎么样,2019年还是要继续加油的! 在此我整理了个人认为在2019仍是或者将成为主流的...

    vspiders 评论0 收藏0
  • 前端每周清单:Node.js 微服务实践,Vue.js 与 GraphQL,Angular 组件技巧

    摘要:前端每周清单第期微服务实践,与,组件技巧,攻防作者王下邀月熊编辑徐川前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。 前端每周清单第 26 期:Node.js 微服务实践,Vue.js 与 GraphQL,Angular 组件技巧,HeadlessChrome 攻防 作者:王下邀月熊 编辑:徐川...

    wall2flower 评论0 收藏0
  • 平时积累的前端资源,持续更新中。。。

    本文收集学习过程中使用到的资源。 持续更新中…… 项目地址 https://github.com/abc-club/f... 目录 vue react react-native Weex typescript Taro nodejs 常用库 css js es6 移动端 微信公众号 小程序 webpack GraphQL 性能与监控 高质文章 趋势 动效 数据结构与算法 js core 代码规范...

    acrazing 评论0 收藏0
  • 前端每周清单第 48 期:Slack Webpack 构建优化,CSS 命名规范与用户追踪,Vue.

    摘要:发布是由团队开源的,操作接口库,已成为事实上的浏览器操作标准。本周正式发布,为我们带来了,,支持自定义头部与脚部,支持增强,兼容原生协议等特性变化。新特性介绍日前发布了大版本更新,引入了一系列的新特性与提升,本文即是对这些变化进行深入解读。 showImg(https://segmentfault.com/img/remote/1460000012940044); 前端每周清单专注前端...

    sean 评论0 收藏0
  • 前端每周清单第 45 期: Safari 支持 Service Worker, Parcel 完整教

    摘要:的另一个核心特性,苹果表示也正在开发中,按开发进度可能几个月后就能与我们见面。是基于的本地化数据库,支持以及浏览器环境。 前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号(ID: frontshow),及时获取前端每周清单。 本期是 2017 年的最后一...

    赵春朋 评论0 收藏0

发表评论

0条评论

luxixing

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<