首先

这篇文章是2018年JAMstack Advent Calendar第17天的文章！大约两年前，我第一次在Qiita上发布了与Gatsby有关的文章。

已经迁移至使用React.js制作的静态网站生成器Gatsby
https://qiita.com/jaxx2104/items/5f28915355a85d36e38a

相较于之前的版本1，现在版本已经升级为2，并且功能也有了巨大的变化。
特别是GraphQL，它也是Gatsby的一个特点，所以我想在这里介绍一下它的说明和一些常用的便捷描述。

在《The Great Gatsby》中，GraphQL 的作用是什么？

角色主要分为两个。

• APIの抽象化と再利用性

 

パフォーマンス最適化

让我们来分别看一下每个。

API的规范化和可重用性

在Gatsby中，我们使用GraphQL处理数据源。

不同于常见的静态网站生成器，Gatsby并不仅限于使用Markdown作为数据源。通过使用名为gatsby-source-xxxxx的插件，可以处理各种类型的数据。

GraphQL插件 | GatsbyJS
https://www.gatsbyjs.org/plugins/?=gatsby-source

例如，可以提到Contentful、WordPress、Medium、S3、Firestore等。同时，由于GraphQL对数据源有作用，所以可以定义自由的接口。在处理外部服务的API时，不需要在React的部分写额外的代码是一个令人高兴的点。

以下是Gatsby能够实现的具体例子。

• 既存の WordPress の入稿画面はそのまま画面を React 化

 

• Medium の複数ブログをまとめフィルターすることでメディアサイトを構築

 

個人で作成した S3 や Firestore を使ってサービスを提供

性能优化

除了数据源外，Gatsby 还能为我们处理性能的繁杂工作。例如，通过使用插件如 gatsby-image 和 gatsby-remark-images，它可以优化图像显示。

在解释之前，如果您能观看以下的演示，会更容易理解。

使用 Gatsby Image
https://using-gatsby-image.gatsbyjs.org/

以下是其功能

• 各デバイスのサイズと画面解像度に最適なイメージサイズを読み込みます

 

• 画像の読み込み中に画像の位置を保持します

 

• 画像全体が読み込まれている間に表示する画像の小さな画像を読み込みます。

 

• レイジーは画像をロードして帯域幅を減らし、初期ロード時間を短縮します

 

ブラウザーがその形式をサポートしている場合、WebPイメージを使用します。

您可以在GraphQL中指定这些功能，而无需进行额外的设置即可使用。

图片加载的优化

真的太简单方便了，真的太棒了 ?

经常使用的方便描述

我将列举一些我个人常用的方便描述，因为已经大致解释了这两个角色。

基本的的像博客的设定

• limit: 記事の最大数を3件とする

 

• filter: 日付が null の記事を除外

 

• sort: 日付を降順でソート

 

• format: 日付を YYYY.MM.DD にフォーマット

 

alias: edges, node を posts, post に変更

{
  allMarkdownRemark(
    limit: 3
    filter: { frontmatter: { date: { ne: null } } }
    sort: { fields: [frontmatter___date], order: DESC }
  ) {
    posts: edges {
      post: node {
        frontmatter {
          title
          date(formatString: "YYYY.MM.DD")
        }
      }
    }
  }
}

只要记住了这些，我认为就可以制作博客了。

选项1: 图像优化

• 表示用に画像を最適化した形式で取得

 

og:image 用にオリジナル画像も取得

{
  allMarkdownRemark(
    limit: 100
  ) {
    posts: edges {
      post: node {
        frontmatter {
            image {
              childImageSharp {
                fluid(maxWidth: 1200) {
                  ...GatsbyImageSharpFluid
                }
                sizes {
                  src
                }
              }
            }
        }
      }
    }
  }
}

因为存在除了 GatsbyImageSharpFluid 之外的其他图片格式，所以请阅读文档并指定您所需的格式。

获取文章页面和相关文章

• 記事の取得

 

上記の記事以外の関連記事3件を表示

{
  post: markdownRemark(frontmatter: { path: { eq: $path } }) {
    frontmatter {
      title
    } 
  }
  related: allMarkdownRemark(
    filter: { frontmatter: { path: { ne: $path } } }
    limit: 3
  ) {
    posts: edges {
      post: node {
        frontmatter {
          title
          image {
            childImageSharp {
              fluid(maxWidth: 300) {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  }
}

除了相关文章外，您还可以快速创建分类列表和标签列表。

请参考官方提供的更详细解释。

GraphQL 参考 | GatsbyJS
https://www.gatsbyjs.org/docs/graphql-reference/

结论是

您对此有何看法呢？我向您介绍了Gatsby的特点之一- GraphQL的功能。即使您以前没有接触过，我也希望您能以此为契机试用一下。