javascript - 如何在 Gatsby 中循环播放 ACF 灵活内容？

Question

我在 Wordpress 中创建了一个具有灵活内容布局的页面，该页面当前包含两个不同的块，但是我很难理解如何在循环中正确呈现每种不同的块类型。

// test.tsx

const Test: FunctionComponent = ({ data }): ReactElement => {
  const { layouts } = data.wordpressPage.edges.node.acf.layouts_page;
  return (
    <Layout>
      <SEO title="Test" />

      <main>
        {layouts.map((layout, index) => {
          if (WordPressAcf_two_col_image_text) {
            return <TwoColImageText content={layout.content} />;
          } else if (WordPressAcf_two_col_text) {
            return <TwoColText content={layout.content} />;
          }
        })}
      </main>
    </Layout>
  );
};

export default Test;

export const query = graphql`
  query {
    wordpressPage(slug: { eq: "test-flexible-content" }) {
        edges {
          node {
            acf {
              layouts_page {
                ... on WordPressAcf_two_col_image_text {
                  id
                  heading
                  content
                  tag
                }
                ... on WordPressAcf_two_col_text {
                  id
                  content
                  heading
                }
              }
            }
          }
        }
      }
`;

标签： javascriptreactjsgraphqlgatsby

Answer 1

您可以使用该__typename字段来获取 GraphQL 类型。这超出了内联片段，因为它是联合中所有类型之间的共享字段。

layouts_page {
  __typename

  ... on WordPressAcf_two_col_image_text {
    # …
  }
  ... on WordPressAcf_two_col_text {
    # …
  }
}

然后你的条件会像这样检查身份：

layout.__typename === "WordPressAcf_two_col_image_text"

有一种比使用大的内联条件更优雅的方式来构建整个事物：

const typeMap = {
  WordPressAcf_two_col_image_text: TwoColImageText,
  WordPressAcf_two_col_text: TwoColText,
}

const Test: FunctionComponent = ({ data }): ReactElement => {
  const layouts = data.wordpressPage.edges.node.acf.layouts_page;

  return (
    <Layout>
      <main>
        {layouts.map(({ __typename, ...layoutProps }), index) => 
          React.createElement(typeMap[__typename], { key: index, ...layoutProps }) 
        )}
      </main>
    </Layout>
  );
};