Screencast By
Abhi Aiyer
Nikolas Burk
Written By
Nikolas Burk
Developer @ Graphcool

Nikolas is a developer and head of content at Graphcool. He is excited about GraphQL as a new API technology and has a passion for learning and sharing knowledge.

Screencast by Abhi Aiyer

快速开始上手

后端

由于这是一个前端教程,所以您不需要花太多时间设置后端。这就是为什么使用 Graphcool,这种开箱即用的生产就绪的 GraphQL API 的服务。

数据模型

可以使用 Graphcool CLI 根据应用程序所需的数据模型生成服务器。说到数据模型,这是它的最终版本 GraphQL Schema Definition Language (SDL):

type User {
  name: String!
  links: [Link!]! @relation(name: "UsersLinks")
  votes: [Vote!]! @relation(name: "UsersVotes")
}

type Link { 
  url: String!
  postedBy: User! @relation(name: "UsersLinks")
  votes: [Vote!]! @relation(name: "VotesOnLink")
}

type Vote {
  user: User! @relation(name: "UsersVotes")
  link: Link! @relation(name: "VotesOnLink")
}

创建 GraphQL 服务器

刚开始的时候,您将不会使用上面看到的完整数据模型。因为数据模型是随着功能的开发而逐渐完善的。

而现在,只需使用到 Link 类型。

首先需要使用 npm 安装 Graphcool CLI。

现在可以去创建服务器。

将执行带有两个参数的 graphcool init 命令:

  • --schema: 这个参数将指定一个以 .graphql 结尾的文件作为模式这个文件可以是本地文件或者远程地址文件。在这里我们将用到 https://graphqlbin.com/hn-starter.graphql 作为整个应用的模式。
  • --name: 这个参数将指定应用的名字也就是 Hackernews

此命令将首先打开浏览器窗口,并要求您在Graphcool平台上进行身份验证。

模式样板文件:https://graphqlbin.com/hn-starter.graphql 只定义了 Link 类型:

type Link implements Node {
  description: String!
  url: String!
}

当项目创建完成后,将在当前目录下生成一个 (project.graphcool) 文件,内容与下面相似:

# project: cj4k7j28p7ujs014860czx89p
# version: 1

type File implements Node {
  contentType: String!
  createdAt: DateTime!
  id: ID! @isUnique
  name: String!
  secret: String! @isUnique
  size: Int!
  updatedAt: DateTime!
  url: String! @isUnique
}

type Link implements Node {
  createdAt: DateTime!
  description: String!
  id: ID! @isUnique
  updatedAt: DateTime!
  url: String!
}

type User implements Node {
  createdAt: DateTime!
  id: ID! @isUnique
  updatedAt: DateTime!
}

该文件的顶部包含有关项目的一些元数据:项目 ID模式的版本

类型 UserFile 都是由 Graphcool 生成的。User 类型用来做用户认证和授权 File 类型用来做文件管理。

每一个类型都有三个字段:idcreatedAtupdatedAt

数据填充和 GraphQL Playground

在开始前端的工作之前,可以先填充些数据以便在应用渲染时看到。

您可以通过使用 GraphQL Playground 来实现数据填充,Playground 是一个交互式环境,允许您发送查询和突变。这是探索 API 功能的好方法。

这行命令将从 project.graphcool 文件中读取 project ID,然后在浏览器中打开一个 GraphQL Playground。

Playground 的左边窗栏是 编辑器,您可以使用它来编写查询和突变(甚至订阅)。一旦您点击中间的播放按钮,对请求的响应将显示在右侧的 结果 窗栏中。

由于一次向编辑器添加两个突变,所以需有 命名。上面的突变为 CreateGraphcoolLinkCreateApolloLink

通过上面的操作,你已经在数据库中创建了一条 Link 记录。你可以通过 data browser (点击左边的DATA) 或者通过在 Playground 中发送下面的查询来查看数据库的数据:

{
  allLinks {
    id
    description
    url
  }
}

如果一切都ok的话,将返回下面数据:

{
  "data": {
    "allLinks": [
      {
        "id": "cj4jo6xxat8o901420m0yy60i",
        "description": "The coolest GraphQL backend 😎",
        "url": "https://graph.cool"
      },
      {
        "id": "cj4jo6z4it8on0142p7q015hc",
        "description": "The best GraphQL client",
        "url": "http://dev.apollodata.com/"
      }
    ]
  }

前端

创建应用

接下来,你将使用 create-react-app 来创建一个 React 应用。

进入到项目目录运行项目:

cd hackernews-react-apollo
yarn start

这将打开浏览器,应用已经运行在 http://localhost:3000

项目目录结构将会是这样:

.
├── README.md
├── node_modules
├── project.graphcool
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
│   ├── App.test.js
│   ├── components
│   │   └── App.js
│   ├── index.js
│   ├── logo.svg
│   ├── registerServiceWorker.js
│   └── styles
│       ├── App.css
│       └── index.css
└── yarn.lock

准备好样式

本教程介绍了GraphQL的概念,以及如何在React应用程序中使用它,因此我们希望将最少的时间花在样式问题上。所以我们将使用 Tachyons 库,它提供了许多 CSS 类。

由于我们还希望有更多的自定义样式,所以还需要下面样式文件。

安装 Apollo

就是这样,开始写代码吧 🚀

配置 ApolloClient

Apollo 已经封装好了底层的网络请求逻辑而且为 GraphQL API 服务器提供了很方便的接口。与使用 REST API 相比,不必构建自己的 HTTP 请求,而只需要编写查询和变更然后通过 ApolloClient 来发送请求。

首先需要配置 ApolloClient,它需要知道 GraphQL API 的端点以便建立网络连接。

注意: create-react-app 创建的项目中字符串都使用分号和双引号。而您添加的代码都没有分号和单引号。

让我们回顾下我们目前都做了些啥:

  1. 首先导入 react-apollo
  2. 然后创建 networkInterface, 用实际的端点替换 __SIMPLE_API_ENDPOINT__
  3. networkInterface 传递到 ApolloClient
  4. 最后渲染应用的入口

接下来,您需要将 GraphQL 端点的占位符替换为实际端点。但是如何获取实际断点呢?

有两种方式可以得到您的端点。您可以打开 Graphcool Console,然后点击左下角的 Endoints 按钮。第二个选项是使用 CLI。

就是这样,你已经为你的 react 应用加载了数据! 😎

Unlock the next chapter
每个 Graphcool 项目文件中都会有哪两个类型?
文件和系统
查询和变更
用户和组
文件和用户