Reactjs 如何减少静态查询代码重复gatsbyjs

我创建了一个React静态查询钩子，用于请求站点和页面级元数据。目前，我正在每个页面构建上复制此代码，因为查询的一部分在页面之间发生变化

allProductsJson

，

allProductJson

等。我想知道是否可以通过更有效地使用查询功能来删除此重复？我已经读到盖茨比静态查询不支持参数，但也许有一种方法可以查询所有的元数据并按页面过滤

重复查询挂钩的示例：

import { graphql, useStaticQuery } from 'gatsby';
import pageMetadataSelector from 'utils/page-metadata-selector';
import siteMetadataSelector from 'utils/site-metadata-selector';
import getAbsoluteUrl from 'utils/get-absolute-url-path';

const QUERY = graphql`
  {
    pageMetadata: allProductsJson {
      nodes {
        metadata {
          title
          description
          image {
            publicURL
          }
          robots
        }
      }
    }
    site {
      siteMetadata {
        siteUrl
      }
    }
  }
`;

const usePageMetadataQuery = ({ location }) => {
  const { pageMetadata, site } = useStaticQuery(QUERY);
  const pageData = pageMetadataSelector(pageMetadata);
  const { siteUrl } = siteMetadataSelector(site);

  return {
    metadata: {
      ...pageData,
      siteUrl: getAbsoluteUrl(siteUrl, location.pathname),
      image: getAbsoluteUrl(siteUrl, pageData.image.publicURL)
    }
  };
};

export default usePageMetadataQuery;

---

考虑到您在这里所做的工作，我认为最好将相关数据添加到

gatsby node.js

（在

createPage

调用中）的页面上下文中，然后使用

wraprootement

（在

gatsby browser.js

和

gatsby ssr.js

）从页面上下文中提取这些细节

从那里，您可以直接呈现所需的组件，也可以将其传递给React上下文提供程序供任何子级使用

下面是一个显示后一种情况的示例：

export const wrapPageElement = ({ element, props: { context: { metadata} } }) => {
  return (
    <MetadataContext.Provider value={metadata}>
      {element}
    </MetadataContext.Provider>
  )
}

---

准备外部gql文件，导入（gql加载程序），选择/按参数选择你能用一个例子@xadm解释一下吗。。。盖茨比特有的。。但你需要它在建设time@xadm我想在构建时执行查询，但这个插件似乎不支持：>这不是为了：加载构建时使用的查询。是的，我写了这个。。。第一个链接，而不是信息或手动配置。。。更合适的插件使用问题是关于使用稍微不同的查询，总是别名为

pageMetadata

，并处理相同的查询way@coreyward元数据会随着页面的变化而变化，因此我可以查询

allProductsJson

，然后查询

allProductJson

等等，想知道我怎样才能获得这种灵活性？对。您不需要从页面查询或静态查询中的

allProductJson

中提取所需的数据，只需在

gatsby node.js

中执行，并将其相关部分作为上下文传递给

createPage

调用。否则，您可以使用针对每个页面运行的页面查询来获取此数据。此外，您仍然可以从传递给

wrapPageElement

的

道具中抓取
位置
，就像上面示例中的
上下文
一样对其进行分解。@coreyward很抱歉这么晚才回来，我仍然不确定的部分是，如果我将查询添加到gatsby节点，我如何提取
allProductJson
，然后可能
allStoresJson
并将该片段作为上下文返回？