graphql - 在 Gatsby 上渲染 Contentful Reference (many) 数组

Question

我对使用 Contentful 及其引用(许多)字段类型还很陌生。我有一种引用类型，它包含许多产品名称。在 GraphQL 中，我可以看到我所有的产品名称都在显示，但是当我尝试在 Gatsby 上渲染它时，我没有看到任何显示(产品名称:数组)。这是我的 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 的用法钩子(Hook)和循环中的 return 语句。

useStaticQuery 的重构产生了更清晰和可重用的代码，但它的想法完全相同，如果您更熟悉旧的 StaticQuery，则可以保留它。

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