通过查阅Graphcool的教程和其他资料，我尝试了解这个平台

1 年 ago
宇, 华
2 minutes

首先

这篇文章是2017年格罗维斯公司圣诞日历第24天的文章。
格罗维斯公司正在招聘工程师。

本文的起因 de

从一开始说起

【新手】参加了一次便于初学者的手把手教学会，通过开发一个React/GraphQL无服务器Web应用程序，我第一次接触到了GraphQL。

在上述的研討會上，我們使用了一個名為GraphCMS的服務，它是一個無需伺服器的雲端後端服務（BaaS），用於使用GraphQL。我們可以通過這個服務的豐富圖形使用者介面來進行模型定義和內容登錄等操作。

因此，這次

初次接触BaaS服务Graphcool后发现关于Graphcool的日文文章仍较少（GraphCMS也不多），为了加深对Graphcool及其相关技术（GraphQL、Apollo、React）的理解，我决定撰写一本以Advent Calendar形式呈现的文章。

执行环境

    • Mac OS Sierra: v10.12.6

 

    • node: v8.2.0

 

    • npm: v5.3.0

 

    Docker: v17.03.1-ce-mac12

Graphcool概述

官方网站（截至2017年12月23日）上有

开源框架用于开发和部署可生产的无服务器GraphQL后端。包括GraphQL数据库映射，实时订阅和灵活的权限系统。

这在TOP页面的首要视图中写着，简单地翻译过来是

    这是一个开源框架，用于开发和部署基于服务器无关的GraphQL后端。它包括基于GraphQL的数据库映射，实时订阅功能以及灵活的权限系统。

我觉得你可以这样来表达：
1. 1. 的那部分更像是Graphcool本身的概述（特点），2. 的那部分则是关于通过GraphQL可以做的事情。
subscriptions指的是接收数据变更通知的机制。
permission system指的是认证系统，而flexible意味着可以基于Graphcool的functions来构建这个认证系统。

支撑核心部分的技术是Scala。

Graphcool框架背后的核心技术采用Scala编写，以确保稳定和高性能。作为框架的开发者，您可以使用JavaScript或其他任何喜欢的语言。Graphcool的大多数开源工具则是使用TypeScript编写的。

为了确保稳定性和高性能，Scala似乎被选择作为Graphcool框架的核心语言。然而，开发者可以使用任意喜欢的语言，例如JavaScript，成为该框架的用户。

价格体型

在云端提供托管服务，从可免费使用的Shared cluster到可在AWS等部署的付费Private Cluster，截至2017年12月23日，大体上可以划分为4种类型。GRAPHCOOL CLOUD

比较受欢迎程度

fff06294-4dde-03dc-d0d3-cd70983f39d5.png

教程体验

我决定先尝试教程而不是仔细阅读文档，所以我点击了官方网站上的“开始”按钮，按照“学以致用”的原则。

开始使用你最喜欢的技术

请根据您喜欢的技术进行选择，首先选择在业务中使用的前端框架React，并从React＆Apollo快速入门开始。

React和Apollo的快速入门

使用React、Apollo Client和GraphQL，我们将创建一个简单的Instagram克隆版。

1. 从存储库克隆到快速入门与Apollo的目录中。

因为GitHub已为教程准备了存储库，所以您可以在终端中使用git clone命令将其克隆到react-graphql/quickstart-with-apollo目录，并进行移动。

克隆包含React应用程序的示例存储库。

$ git clone https://github.com/graphcool-examples/react-graphql.git
$ cd react-graphql/quickstart-with-apollo

2. 安装管理工具。

接下来，让我们安装用于管理Graphcool服务的工具。

2. 安装 Graphcool 命令行界面:

$ npm install -g graphcool

只需一个选项，将以下内容用汉语进行释义：由于进行了全局安装，一旦成功，就可以在本地任何位置使用graphcool命令，从而可以执行Graphcool服务的部署、初始设置以及通过电子邮件进行认证来添加模板等功能。其他命令列表请点击此处。

3. 通过使用graphcool init进行初始化

3. 在名为server的目录下创建一个新的Graphcool服务的本地文件结构。

使用graphcool init命令，在名为server的目录内创建适用于Graphcool服务的本地文件结构。

# Create a local service definition in a new directory called `server`
$ graphcool init server

4. 数据模型的设置

在接下来，我们将设置服务的数据模型（模式定义）。
在创建的server目录中，有一个名为types.graphql的文件，其中包含了GraphQL的数据模型。我们需要在其中添加下一个名为Post的对象类型的定义（已经存在的名为User的类型需要删除或注释掉）

4. 打开 ./server/types.graphql 并向其添加以下类型定义（可以删除现有的 User 类型）：

type Post @model {
  id: ID! @isUnique    # read-only (managed by Graphcool)
  createdAt: DateTime! # read-only (managed by Graphcool)
  updatedAt: DateTime! # read-only (managed by Graphcool)

  description: String!
  imageUrl: String!
}

id和createdAt被称为字段，它们在冒号后面的ID和String表示了这些字段的类型。
!表示非空。
有关这些类型和模式的详细信息，请参考GraphQL官方网站。

此外，带有“ @”符号的被称为指令，在名称上就表示为对字段的指示。（在上述示例中，它将确保id字段中存储的值是唯一的）
更详细的信息，请参考官方指令章节。

5. 使用 graphcool deploy 进行部署

接下来，切换到server目录，并执行graphcool deploy命令来进行部署。

5. 转到服务器目录并部署你的服务。

$ cd server
$ graphcool deploy

当执行`graphcool deploy`命令时，将会询问您三个问题。
在第一个问题中，您需要指定Shared Clusters（免费云托管服务）的位置，请选择其中一个区域。

如果您想在本地环境中构建和连接Graphcool服务，而不是在云端环境中，您可以通过以下步骤使用Docker指定本地环境。

接下来，您将被问及目标名称，但如果没有特别偏好，只需按下回车键，即可应用默认的prod。

接下来，您会被问到服务名称，如果没有特别要求，将会应用默认名称。

而且，如果你第一次使用Graphcool CLI进行身份认证，会弹出浏览器，并显示一个要求进行认证流程的页面。但是，根据是否已登录Graphcool的控制台，显示的页面会有所不同。

milogin.png

注册（Sign Up）非常方便，您可以选择使用GitHub或Google进行注册。

loginzumi.png

请点击“授权CLI”以继续。

success.png

获取API端点

在上一个步骤中，将指令输入到终端的末尾

Here are your GraphQL Endpoints:

  Simple API:        https://api.graph.cool/simple/v1/xxxxx
  Relay API:         https://api.graph.cool/relay/v1/xxxxx
  Subscriptions API: wss://subscriptions.graph.cool/v1/xxxxx

就像这样，终端输出了端点。
其中，简单API是连接到后面的Apollo所需的信息，所以请记下来。（即使忘记了，也可以后来使用graphcool info命令进行确认）

6. 从graphcool deploy命令的输出中保存Simple API的HTTP端点，稍后会用到它！

此外，如果在此阶段执行graphcool playground命令，将会打开Graphcool的控制台界面，您可以在此界面中发送GraphQL查询语句从数据库中获取信息（query），也可以创建新数据（mutation）。

获取所有文章的信息。

query {
  allPosts {
    id
    description
    imageUrl
  }
}
listview.png

增加新文章

mutation {
  createPost(
    description: "テスト投稿"
    imageUrl: "https://xxxxxx.imageurl.com"
  ) {
    id
  }
}
add.png

7. 从React（Apollo）连接到Graphcool。

接下来，请将Simple API的终点粘贴到./src/index.js文件中，并将其连接到你自己搭建的Graphcool服务和本地的React应用程序。
（连接将使用Apollo Client，这是一种用于GraphQL前端实现的库）

将您在运行 graphcool deploy 后保存的 Simple API 的 HTTP 端点粘贴到 ./src/index.js 中作为 HttpLink 构造函数调用的 uri 参数。

const httpLink = new HttpLink({ uri: '__SIMPLE_API_ENDPOINT__' })

请提供更多的上下文以便我为您提供准确的中文表达。

const httpLink = new HttpLink({ uri: 'https://api.graph.cool/simple/v1/xxxxx' })

8. 启动 React 应用程序

最后，安装package.json中指定的软件包，并运行应用程序。

8. 安装依赖并运行应用程序：

$ cd ~/react-graphql/quickstart-with-apollo
$ yarn install
$ yarn start

默认情况下，它将在本地的端口3000上启动，所以如果在其他应用程序上已经使用相同的端口进行启动，请先停止其他应用程序。

当应用成功启动后，将显示以下类似的界面。

appli.png

在本地环境中的确认方式。

前提是已经安装了Docker。

１）从远程获取最新的Cluster。

$ graphcool local pull

启动通过第一步获取的本地集群。

$ graphcool local up

如果一切正常，执行docker ps命令将可以看到两个容器。

$ docker ps
CONTAINER ID        IMAGE                           COMMAND                  CREATED             STATUS              PORTS                      NAMES
c71fd2a3699b        graphcool/graphcool-dev:0.9.0   "/app/bin/single-s..."   14 minutes ago      Up 14 minutes       0.0.0.0:60000->60000/tcp   local_graphcool_1
69e7ae794928        graphcool/localfaas:0.9.0       "/app/bin/localfaas"     14 minutes ago      Up 14 minutes       0.0.0.0:60050->60050/tcp   local_localfaas_1

参考资料：使用Docker进行部署

最后

如上所述，通过Graphcool，可以轻松地构建GraphQL的订阅（用于接收数据更改信息通知的机制）以及Facebook和电子邮件认证系统等。因此，我将继续探索和尝试各种可能性，并且希望探索更多。

✖
广告
将在 10 秒后关闭
bannerAds