在使用 i18next 翻译构建页面时，有没有办法减少定义和导出语言查询？

Question

我目前有 n 个页面。

在其中的每一个中，我都定义了以下查询...

export const languageQuery = graphql`
    query($language: String!) {
        locales: allLocale(filter: { language: { eq: $language } }) {
            edges {
                node {
                    ns
                    data
                    language
                }
            }
        }
    }
`;

...在每个页面中获取翻译。

这是相同的查询（现在），所以我真的很想能够只导入一个版本，而不是在 every single 中定义它 页数.

我试过以下方法：

// SomePage.tsx

export { languageQuery } from '../path/to/languageQuery';
// where languageQuery.ts is the query mentioned above

或

// languageQuery.ts

export const languageQuery = () => graphql`
    query($language: String!) {
        locales: allLocale(filter: { language: { eq: $language } }) {
            edges {
                node {
                    ns
                    data
                    language
                }
            }
        }
    }
`;

// SomeComponent.tsx

import { languageQueryAsAFunction } from '../path/to/languageQuery';
export const languageQuery = languageQueryAsAFunction()

但是在编译时，Gatsby 似乎无法检测到翻译查询。

从长远来看，确实感觉无法扩展。任何人都可以帮助减少/删除这种重复吗？我是不是漏掉了一些明显的东西？

n.b。软件包版本：

"gatsby-plugin-react-i18next": "^1.1.1",
"i18next-browser-languagedetector": "^6.1.2",
"i18next-http-backend": "^1.3.0",
"react-i18next": "^11.11.4",

Answer 1

您在寻找 GraphQL query fragments 吗？

export const query = graphql`
  fragment SiteInformation on Site {
    title
    description
  }
`

然后：

export const pageQuery = graphql`
  query SiteQuery {
    site {
   ...SiteInformation
    }
  }
`

片段会自动导出，不需要导入到您尝试使用它们的文件中。它们由 GraphQL 模式自动推断并可用于项目中的所有查询。

您需要调整上面的代码片段以适应动态 $language 参数，没有 GraphiQL 很难在此处编码。

The content of the query is irrelevant, really (It is the default, under this heading of the plugin docs). My question is concerning the neccessity of defining this variable of a graphql string ON EVERY page. Seems very cumbersome

我不同意。只要内容通过参数 ($language) 过滤，它就是相关的，因此绕过您发现的限制的解决方法取决于内容。

如果内容不相关，您可以创建一个custom hook extending the useStaticQuery built-in hook。请记住，静态查询不接受参数（因此得名）。因此，您可以创建如下内容：

import { useStaticQuery, graphql } from "gatsby"
export const useLocales = () => {
  const { locales } = useStaticQuery(
    graphql`
    query {
        locales: allLocale{
            edges {
                node {
                    ns
                    data
                    language
                }
            }
        }
    }
`
  )
  return locales.edges
}

然后在你的组件中（可以是页面也可以是单个组件）：

export default function Home() {
  const yourLanguages = useLocales()
  console.log(yourLanguages);

  return <h1>welcome</h1>
}

在使用 i18next 翻译构建页面时，有没有办法减少定义和导出语言查询？

Is there a way to reduce defining and exporting language queries when building pages with i18next translations?

reactjs

gatsby

react-i18next

gatsby-plugin