Gatsby 使用带有语言环境的静态查询

Question

我正在使用具有内容数据源和 gatsby-plugin-react-int 的 gatsby。

在我网站的每个页面上显示最新消息的块，因此我使用 useStaticQuery 挂钩来获取“新闻”组件的数据

export const useStaticNewsQuery = () => useStaticQuery(graphql`
query StaticNews {
  allContentfulNews {
    nodes {
      node_locale
      gatsbyPath(filePath: "/news/{contentfulNews.slug}")
      slug
      title
      body {
        body
      }
      publishDate
    }
  }
}
`)

但由于我的网站是多语言的 - 我需要获取与当前语言环境相关的本地化新闻。

据我所知 - staticQuery 不允许传递变量。

但是如何才能在组件中只请求与当前语言环境相关的新闻呢？

如果我将使用 pageQuery - 我将必须对我的应用程序中包含“新闻”组件的每个页面发出相同的请求，并将结果通过道具/上下文传递给我的“新闻”组件

也许我应该在 gatsby-node.js 中使用一些魔法来查询与当前语言环境相关的数据并将其传递给一些全局上下文？ 此外 - 页眉、页脚和页面的其他部分也将使用相同的内容，这些内容将由单独的组件呈现并放置在几乎所有页面上，但应取决于当前的语言环境

Answer 1

鉴于您的场景和您的要求，我只能想象：

1. 为每个语言环境创建一个静态查询 (useStaticQuery) 以获取新闻：然后您只需要获取当前语言环境并触发所需的查询，例如：

   let news;
   if (currentLocale = 'en') news = useStaticNewsQueryEn();
   els if (currentLocale = 'es') news = useStaticNewsQueryEs();
   

2. 正如您所指出的，使用带有页面当前区域设置值的过滤页面查询
3. 调整您的 gatsby-node.js 以获取数据并将其共享到所需的组件（应始终是模板或动态创建的页面）并通过上下文共享。

关于您的共享组件（页脚、页眉等），您始终可以根据语言环境（条件渲染）渲染所需的组件，这应该不是问题。

您应该看到在您的特定用例中性能更好、可扩展性/灵活性更高。