如何创建动态组件

Question

我看到的机会，尽量减少网络字节转移我的网站，但无法找到一个适当的解决方案。

在盖茨比中，我使用.mdx文件。在这些文件中，我可以使用React组件，如：<Cards id="id_1" />

在一个.json文件中定义了几十个卡片，只要在de文件中调用这个组件并传递它们的id，就可以在整个网站上使用它。

Cards组件看起来有点像这样：

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


const Cards = (props) => {
    const card_id = props.id ? props.id.slice(0, 2) : []  // grab id

    return <StaticQuery
        query={graphql`
        query Query  {
                    images: allFile(filter: { sourceInstanceName: { eq: "card-images" } }) {
                        edges {
                            node {
                                childImageSharp {
                                    fluid(maxHeight: 256, quality: 100) {
                                        ...GatsbyImageSharpFluid_withWebp
                                        ...GatsbyImageSharpFluidLimitPresentationSize
                                    }
                                }
                                name
                            }
                        }
                    }
                    allCardsJson {
                        nodes {
                            name
                            id
                        }
                    }
                }
        `}
        render={(data) => {
            
            return(
               // returns a component by filtering 'data' by 'card_id'
            )
        }}
    />
}

一切正常但是..。

当使用这个组件时，的StaticQuery的全部结果(意思是:所有的卡片都是在返回中完成的，而不是在静态查询中完成的)将发送给页面的访问者。这是不必要的，而且浪费了网络带宽，因为例如，页面上只使用了一张卡(或几张)。

我知道StaticQuery是..。静电。因此，我不能在此查询中动态筛选以限制结果的大小。

DynamicQuerys在构建页面时使用，而不是在组件中使用。

是否有可能以某种方式创建具有动态内容(在其他地方定义)但仅限于所需数据的组件？(就像我试过的那样通过提供身份证明)

我正在考虑为每一张卡创建一个单独的文件。然后将所需的卡导入mdx文件并将其传递给组件。有什么想法？

没有关于我的用例的文档。这让我想知道我是否在按预期使用它。

Answer 1

我通过编辑gatsby-node.js将使用的数据添加到页面上下文中，从而解决了这个问题：

1. 获取post的mdxAST，过滤组件，然后过滤所使用的ids。
2. 将此ids列表添加到页面上下文中。
3. 将上述问题中所述的查询移至post GraphQL查询。使用页面上下文提供的in列表，可以将数据过滤到本文中仅使用的in。
4. 将此数据作为属性传递给MDXRenderer。
5. 将.mdx文件中的数据传递给cards组件，例如：<Cards data={props.cards_data} />。
6. 现在，组件不使用StaticQuery接收数据。

这很管用，但感觉有点奇怪。在我看来，必须有一个更好、更干净的解决办法。

Answer 2

GraphQL查询在运行gatsby develop或gatsby build时只运行一次。这是盖茨比( Gatsby )除了你自己读吧之外的一种违反直觉的工作方式

盖茨比在构建时使用GraphQL，而不是在现场使用。

有关盖茨比构建过程的更多信息和GraphQL是如何影响它的。

这意味着您已经按照您应有的方式构建了组件。在构建期间，您的所有卡都会被查询并保存在内存中。当用卡片为页面创建HTML时，只使用带有ID的卡片来构建页面。因此，用户只看到使用过滤ID传输的页面。

如果您的页面中确实只有带有ID的卡片，您可以再次检查：

• 运行gatsby clean：确保删除页面的旧片段
• 运行gatsby build：从头创建站点
• 检查项目根目录中的public文件夹。这是盖茨比构建的经典网页。使用卡片导航到您的页面，例如/public/blog/example-page-with-card。查看页面的HTML :它是包含所有卡片还是只包含您需要的ID？