使用 GraphQL 搭配 Gatsby 與 Oracle Content Management

簡介

GraphQL 是 API 的查詢語言，也是履行現有資料之查詢的程式實際執行。

本教學課程將說明如何使用 GraphQL 與 Gatsby 搭配 Oracle Content Management 連線。特別是，我們將使用與 Gatsby Source GraphQL Plugin 連線的 GraphQL 查詢必要資料，將焦點放在依最低範例網站上現有的「人員」頁面。其他頁面 (「首頁」和「與我們聯絡」) 目前使用與 Gatsby 來源 OCE Plugin 連線的 REST API。

必要條件

繼續此教學課程之前，建議您先閱讀下列資訊：

若要依照本教學課程，您需要：

我們正在打造什麼

在 Gatsby 中建置的最低網站，您可以從 Oracle Content Management 儲存區域輕鬆擷取映像檔和其他內容。

基本的 Gatsby 最小使用 Oracle Content Management 內容的網站，可觀看我們建置項目的功能，這是我們的教學課程結束狀態：

https://headless.mycontentdemo.com/samples/oce-gatsby-minimal-sample

此自學課程僅著重於此網站的「人員」頁面。

這是此教學課程結尾的人員頁面畫面：

此圖像顯示「Gatsby」最小網站的「與我們聯絡」頁面。

若要繼續，您必須向 Oracle Content Management 進行有效訂閱，並且以「內容管理員」角色登入。

作業 1：瞭解人員頁面分類

可下載的資產套件包含名為 Minimal Main GraphQL 的資產，以及 slug 'minimalmaingraph'。

最小主要 GraphQL 資產包含 PeoplePage 類型的頁面，稱為「人員」。這是其外觀：

此圖像顯示主要 GraphQL 分類標準。

人員資產類型為 PeoplePage，其中包含人員的子類型。這是其外觀：

此圖像顯示「人員」頁面分類。

此為 people 資產的外觀 (請注意「屬性」面板中的所有中繼資料)：

此圖像顯示人員分類。

工作 2：連線 Gatsby 來源 GraphQL Plugin

若要從 Oracle Content Management 查詢這些資產，我們必須在 gatsby-config.js 檔案中設定 Gatsby Source GraphQL Plugin。此外掛程式應該新增至 package.json 檔案的相依性。

以下是 gatsby-config.js 中該配置的程式碼。

    {
          resolve: 'gatsby-source-graphql',
          options: {
            // This type will contain remote schema Query type
            typeName: 'OCM',
            // This is the field under which it's accessible
            fieldName: 'ocm',
            // URL to query from
            url: `${process.env.SERVER_URL}/content/published/api/v1.1/graphql`,
          },
        },

GraphQL API 的端點為與 /content/published/api/v1.1/graphql 串連的伺服器 URL。

請注意，typeName 和 fieldName 會分別用來包含遠端綱要查詢類型及其可存取的欄位。在此處命名並不重要，只要在查詢中是一致的。

工作 3：執行並處理 GraphQL 查詢

以下是 gatsby-node.js 檔案的區段。它會使用 Gatsby 中的 createPage 方法，將具有 slug 'people「 的頁面路由至含元件和相關資訊環境的正確路徑。請注意我們如何在相關資訊環境中傳入頁面資料、投影片和 channelToken。

} else if (page.slug.localeCompare('people') === 0) {
        createPage({
            path: '/people',
            component: peopleTemplate,
            context: {
                page,
                slug: 'people',
                channelToken: process.env.CHANNEL_TOKEN,
            },
        });

遞送至「人員」頁面範本後，會執行下列查詢以取得「人員」頁面的所有資料。存取此頁面的 GraphQL API 需要 slug 和 channelToken。

如需有關如何使用 Oracle Content Management 查詢資料的更多資訊，請參閱文件。

query ($slug: String!, $channelToken: String!) { 
      ocm {
        getPeoplePage(
          slug: $slug
          channelToken: $channelToken
        ) {
          id
          slug
          name
          fields {
            announcement {
              id
              fields {
                type: fieldType
                heading
                body
                actions
                image {
                  ... on OCM_image {
                    id
                    name
                    fields {
                      renditions {
                        file {
                          url
                        }
                      }
                    }
                  }
                }
              }
            }
            people {
              id
              fields {
                fullname
                title
                biodata
                file {
                  metadata {
                    width
                    height
                  }
                }
                renditions {
                  name
                  format
                  file {
                    url
                    metadata {
                      height
                      width
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

請注意頂層查詢中有 ocm，影像上的 typeName 是 OCM_Image。這必須與 gatsby-config.js 中提供之選項的 typeName 和 fieldName 一致。

接著會處理傳回的結果，以建立顯示「人員」頁面的 HTML。若要查看查詢輸出，您可以前往 GraphQL 瀏覽器 (在終端機上呼叫 npm run develop 之後可在 http://localhost:8000/___graphql 找到)。此外，http://your_instance/content/published/api/v1.1/graphql/explorer 也提供 GraphQL IDE。

此圖顯示總管。

結論

在此教學課程中，我們使用 GraphQL 將「人員」頁面新增至依最低樣本網站數，以取得該頁面的資料。從含 Gatsby 之 GraphQL 取得的資料，使用 Gatsby Source GraphQL Plugin 連線至 Oracle Content Management。其他頁面 (「首頁」和「與我們聯絡」) 仍使用與 Gatsby 來源 OCE Plugin 連線的 REST API。Gatsby Source OCE Plugin 和 Gatsby Source GraphQL Plugin 都是從 Oracle Content Management 取得資料的有效方式。

如需 Oracle Content Management 中 GraphQL 的其他資訊，請參閱文件。