GraphQL極簡入門教程---一、Frontend開始

根據HOW TO GRAPHQL官網的例子，作了些對最新版的改動，適合最新框架的學習。

本系列文章注重前端方面的開發，對於node方面的放在下一個系列。在此過程當中有任何問題，都歡迎在評論中提問，會及時反饋

系列目錄：

第一章. Frontend開始

第二章. Queries組件編寫（Loading Links）

目標是寫一個Hackernews應用。如下是應用功能：

• 顯示連接列表
• 搜索連接
• 用戶登陸
• 登陸用戶能夠建立連接
• 通過身份驗證的用戶能夠點贊連接（每一個連接和用戶一次）
• 當其餘用戶點贊連接或建立一個新的連接時，實時更新

下面是構建應用將使用的技術:

• 前端
  • React: 用於構建用戶界面的前端框架
  • Apollo Client: 功能齊全的GraphQL客戶端
• 後端
  • prisma: 靈活的後端平臺組合 GraphQL + Serverless
  • graphql-yoga：使用簡單、功能齊全的GraphQL server，擁有出色的性能和好的開發者體驗

開始

爲了照顧更加全面的讀者，我寫的會盡可能詳細，熟練的開發者可進行快速選擇性的閱讀

建立一個app

首先咱們建立一個react項目，咱們使用create-react-app作這些事情，本系列使用mac電腦，使用window的開發者可自行替換運行命令

npx create-react-app simple-hackernews
複製代碼

運行完成後，咱們建立了一個叫 simple-hackernews的project，運行一下看看

cd simple-hackernews
yarn start
複製代碼

Note: 這裏使用了yarn命令，與npm相似，但比npm好用，推薦使用

程序會自動打開瀏覽器http://localhost:3000，若是出現熟悉的react圖標，項目初始化就完成了。

使用IDE打開咱們建立的項目，先調整一下項目目錄結構

.
├── README.md
├── node_modules
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
│   ├── App.test.js
│   ├── components
│   │   └── App.js
│   ├── index.js
│   ├── logo.svg
│   ├── serviceWorker.js
│   └── styles
│       ├── App.css
│       └── index.css
└── yarn.lock
複製代碼

而後本身把App.js、index.js中的依賴路徑給調整一下。

準備樣式 爲了更少的關注樣式，咱們使用Tachyons樣式庫

打開public/index.html，增長一個link

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
// 下面這行是增長的
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.2.1/css/tachyons.min.css"/>
複製代碼

保存，而後咱們打開index.css，將文件內容改成：

body {
  margin: 0;
  padding: 0;
  font-family: Verdana, Geneva, sans-serif;
}

input {
  max-width: 500px;
}

.gray {
  color: #828282;
}

.orange {
  background-color: #ff6600;
}

.background-gray {
  background-color: rgb(246,246,239);
}

.f11 {
  font-size: 11px;
}

.w85 {
  width: 85%;
}

.button {
  font-family: monospace;
  font-size: 10pt;
  color: black;
  background-color: buttonface;
  text-align: center;
  padding: 2px 6px 3px;
  border-width: 2px;
  border-style: outset;
  border-color: buttonface;
  cursor: pointer;
  max-width: 250px;
}
複製代碼

樣式基本準備完畢

安裝Apollo Client

在項目根目錄下運行

yarn add apollo-boost react-apollo graphql
複製代碼

• apollo-boost包含了方便咱們使用Apollo Client工具的工具包
• react-apollo包含將Apollo Client與React一塊兒使用的綁定
• graphql包含Facebook的GraphQL參考實現 - Apollo Client也使用它的一些功能

配置ApolloClient

Apollo抽象出全部較低級別的網絡邏輯，併爲GraphQL服務器提供了一個很好的接口。 與使用REST API相比，您沒必要再處理構建本身的HTTP請求 - 而是能夠簡單地編寫Query和Mutations並使用ApolloClient實例發送它們。 使用Apollo時首先要作的是配置ApolloClient實例。 它須要知道GraphQL API的endpoint，以便它能夠處理網絡鏈接。

打開src/index.js，更改成如下

import React from 'react'
import ReactDOM from 'react-dom'
import './styles/index.css'
import App from './components/App'
import * as serviceWorker from './serviceWorker'
import { ApolloProvider } from 'react-apollo'
import { ApolloClient } from 'apollo-client'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'

const httpLink = createHttpLink({
  uri: 'http://localhost:4000'
})

const client = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache()
})

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
)
serviceWorker.register()
複製代碼

理解下目前作了啥：

1. 首先導入一些必要的包文件
2. 建立了將ApolloClient實例與GraphQL API鏈接的httpLink，GraphQL服務器將在http:// localhost:4000上運行
3. 經過傳入httpLink和InMemoryCache的新實例來實例化ApolloClient
4. 最後渲染React應用程序的根組件。應用程序包含高階組件ApolloProvider，它做爲prop傳遞給客戶端

下載後端代碼

本系列主要針對前端搭建，後端代碼咱們直接用完成版就好，以後會更新node的graphql文章

在根目錄下運行如下命令（mac，linux能夠直接運行，windows請先安裝curl或者直接訪問網址下載,解壓出來，將server文件夾copy到根目錄下）

curl https://codeload.github.com/howtographql/react-apollo/tar.gz/starter | tar -xz --strip=1 react-apollo-starter/server
複製代碼

如今咱們擁有了一個server文件夾，目錄文件以下：

• prisma：此目錄包含與Prisma數據庫服務相關的全部文件。
  • prisma.yml：是服務的根配置文件。
  • datamodel.prisma 定義您的數據模型。每一個模型都映射到數據庫中的表
• src：此目錄包含GraphQL服務器的源文件。
  • schema.graphql 包含您的GraphQL schema。
  • resolvers 包含GraphQL schema中定義的resolver function
  • index.js 是GraphQL服務器的入口

咱們如今能夠看下server/src/schema.graphql文件，裏面包含的就是前端能夠發送的操做 這個schema容許瞭如下操做

• Queries:
  • feed：從後端檢索全部連接，請注意此查詢還容許filter，sorting和pagination 參數
• Mutations：
  • post: 容許通過身份驗證的用戶建立新連接
  • signup：建立新用戶
  • login：登陸現有用戶
  • vote：容許通過身份驗證的用戶點贊現有連接
• Subscriptions:
  • newLink：建立新連接時接收實時更新
  • newVote：提交點贊時接收實時更新

例如你能夠發送這樣的feed來查詢前10個links

{
  feed(skip: 0, first: 10) {
    links {
      description
      url
      postedBy {
        name
      }
    }
  }
}
複製代碼

部署Prisma數據模型

首先註冊Prisma Cloud，並在https://app.prisma.io中建立一個service。

（Tips： 我這邊由於是已經有建立好的service，新用戶能夠參考文檔建立，第一次能夠在咱們文件夾中按照教程建立，當能夠在你的我的中心看到service的時候，說明建立成功了，而後將建立時生成的文件全都刪除，保證項目的純淨，進入建立好的service頁面，複製左下角的http endpoint，粘貼到server/prisma/prisma.yml中的endpoint字符串中，以及粘貼到server/src/generated/prisma-client/index.js中的endpoint字符串）

而後咱們切到server文件夾下，運行

yarn install
yarn prisma deploy
複製代碼

項目就能夠鏈接上prisma了

server由Prisma Cloud免費提供，並附帶鏈接數據庫（AWS Aurora）

試用服務器

在server目錄下運行

yarn start
複製代碼

如今用瀏覽器打開http://localhost:4000 ，能夠看到GraphQL Playground正在運行。

複製如下代碼到Playground的左側框內

mutation {
  prismaLink: post(
    description: "Prisma replaces traditional ORMs and makes it easy to build GraphQL servers 😎",
    url: "https://www.prisma.io"
  ) {
    id
  }
  apolloLink: post(
    description: "The best GraphQL client for React",
    url: "https://www.apollographql.com/docs/react/"
  ) {
    id
  }
}
複製代碼

點擊中間的play按鈕就會在數據庫中添加了兩條link

咱們再在左側輸入

{
  feed {
    links {
      id
      description
      url
    }
  }
}
複製代碼

若是一切正常的話，能夠在右側看到相似如下的輸出

{
  "data": {
    "feed": {
      "links": [
        {
          "id": "cjcnfwjeif1rx012483nh6utk",
          "description": "The best GraphQL client",
          "url": "https://www.apollographql.com/docs/react/"
        },
        {
          "id": "cjcnfznzff1w601247iili50x",
          "description": "Prisma replaces traditional ORMs and makes it easy to build GraphQL servers 😎",
          "url": "https://www.prisma.io"
        }
      ]
    }
  }
}
複製代碼

到此爲止，全部的準備工做的完成了！立刻開始下一步的旅程吧。

Queries組件編寫（Loading Links）

本章項目github 分支地址

github.com/zust-hh/sim…