使用 GitHub Pages 进行 GraphQL(AppSync) 开发

2 年 ago

清, 宇

3 minutes

首先

本文是在Github Pages上公开的React × TypeScript应用程序中，总结了实现使用GraphQL（AppSync）的步骤。请注意，这只是一种方法的概括，因此关于知识方面的内容并不详尽。

react、TypeScriptをなんとなくでも使ったことがある。

我认为这个水平的话，应该可以顺利阅读下去。


import ReactDOM from 'react-dom/client';
import './index.css';
import App from './Pages/App';
import { ApolloClient, InMemoryCache, ApolloProvider, HttpLink } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';

//GraphQL APIのエンドポイント用の変数
const endPoint = process.env.REACT_APP_GRAPHQL_ENDPOINT;

//APIキー認証用の変数
const apiKey = process.env.REACT_APP_API_KEY;
 
const authLink = setContext((_, { headers }) => {
  return {
    headers: {
      ...headers,
      'x-api-key': apiKey,
    }
  };
});
// Apollo Clientのインスタンスを作成
const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: authLink.concat(
    new HttpLink({
      uri: endPoint,
    })
  )
});

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>

在初始阶段，初始化Apollo Client并用ApolloProvider进行包裹。

3-2. GraphQL

GraphQL（一种查询语言和运行时环境）

顺便写下GraphQL代码吧。

在src/App中加入以下内容。

import React, { useEffect } from 'react';
import logo from './logo.svg';
import './App.css';
import { gql, useQuery } from '@apollo/client';

function App() {
  //バッククォートです
  const GET_DATA = gql`
  query ListEvents {
    listEvents {
      items {
        id
        name
        where
        description
      }
    }
  }
  `;

  const { data, loading } = useQuery(GET_DATA);
  useEffect(() => {
    if (data) {
      console.log(data);
    }
  }, [loading]);
  
  return (
    //省略
  )

由于这次是基于AppSync的活动应用程序，因此模式如上所述。如果在不同的环境中进行，请根据需要更改模式。

请务必查看我们为您提供的Apollo Client和GraphQL的综合文档。

4. 使用环境变量

4-1. Github的私密信息

一旦离开源代码，回到Github。

从存储库的”设置” -> “秘密和变量” -> “操作”中，跳转到环境变量的设置页面。

从右上方的新存储库密码中，添加环境变量。

を書き込みます。

在Github中，可以通过用户的设置 -> 开发者设置 -> 个人访问令牌 -> 令牌生成新令牌来生成令牌。

4-2. 创建工作流文件（yaml）

接下来，我们将使React能够读取预先设置的环境变量。

为了实现在构建和部署时能够获取环境变量，我们将利用Github Action，并创建工作流文件。

在根目录下创建.github/workflows/main.yml文件。

% mkdir -p .github/workflows
% cd .github/workflows
% touch main.yml

将以下内容写入已创建的yaml文件。

name: Build and Deploy

on:
  push:
    branches:
      - master

env:
  REACT_APP_API_KEY: ${{ secrets.REACT_APP_API_KEY }}
  REACT_APP_GRAPHQL_ENDPOINT: ${{ secrets.REACT_APP_GRAPHQL_ENDPOINT }}

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout
      uses: actions/checkout@v3

    - name: Build
      run: |
        npm ci
        npm run build

    - name: Deploy
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.MY_TOKEN }}
        publish_dir: './build'

在此时，您需要在根目录下创建一个build目录。默认情况下，./build已被设置为git忽略，所以请将其注释掉。

不是yaml文件，但存在于package.json中。

"homepage": "https://ユーザー名.github.io/リポジトリ名/"

我们把它添加进去吧。

如果做到了这一步，我会进行推送。
（将.gitignore中的./build还原。）

结束

根据以上的步骤，应该会自动生成gh-page分支并更新github页面。如果查询正确，应该在开发者工具的控制台窗口中显示数据，请确认一下。

虽然我是个业余者，可能会有错误，但如果你能指出来，我会很感激。

问答

Q：当我执行了 push 操作后，出现了下一个错误并导致构建失败…

src/App.tsx
  Line 25:6:  React Hook useEffect has a missing dependency: 'data'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

A: 导致此错误的原因是”useEffect”中的依赖数组中没有包含所需的”data”数据。但是，这样会导致每次渲染时都调用该函数，所以这次我们使用以下方式

  useEffect(() => {
    if (data) {
      console.log(data);
    }
    // 以下のコメントによってEsLintのエラーを無視します、
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [loading]);

在别的项目中倒是没出现过这种错误…(我处理掉了。)

请就如下陈述进行本土化的中文释义，只需要一个选项：

参考

世の中のフロントエンジニアにApollo Clientを布教したい

使用 GitHub Pages 进行 GraphQL(AppSync) 开发

首先

目录

环境

节点

npm（Node Package Manager）

1.预先准备

2. 使用AppSync创建GraphQL服务器。

3. 阿波罗客户端和GraphQL

3-1. 阿波罗客户端

3-2. GraphQL

4. 使用环境变量

4-1. Github的私密信息

4-2. 创建工作流文件（yaml）

结束

问答

请就如下陈述进行本土化的中文释义，只需要一个选项：