next.jsとgraphqlについて
kazuhiroIto0127経緯と主旨
next.jsの使い方がある程度わかってきた。
ポートフォリオなどで、ブログや制作物などのコンテンツは、contentfulを使って外部に配置しておいて取得したいと思った。
（ローカルファイルだと、そのプロジェクトが終わると使いまわしが面倒だと思った）
contentfulからのデータ取得は、通常のREST形式もあるが、せっかくの機会なのでgraphqlを使ってみようと思った。
だがgraphql初心者なのであまり使い方がわからない。
graphqlはApolloとかよく聞くけど何をつかって、どうするのがいいのかよくわからない。
色々調べたことをまとめていく。
kazuhiroIto0127graphqlを使うにあたり、ひとまず有名所のApolloを使ってみようと思った。
下記はApollo公式のブログである。
Next.jsのSSR、StaticRendering、ClientRenderingにおけるApolloクライアントの使い方がわかりやすくまとまっていた。
とりあえず下記を参考にすればひとまずは動かせるだろう。
StaticRenderingやSSRは、わりとシンプルに作れそうだが、ClientRenderingは少し工夫が必要な模様。
kazuhiroIto0127GraphQLクライアントって色々あるんだなと知ったのは下記記事を見て思った。
上記を読んで、ポートフォリオ的な静的ページの場合、next.jsでcontentfulからgraphqlを使ってデータを取得するのに利用するクライアントとして、apolloは少し大げさな気がした。
next.jsを作ってるところが出してるswrと、graphql-requestを組み合わせるのが良さそうだが、どうだろうか。
kazuhiroIto0127この記事とかわかりやすい。
swrとgraphql-requestを組み合わせは下記がわかりやすい
kazuhiroIto0127Apolloってそもそも何さ？ということについては下記公式のチュートリアルが良い。
Lift-off 1のbasicsを完了した。
ローカルにて、シンプルなgraphqlサーバーの作成をして、clientからクエリーでデータ取得する方法について学べる。
最初はスキーマ定義から始めるのが良いようだ。
kazuhiroIto0127今一番良くわかっていないのは、apollo等でdataを取得したあと、typescriptによる型？定義をうまく扱えるようにする方法。
codegenとかでスキーマから自動で生成できるとかを見たが、どうするのが一番良いんだろう。
kazuhiroIto0127色々調べた結果、下記のgraphql-codegenでschemaから自動で型を生成するのが主流のようだ。 今回contentfulの型も上記を用いて生成することとした。