ReactでGraph QLを使いたい

担当サービスでGraph QLを導入する可能性があるため、React側でこれを使用するために必要なことを調べようと思いました。

とりあえず、候補として、

Apollo Client
Relay

の二つが上がったんですが、前者の方がドキュメントが親切なようなので、こちらをまずターゲットとします。

ただし、Relayの方も調査をしておきたいです。Reactのv18以降、suspenseでの非同期処理が本格的に導入される際、Realyがまず対応してくることと思います。（というか現時点で既にある程度対応しているっぽい？）今後の調査対象とします。

Apollo Client導入

apollo-boostは廃止されたようなので、@apollo/clientを使用します。
ApolloClient公式を参考に進めていきます。

apollo clientを公式の通り導入します。

create-react-app example-apollo
yarn add @apollo/client graphql

clientを作成します。
今回は、githubのGraphQL APIを使用するのでclientはgithubへのURLを使用します。
token情報が必要なので、clientにauthorizationヘッダを追加し、tokenを記載する必要があります。
githubのtokenは予め取得し、.envファイルに記載してあるので環境変数として取得できます。(githubのtokenについては後述)

// index.js

const httpLink = createHttpLink({
  uri: "https://api.github.com/graphql",
});

const authLink = setContext((_, { headers }) => {
  const token = process.env.REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN;
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    },
  };
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
});

clientを作成したら、ApolloProviderに作成したclientを渡し、ApolloProviderを親コンポーネントとします。
子のコンポーネントとして、MainContentを使っていますが、後で作ります。

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

次はqueryを作成します。
検索対象を

githubのリポジトリで
READMEにreactやvueやangularという語が含まれているもの

を検索するようにします。
githubのドキュメントを見ながら、Explorerで以下のように試したクエリを投げてみます。

// index.js

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

export const repositoryQuery = gql`
  {
    search(type: REPOSITORY, query: "react in:readme", last: 20) {
      repositoryCount
      nodes {
        ... on Repository {
          id
          url
          name
          description
          createdAt
        }
      }
    }
  }
`;

これでがクエリの用意ができました。

あとは、useQueryフックに、作成したクエリを渡してやればクエリを投げてくれます。

// mainContent.js

import { useQuery } from "@apollo/client";
import { repositoryQuery } from "./graphQl/query";

const MainContent = () => {
  const { loading, data } = useQuery(repositoryQuery);

  if (loading) return "...";
  return (
    <ul>
      {data.search.nodes.map((r, i) => (
        <li key={i}>
          <a href={r.url}>{r.url}</a>
        </li>
      ))}
    </ul>
  );
};

export default MainContent;

こんな感じでyarn startすると、githubのrepositoryを検索した結果が取得できます。

簡単な構成ですが、これでGraphQLのクエリを使用することができました。

これを少し発展させ、react vue angularそれぞれの語で検索できるようにしたものが↓にあります。
https://github.com/masaka-ghub/react-apollo/tree/exam_apollo

githubのトークン

githubのAPIは使用するためにトークンが必要です。
発行方法は
アカウントアイコン→settings→Developer settings→personal access tokensと進むと、下のような画面が出るのでGenerate new tokenを押します。

あとは名前と、必要なものにチェックをつけて作成してください。(今回はrepo以下とuser以下の項目にチェックをつけましたが、用途に合わせてチェックしてください。)

プロジェクトのルートに.envファイルを作成し、
REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN=<githubにtokenとして表示された文字列>
と記載するとprocess.env.REACT_APP_GITHUB_PERSONAL_ACCESS_TOKENとしてコード内で使用できるようになります。

ReactでGraphQL - Apollo Client編

ReactでGraph QLを使いたい

Apollo Client導入

githubのトークン