取得 wordpress 的 pages 資訊
訪問 {{wordpress 網域}}/wp-json/wp/v2/pages
即可看到所有頁面的資訊

圖中標示這筆 page 的 slug 值為 "sample-page"，是對應後台的"網址代稱"

使用這個 plugin

設置在 gatsby-config.js 檔案

即可在 http://localhost:8000/___graphql 去 query 到 wordpress page 的資料

{
	allWordpressPage {
    edges {
      node {
        title
        content
      }
    }
  }
}

此時先開一個 page
使用 graphQL 的 StaticQuery 去 query wordpress 內容

import React from "react"
import Layout from "../components/layout"
import { graphql, StaticQuery } from "gatsby"

const Demo = () => (
  <Layout>
    <StaticQuery
      query={graphql`
        {
          allWordpressPage {
            edges {
              node {
                title
                content
              }
            }
          }
        }
      `}
      render={props => (
        <div>
          {props.allWordpressPage.edges.map(page => (
            <div key={page.node.id}>
              <h1>{page.node.title}</h1>
              <div dangerouslySetInnerHTML={{ __html: page.node.content }} />
            </div>
          ))}
        </div>
      )}
    />
  </Layout>
)
export default Demo

訪問 demo route 就可得到 wordpress 編輯的內容~

介紹使用 graphql 兩種方法

• way1: import useStaticQuery

const Layout = ({ children }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <>
      <Header siteTitle={data.site.siteMetadata.title} />
      <div
        style={{
          margin: `0 auto`,
          maxWidth: 960,
          padding: `0px 1.0875rem 1.45rem`,
          paddingTop: 0,
        }}
      >
        <main>{children}</main>
        <footer>
          © {new Date().getFullYear()}, Built with
          {` `}
          <a href="https://www.gatsbyjs.org">Gatsby</a>
        </footer>
      </div>
    </>
  )
}

• way2: import StaticQuery

const Layout = ({ children }) => (
  <StaticQuery
    query={graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `}
    render={data => (
      <>
        <Header siteTitle={data.site.siteMetadata.title} />
        <div
          style={{
            margin: `0 auto`,
            maxWidth: 960,
            padding: `0px 1.0875rem 1.45rem`,
            paddingTop: 0,
          }}
        >
          <main>{children}</main>
          <footer>
            © {new Date().getFullYear()}, Built with
            {` `}
            <a href="https://www.gatsbyjs.org">Gatsby</a>
          </footer>
        </div>
      </>
    )}
  ></StaticQuery>
)

siteMetadata 定義於 gastby-config.js 喔