Gatsby useStaticQuery with locale

问题描述

我正在使用带有内容数据源和 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 中使用一些魔法来查询与当前语言环境相关的数据并通过一些全局上下文传递它？ 此外 - 页眉、页脚和页面的其他部分也将使用相同的内容，它们将由单独的组件呈现并放置在几乎所有页面上，但应取决于当前的语言环境

解决方法

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

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

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

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

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

您应该了解在您的特定用例中什么性能更好，可扩展性/灵活性更高。