iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 20
1
Modern Web

從 0 開始建一個 Static Site Generator系列 第 20

Day 20: 產生 GraphQL schema

前一篇中直接把 schema 跟取得資料的 API 直接寫在 config.js 中,這篇要來實作在 Gatsby 中類似那種 createNode 的 API,不過我實際上 API 是參考了 Gridsome 的,這邊會用到 graphql-compose 這套方便產生 GraphQL schema 的套件:

$ yarn add graphql-compose graphql-compose-json

然後我們來實作 createNodes

import { schemaComposer } from 'graphql-compose'
import { composeWithJson } from 'graphql-compose-json'

async function createNodes(typename, cb) {
  const nodes = []
  let schema

  // 保存資料,同時建立 schema
  await cb((node) => {
    nodes.push(node)
    if (!schema) {
      schema = composeWithJson(typename, node)
    }
  })

  // 增加欄位
  schemaComposer.Query.addFields({
    // 這邊我只有直接加 s 這種蠢蠢的轉換成複數型式的方法…
    [`all${typename}s`]: {
      type: schema.getTypePlural(),
      resolve: () => nodes,
    },
    [typename.toLowerCase()]: {
      type: schema,
      args: {
        id: 'ID!',
      },
      resolve: (id) => nodes.find((x) => x.id === id),
    },
  })
}

最後我們讓 config.js 可以產生自己的 schema

export async function loadSchema() {
  await config.data(createNodes)
  return schemaComposer.buildSchema()
}

最後只要改一下 ApolloServer 的參數傳入 schema 即可:

new ApolloServer({ schema: await loadSchema() })

上面產生的 schema 可以用 graphql 的 printSchema 驗證,下一篇要來改用 GraphQL 查詢資料


上一篇
Day 19: GraphQL
下一篇
Day 21: 用 GraphQL 載入動態頁面的資料
系列文
從 0 開始建一個 Static Site Generator30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言