GraphQL フルスタックWeb開発入門 (Django + React/Apollo Client)

Netflix, Facebook, GitHubが採用するGraphQLのAPI技術を学びます。Graphene Django, React Hooks + Apollo Client 3.0

4.50 (109 reviews)
Udemy
platform
日本語
language
Network & Security
category
instructor
1,247
students
5.5 hours
content
Mar 2024
last update
$59.99
regular price

What you will learn

GraphQLのメリット

GitHub API Ver4 (Relay準拠)の理解

GraphQLサーバー実装(graphene-django)

GraphQLクライアント実装(React Hooks + Apollo Client 3.0)

JWT認証

Description

本コースでは、GraphQLの技術についてDjango(graphene-django)によるサーバー実装と、React Hooks/Apollo Clientによるフロントエンド実装について学んでいきます。セクション2でGraphQLの基礎を学び、セクション3、4で実践編としてオリジナル従業員管理システムを作成しながらGraphQLのサーバーサイドとクライアントの連携も含めて学習していきます。


⭐️学習ポイント

Section 2 :  基礎

  • GraphQL理論

  • GitHub GraphQL API の ドキュメント理解とハンズオン

     query, mutation, フィルター、フラグメント、変数、Node, Edge, Connection, Relay Server Specification, Cursor based pagination


Section 3:  Djangoを使ったGraphQLサーバーサイド実装

  • DjangoでGraphQLサーバー実装(Schema)

  • 従業員管理システムのハンズオン (CRUD, フィルター、Pagination)

  • JWT認証の実装


Section 4: React Hooks/Apollo Client を使ったフロントエンド実装

  • React Hooks + Apollo Client 3.0

  • サーバーサイドとの連携

  • useQuery, useLazyQuery, useMutationの使い方

  • useContext + useStateによるグローバル状態管理


Content

はじめに

はじめに
コースで必要なツールインストール

Graph QL入門 (GitHub API)

GraphQLとRelay Server Specification
Query : GitHub API
Node, Edges, Connection : GitHub API
Mutation : GitHub API

[実践前半] Graphene-djangoサーバー実装

GitHub Link
Django Project 作成
Models
Query Schema
Mutation Schema
GraphQL Views
GraphiQLで動作確認(Department)
GraphiQLで動作確認(Employee)

[実践後半] React + Apollo Client フロントエンド

GitHub Link
React Project 作成
useMutation + JWT
SignOut
useQuery (Employees)
useMutation (Create + Update employee)
useMutation (Delete employee)
useLazyQuery (Single Query)
useQuery (Departments)
Filtering
Pagination

Screenshots

GraphQL フルスタックWeb開発入門 (Django + React/Apollo Client) - Screenshot_01GraphQL フルスタックWeb開発入門 (Django + React/Apollo Client) - Screenshot_02GraphQL フルスタックWeb開発入門 (Django + React/Apollo Client) - Screenshot_03GraphQL フルスタックWeb開発入門 (Django + React/Apollo Client) - Screenshot_04

Reviews

下田
October 13, 2023
一部内容が古い点もあったが補足はされていたり、全体的に説明がかなり分かりやすくて良かったです。 ハンズオンで作成する成果物の内容もとても実用的で良いと感じました。 ただ、全体的にIDEの文字サイズが小さい点や音質が悪い点は今後改善していただけると、より良いかと感じました。

Charts

Price

GraphQL フルスタックWeb開発入門 (Django + React/Apollo Client) - Price chart

Rating

GraphQL フルスタックWeb開発入門 (Django + React/Apollo Client) - Ratings chart

Enrollment distribution

GraphQL フルスタックWeb開発入門 (Django + React/Apollo Client) - Distribution chart
3614492
udemy ID
11/4/2020
course created date
11/15/2020
course indexed date
Bot
course submited by