graph - Gatsby useStaticQuery 与语言环境

Question

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

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

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

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

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

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

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

也许我应该在 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 以获取数据并将其共享到所需的组件(应始终是模板或动态创建的页面)并通过上下文共享。

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

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