如何放置 Graphql 查询以从 Wordpress API 中获取数据而不是 GatsbyJS 中的模板？

Question

我正在使用 GatsbyJS 制作静态网站，其数据托管在 Wordpress 上。到现在为止，我能够获取 post 和页面数据，并使用 this plugin.

使用模板为它们创建页面

我的要求是在我现有的任何 React 组件中的任何 post 或页面中使用 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

要在组件中创建查询，只需使用 静态查询。该示例已从 gatsby documentation:

复制粘贴

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>
    )}
  />
)

如何放置 Graphql 查询以从 Wordpress API 中获取数据而不是 GatsbyJS 中的模板？

How to put Graphql queries to fetch data from Wordpress API inside react components instead of templates in GatsbyJS?

wordpress

reactjs

graphql

gatsby