是否需为每个待翻译页面添加gatsby-plugin-react-i18next语言查询？

你不需要在每个需要翻译的页面中重复添加GraphQL语言查询，以下是几种更优的实现方案：

方案一：通过gatsby-node.js预取数据并传递上下文 #

在gatsby-node.js中统一查询所有多语言数据，在创建页面时将对应语言的本地化数据通过上下文（Context）传递给页面组件，避免每个页面重复写查询：

// gatsby-node.js
exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;

  // 查询所有本地化数据
  const result = await graphql(`
    query {
      allLocale {
        edges {
          node {
            language
            ns
            data
          }
        }
      }
    }
  `);

  // 按语言分组数据
  const localeDataByLang = {};
  result.data.allLocale.edges.forEach(({ node }) => {
    if (!localeDataByLang[node.language]) {
      localeDataByLang[node.language] = [];
    }
    localeDataByLang[node.language].push(node);
  });

  // 创建多语言页面，这里以首页为例
  Object.keys(localeDataByLang).forEach((lang) => {
    createPage({
      path: lang === "en" ? "/" : `/${lang}`, // 英文用根路径，其他语言用/lang路径
      component: require.resolve("./src/pages/index.js"),
      context: {
        language: lang,
        locales: localeDataByLang[lang],
      },
    });
  });
};

之后在页面组件中，可以直接从pageContext获取本地化数据：

// src/pages/index.js
export default function IndexPage({ pageContext }) {
  const { locales, language } = pageContext;
  // 在这里使用locales数据初始化i18n或直接使用翻译内容
  return <div>你的页面内容</div>;
}

方案二：封装高阶组件（HOC）复用查询逻辑 #

创建一个高阶组件，将重复的GraphQL查询逻辑封装进去，需要翻译的页面只需用这个HOC包裹即可：

// src/hoc/withLocale.js
import { graphql } from "gatsby";
import React from "react";

export const withLocale = (Component) => {
  const WithLocaleComponent = ({ data, ...props }) => {
    return <Component locales={data.locales} {...props} />;
  };

  return WithLocaleComponent;
};

// 统一的查询逻辑
export const query = graphql`
  query($language: String!) {
    locales: allLocale(filter: { language: { eq: $language } }) {
      edges {
        node {
          ns
          data
          language
        }
      }
    }
  }
`;

在页面中使用这个HOC：

// src/pages/index.js
import { withLocale, query } from "../hoc/withLocale";

function IndexPage({ locales }) {
  // 使用locales数据
  return <div>你的页面内容</div>;
}

export default withLocale(IndexPage);
export { query }; // 导出复用的查询

方案三：利用插件内置的useTranslation hook #

如果你的项目中使用useTranslation hook来获取翻译内容，其实可以不用手动编写GraphQL查询——插件会自动根据当前语言和命名空间（ns）加载对应的翻译数据。只需确保你的本地化文件（如locales/en/common.json）放在正确的目录下，插件会自动处理数据获取：

// src/pages/index.js
import { useTranslation } from "gatsby-plugin-react-i18next";

export default function IndexPage() {
  const { t, i18n } = useTranslation("common"); // 指定命名空间
  return <div>{t("welcome")}</div>;
}

这种方式最简洁，适合大多数场景，官方示例中手动添加查询是为了展示底层逻辑，实际项目中优先推荐这种方式。

内容的提问来源于stack exchange，提问作者awm