如何在 GraphQL 中使用多语言支持?

阅读时长 4 分钟读完

GraphQL 是一种流行的查询语言,它带来了很多方便的查询功能。其中一个非常有用的功能是多语言支持。如果你在构建一个国际化的应用程序,那么多语言支持是非常必要的。在这篇文章中,我们将讨论如何在 GraphQL 中使用多语言支持。

理解多语言支持

多语言支持是将应用程序翻译成不同的语言,这样不同语言的用户就可以使用它。这个过程需要把应用程序中的所有文本翻译成不同的语言,同时需要在应用程序中处理这些不同的语言。在 GraphQL 中,多语言支持可以通过两种方式实现:

  1. 动态查询 - 在每个查询中传入语言参数,以便服务器知道应该返回哪种语言的文本。
  2. 静态查询 - 生成一组已翻译的查询,以便在客户端上快速返回已翻译的文本。

实现多语言支持的方式

动态查询

动态查询是在每个查询中传入语言参数,以便服务器知道应该返回哪种语言的文本。这需要在服务器端编写一个语言解析器,以便服务器知道在哪种语言下该返回哪些文本。在以下示例中,我们使用 i18next 库来处理多语言支持:

-- -------------------- ---- -------
----- - ------------- --- - - -------------------------
----- ------- - -------------------
----- ----------------- - -----------------------------------
----- -------------- - ------------------------------

----- -------- - ----
  ---- ----- -
    --------- -------
  -
--

----- --------- - -
  ------ -
    --------- -------- ----- -------- ----- -- -
      ----- - - - - --------
      ------ --------------
    --
  --
--

-------
  --------------------
  ----------------------------------------
  ------
    -
      ------------ -----
      -------- ------ ------
      -------- -
        --------- --------------------------------
      --
    --
    -- -- -
      ----- ------ - --- --------------
        ---------
        ----------
        -------- -- --- -- -- -
          ------ -
            -- ----- - ----- - ------------------------
          --
        --
      ---

      ----------------------- --- -- -- -
        ---------------  ------ ----- -- ---------
      ---
    -
  --

在这个示例中,我们使用 i18next 来初始化多语言支持,设置默认语言和翻译文件的路径。我们需要在服务器上挂载 i18nextMiddleware 来让 GraphQL 知道当前使用的是哪种语言。在 context 中,我们将 i18next.t 绑定到请求对象上,以便查询中的每个解析器都可以访问多语言翻译。

静态查询

静态查询是生成一组已翻译的查询,以便在客户端上快速返回已翻译的文本。这需要在构建时生成已翻译的查询,并将其提供给客户端。以下是一个使用 babel-plugin-i18next-extract 插件的示例,从代码中提取文本翻译:

-- -------------------- ---- -------
----- -------- - -------------------

------ ----- -------------- - ----
  ----- -
    -------- -------
  -
--

------ ----- --------- - -
  ------ -
    --------- -- -- ---------
  --
--

在这个示例中,我们使用 babel-plugin-i18next-extract 插件从代码中提取文本翻译。我们将已提取的文本存储在一个变量中,并将其用作 Apollo 客户端缓存中的查询。在解析 greeting 查询时,我们只需要返回存储在变量中的已翻译的文本。

结论

在构建国际化应用程序时,多语言支持是不可或缺的。在 GraphQL 中,多语言支持可以通过动态查询和静态查询两种方式实现。使用动态查询需要在每个查询中传入语言参数,并在服务器上构建解析器来处理多语言支持。使用静态查询则需要在构建时生成已翻译的查询,并将其提供给客户端。无论使用哪种方式,都需要对多语言支持的具体实现进行深入的了解,以确保为用户提供了最佳的体验。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6705def7d91dce0dc8556b5d

纠错
反馈