コース紹介

GraphQLは、最新のWebアプリやモバイルアプリでAPIを利用するための新しい方法になりつつあります。

しかし、新しいことを学ぶには常に時間がかかり、労力をかけずに新技術の要点を学ぶのは非常に困難です。

GraphQLの紹介およびGraphQLとフロントエンドスタックとの統合についてのチュートリアルを一つにまとめて、できるだけ短時間でパワフルかつ簡潔なコースを作成しました。

GraphQLの基礎や、最新アプリに適したGraphQLの使い方（リアルタイム機能など）を紹介します。基本を理解したら、自由にお気に入りのライブラリやツールを選んで、ワークフローをカスタマイズできるように、アドバイスは控えめにしています。

主要なトピックと習得知識：

• GraphQLとRESTの比較
• GraphQLのqueries、mutations、subscriptions
• ApolloによるGraphQLクライアントのセットアップ
• GraphQLクエリのReactアプリへの統合
• GraphQLミューテーションをGraphQL変数に統合して、フォーム入力を実行する
• Apollo cacheを使ったGraphQLミューテーション（フォーム入力）の後にローカルステータスを更新する
• スマートなUXを実現するため、GraphQLミューテーションの後に、ローカル環境とUIを最適化して更新する
• サブスクリプションフックによるサブスクリプションの実行
• ミューテーションとサブスクリプションを利用した通知機能付きリアルタイムフィードの構築

このチュートリアルでは何を構築しますか

認証されたGraphQL APIsを使ってリアルタイムtodoアプリを構築します。

これから何を構築するか理解するため、このデプロイされたバージョンのアプリをお試しください：https://learn-hasura-todo-app.netlify.com/

このコースで、Reactのコンセプトについても学ぶことができますか。

いいえ。ここではGraphQL APIとReactアプリの基本的なUIがすでに構築されたシナリオをシミュレーションします。GraphQL APIをReactアプリに統合して、完全に動作するアプリを構築することがこのシナリオの目標です。

ReactのHookを初めて使う方は、公式ドキュメントをご覧になってからこのチュートリアルを受講することをお勧めします。

本チュートリアルの受講に必要なもの

npm/yarnおよびnode 8+の実行環境

本チュートリアルの所要時間

2時間以内

その他のコース

フロントエンド のためのGraphQL： Vue 、 Angular、 Elm、 ReasonReact

モバイル のためのGraphQL： React Native、 iOS、 Android、 Flutter

バックエンド：30分間で、 リアルタイムGraphQLバックエンドをHasuraを使って構築します （フロントエンド、バックエンド、フルスタック開発者に最適なチュートリアル）

本コミュニティの執筆者について

Apoorv Vardhan

Loves to try out and build new things!

Christoph Benjamin Weber

Software developer, interested in frontend technologies.