フロントエンドアプリケーションの開発を行う上で避けては通れないデータフェッチの実装。 REST APIを使うか、GraphQLを使うか、クライアントでキャッシュするか、APIレスポンスにどのようにして型を付けるか、状態管理はどうするのかなど、開発者の悩みが尽きないけれども、それに関しての設計を考えたり議論を行うのはフロントエンド開発の楽しいポイントだと僕は思っています。 この記事では、バックエンドにHasura、フロントエンドにNext.jsを使用する場合に僕が最強だと感じたツールの組み合わせ・使い方を紹介します。 モチベーション APIからのレスポンスにはTypeScriptの型が勝手についてきてほしい。asで型アサーションするのはやりたくない。 クライアントでもサーバー(SSR)でもデータフェッチの方法が同じインターフェースで提供されてほしい。 クライアントでAPIレスポンスをキャッシ
![ぼくのかんがえたさいきょうのデータフェッチ 2021Summer🏄♂️【Next.js / Hasura】](https://cdn-ak-scissors.b.st-hatena.com/image/square/d9565b6885fab23c66177c62dcf7283237b82876/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--MDt1PVDA--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E3%252581%2525BC%2525E3%252581%25258F%2525E3%252581%2525AE%2525E3%252581%25258B%2525E3%252582%252593%2525E3%252581%25258C%2525E3%252581%252588%2525E3%252581%25259F%2525E3%252581%252595%2525E3%252581%252584%2525E3%252581%25258D%2525E3%252582%252587%2525E3%252581%252586%2525E3%252581%2525AE%2525E3%252583%252587%2525E3%252583%2525BC%2525E3%252582%2525BF%2525E3%252583%252595%2525E3%252582%2525A7%2525E3%252583%252583%2525E3%252583%252581%2525202021Summer%252520%2525E3%252580%252590Next.js%252520%25252F%252520Hasura%2525E3%252580%252591%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3AEringi_V3%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzA1NmNlNmIwMzQuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)