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

首發于眾成翻譯

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

讓我們開始吧！

注意：要完成此教程，你需要在你的機器上安裝 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

如果一切正常，你現在應該在瀏覽器中看到如下內容：

由于我們正在使用 Apollo 構建一個應用，所以我們通過從 ../ resources 復制 logo.svg 和 App.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 為你設置好了熱加載，所以一旦你保存文件，你的應用所在的瀏覽器窗口將會更新以反映更改：

如果看起來像這樣，你的設置就是正確的。

現在我們有一個簡單的應用正在運行，現在是為它編寫 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
  }
}

好，現在我們有了 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部分中，我們將編寫一個簡單的服務器并將其連接到我們的應用！