More than 5 years have passed since last update.

GatsbyJS入門【GraphQL】

Posted at 2020-05-25

GatsbyJSの入門書籍

下記の書籍でGatsbyJSの入門を行いました。

書籍に沿って進めると、下記の流れで進めることができReact初心者でも特に躓くことなく進められます。

しかし、GraphQLの箇所は難易度が高いと感じました。
もし、同じように困難を感じた方が「GatsbyJSやっぱり面倒くさい。。。」とならないように、
公式チュートリアルのGraphQL箇所を一読されることをオススメします。

上記チュートリアルパートは、GatsbyでGraphQLのごくシンプルなクエリを書くパートです。
下記引用にもあるように、GraphQLを使うことでGatsbyではデータ取得の作法を統一できるのですね。

There are many options for loading data into React components.
(Reactコンポーネントにデータをロードするための多くのオプションがあります。)

上記公式チュートリアルにもある通り、GraphQLは必須ではないようです。
createPagesAPIを使用すると、GraphQLをコンポーネントに書くことなくデータを渡せます。

上記チュートリアルでは、gatsby-source-filesystemプラグインを使用して
GatsbyJSプロジェクト内のファイルからファイル情報の一覧をGraphQL使って取得、出力します。

また、GraphQLのクエリを取得するためにGraphiQLを使用します。
GraphiQLの基本の使い方、ショートカットを覚えるとこができます。

紹介書籍を読んだ時は、内容について行けてなかったこともあり、GraphiQLの便利さがイマイチ理解できていなかったのですが、上記チュートリアルをこなすと、GraphiQLの便利さが分かります。

もしかしたら、GatsbyJSでサイトを作る際は下記の流れで作成した方がデータの流れが分かりやすいかもしれません。