Skip to main content

03 WPGraphQL query 結構整理與 where 應用

note

我在 WP graphQL 基本查詢介紹－以頁面查詢為例 有介紹到 wordpress 頁面基本查詢以及使用 Next.js + Apollo client 串接 WPGraphQL，有興趣的各位可以前往瀏覽

這篇文章將更進一步介紹 query 結構，以及整理一些我常用的 query

WPGraphQL 結構介紹​

就如同示意圖，WPGraphQL query 的結構對應左側的 Adminmenu

頁面結構 pages​

{
   pages(where: { name: "home" }) {#這裡填寫你要查詢的頁面代稱
      nodes {
        # 這裡填寫你要查詢的欄位
        content # wordpress 內文編輯器內容
        id #頁面 id
        link #頁面的永久連結（permalink），是頁面的固定 URL
        uri #相對於網站根目錄的路徑
        title #頁面標題
        acf #額外新增的 ACF 欄位，名稱在 acf 自訂
      }
   }
}

這裡的 where 代我們想對數據進行過濾的條件

where 常用方法：

  • title：頁面名稱
  • name：頁面代稱或稱slug

nodes 常用欄位：

  • id：頁面 id
  • content：wordpress 內文編輯器內容

    通常會用 acf 提供的 WYSIWYG Editor 欄位來代替，且我也在 functions.php 隱藏掉頁面預設的 wordrpess 編輯器了

  • link：頁面的永久連結（permalink），是頁面的固定 URL

    通常用於社群分享的連結會使用永久連結

  • uri：相對於網站根目錄的路徑

    通常文章 <a/>連結會使用 uri

  • title：頁面標題
  • date：頁面建立日期
  • acf：額外建立的 ACF 欄位也在這邊查詢，acf 名稱可自訂，例如 homeACF

文章結構 posts 以及 posts type​

nodes 欄位能查詢到的欄位基本上跟頁面查詢大同小異，需要注意的是 where 的用法，很常用到。這裡的 where 代表我們想對數據進行過濾的條件

{
   posts(where) {
      nodes {
        #這裡基本上跟頁面查詢大同小異
      }
   }
}

where 常用方法：

名稱 Name值 value型別 Type描述 Description注意事項
notIn"id"string用於排除特定文章 id
orderby見下方object定義了數據的排序方式。
orderby.fieldDATE, AUTHOR, ...等等數據用何種方式排序，DATE代表依照時間排列
orderby.orderASC, DESCASC 升序排列, DESC 降序排列
offsetPagination見下方object定義了分頁的方式需安裝插件，wp-graphql-offset-pagination
offsetPagination.size0number每一頁有幾個項目
offsetPagination.offset0number從第幾項開始擷取資料

常見的使用方式如下：

{
   posts(where:{offsetPagination:{size:6, offset:0}}){
    nodes{
      content
    }
  }
}

offsetPagination:{size:6, offset:0}： 我現在有 24 筆文章，假設每頁有 6 個

  1. 第一頁就是前 6 個（offset:0）
  2. 第二頁就是第 7 個到第 12 個（offset: 6）
  3. ... 以此類推