|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/hasura-nextjs-hasura-apollo-client-graphql-web/
课程评论：没有评论
本课程《[Hasura基礎編] Nextjs+Hasura+Apollo Clientで学ぶモダンGraphQL Web開発》旨在教授如何使用Next.js作为前端框架，Hasura作为GraphQL后端，并结合Apollo Client进行现代GraphQL Web开发。 **核心学习内容包括：** * **Hasura Cloud：** 理解Hasura Cloud，创建GraphQL服务器，并处理表关系（一对一、一对多、多对多）。 * **Next.js 与 Hasura 集成：** 实现Next.js前端与Hasura GraphQL端点的连接，并进行CRUD操作。 * **Apollo Client：** * 状态管理：利用`makeVar`、`useReactiveVar`以及Apollo Cache（`@client`查询）进行状态管理。 * 缓存更新：掌握`cache.modify`进行手动缓存更新。 * CRUD操作：使用`useQuery`和`useMutation`执行CRUD。 * Fetch Policies：深入理解四种`fetchPolicy`（`cache-first`、`cache-and-network`、`network-only`、`no-cache`）。 * **Next.js 特性：** * Static Site Generation (SSG) 和 Incremental Static Regeneration (ISR)：结合Apollo Client学习`getStaticProps`、`getStaticPaths`在SSG和ISR中的应用。 * 自定义Hooks：实现逻辑与UI分离，以及使用`useCallback`和`memo`进行性能优化。 * **测试：** * 使用`React-testing-library`、`next-page-tester`和`Mock Service Worker (MSW)`进行单元测试和集成测试。 * 通过MSW模拟GraphQL响应。 * 在部署前自动运行测试。 * **GraphQL 类型生成：** 使用GraphQL Codegen自动生成TypeScript数据类型，提高开发效率和类型安全。 **先修知识建议：** 建议学员提前自习Next.js（`getStaticProps`, `getStaticPaths`, ISR）和React Hooks（`useState`, `useEffect`）等基础知识。
本コースでは、フロントエンドに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 CloudUnderstanding of Hasura Cloud and GraphQLTable relationships in Hasura (1:1, 1:N, N:N (中間テーブル))Integration of Nextjs to HasuraApollo ClientApollo client state management by makeVar + useReactiveVarApollo client state management by Apollo cache (query with @client) Apollo client manual cache update (cache.modify)Apollo client + Hasura CRUD operationsuseQuery + useMutation4つのfetchPolicyの理解(cache-first, cache-and-network, network-only, no-cache)NextjsgetStaticProps + Apollo client (SSG + ISR)getStaticPaths + Apollo client (SSG + ISR) [id] pageCustom hookによるLogicとUIの分離useCallback + memoReact-testing-libraryWrite test cases by next-page-tester, react-testing-libraryMocking GraphQL response by MSWAutomatic test run before deployGraphQL typesGraphql codegenによるデータ型の自動生成(Typescript)--収録機材--Microphone: SHURE SM7BMicrophone stand: Blue compass Audio interface: Solid State Logic (SSL 2+)Movie editor: Screen flow 9
