bestcourses is supported by learners. When you buy through links on our website, we may earn an affiliate commission. Learn more

[Hasura基礎編] Nextjs+Hasura+Apollo Clientで学ぶモダンGraphQL Web開発

Hasura cloud, Nextjs, Apollo Client, Typescript, React-testing-library, Tailwind CSS, MSW, next-page-tester

4.74 / 5.0
1022 students5 hours 5 minutes

Created by Kazu T+, offered on Udemy

bestcourses score™

Student feedback


To make sure that we score courses properly, we pay a lot of attention to the reviews students leave on courses and how many students are taking a course in the first place. This course has a total of 1022 students which left 151 reviews at an average rating of 4.74, which is average.

Course length


We analyze course length to see if courses cover all important aspects of a topic, taking into account how long the course is compared to the category average. This course has a length of 5 hours 5 minutes, which is pretty short. This might not be a bad thing, but we've found that longer courses are often more detailed & comprehensive. The average course length for this entire category is 5 hours 28 minutes.

Overall score


This course currently has a bestcourses score of 6.7/10, which makes it an average course. Overall, there are probably better courses available for this topic on our platform.


本コースでは、フロントエンドにNextjs、バックエンドにHasuraによるGraphQLサーバーを使ったモダンGraphQL Web開発について学習します。

  • Hasura Cloudを使ってGraphQLサーバーを作れるようになる

  • Nextjs + Apollo ClientのフロントエンドとHasura endpointを連携出来るようになる(CRUD操作)

  • NextjsのSSG/ISRとHasuraが連携出来るようになる。

  • Apollo Clientのキャッシュの理解 (4つのfetch policy, cache.modify)

  • Apollo Clientにおける状態管理 (makeVar, @client)

  • Custom Hooks, useCallback, memoによる最適化

  • React-testing-library, Mock service worker, next-page-testerを使ったテスト手法

  • GraphQL codegenによる データ型の自動生成

*Nextjs (getStaticProps, getStaticPaths, ISR)とReact Hooks (useState, useEffect...)の基礎 (別コースや公式Tutorialなど)は事前に簡単な自習 をして頂けると助かります。


Hasura Cloud

Understanding of Hasura Cloud and GraphQL

Table relationships in Hasura (1:1, 1:N, N:N (中間テーブル))

Integration of Nextjs to Hasura

Apollo Client

Apollo client state management by makeVar + useReactiveVar

Apollo client state management by Apollo cache (query with @client)

Apollo client manual cache update (cache.modify)

Apollo client + Hasura CRUD operations

useQuery + useMutation

4つのfetchPolicyの理解(cache-first, cache-and-network, network-only, no-cache)


getStaticProps + Apollo client (SSG + ISR)

getStaticPaths + Apollo client (SSG + ISR) [id] page

Custom hookによるLogicとUIの分離

useCallback + memo


Write test cases by next-page-tester, react-testing-library

Mocking GraphQL response by MSW

Automatic test run before deploy

GraphQL types

Graphql codegenによるデータ型の自動生成(Typescript)


Microphone : SHURE SM7B

Microphone stand : Blue compass

Audio interface : Solid State Logic (SSL 2+)

Movie editor : Screen flow 9

What you will learn

  • Apollo Clientの理解
  • Nextjs + Apollo Client
  • Nextjs + Apollo ClientとHasuraの連携
  • React-testing-libraryによるGraphQLアプリのテスト手法


  • Mac OS(推奨)
  • Nextjs (getStaticProps, getStaticPaths, ISR) と React Hooks (useState, useEffect...)の基礎
Udemy logo
Available on


With almost 200,000 courses and close to 50 million students, Udemy is one of the most visited online learning platforms. Popular topics include software development, the digital economy, but also more traditional topics like cooking and music.

Frequently asked questions

  • Price: $94.99
  • Platform: Udemy
  • Language: Japanese
  • 5 hours 5 minutes
[Hasura基礎編] Nextjs+Hasura+Apollo Clientで学ぶモダンGraphQL Web開発 thumbnail

bestcourses score: 6.7/10

There might be better courses available for this topic.