编辑：

Question

我希望能够从ACF选项页中检索数据。我可以在http://localhost:8000/___graphql处获得我的值，但在我的项目中无法。

import React from "react";
import { graphql } from 'gatsby';

const Users = ({ data }) => {

    return (
        <div id="Users">
            {
                data.allWordpressAcfOptions.edges.node.options.employees.map(employees => (
                     console.log(employees)
                ))
            }

        </div>
    )
}


export default Users;

export const query = graphql`
{
  allWordpressAcfOptions {
    edges {
      node {
        options {
          employees {
            wordpress_id
            first_name
            last_name
          }
        }
      }
    }
  }
}`

所以我运行查询后，它看起来像这样。

{
  "data": {
    "__typename": "Query",
    "allWordpressAcfOptions": {
      "edges": [
        {
          "node": {
            "options": {
              "employees": [
                {
                  "wordpress_id": "1",
                  "first_name": "bob ",
                  "last_name": "joe",
                  "email": "emal@gmail.com",
                  "username": "user1",
                  "password": "password",
                  "status": "active"
                },
                {
                  "wordpress_id": "2",
                  "first_name": "sam",
                  "last_name": "more",
                  "email": "email@yahoo.com",
                  "username": "user2",
                  "password": "password",
                  "status": "active"
                }
              ]
            }
          }
        }
      ]
    }
  }
}

这是它看起来的样子，但是由于某种原因它抛出了该错误。在查询中，我注意到它自动在“ ___graphql”的顶部估算了“ __typename”。我是否需要在项目中的查询中包含此内容。

下面是我的gatsby-config.js文件。我遵循了这些示例，这就是我最终得到的结果。由于某些原因，它无法识别“ allWordpressAcfOptions”。

module.exports = {

  siteMetadata:{
    title: "Gatsby Website",
    description: "",
    keywords: "ben, joe",
    image: "/static/images/1.jpg",
    url: 'https://website.com'
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`
    },
    {
      resolve: `gatsby-plugin-react-helmet`
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Name`,
        short_name: `Name`,
        start_url: `/`,
        background_color: `#f7f0eb`,
        theme_color: `#a2466c`,
        display: `standalone`,
      },
    },
    {resolve: `gatsby-plugin-offline`},
    {
      resolve: "gatsby-source-wordpress",
      options: {
        /*
         * The base URL of the WordPress site without the trailingslash and the protocol. This is required.
         * Example : 'gatsbyjsexamplewordpress.wordpress.com' or 'www.example-site.com'
         */
        baseUrl: "website.com",

        // The protocol. This can be http or https.
        protocol: "https",

        // Indicates whether the site is hosted on wordpress.com.
        // If false, then the assumption is made that the site is self hosted.
        // If true, then the plugin will source its content on wordpress.com using the JSON REST API V2.
        // If your site is hosted on wordpress.org, then set this to false.
        hostingWPCOM: false,
        useACF: true,
        acfOptionPageIds: [],
        cookies: {},
        verboseOutput: false,
        perPage: 100,
        concurrentRequests: 10,
        includedRoutes: [
          "**/categories",
          "**/posts",
          "**/pages",
          "**/media",
          "**/tags",
          "**/taxonomies",
          "**/users",
        ],
        keepMediaSizes: false,
        normalizer: function({ entities }) {
          return entities
        },
      },
    },
  ]
}

因此，如果我通过该组件将值作为另一个页面的props传递，那么它将起作用。

<Users data={data.allWordpressAcfOptions}></Users>

当我尝试将其作为这样的组件

const Users = ({data}) => {
  console.log(data);
    return (
      <div>

      </div>
    )
}

该值为空console.log（data）;未定义

Answer 1

您期望data.allWordpressAcfOptions.edges是一个数组吗？因此，您需要先进行映射。然后再次映射每个WordpressAcfOption的雇员数组。

import React from 'react'
import { graphql } from 'gatsby'

const Users = ({ data }) => {
  return (
    <div>
      {
        data.allWordpressAcfOptions.edges.map(edge => {
          return (
            <div>
              edge.node.options.employees.map(employee => {
                return (
                  <div>{employee.first_name} {employee.last_name}</div>
                )
              })
            <div>
          )
        })
      }
    </div>
  )
}


export default Users

export const query = graphql`
{
  allWordpressAcfOptions {
    edges {
      node {
        options {
          employees {
            wordpress_id
            first_name
            last_name
          }
        }
      }
    }
  }
}`

编辑：

如果Users不是页面组件，则gatsby将永远不会运行此查询。您应该将此组件转换为使用static query。这样的事情应该起作用：（未测试）

import React from 'react'
import { graphql, useStaticQuery } from 'gatsby'

const Users = () => {
        const { allWordpressAcfOptions } = useStaticQuery(
        graphql`query {
          allWordpressAcfOptions {
            edges {
              node {
                options {
                  employees {
                    wordpress_id
                    first_name
                    last_name
                  }
                }
              }
            }
          }
        }`
      )

  return (
    <div>
      {
        allWordpressAcfOptions.edges.map(edge => {
          return (
            <div>
              edge.node.options.employees.map(employee => {
                return (
                  <div>{employee.first_name} {employee.last_name}</div>
                )
              })
            <div>
          )
        })
      }
    </div>
  )
}


export default Users

export const query = graphql`
{
  allWordpressAcfOptions {
    edges {
      node {
        options {
          employees {
            wordpress_id
            first_name
            last_name
          }
        }
      }
    }
  }
}`

Gatsby TypeError：无法读取未定义的属性'allWordpressAcfOptions'

1 个答案:

编辑：