【GraphQL】Apollo + React 入門チュートリアル

今回はReact +Apolloを使ったミニマルなサンプル (JavaScript & TypeScript) を作りつつ、チュートリアルをやっていきます。私個人の仕事でも遅ればせながら、GraphQL + Apolloの構成を案件で使い始めたので、Apolloの公式ドキュメントを読みながら、一つサンプルを作ってみました。

Apollo React

ApolloMeteorの開発チームによって開発されているGraphQLのライブラリです。そして、 GraphQLFacebook社 により開発されているクエリ (データ取得・問い合わせ) のための 言語仕様 です。何か特定の言語やフレームワーク・ライブラリを指すのではなく、あくまで言語を仕様として定めたものです。 Apollo はその仕様を具象化して、ライブラリとして使えるようにしたプラットフォームです。

このチュートリアルでは Apollo の提供するツールを使って、 サンプルを実装していきます。バニラなJavaScriptおよび TypeScript で実装したものをGithub上にリンクを貼っていますので、よければ参考までにお使いください。

上記サンプルは下記コマンドで動作します。

# Apollo Server側 (Node.jsサーバー)

npm install # or yarn
npm run db:initialize
npm start

# Apollo Client側 (Reactアプリ)
npm install # or yarn
npm start

※ バージョンについて: この記事で使用している Apolloのバージョンは2系 です。

※ クライアント側ではライブラリとして React を使用しています。

もくじ📔

  • このエントリーをはてなブックマークに追加