我们的系统架构很单纯，分为托管在 Vercel 上的 Next.js 前端，以及托管在 BlueHost 上的 WordPress 後端 CMS。

而前後端之间要沟通，最常见的做法就是後端开 API 让前端去呼叫，前端透过 API 抓取後端 CMS 上的文章资料，来呈现在前端画面上。

那麽 WordPress 要怎麽开 API 呢？现在网路世界里最普遍的 API 格式叫做 RESTful API，WordPress 内建就有 RESTful API 可以直接呼叫，来取得各种资料。但在这系列里，我们会用一套更新颖的 API 格式，叫做 GraphQL。

GraphQL，由 Facebook 开发的更有弹性的 API 格式

GraphQL 是一套 API 格式，由 Facebook 在 2015 年开源出来让大家可以使用。GraphQL 跟 RESTful API 一样是基於 HTTP request 来做资料交换，但在後端开发和前端串接上都有优於 RESTful 的地方。

如同上图 GraphQL 官网所描述的架构一样，左边第一区块「Describe your data」描述的是後端建立 API 的方式。後端不再需要针对每个使用情境独立开设 API endpoint 与撰写逻辑，而仅需要安装 GraphQL server，定义好一个 schema.json 档案，描述资料库的型别、及各型别之间如何连结，That's it！GraphQL API 就开好了。虽然仅有一个 endpoint，但支援了无数种呼叫方式，取代了过往几十、几百条的 RESTful API，大幅减轻後端开发 loading。

一样是上图的中间和左边区块，则描述了前端如何使用 GraphQL API。前端在 query 的时候都是针对那唯一的 endpoint 发送 POST request，但是参数里面会携带如同中间图片格式的 query string，代表了这次 API call 的意图，跟 API 讲说前端我现在需要哪些栏位的资料，API 便会回传对应格式的 JSON response，包含了不多也不少、刚刚好的资料。

这对前端来说有几个意义：

1. 前端控制权变大：如果需求调整的，某一个页面需要多显示一个栏位，传统 RESTful API 模式的话，需要拜托後端在某只 API 多回传一个栏位的资料，并且要沟通好这个新栏位回传值的各种 case 和型别，前端才有办法串接，来回沟通费时费力。而 GraphQL 则超简单，前端在 query string 里多送一个栏位给 API 多要资料就好，後端完全不用调整。并且也由於 GraphQL 是强型别语言，不用担心这个栏位会不会有奇怪回传值。
2. 资料取得更精准：传统 RESTful API 可能一个 API 会用在多个页面、甚至多个应用，所以这只 API 资料就会很多，但不是每个页面都会用到这麽完整的资料，而多余的资料会增加延迟和频宽消耗。GraphQL 则更弹性，每个用到 API 的页面都可以刚好只取用需要的资料，一点也不浪费。
3. 即时更新的 API 文件：因为後端开 API 时有一份 schema.json 档案，通常会搭配 GraphiQL 等工具，自动产生最新的 API 文件和互动式开发环境，这在 RESTful API 是要额外花心力去导入了，而 GraphQL 生态系则天生就帮你装好了，提高了开发者体验。

所以我们在这系列文章会采用 GraphQL 作为 API 格式。接下来让我们在 WordPress 启用 GraphQL。

安装 WPGraphQL plugin，启用 GraphQL

WordPress 内建没有支援 GraphQL API，需要装 plugin，最热门的是 WPGraphQL 这套。让我们把它装起来吧！

在 WordPress 安装 plugin 有两种方法，热门的 plugin 通常是在 plugin market 页面搜寻，点击安装按钮装起来，比较冷门的就要上 Github 之类的网站找到 zip 档，上传到 WordPress。

这里 WPGraphQL 很热门，因此我们直接在 plugin market 上搜寻，并点击「Install now」按钮把它装起来。按下去後这个画面不要马上关掉，等他安装完後，原本按钮会变成「Activate」，要再点一下 Activate 把它启用，才会生效

启用完後，画面最上面会多一个 GraphiQL IDE 按钮，有看到的话就算安装成功了！可以点进去玩一下。点进去後画面如下：

我们不需要做任何设定，WPGraphQL 自动就会知道 WordPress 会有哪些型别，自动建好所有 Schema，画面左边 Explorer 就列出了所有我们能用的 Schema，代表了所有能 query 的资料。系列文章後面我们还会讲要如何增加型别做客制化，这边基本的就很够用了。

GraphiQL IDE 是一个互动式开发工具，在这边浏览到你需要的型别和栏位後，可以直接在需要的栏位打勾，中间就会自动产生出对应的 query string，後续就可以将此 query string 贴到 Next.js 里面使用。这边我们先在 GraphiQL IDE 操作看看就好。

最常用的操作就是取得文章列表，於是我们在左边 Explorer 找到 posts 打勾他，并且把它展开来，继续展开 nodes 层，再继续往下把想看的栏位打勾，以这张图的话我打勾了 slug、title、uri、id、date 栏位，完成以後按上面长得像播放键的按钮，就会根据这个 query string 实际抓资料出来，右边就能看到 response 的 JSON，就能确实看到我撰写的文章的对应栏位

恭喜你学会如何在 WordPress 上操作 GraphQL 了！下一篇文章我们接着来用 Next.js 串接 GraphQL API！

参考资料：

• https://graphql.org/
• https://ithelp.ithome.com.tw/articles/10200678
• https://www.wpgraphql.com/