これは GLOBIS Advent Calendar 2023 10日目の記事です。 はじめに こんにちは。GLOBIS学び放題でWebエンジニアをしている富山です。 GLOBIS学び放題のWebフロントエンドの構成は、React(TypeScript) / GraphQLで、GraphQLのクライアントライブラリには、Apollo Client + GraphQL Code Generatorを利用しています。 今回は、Apollo Clientのバージョンアップにより、Suspenseが利用可能になったので、本記事では、実際に学び放題のコードベースに適応しようとするとどうなるか検証してみました。 Apollo Client v3.8からSuspense対応された Suspense自体はReact18でリリースされたもので、Reactを利用してる方ならお馴染みの機能ですが、Relayやu
はじめに 普段はスタートアップで建設業界向けのSaaSの開発をしているtaroと申します。 今回はReact18で登場したSuspenseを触っていたら、React Hook Formでフォームの初期値に非同期な値を設定するのが簡単になりそうだなーって思ったので、試してみました。 React Hook Formを使ったことがない方でもきっとわかるような内容になっていると思うので、ぜひぜひ読んでみてくださいー！ この記事はこちらのイベントに参加しています。 前提を揃えるためにReact Hook Formを少し復習 本題に入る前に、React Hook Formについて少し復習して前提を揃えていこうと思います。 （「復習はいらないよー！」って方は、React Hook FormでSuspenseを使うまで飛んでください！） またSuspenseについては、公式ドキュメントや別の記事等をご参考
React v16.6 から利用可能になったReact.lazyならびにSuspenseを早速使用してみました。 この機能の嬉しいところは非同期処理時におけるコンポーネントの扱いが非常に楽になるということです。 レガシーな実装方法 この機能が追加される以前は非同期で処理を行う際にローダーを表示して処理が終了したら結果を画面に表示するといった実装する時に、以下のような方法を採用していました。 処理中かどうか判断するステート isExecuting を用意する。 処理開始時にisExecuting をtrueにする isExecuting がtrueの時に「Please wait...」というテキストを表示 処理完了時に結果を表示 つまり、ステートが変更されたらコンポーネントをレンダリングするという、Reactの仕組みに則って実現させるという方法になります。 コードに起こすと以下のような感じで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
