Apollo Clientで始めるGraphQLと状態管理

社内勉強会用の資料

Transcript

1.  定期的に二段階認証のバックアップコードの ダウンロードと保存をお願いしています。 @tkc310 投稿日 2022年09月13日 更新日 2022年09月13日 18 views Apollo Clientで始めるGraphQLと状態管理  GraphQLで開発を行っているチームに向けた社内勉強会用の資料です。 コードはボイラープレート化されていますが、GraphQLのメリットや全体像について理解を促進する目的で作成しました。 ・GraphQLの特徴 ・Apollo Client   投稿する ホーム タイムライン トレンド 質問 公式イベント 公式コラム 募集 Organization Qiita Blog  【抽選で20名様にAmazonギフト券10,000円分】Qiitaユーザアンケートご協力のお願い  GraphQLとそのクライアントライブラリ 「Apollo Client」 の話です Topic 💁 GraphQL,apollo,graphql-codegen 0 0    1 / 35  by tkc310 Apollo Clientで始めるGraphQLと状態管理
2.  定期的に二段階認証のバックアップコードの ダウンロードと保存をお願いしています。 @tkc310 投稿日 2022年09月13日 更新日 2022年09月13日 18 views Apollo Clientで始めるGraphQLと状態管理  GraphQLで開発を行っているチームに向けた社内勉強会用の資料です。 コードはボイラープレート化されていますが、GraphQLのメリットや全体像について理解を促進する目的で作成しました。 ・GraphQLの特徴 ・Apollo Client   投稿する ホーム タイムライン トレンド 質問 公式イベント 公式コラム 募集 Organization Qiita Blog  【抽選で20名様にAmazonギフト券10,000円分】Qiitaユーザアンケートご協力のお願い  GraphQLとそのクライアントライブラリ 「Apollo Client」 の話です Topic 💁 GraphQL,apollo,graphql-codegen 0 0    2 / 35  GraphQLとそのクライアントライブラリ 「Apollo Client」 の話です
3.  定期的に二段階認証のバックアップコードの ダウンロードと保存をお願いしています。 @tkc310 投稿日 2022年09月13日 更新日 2022年09月13日 18 views Apollo Clientで始めるGraphQLと状態管理  GraphQLで開発を行っているチームに向けた社内勉強会用の資料です。 コードはボイラープレート化されていますが、GraphQLのメリットや全体像について理解を促進する目的で作成しました。 ・GraphQLの特徴 ・Apollo Client   投稿する ホーム タイムライン トレンド 質問 公式イベント 公式コラム 募集 Organization Qiita Blog  【抽選で20名様にAmazonギフト券10,000円分】Qiitaユーザアンケートご協力のお願い  GraphQLとそのクライアントライブラリ 「Apollo Client」 の話です Topic 💁 GraphQL,apollo,graphql-codegen 0 0    3 / 35  GraphQLで開発を行っているチームに向けた社内勉強会用の資料です。 コードはボイラープレート化されていますが、GraphQLのメリットや全体像について理解を 促進する目的で作成しました。
4.  定期的に二段階認証のバックアップコードの ダウンロードと保存をお願いしています。 @tkc310 投稿日 2022年09月13日 更新日 2022年09月13日 18 views Apollo Clientで始めるGraphQLと状態管理  GraphQLで開発を行っているチームに向けた社内勉強会用の資料です。 コードはボイラープレート化されていますが、GraphQLのメリットや全体像について理解を促進する目的で作成しました。 ・GraphQLの特徴 ・Apollo Client   投稿する ホーム タイムライン トレンド 質問 公式イベント 公式コラム 募集 Organization Qiita Blog  【抽選で20名様にAmazonギフト券10,000円分】Qiitaユーザアンケートご協力のお願い  GraphQLとそのクライアントライブラリ 「Apollo Client」 の話です Topic 💁 GraphQL,apollo,graphql-codegen 0 0    4 / 35  ・GraphQLの特徴 ・Apollo Client ・GraphQL Code Generator ・開発の流れ Topic 💁
5.  定期的に二段階認証のバックアップコードの ダウンロードと保存をお願いしています。 @tkc310 投稿日 2022年09月13日 更新日 2022年09月13日 18 views Apollo Clientで始めるGraphQLと状態管理  GraphQLで開発を行っているチームに向けた社内勉強会用の資料です。 コードはボイラープレート化されていますが、GraphQLのメリットや全体像について理解を促進する目的で作成しました。 ・GraphQLの特徴 ・Apollo Client   投稿する ホーム タイムライン トレンド 質問 公式イベント 公式コラム 募集 Organization Qiita Blog  【抽選で20名様にAmazonギフト券10,000円分】Qiitaユーザアンケートご協力のお願い  GraphQLとそのクライアントライブラリ 「Apollo Client」 の話です Topic 💁 GraphQL,apollo,graphql-codegen 0 0    5 / 35  GraphQLの特徴
6.  定期的に二段階認証のバックアップコードの ダウンロードと保存をお願いしています。 @tkc310 投稿日 2022年09月13日 更新日 2022年09月13日 18 views Apollo Clientで始めるGraphQLと状態管理  GraphQLで開発を行っているチームに向けた社内勉強会用の資料です。 コードはボイラープレート化されていますが、GraphQLのメリットや全体像について理解を促進する目的で作成しました。 ・GraphQLの特徴 ・Apollo Client   投稿する ホーム タイムライン トレンド 質問 公式イベント 公式コラム 募集 Organization Qiita Blog  【抽選で20名様にAmazonギフト券10,000円分】Qiitaユーザアンケートご協力のお願い  GraphQLとそのクライアントライブラリ 「Apollo Client」 の話です Topic 💁 GraphQL,apollo,graphql-codegen 0 0    6 / 35  APIとクライアント間のインターフェースとして利用される GraphQLの特徴 - Schema type Post { id: String! created_at: DateTime! }
7.  定期的に二段階認証のバックアップコードの ダウンロードと保存をお願いしています。 @tkc310 投稿日 2022年09月13日 更新日 2022年09月13日 18 views Apollo Clientで始めるGraphQLと状態管理  GraphQLで開発を行っているチームに向けた社内勉強会用の資料です。 コードはボイラープレート化されていますが、GraphQLのメリットや全体像について理解を促進する目的で作成しました。 ・GraphQLの特徴 ・Apollo Client   投稿する ホーム タイムライン トレンド 質問 公式イベント 公式コラム 募集 Organization Qiita Blog  【抽選で20名様にAmazonギフト券10,000円分】Qiitaユーザアンケートご協力のお願い  GraphQLとそのクライアントライブラリ 「Apollo Client」 の話です Topic 💁 GraphQL,apollo,graphql-codegen 0 0    7 / 35  クライアントからは ・request / responseの型情報 ・データ取得関数の自動生成 として利用される。 GraphQLの特徴 - Schema
8.  定期的に二段階認証のバックアップコードの ダウンロードと保存をお願いしています。 @tkc310 投稿日 2022年09月13日 更新日 2022年09月13日 18 views Apollo Clientで始めるGraphQLと状態管理  GraphQLで開発を行っているチームに向けた社内勉強会用の資料です。 コードはボイラープレート化されていますが、GraphQLのメリットや全体像について理解を促進する目的で作成しました。 ・GraphQLの特徴 ・Apollo Client   投稿する ホーム タイムライン トレンド 質問 公式イベント 公式コラム 募集 Organization Qiita Blog  【抽選で20名様にAmazonギフト券10,000円分】Qiitaユーザアンケートご協力のお願い  GraphQLとそのクライアントライブラリ 「Apollo Client」 の話です Topic 💁 GraphQL,apollo,graphql-codegen 0 0    8 / 35  ・補完が効いて開発効率が上がる ✅ ・型安全になり修正・リファクタ時の負荷が軽減される ✅ e.g. API変更の影響をざっくり知りたい GraphQLの特徴 - Schema $ npm run lint:ts
9.  定期的に二段階認証のバックアップコードの ダウンロードと保存をお願いしています。 @tkc310 投稿日 2022年09月13日 更新日 2022年09月13日 18 views Apollo Clientで始めるGraphQLと状態管理  GraphQLで開発を行っているチームに向けた社内勉強会用の資料です。 コードはボイラープレート化されていますが、GraphQLのメリットや全体像について理解を促進する目的で作成しました。 ・GraphQLの特徴 ・Apollo Client   投稿する ホーム タイムライン トレンド 質問 公式イベント 公式コラム 募集 Organization Qiita Blog  【抽選で20名様にAmazonギフト券10,000円分】Qiitaユーザアンケートご協力のお願い  GraphQLとそのクライアントライブラリ 「Apollo Client」 の話です Topic 💁 GraphQL,apollo,graphql-codegen 0 0    9 / 35  ・クライアントがレスポンスを組み立てる ・基本的にリソース=リゾルバ (エンドポイント単位でのサブリソースの管理が不要) e.g. 記事ページのAPIにコメントを生やしたが、他ページでもコメントを取りたくなった GraphQLの特徴 - RESTとの比較
10.  定期的に二段階認証のバックアップコードの ダウンロードと保存をお願いしています。 @tkc310 投稿日 2022年09月13日 更新日 2022年09月13日 18 views Apollo Clientで始めるGraphQLと状態管理  GraphQLで開発を行っているチームに向けた社内勉強会用の資料です。 コードはボイラープレート化されていますが、GraphQLのメリットや全体像について理解を促進する目的で作成しました。 ・GraphQLの特徴 ・Apollo Client   投稿する ホーム タイムライン トレンド 質問 公式イベント 公式コラム 募集 Organization Qiita Blog  【抽選で20名様にAmazonギフト券10,000円分】Qiitaユーザアンケートご協力のお願い  GraphQLとそのクライアントライブラリ 「Apollo Client」 の話です Topic 💁 GraphQL,apollo,graphql-codegen 0 0    10 / 35  ・クライアントファーストな仕組みと言える ・クライアントに複雑性が移動してきた背景を考えるとGraphQLの登場は自然な文脈 ・学習・環境構築コストが高く、パフォーマンス出しにくいため使い所は見極めたい GraphQLの特徴 - RESTとの比較
11. [BE] テーブル設計 [ALL] ER図とデザイン見てスキーマ相談 [BE] リソースの型とリゾルバー(ロジック)書く [BE] スキーマ自動生成 [FE] オペレーション書く [FE] レスポンス型・hooks自動生成 このチームはBE/FEが別れており、コードファーストのためスキーマを相談するタイミングが見失われがちです。 デザイン・ER図ができたタイミングで、スキーマを相談するタイミングがあるとスムーズに実装を進められます<(__*)> kibelaにドキュメントを作成しています 💁 よく使う用語やライブラリのAPIを記載していますので、困ったときにご覧ください。 ・GraphQLの用語集 ・[FE] ApolloClientの使い方   開発の流れ - 課題 最後に   11 / 35  Apollo Client
12. Takashi Sato @tkc310 普段はDjango x Next.jsを使っています。 休日はGo言語の勉強や趣味のDeFi系のbotを作ったりしています。    ずっと使えるメール アドレスを作りませんか？ ドメインならお名前.com   12 / 35  ・クライアント側のGraphQLライブラリ ・旧facebook社が開発したRelayと2大巨頭 ・後発ながら機能が豊富で利用者が多く、Relayに比べて制約が弱め Why Apollo Client? https://www.apollographql.com Apollo Client
13. コメント この記事にコメントはありません。 投稿する 編集 プレビュー   テキストを入力  画像を選択 0B / 100MB 投稿   13 / 35  コンポーネントを跨いで利用したい状態をグローバルステートと呼び、その管理方法が「状 態管理」と呼ばれている 状態管理で扱うデータの種類は大きく2つ ・API経由データ ・それ以外データ (共通モーダルの表示など) Apollo Client - 状態管理
14. 記事投稿イベント開催中 エンジニア夏休み企画！～自由研究や読書感想文を発表しよう～ 2022/08/15~2022/09/16 イベント詳細を見る Go強化月間～開発する上で知っておくべき知見を共有しよう～ 2022/08/15~2022/09/16 イベント詳細を見る  すべて見る How developers code is here.   14 / 35  Reduxなどを利用してコンポーネントを跨いで利用したいグローバルステートを管理するの がセオリー化している 下記のような課題がある (と感じている) ・ボイラープレートが多くて大変 ・コード量が多くなると職人が必要 Apollo Client - 状態管理
15.  定期的に二段階認証のバックアップコードの ダウンロードと保存をお願いしています。 @tkc310 投稿日 2022年09月13日 更新日 2022年09月13日 18 views Apollo Clientで始めるGraphQLと状態管理  GraphQLで開発を行っているチームに向けた社内勉強会用の資料です。 コードはボイラープレート化されていますが、GraphQLのメリットや全体像について理解を促進する目的で作成しました。 ・GraphQLの特徴 ・Apollo Client   投稿する ホーム タイムライン トレンド 質問 公式イベント 公式コラム 募集 Organization Qiita Blog  【抽選で20名様にAmazonギフト券10,000円分】Qiitaユーザアンケートご協力のお願い  GraphQLとそのクライアントライブラリ 「Apollo Client」 の話です Topic 💁 GraphQL,apollo,graphql-codegen 0 0    15 / 35  useSWR, useQueryといったキャッシュライブラリが流行ってきた 前述の「API経由、それ以外データ」を識別子単位でメモリキャッシュしてくれる機能を持っ ている Apollo Client - 状態管理
16.  定期的に二段階認証のバックアップコードの ダウンロードと保存をお願いしています。 @tkc310 投稿日 2022年09月13日 更新日 2022年09月13日 18 views Apollo Clientで始めるGraphQLと状態管理  GraphQLで開発を行っているチームに向けた社内勉強会用の資料です。 コードはボイラープレート化されていますが、GraphQLのメリットや全体像について理解を促進する目的で作成しました。 ・GraphQLの特徴 ・Apollo Client   投稿する ホーム タイムライン トレンド 質問 公式イベント 公式コラム 募集 Organization Qiita Blog  【抽選で20名様にAmazonギフト券10,000円分】Qiitaユーザアンケートご協力のお願い  GraphQLとそのクライアントライブラリ 「Apollo Client」 の話です Topic 💁 GraphQL,apollo,graphql-codegen 0 0    16 / 35  apolloもキャッシュ機構を持っていて、更にオブジェクトごとに正規化してくれる機能がつい ている Apollo Client - 状態管理 // __typename x idを識別子としてユニーク性を担保 { __typename: 'Post', id: 'uuid-1', name: 'something' }, { __typename: 'Post', id: 'uuid-2', name: 'anything' }
17.  定期的に二段階認証のバックアップコードの ダウンロードと保存をお願いしています。 @tkc310 投稿日 2022年09月13日 更新日 2022年09月13日 18 views Apollo Clientで始めるGraphQLと状態管理  GraphQLで開発を行っているチームに向けた社内勉強会用の資料です。 コードはボイラープレート化されていますが、GraphQLのメリットや全体像について理解を促進する目的で作成しました。 ・GraphQLの特徴 ・Apollo Client   投稿する ホーム タイムライン トレンド 質問 公式イベント 公式コラム 募集 Organization Qiita Blog  【抽選で20名様にAmazonギフト券10,000円分】Qiitaユーザアンケートご協力のお願い  GraphQLとそのクライアントライブラリ 「Apollo Client」 の話です Topic 💁 GraphQL,apollo,graphql-codegen 0 0    17 / 35  下記のような挙動が可能 ・ミューテーションで記事を更新する ・記事一覧のキャッシュが更新される ・記事一覧の表示が更新される -> API経由データの更新時にグローバルステートの更新が不要になる 👏 Apollo Client - 状態管理
18.  定期的に二段階認証のバックアップコードの ダウンロードと保存をお願いしています。 @tkc310 投稿日 2022年09月13日 更新日 2022年09月13日 18 views Apollo Clientで始めるGraphQLと状態管理  GraphQLで開発を行っているチームに向けた社内勉強会用の資料です。 コードはボイラープレート化されていますが、GraphQLのメリットや全体像について理解を促進する目的で作成しました。 ・GraphQLの特徴 ・Apollo Client   投稿する ホーム タイムライン トレンド 質問 公式イベント 公式コラム 募集 Organization Qiita Blog  【抽選で20名様にAmazonギフト券10,000円分】Qiitaユーザアンケートご協力のお願い  GraphQLとそのクライアントライブラリ 「Apollo Client」 の話です Topic 💁 GraphQL,apollo,graphql-codegen 0 0    18 / 35  それ以外データは「Reactive variables」という機能を利用して、従来通り自分で変更します。 Apollo Client - 状態管理
19.  定期的に二段階認証のバックアップコードの ダウンロードと保存をお願いしています。 @tkc310 投稿日 2022年09月13日 更新日 2022年09月13日 18 views Apollo Clientで始めるGraphQLと状態管理  GraphQLで開発を行っているチームに向けた社内勉強会用の資料です。 コードはボイラープレート化されていますが、GraphQLのメリットや全体像について理解を促進する目的で作成しました。 ・GraphQLの特徴 ・Apollo Client   投稿する ホーム タイムライン トレンド 質問 公式イベント 公式コラム 募集 Organization Qiita Blog  【抽選で20名様にAmazonギフト券10,000円分】Qiitaユーザアンケートご協力のお願い  GraphQLとそのクライアントライブラリ 「Apollo Client」 の話です Topic 💁 GraphQL,apollo,graphql-codegen 0 0    19 / 35  Apollo Client - 状態管理 // store.js const flagVar = makeVar(false); // component.jsx const Component = () => { const flag = useReactiveVar(flagVar); // reactiveに変更を検知 return <div onClick={() => flagVar(true)}>{flag}</div>; }
20.  定期的に二段階認証のバックアップコードの ダウンロードと保存をお願いしています。 @tkc310 投稿日 2022年09月13日 更新日 2022年09月13日 18 views Apollo Clientで始めるGraphQLと状態管理  GraphQLで開発を行っているチームに向けた社内勉強会用の資料です。 コードはボイラープレート化されていますが、GraphQLのメリットや全体像について理解を促進する目的で作成しました。 ・GraphQLの特徴 ・Apollo Client   投稿する ホーム タイムライン トレンド 質問 公式イベント 公式コラム 募集 Organization Qiita Blog  【抽選で20名様にAmazonギフト券10,000円分】Qiitaユーザアンケートご協力のお願い  GraphQLとそのクライアントライブラリ 「Apollo Client」 の話です Topic 💁 GraphQL,apollo,graphql-codegen 0 0    20 / 35  GraphQL Code Generator
21.  定期的に二段階認証のバックアップコードの ダウンロードと保存をお願いしています。 @tkc310 投稿日 2022年09月13日 更新日 2022年09月13日 18 views Apollo Clientで始めるGraphQLと状態管理  GraphQLで開発を行っているチームに向けた社内勉強会用の資料です。 コードはボイラープレート化されていますが、GraphQLのメリットや全体像について理解を促進する目的で作成しました。 ・GraphQLの特徴 ・Apollo Client   投稿する ホーム タイムライン トレンド 質問 公式イベント 公式コラム 募集 Organization Qiita Blog  【抽選で20名様にAmazonギフト券10,000円分】Qiitaユーザアンケートご協力のお願い  GraphQLとそのクライアントライブラリ 「Apollo Client」 の話です Topic 💁 GraphQL,apollo,graphql-codegen 0 0    21 / 35  下記を自動生成してくれるツール ・APIのレスポンス型 ・データ取得のhooks typescript-react-apollo – GraphQL Code Generator https://www.the-guild.dev GraphQL Code Generator
22.  定期的に二段階認証のバックアップコードの ダウンロードと保存をお願いしています。 @tkc310 投稿日 2022年09月13日 更新日 2022年09月13日 18 views Apollo Clientで始めるGraphQLと状態管理  GraphQLで開発を行っているチームに向けた社内勉強会用の資料です。 コードはボイラープレート化されていますが、GraphQLのメリットや全体像について理解を促進する目的で作成しました。 ・GraphQLの特徴 ・Apollo Client   投稿する ホーム タイムライン トレンド 質問 公式イベント 公式コラム 募集 Organization Qiita Blog  【抽選で20名様にAmazonギフト券10,000円分】Qiitaユーザアンケートご協力のお願い  GraphQLとそのクライアントライブラリ 「Apollo Client」 の話です Topic 💁 GraphQL,apollo,graphql-codegen 0 0    22 / 35  このとき自動生成されるコードは下記を参照している ・Schema ・オペレーションコード (クライアントからのリクエスト) GraphQL Code Generator
23.  定期的に二段階認証のバックアップコードの ダウンロードと保存をお願いしています。 @tkc310 投稿日 2022年09月13日 更新日 2022年09月13日 18 views Apollo Clientで始めるGraphQLと状態管理  GraphQLで開発を行っているチームに向けた社内勉強会用の資料です。 コードはボイラープレート化されていますが、GraphQLのメリットや全体像について理解を促進する目的で作成しました。 ・GraphQLの特徴 ・Apollo Client   投稿する ホーム タイムライン トレンド 質問 公式イベント 公式コラム 募集 Organization Qiita Blog  【抽選で20名様にAmazonギフト券10,000円分】Qiitaユーザアンケートご協力のお願い  GraphQLとそのクライアントライブラリ 「Apollo Client」 の話です Topic 💁 GraphQL,apollo,graphql-codegen 0 0    23 / 35  Schema GraphQL Code Generator - query(参照) // ルート型 type Query { post: Post // フィールド(RESTのendpointに相当) } // オブジェクト型 type Post { id: String! title: String }
24.  定期的に二段階認証のバックアップコードの ダウンロードと保存をお願いしています。 @tkc310 投稿日 2022年09月13日 更新日 2022年09月13日 18 views Apollo Clientで始めるGraphQLと状態管理  GraphQLで開発を行っているチームに向けた社内勉強会用の資料です。 コードはボイラープレート化されていますが、GraphQLのメリットや全体像について理解を促進する目的で作成しました。 ・GraphQLの特徴 ・Apollo Client   投稿する ホーム タイムライン トレンド 質問 公式イベント 公式コラム 募集 Organization Qiita Blog  【抽選で20名様にAmazonギフト券10,000円分】Qiitaユーザアンケートご協力のお願い  GraphQLとそのクライアントライブラリ 「Apollo Client」 の話です Topic 💁 GraphQL,apollo,graphql-codegen 0 0    24 / 35  オペレーションコード GraphQL Code Generator - query(参照) query PostPage { // オペレーションタイプ オペレーションネーム post { // フィールド id title } }
25.  定期的に二段階認証のバックアップコードの ダウンロードと保存をお願いしています。 @tkc310 投稿日 2022年09月13日 更新日 2022年09月13日 18 views Apollo Clientで始めるGraphQLと状態管理  GraphQLで開発を行っているチームに向けた社内勉強会用の資料です。 コードはボイラープレート化されていますが、GraphQLのメリットや全体像について理解を促進する目的で作成しました。 ・GraphQLの特徴 ・Apollo Client   投稿する ホーム タイムライン トレンド 質問 公式イベント 公式コラム 募集 Organization Qiita Blog  【抽選で20名様にAmazonギフト券10,000円分】Qiitaユーザアンケートご協力のお願い  GraphQLとそのクライアントライブラリ 「Apollo Client」 の話です Topic 💁 GraphQL,apollo,graphql-codegen 0 0    25 / 35  生成されるコード (抜粋) GraphQL Code Generator - query(参照) type PostPageQuery = { // レスポンス型 __typename: 'Post'; id: string; title: string | null | undefined; }; const usePostPageQuery = useQuery(...); // hooks
26.  定期的に二段階認証のバックアップコードの ダウンロードと保存をお願いしています。 @tkc310 投稿日 2022年09月13日 更新日 2022年09月13日 18 views Apollo Clientで始めるGraphQLと状態管理  GraphQLで開発を行っているチームに向けた社内勉強会用の資料です。 コードはボイラープレート化されていますが、GraphQLのメリットや全体像について理解を促進する目的で作成しました。 ・GraphQLの特徴 ・Apollo Client   投稿する ホーム タイムライン トレンド 質問 公式イベント 公式コラム 募集 Organization Qiita Blog  【抽選で20名様にAmazonギフト券10,000円分】Qiitaユーザアンケートご協力のお願い  GraphQLとそのクライアントライブラリ 「Apollo Client」 の話です Topic 💁 GraphQL,apollo,graphql-codegen 0 0    26 / 35  hooksの使い方 GraphQL Code Generator - query(参照) const Component = () => { const { data, loading, error } = usePostPageQuery(); if (error) return throw error; // エラー if (loading) return <div>Loading</div>; // ローディング中 return <div>{`${data.post.id}: ${data.post?.title}`}</div>; };
27.  定期的に二段階認証のバックアップコードの ダウンロードと保存をお願いしています。 @tkc310 投稿日 2022年09月13日 更新日 2022年09月13日 18 views Apollo Clientで始めるGraphQLと状態管理  GraphQLで開発を行っているチームに向けた社内勉強会用の資料です。 コードはボイラープレート化されていますが、GraphQLのメリットや全体像について理解を促進する目的で作成しました。 ・GraphQLの特徴 ・Apollo Client   投稿する ホーム タイムライン トレンド 質問 公式イベント 公式コラム 募集 Organization Qiita Blog  【抽選で20名様にAmazonギフト券10,000円分】Qiitaユーザアンケートご協力のお願い  GraphQLとそのクライアントライブラリ 「Apollo Client」 の話です Topic 💁 GraphQL,apollo,graphql-codegen 0 0    27 / 35  Schema GraphQL Code Generator - mutation(更新) type Mutation { update_post(input: UpdatePostInput!): UpdatePostMutation! } type UpdatePostInput { id: String! title: String! } // パラメータ type UpdatePostMutation { post: Post } // レスポンス
28.  定期的に二段階認証のバックアップコードの ダウンロードと保存をお願いしています。 @tkc310 投稿日 2022年09月13日 更新日 2022年09月13日 18 views Apollo Clientで始めるGraphQLと状態管理  GraphQLで開発を行っているチームに向けた社内勉強会用の資料です。 コードはボイラープレート化されていますが、GraphQLのメリットや全体像について理解を促進する目的で作成しました。 ・GraphQLの特徴 ・Apollo Client   投稿する ホーム タイムライン トレンド 質問 公式イベント 公式コラム 募集 Organization Qiita Blog  【抽選で20名様にAmazonギフト券10,000円分】Qiitaユーザアンケートご協力のお願い  GraphQLとそのクライアントライブラリ 「Apollo Client」 の話です Topic 💁 GraphQL,apollo,graphql-codegen 0 0    28 / 35  オペレーションコード GraphQL Code Generator - mutation(更新) mutation PostPageUpdate($input: UpdatePostInput!) { update_post(input: $input) { id // ここからレスポンス title } }
29.  定期的に二段階認証のバックアップコードの ダウンロードと保存をお願いしています。 @tkc310 投稿日 2022年09月13日 更新日 2022年09月13日 18 views Apollo Clientで始めるGraphQLと状態管理  GraphQLで開発を行っているチームに向けた社内勉強会用の資料です。 コードはボイラープレート化されていますが、GraphQLのメリットや全体像について理解を促進する目的で作成しました。 ・GraphQLの特徴 ・Apollo Client   投稿する ホーム タイムライン トレンド 質問 公式イベント 公式コラム 募集 Organization Qiita Blog  【抽選で20名様にAmazonギフト券10,000円分】Qiitaユーザアンケートご協力のお願い  GraphQLとそのクライアントライブラリ 「Apollo Client」 の話です Topic 💁 GraphQL,apollo,graphql-codegen 0 0    29 / 35  生成されるコード (抜粋) GraphQL Code Generator - mutation(更新) type PostPageUpdateMutation = { // レスポンス型 __typename: 'PostPageUpdateMutation'; post: Post; }; const usePostPageUpdateMutatiion = useMutation(...); // hooks
30.  定期的に二段階認証のバックアップコードの ダウンロードと保存をお願いしています。 @tkc310 投稿日 2022年09月13日 更新日 2022年09月13日 18 views Apollo Clientで始めるGraphQLと状態管理  GraphQLで開発を行っているチームに向けた社内勉強会用の資料です。 コードはボイラープレート化されていますが、GraphQLのメリットや全体像について理解を促進する目的で作成しました。 ・GraphQLの特徴 ・Apollo Client   投稿する ホーム タイムライン トレンド 質問 公式イベント 公式コラム 募集 Organization Qiita Blog  【抽選で20名様にAmazonギフト券10,000円分】Qiitaユーザアンケートご協力のお願い  GraphQLとそのクライアントライブラリ 「Apollo Client」 の話です Topic 💁 GraphQL,apollo,graphql-codegen 0 0    30 / 35  hooksの使い方 GraphQL Code Generator - mutation(更新) const Component = () => { const [mutate] = usePostPageUpdateMutatiion(); // 関数取得 const handleUpdate = async () => { const { error } = await mutate(); if (error) return throw error; // エラー }; return <button onClick={handleUpdate}></button>; };
31.  定期的に二段階認証のバックアップコードの ダウンロードと保存をお願いしています。 @tkc310 投稿日 2022年09月13日 更新日 2022年09月13日 18 views Apollo Clientで始めるGraphQLと状態管理  GraphQLで開発を行っているチームに向けた社内勉強会用の資料です。 コードはボイラープレート化されていますが、GraphQLのメリットや全体像について理解を促進する目的で作成しました。 ・GraphQLの特徴 ・Apollo Client   投稿する ホーム タイムライン トレンド 質問 公式イベント 公式コラム 募集 Organization Qiita Blog  【抽選で20名様にAmazonギフト券10,000円分】Qiitaユーザアンケートご協力のお願い  GraphQLとそのクライアントライブラリ 「Apollo Client」 の話です Topic 💁 GraphQL,apollo,graphql-codegen 0 0    31 / 35  開発の流れ
32.  定期的に二段階認証のバックアップコードの ダウンロードと保存をお願いしています。 @tkc310 投稿日 2022年09月13日 更新日 2022年09月13日 18 views Apollo Clientで始めるGraphQLと状態管理  GraphQLで開発を行っているチームに向けた社内勉強会用の資料です。 コードはボイラープレート化されていますが、GraphQLのメリットや全体像について理解を促進する目的で作成しました。 ・GraphQLの特徴 ・Apollo Client   投稿する ホーム タイムライン トレンド 質問 公式イベント 公式コラム 募集 Organization Qiita Blog  【抽選で20名様にAmazonギフト券10,000円分】Qiitaユーザアンケートご協力のお願い  GraphQLとそのクライアントライブラリ 「Apollo Client」 の話です Topic 💁 GraphQL,apollo,graphql-codegen 0 0    32 / 35  GraphQLでの開発方法は主に2種類 ・Code First 型・リゾルバーからスキーマ生成 (我々はこちら) ・Schema First スキーマからコード生成 (gqlgenなど) 開発の流れ
33.  定期的に二段階認証のバックアップコードの ダウンロードと保存をお願いしています。 @tkc310 投稿日 2022年09月13日 更新日 2022年09月13日 18 views Apollo Clientで始めるGraphQLと状態管理  GraphQLで開発を行っているチームに向けた社内勉強会用の資料です。 コードはボイラープレート化されていますが、GraphQLのメリットや全体像について理解を促進する目的で作成しました。 ・GraphQLの特徴 ・Apollo Client   投稿する ホーム タイムライン トレンド 質問 公式イベント 公式コラム 募集 Organization Qiita Blog  【抽選で20名様にAmazonギフト券10,000円分】Qiitaユーザアンケートご協力のお願い  GraphQLとそのクライアントライブラリ 「Apollo Client」 の話です Topic 💁 GraphQL,apollo,graphql-codegen 0 0    33 / 35  [BE] テーブル設計 [ALL] ER図とデザイン見てスキーマ相談 [BE] リソースの型とリゾルバー(ロジック)書く [BE] スキーマ自動生成 [FE] オペレーション書く [FE] レスポンス型・hooks自動生成 開発の流れ
34.  定期的に二段階認証のバックアップコードの ダウンロードと保存をお願いしています。 @tkc310 投稿日 2022年09月13日 更新日 2022年09月13日 18 views Apollo Clientで始めるGraphQLと状態管理  GraphQLで開発を行っているチームに向けた社内勉強会用の資料です。 コードはボイラープレート化されていますが、GraphQLのメリットや全体像について理解を促進する目的で作成しました。 ・GraphQLの特徴 ・Apollo Client   投稿する ホーム タイムライン トレンド 質問 公式イベント 公式コラム 募集 Organization Qiita Blog  【抽選で20名様にAmazonギフト券10,000円分】Qiitaユーザアンケートご協力のお願い  GraphQLとそのクライアントライブラリ 「Apollo Client」 の話です Topic 💁 GraphQL,apollo,graphql-codegen 0 0    34 / 35  このチームはBE/FEが別れており、コードファーストのためスキーマを相談するタイミングが 見失われがちです。 デザイン・ER図ができたタイミングで、スキーマを相談するタイミングがあるとスムーズに 実装を進められます<(__*)> 開発の流れ - 課題
35.  定期的に二段階認証のバックアップコードの ダウンロードと保存をお願いしています。 @tkc310 投稿日 2022年09月13日 更新日 2022年09月13日 18 views Apollo Clientで始めるGraphQLと状態管理  GraphQLで開発を行っているチームに向けた社内勉強会用の資料です。 コードはボイラープレート化されていますが、GraphQLのメリットや全体像について理解を促進する目的で作成しました。 ・GraphQLの特徴 ・Apollo Client   投稿する ホーム タイムライン トレンド 質問 公式イベント 公式コラム 募集 Organization Qiita Blog  【抽選で20名様にAmazonギフト券10,000円分】Qiitaユーザアンケートご協力のお願い  GraphQLとそのクライアントライブラリ 「Apollo Client」 の話です Topic 💁 GraphQL,apollo,graphql-codegen 0 0    35 / 35  kibelaにドキュメントを作成しています 💁 よく使う用語やライブラリのAPIを記載していますので、困ったときにご覧ください。 ・GraphQLの用語集 ・[FE] ApolloClientの使い方 最後に