[GraphQL] 使用 Apollo Client + React 來建置 GraphQL 前端應用程式

[前言]

GraphQL系列文章

• [GraphQL] 使用 Apollo Client + React 來建置 GraphQL 前端應用程式

• [GraphQL] 使用Golang Gin Framework來建置GraphQL的API Server

本篇內容將提供快速的指引，使用Golang Gin Framework來建置GraphQL的API  Server。

[Apollo Client Architecture]

Apollo Client 與 UI 框架無關 (可與 Angular.js、Vue.js、React 甚至原生 iOS 和 Android 應用程序一起使用)。

前端應用程序將 GraphQL 查詢發送到 Apollo 客戶端，後者處理查詢並從 GraphQL 服務器請求數據，兼容任何構建設置和 GraphQL API。

然後 GraphQL 服務器將數據響應發送回 Apollo 客戶端。然後規範化並存儲數據。前端應用程序接收 UI 更新。Apollo Client 基本上為前端應用程序做了一些繁重的工作。它還提供開箱即用的智能緩存。

[使用 Apollo Client + React 來建置 GraphQL 前端應用程式]

Apollo Client + React for GraphQL 是參考下列文章的方式來建置: 

• https://www.apollographql.com/docs/react/get-started/
• https://programmingwithmosh.com/backend/graphql/getting-started-with-apollo-graphql-in-your-react-app/

• 安裝以下軟件包

npm install @apollo/client graphql

apollo/client： 包含設置 Apollo 客戶端（版本 3.0）所需的一切

graphql：  提供解析 GraphQL 查詢的邏輯。

• import 模組

在應用程序的根目錄中，通常是index.js 或App.js， 讓我們準備好導入。

import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
  useQuery,
  gql
} from "@apollo/client"; 

• 創建 Apollo 客戶端

在應用程序中初始化 Apollo 客戶端。

const client = new ApolloClient({
  uri: ”https://my-example-url.com”, // Your running GraphQL server URL
  cache: new InMemoryCache()
});

在應用程序的根目錄中，如上所示初始化 Apollo 客戶端實例，並為其提供 GraphQL 服務器 URL。這也可以是本地模式路徑。

• 連接 Apollo 客戶端以與 Apollo Provider 反應

下一步是使用 Apollo Provider 組件將 Apollo Client 連接到 React。它包裝了 React 應用程序並將客戶端放置在上下文中。這允許從應用程序中的所有組件訪問 Apollo 客戶端。將提供程序包裝在應用程序的根目錄中。

<ApolloProvider client = {client}>
  <App />
 </ApolloProvider>

• 使用 GraphQL API 並執行查詢

我們已經準備好實際使用 GraphQL API 並使用 GraphQL 查詢請求數據。可以將 Apollo Client 集成到任何 React 項目中，並將其與現有的 GraphQL 服務器一起使用。

• 使用useQuery

useQuery是一個 React Hook，它是用於在 Apollo 應用程序中執行查詢的 API。

接下來，我們利用UsersList.js來呈現查詢與顯示資料的React元件:

import { gql, useQuery } from '@apollo/client';

const GET_POST_FOR_USERS = gql`

query GetUsers {

  users {

    id

    email

    userId

  }

}

`;

const UsersList = () => {

    const { loading, error, data } = useQuery(GET_POST_FOR_USERS);

    if (loading) return <p>Loading...</p>;

    if (error) return <p>Error :(</p>;

    return data.users.map(currentUser => (

        <li key={currentUser.id}>

            <li>id: {currentUser.id}</li>

            <li>userId: {currentUser.userId} </li>

            <li>email: {currentUser.email}</li>

            <br />

        </li>

    ));

};

export default UsersList;

我們在App.js 加入相關的實作:

import {

  ApolloClient,

  InMemoryCache,

  ApolloProvider,

  useQuery,

  gql

} from "@apollo/client";

import { GenGraphQLURI } from './components/common/utils';

import UsersList from './components/apollo/UsersList';

function App() {

  const client = new ApolloClient({

    uri: GenGraphQLURI("127.0.0.1", "8088", "/gql"),

    cache: new InMemoryCache()

  });

  return (

    <div>

      <ApolloProvider client={client}>

        < UsersList />

      </ApolloProvider>

    </div>

  );

}

export default App;

在APM API Server上測試 GraphQL query 之結果與在React + Apollo Client 上測試GraphQL query 相吻合。