[Day 26] - Gatsby feat. WordPress

今天我们要与鼎鼎大名的 WordPress 进行串接，将 WordPress 站内的资料藉由 GraphQL 来捞取，并在 Gatsby 专案中，将这些资料做一个完整的呈现，事不宜迟，就让我们马上开始吧！。

什麽是 WordPress ？

WordPress 是一款由 PHP 与 MySQL 为平台的开源 CMS ( Content Management System )，因有丰富的外挂与模版系统，使全世界排名一千万内的网站中，有三成都是使用 WordPress，可谓是最受欢迎的 CMS。

前置作业

在开始之前，我们有几个条件需要先准备好

1. 一个 WordPress 站点
   • 安装好 WPGraphQL 套件
   • 安装 WPGatsby 套件
2. 一个 Gatsby 专案
   • 安装好 gatsby-source-wordpress-experimental 套件
   • gatsby-config.js 中已经设定好 gatsby-source-wordpress-experimental 参数

由於本系列文是针对 Gatsby 为主轴，所以我们不会在 WordPress 着墨於太多，网路上有蛮多相关的教学文章，有兴趣的读者可以先去做基本的了解後，再回来唷！

环境设定

读者们若安装完以下两个套件後，就可以和我们继续往下进行罗！

这次我们会使用 gatsby-source-wordpress-experimental 提供的模板，来快速建置 Gatsby 专案，我们在终端机内输入以下指令

gatsby new wordpress-gatsby https://github.com/TylerBarnes/using-gatsby-source-wordpress-experimental

并在完成安装後直接进到该目录当中，接着我们打开 gatsby-config.js，里面已经有针对一些相依套件做好预设的设定，我们只需要对这个区块内的 url 做调整即可，我们将 url 的 value 调整成我们 WordPress 网站的网址後方加入 /graphql， 假如我们的网站 domain 是 https://google.com ，那我们输入在这边的值就会是 https://google.com/graphql

   {
      resolve: `gatsby-source-wordpress-experimental`,
      options: {
        url:
          process.env.WPGRAPHQL_URL ||
          `https://dev-gatsby-source-wordpress-v4.pantheonsite.io/graphql`,
        verbose: true,
        develop: {
          hardCacheMediaFiles: true,
        },
        debug: {
          graphql: {
            writeQueriesToDisk: true,
          },
        },
        type: {
          Post: {
            limit:
              process.env.NODE_ENV === `development`
                ? // Lets just pull 50 posts in development to make it easy on ourselves.
                  50
                : // and we don't actually need more than 5000 in production for this particular site
                  5000,
          },
        },
      },
    },

调整完成後，我们将开启开发服务器来验证我们是否已经可以成功的要到资料。

从 WordPress 中捞取资料并呈现

打开开发服务器後，我们连到 http://localhost:8000/___graphql 来测试是否能成功捞到资料。

连到 GraphiQL 後，我们在将下方的 Query 贴上

query {
    allWpPost {
        nodes {
            id
            title
            excerpt
            slug
            date(formatString: "MMMM DD, YYYY")
        }
    }
}

若顺利的话，我们可以捞取到 WordPress 中的文章内容，例如下图所示

我们也可以利用以下的查询来捞取文章的列表

{
    allWpPost(sort: { fields: [date] }) {
        nodes {
            title
            excerpt
            slug
        }
    }
}

读者们可以针对不同的参数去捞取看看，若完成以上步骤的读者，接下来，我们要将捞取到的资料呈现在我们 Gatsby 专案中，我们会需要两个基础的页面，一个是文章列表页、一个是内页，并且我们还要到 Gatsby-node 中去使用 CreatePage API 来为我们捞到的资料建立页面，而因为我们使用了 gatsby-source-wordpress-experimental 提供的模板关系，它已经帮我们把所有的事情都已经处理好了！！！

是不是相当的强大，相当的贴心？

各位读者可以试着输入 /blog 来看看文章列表页，应该会如下图一般

而内页的部分，它网址定义的规则是年/月/日/文章标题，样式则会长得像下图这样

可能有些读者会有疑问，我 WordPress 用得好好的，为什麽要多此一举多套上 Gatsby 来显示画面呢？

1. 因为 Gatsby 会建立出静态页面，而非动态的方式，所以在安全性、效能上都有显着的提升
2. 且具有 React 所有优点，如易维护、元件化等族繁不及备载
3. 使用 GraphQL 来查询资料更简单，不需要去记住 WordPress 一堆查询的 Function

笔者之前维护过十几个 WordPress 网站，甚至还为其中几个站做前後端分离 ( 用 WordPress 提供的 REST API 捞取资料，在前端 Vue 框架做呈现 )，实在是非常的旷日费时，并不轻松，但看到 Gatsby 有提供这样的 Solution，开箱即用的专案，真的非常的惊艳，不仅速度上有感的提升，也不用写一堆的 Function 来捞取想要的资料，真的轻松了不少。

参考资料

WordPress Source Plugin Tutorial - Gatsby
gatsby-source-wordpress-experimental - GitHub