Tech

【30分でできるGraphQL入門】Mutationで「いいね」機能を実装！Apollo Client応用ガイド

はじめに

この記事では、前回作成した「GitHubのリポジトリ一覧アプリ」に、「スター（いいね）」機能を追加していきます。

具体的には、GraphQLのMutation（更新処理）を使って、表示された各リポジトリに対して
「⭐をつける」機能を実装します。

前回と同じく、React + TypeScript + Apollo Client + GitHub GraphQL API の構成で、コードの全体像から細かいReactの記法レベルまで、初心者にやさしく解説していきます。

完成イメージ

  • GitHubのユーザー名を入力 → リポジトリ一覧を取得
  • 各リポジトリに「⭐ボタン」が追加される
  • ⭐を押すと、GitHubの該当リポジトリにスターが付く（APIを通じて）

1. 準備｜前回アプリの再利用

本記事は、以下の記事で作成したアプリの続編です。

参考：【30分でできるアプリ】GraphQL × TypeScript × React入門｜作って学ぶAPI連携（コード完全解説付き）

そのため、以下の前提が整っている必要があります：

  • Vite + React + TypeScript プロジェクトが作成済み
  • GitHubのアクセストークン（VITE_GITHUB_TOKEN）が .env に保存済み
  • Apollo Client のセットアップが完了している

ここからは、この状態をベースに進めます。

2. Mutationの定義

まずは、GraphQLのMutationを定義するファイルを用意します。

ファイル：src/graphql/mutations.ts

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

export const ADD_STAR = gql`
  mutation AddStar($repoId: ID!) {
    addStar(input: { starrableId: $repoId }) {
      starrable {
        viewerHasStarred
      }
    }
  }
`;

解説

export const ADD_STAR = gql\…“

GraphQLのMutationを定義しています。
ここでは、「特定のリポジトリにスターを追加する」処理を、ADD_STAR という定数でエクスポートしています。

mutation AddStar($repoId: ID!)

  • mutation は GraphQLにおける「更新操作」のことです。
  • $repoId: ID! は、変数（リポジトリID）を受け取る記述です。
    • $repoId は「このMutation実行時に外から値を渡す変数」
    • ID! は「nullを許容しないID型」という意味です。

addStar(input: { starrableId: $repoId })

GitHubのGraphQL APIでは、リポジトリへのスター追加はこの addStar というMutationで行います。
starrableId にスターを付けたいリポジトリのIDを渡します。

3. スター追加用ボタンの作成

リポジトリ一覧の表示に、スターを付けるボタンを追加します。

ファイル：src/components/StarButton.tsx

import { useMutation } from '@apollo/client';
import { ADD_STAR } from '../graphql/mutations';

type Props = {
  repoId: string;
};

export const StarButton = ({ repoId }: Props) => {
  const [addStar, { loading, error }] = useMutation(ADD_STAR);

  const handleClick = () => {
    addStar({ variables: { repoId } });
  };

  return (
    <div style={{ marginTop: '0.5rem' }}>
      <button onClick={handleClick} disabled={loading}>
        いいね！⭐
      </button>
      {error && <p style={{ color: 'red' }}>エラー: {error.message}</p>}
    </div>
  );
};

解説

useMutation(ADD_STAR)

ReactでGraphQLのMutationを実行するためのフック（関数）です。
これにより、ボタンを押したときに addStar を呼び出すだけでリクエストが送信されます。

  • addStar は実行関数
  • loading は実行中かどうかのフラグ
  • error はエラーが発生した場合の情報

handleClick

ボタンが押されたときに実行される関数です。
addStar({ variables: { repoId } }) によって、先ほど定義した $repoId に値を渡してMutationを実行しています。

JSXのポイント

<button onClick={handleClick} disabled={loading}>
  いいね！⭐
</button>
  • onClick={handleClick}：クリック時にMutation実行
  • disabled={loading}：実行中はボタンを押せないように制御

4. RepoList側にスター機能を追加

リポジトリの一覧に、先ほどの StarButton を組み込みます。

修正ファイル：src/components/RepoList.tsx

import { useQuery } from '@apollo/client';
import { GET_REPOS } from '../graphql/queries';
import { StarButton } from './StarButton';

type Props = {
  username: string;
};

export const RepoList = ({ username }: Props) => {
  const { loading, error, data } = useQuery(GET_REPOS, {
    variables: { login: username },
    skip: !username,
  });

  if (!username) return <p>ユーザー名を入力してください</p>;
  if (loading) return <p>読み込み中...</p>;
  if (error) return <p>エラーが発生しました：{error.message}</p>;

  return (
    <ul>
      {data.user.repositories.nodes.map((repo: any) => (
        <li key={repo.id}>
          <a href={repo.url} target="_blank" rel="noreferrer">
            {repo.name}
          </a>
          <StarButton repoId={repo.id} />
        </li>
      ))}
    </ul>
  );
};

解説

import { StarButton } from './StarButton';

先ほど作成した StarButton を読み込んでいます。

<StarButton repoId={repo.id} />

各リポジトリのIDを StarButton に渡すことで、「このリポジトリにスターをつける」という意図を持たせています。

5. 動作確認

開発サーバーを起動して、以下を確認しましょう。

npm run dev
  1. GitHubユーザー名を入力
  2. リポジトリが表示される
  3. 「いいね！⭐」ボタンが表示される
  4. 押すとGitHubリポジトリにスターが付く

※ うまくいかない場合は、コンソールログやネットワークタブでエラーを確認してください。

まとめ

  • GraphQLの Mutation を使えば、データの更新も簡単にできる
  • useMutation を使えば、ReactアプリでもMutationが簡潔に扱える
  • GitHub APIの認証・構文ルールをしっかり押さえることが大切

関連リンク

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

Categories