Question

我对使用Contentful及其引用（许多）字段类型很陌生。我有一个引用类型，可以引入许多产品名称。在GraphQL中，我可以看到所有产品名称的显示，但是当我尝试在Gatsby上对其进行渲染时，却看不到任何显示（productName：array）。这是我的GraphQL

{
  allContentfulAppetizerMenuSection {
      nodes {
        menuItemReferences {
          productName
        }
      }
  }
}

这是我的代码...

import React from 'react';
import { graphql, StaticQuery } from 'gatsby';

const Products = () => (

  <StaticQuery
  query={graphql`
    query MyQuery {
        allContentfulAppetizerMenuSection {
            nodes {
              menuItemReferences {
                productName
              }
            }
        }
    }
  `}

  render={data => (
    <div>
        {data.allContentfulAppetizerMenuSection.nodes.map(({ menuItemReferences }, i) => (
        <div key={i}>
            {menuItemReferences.productName}
        </div>
      ))}
    </div>
    )}
  />
)
  
export default Products;

任何帮助将不胜感激。

Answer 1

尝试：

const Products = () => {
  const data = useStaticQuery(graphql`
      query {
          allContentfulAppetizerMenuSection {
              nodes {
                  menuItemReferences {
                      productName
                  }
              }
          }
      }
  `);

  return <div>
    {data.allContentfulAppetizerMenuSection.nodes.map(({ menuItemReferences }, i) => {
      return <div key={i}>
        {menuItemReferences.productName}
      </div>;
    })}
  </div>;
};

export default Products;

请注意循环中useStaticQuery钩子和return语句的用法。

useStaticQuery上的重构产生了更整洁且可重用的代码，但其思想完全相同，如果您对旧的StaticQuery更熟悉，则可以保留它。

如果错误仍然存在，请尝试在循环内部进行调试。

在盖茨比上渲染内容丰富的参考（很多）数组

1 个答案: