摘要：然而，盡管使用有諸多好處，但邁出第一步可能并不容易。為了簡(jiǎn)化初始教程，我們今天只構(gòu)建一個(gè)簡(jiǎn)單的列表視圖。是我們將在本教程系列中使用的客戶端的名稱。我們將列表組件命名為。在本教程的其余部分中，你將了解到我們構(gòu)建一個(gè)真正的通信應(yīng)用的基礎(chǔ)。

首發(fā)于眾成翻譯

GraphQL 是一種新的 API 定義和查詢語(yǔ)言，有可能成為新的 REST。它使 UI 組件易于聲明式地獲取數(shù)據(jù)，而不必關(guān)注后端實(shí)現(xiàn)細(xì)節(jié)。GraphQL 作為一種強(qiáng)大的抽象，可以加快應(yīng)用開發(fā)速度，使代碼更容易維護(hù)。

然而，盡管使用 GraphQL 有諸多好處，但邁出第一步可能并不容易。這就是為什么我編寫了這一系列教程，帶你一步步地編寫一個(gè)包含 GraphQL 和 Apollo Client 的全棧 React 應(yīng)用。該系列將引導(dǎo)你完整構(gòu)建一個(gè)使用 GraphQL 的即時(shí)消息應(yīng)用：

Part 1（本文）：設(shè)置一個(gè)簡(jiǎn)單的客戶端

Part 2：設(shè)置一個(gè)簡(jiǎn)單的服務(wù)器

Part 3：編寫變更并保持客戶端同步

Part 4：積極 UI 和客戶端 store 更新

Part 5：輸入類型和自定義緩存解析器

Part 6：服務(wù)器端的訂閱

Part 7：客戶端的 GraphQL 訂閱

本教程——作為這一系列中的第一篇——是關(guān)于如何在前端開始使用 GraphQL。只需要大約20-30分鐘，最終你會(huì)得到一個(gè)非常簡(jiǎn)單的 React UI，它使用 GraphQL 加載數(shù)據(jù)，看起來(lái)像這樣：

一個(gè)使用 GraphQL 加載數(shù)據(jù)的簡(jiǎn)易 React UI

讓我們開始吧！

注意：要完成此教程，你需要在你的機(jī)器上安裝 node，npm 和 git，并且對(duì) React 有所了解。

我們將在本教程中使用 create-react-app，所以執(zhí)行安裝：

> npm install -g create-react-app

我們還需要從 GitHub 中克隆本教程的代碼庫(kù)，其中包含了我們稍后會(huì)使用到的 CSS 和圖像。

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

接下來(lái)，我們使用 create-react-app 創(chuàng)建我們的 react 應(yīng)用。

> create-react-app client
> cd client

為了確保它能工作，我們啟動(dòng)服務(wù)器：

> npm start

如果一切正常，你現(xiàn)在應(yīng)該在瀏覽器中看到如下內(nèi)容：

由于我們正在使用 Apollo 構(gòu)建一個(gè)應(yīng)用，所以我們通過(guò)從 ../ resources 復(fù)制 logo.svg 和 App.css 來(lái)修改 logo 和 CSS。

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

為了簡(jiǎn)化初始教程，我們今天只構(gòu)建一個(gè)簡(jiǎn)單的列表視圖。讓我們修改 App.js 中的代碼：

修改 “Welcome to React” 為 “Welcome to Apollo”。Apollo 是我們將在本教程系列中使用的 GraphQL 客戶端的名稱。

刪除 “To get started ..”段落，并用純 React 組件替換它，該組件將渲染一個(gè)具有兩個(gè)列表項(xiàng)的無(wú)序列表，“Channel 1”和 “Channel 2”（是的，你猜到了，我們要構(gòu)建一個(gè)通信應(yīng)用！）。我們將列表組件命名為 ChannelsList。

現(xiàn)在你的 App.js 應(yīng)該如下所示：

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 為你設(shè)置好了熱加載，所以一旦你保存文件，你的應(yīng)用所在的瀏覽器窗口將會(huì)更新以反映更改：

如果看起來(lái)像這樣，你的設(shè)置就是正確的。

現(xiàn)在我們有一個(gè)簡(jiǎn)單的應(yīng)用正在運(yùn)行，現(xiàn)在是為它編寫 GraphQL 類型定義的時(shí)候了。 Schema 將指定我們的應(yīng)用中存在哪些對(duì)象類型，以及它們有哪些字段。此外，它指定了我們的 API 的入口。我們新建一個(gè)名為 schema.js 的文件：

export const typeDefs = `

type Channel {
   id: ID!                # "!" 為必填
   name: String
}

# 此類型指定了我們的 API 的入口點(diǎn)。在本例中，只有一個(gè)——"channels"——返回頻道列表。
type Query {
   channels: [Channel]    # "[]" 意味著這是頻道列表
}
`;

有了這個(gè) schema，我們可以在下節(jié)中編寫一個(gè)簡(jiǎn)單的查詢來(lái)獲取我們的 ChannelList 組件的數(shù)據(jù)。這是我們的查詢：

query ChannelsListQuery {
  channels {
    id
    name
  }
}

好，現(xiàn)在我們有了 schema 和查詢，我們只需要使用 Apollo Client 連接我們的組件！我們來(lái)安裝 Apollo Client 和一些輔助軟件包，我們需要將 GraphQL 添加到我們的應(yīng)用中：

> npm i -S react-apollo

react-apollo 是 Apollo Client 與 React 的整合，可以讓你使用名為 graphql 的高階組件來(lái)裝飾組件，它將你的 GraphQL 數(shù)據(jù)不費(fèi)力地導(dǎo)入到組件中。React Apollo 還提供了 ApolloClient，它是 Apollo 的核心，處理所有數(shù)據(jù)獲取，緩存和積極更新（我們將在另一個(gè)教程中討論）。

現(xiàn)在，我們?cè)?App.js 的頂部添加一些導(dǎo)入，并創(chuàng)建一個(gè) Apollo Client 的實(shí)例：

import {
  ApolloClient,
  gql,
  graphql,
  ApolloProvider,
} from "react-apollo";

const client = new ApolloClient();

接下來(lái)，我們使用 GraphQL 高階組件來(lái)裝飾原來(lái)的 ChannelsList，該高階組件接受查詢并將數(shù)據(jù)傳遞給我們的組件：

const channelsListQuery = gql`
   query ChannelsListQuery {
     channels {
       id
       name
     }
   }
 `;

const ChannelsListWithData = graphql(channelsListQuery)(ChannelsList);

當(dāng)我們的 ChannelsList 組件使用 graphql HOC 包裝時(shí)，將會(huì)收到一個(gè)名為 data 的 prop，當(dāng)它可用時(shí)會(huì)包含 channel，當(dāng)有錯(cuò)誤時(shí)會(huì)顯示 error。另外 data 還包含一個(gè) loading 屬性，當(dāng) Apollo Client 在等待數(shù)據(jù)獲取的時(shí)候它的值為 true。

接下來(lái)修改我們的 ChannelsList 組件，以確保用戶知道該組件是否正在加載，或者是否出現(xiàn)錯(cuò)誤：

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

   return 

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

最后，我們用 ChannelsListWithData 替換 App 的 render 函數(shù)中的 ChannelsList。 為了讓我們剛創(chuàng)建的組件能夠使用 Apollo Client 的實(shí)例，我們用 ApolloProvider 包裹頂級(jí)的應(yīng)用組件，這會(huì)將 Apollo Client 的一個(gè)實(shí)例放在 UI 上。

現(xiàn)在你的 App 組件應(yīng)該如下所示：

class App extends Component {
   render() {
     return (
       
         

           

             
             
Welcome to Apollo
           
           
         
       
     );
   }
 }

好的，我們快完成了！如果你現(xiàn)在嘗試運(yùn)行，應(yīng)該會(huì)看到以下錯(cuò)誤：

起作用了！——好吧，至少部分如此。

這是怎么回事？盡管我們正確地連接了所有的組件，但我們還沒(méi)有寫一個(gè)服務(wù)器，所以當(dāng)然沒(méi)有數(shù)據(jù)可以獲取或顯示！ 如果你沒(méi)有為 GraphQL 端點(diǎn)指定 URL，Apollo Client 將假定它運(yùn)行在同一個(gè)域下的 /graphql。因此我們需要?jiǎng)?chuàng)建一個(gè)具有自定義 URL 的網(wǎng)絡(luò)接口。

但是，由于本教程不是關(guān)于編寫服務(wù)器的，所以我們將利用 GraphQL 代碼即文檔這一特性，根據(jù)我們先前寫過(guò)的類型定義自動(dòng)創(chuàng)建 mock。要實(shí)現(xiàn)這一點(diǎn)，我們只需要停止服務(wù)器，安裝一些其他的軟件包，然后重新啟動(dòng)它：

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

我們將使用這些軟件包根據(jù)我們前面寫的 schema 為 Apollo Client 創(chuàng)建一個(gè)模擬網(wǎng)絡(luò)接口。將以下導(dǎo)入和定義添加到 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 });

現(xiàn)在你只需將 mockNetworkInterface 傳遞給 Apollo Client 的構(gòu)造函數(shù)：

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

就是這樣，你已經(jīng)完成了！你的屏幕現(xiàn)在應(yīng)該如下所示：

我們做到了，我們的第一個(gè)使用 Apollo 的 React + GraphQL 應(yīng)用！

注意：“Hello World” 只是字符串的默認(rèn)模擬文本。 如果你想自定義酷炫的 mock，請(qǐng)查看我之前寫的這篇文章。

如果某些代碼不起作用，并且你搞不清是為什么，你可以將其與此文件進(jìn)行比較，以發(fā)現(xiàn)代碼差異?；蛘?，你可以查看 t1-end Git 分支來(lái)檢查代碼。

恭喜，你已經(jīng)正式完成了教程的第一部分！可能沒(méi)什么感覺(jué)，但實(shí)際上已經(jīng)做了很多工作：你已經(jīng)編寫了一個(gè) GraphQL schema，從中生成模擬數(shù)據(jù)，并將 GraphQL 查詢與 React 組件相連。在本教程的其余部分中，你將了解到我們構(gòu)建一個(gè)真正的通信應(yīng)用的基礎(chǔ)。在第2部分中，我們將編寫一個(gè)簡(jiǎn)單的服務(wù)器并將其連接到我們的應(yīng)用！