フロントエンドエンジニアのためのGraphQL with React 入門 2018年版

このチェックリストは、GitHub GraphQL APIを使用して、クライアント側で検索やStarを操作するための Reactアプリケーションを構築する際のステップを示しています。以下に、各ステップの概要と具体的な実装方法について説明します。

1. QLクライアントによるGitHub GraphQL APIサーバとの通信を行う

   • GitHubのGraphQL APIエンドポイントを設定し、クライアントがそれにアクセスできるようにする。

2. 初めてのリクエストとレスポンスで疎通確認を行う

   • GraphQL APIに対して基本的なGETリクエストを送信し、レスポンスフォーマットを確認する。

3. GraphQLのコードを別のファイルに分離する

   • graphqlのコードをモジュール化し、読みやすさと再利用性を高める。

4. search queryとVariablesをアプリケーションに適用する

   • GraphQLのクエリ（searchなど）を定義し、必要な変数（$query, $orderBy, $firstなど）を渡す方法を実装する。

5. 検索フォームを作成し動的に検索を実行できるようにする

   • HTMLフォームの作成と、ユーザー入力に応じてGraphQLクエリを実行するイベントハンドラを設定する。

6. タイトルを表示する

   • 検索結果の数量に応じたタイトル（"0 repositories" または "1 repository" など）を表示する。

7. 検索結果一覧をリスト表示する

   • 取得したデータからrepoの名前を掴み、それを一覧に表示する。

8. 次ページ(Next)ボタンを実装する

   • pageInfoを使って、次のページへのリンクを提供する。

9. 前ページ(Previous)ボタンを実装する

   • 逆方向のページ遷移にも対応する。

10. starの数を表示する

    • リポジトリのステータスを表示する。

11. ReactのrefでonChangeによる過剰なquery送信を回避する

    • useRefやcreateRefを使用して、コンポーネントへの参照を取得し、不要なイベントハンドラを削除する。

12. Star (Mutation) を実装する

    • mutationを定義し、ユーザーがStarを追加または削除できる機能を実装する。

13. キャッシングの最適化

    • Apollo Clientのキャッシング機能を利用して、パフォーマンスを向上させる。

これらのステップを実装する際には、GitHub GraphQL APIのドキュメントやApollo Clientのドキュメントを参照することが重要です。また、Reactの状態管理（useState, useEffectなど）とイベント処理（useRefなど）に精通しておくと、より効率的なコードを書くことができます。

以下は、ReactとApollo Clientを使用したStarを追加する一部の例です：

import React, { useState } from 'react';
import { gql, useMutation, useQuery } from '@apollo/client';

// Mutationを定義
const TOGGLE_STAR = gql`
  mutation ToggleStar($input: Id!) {
    toggleStar(input: $input) {
      stargazers {
        totalCount
      }
    }
  }
`;

// Starを追加または削除する関数を定義
const useToggleStar = (repoId, refetchQueryKey) => {
  const [toggleStarLoading, setToggleStarLoading] = useState(false);
  const [toggleStarError, setToggleStarError] = useState(null);

  return useMutation(TOGGLE_STAR, {
    variables: { input: repoId },
    onCompleted: data => {
      console.log(`Stars: ${data.toggleStar.stargazers.totalCount}`);
      // キャッシュを更新するために再度クエリを実行する
      refetchQueryKey && refetch({ variables: { input } });
    },
    onError: (error) => setToggleStarError(error),
    // ミューテーションが完了した後の状態を更新するためのコールバック
    update: (cache, { data }) => {
      const { toggleStar } = data;
      cache.writeQuery({
        query: refetchQueryKey,
        data: {
          ...cache.readQuery(refetchQueryKey),
          repository: {
            ...cache.readQuery(refetchQueryKey).repository,
            stargazers: {
              __typename: 'StargazerConnection',
              edge: toggleStar.stargazers.edges.map((edge, index) => {
                  if (index === 0) {
                    return {
                      ...edge,
                      node: {
                        ...edge.node,
                        __typename: 'User',
                        starredAt: toggleStar.stargazers.totalCount > 0 ? 'just now' : null,
                      },
                    };
                  }
                  return edge;
                }),
              totalCount: toggleStar.stargazers.totalCount,
            },
          },
        },
      });
    },
  });
};

// Starを追加または削除するボタンを表示する関数
const ToggleStarButton = ({ repoId, data }) => {
  const [toggleStarsLoading, setToggleStarsLoading] = useState(false);
  const [toggleStarsError, setToggleStarsError] = useState(null);
  const [toggleStar, { data: toggleStarData }] = useToggleStar(repoId, 'REPOSITORY_DATA');

  return (
    <button
      onClick={() => toggleStar({ variables: { input: repoId } })}
      disabled={toggleStarsLoading}
      aria-busy={toggleStarsLoading}
    >
      {toggleStarsLoading ? 'Loading...' : toggleStarData?.toggleStar.stargazers.totalCount > 0 ? 'Unstar' : 'Star'}
    </button>
  );
};

このコードは、Starを追加または削除するボタンを表示し、その操作が完了したらキャッシュを更新する例です。useToggleStar関数は、ミューテーションの状態やエラーを管理し、updateプロパティを使用してキャッシングを最適化します。これにより、ユーザーがStarを追加または削除した後、リポジトリのステータスが即座に反映されることができます。