如何將 Graphql 查詢從 Wordpress API 中的反應組件而不是 GatsbyJS 中的模板中獲取數據？

Question

我正在使用 GatsbyJS 創建一個 static 網站，其數據托管在 Wordpress 上。 到目前為止，我可以使用這個插件獲取帖子和頁面數據並使用模板為它們創建頁面。

我的要求是在我現有的任何 React 組件的任何帖子或頁面中使用 ACF 字段創建畫廊或輪播部分。 但是，我無法解決這個問題，因為我認為需要在 gatsby-node.js 中為此進行一些設置。

我創建了 GraphQL 查詢來執行此操作，它正在獲取正確的數據。 但現在的問題是我不知道在哪里放置這個查詢。

這是 GraphQL 查詢：

`query MyQuery {
  wordpressPost(wordpress_id: {eq: 11}) {
    acf {
      facebook
      twitter
      image {
        localFile {
          url
        }
      }
      slider {
        image_caption
        slider_image {
          localFile {
            url
          }
        }
      }
    }
  }
}`

請讓我更好地理解這一點，因為我有點陷入困境。

Answer 1

要在組件中創建查詢，只需使用staic query 。 該示例已從gatsby 文檔中復制粘貼：

import React from "react"
import { StaticQuery, graphql } from "gatsby"
export default () => (
  <StaticQuery
    query={graphql`
      query HeadingQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `}
    render={data => (
      <header>
        <h1>{data.site.siteMetadata.title}</h1>
      </header>
    )}
  />
)