GraphQL 是一种流行的查询语言，它带来了很多方便的查询功能。其中一个非常有用的功能是多语言支持。如果你在构建一个国际化的应用程序，那么多语言支持是非常必要的。在这篇文章中，我们将讨论如何在 GraphQL 中使用多语言支持。
理解多语言支持
多语言支持是将应用程序翻译成不同的语言，这样不同语言的用户就可以使用它。这个过程需要把应用程序中的所有文本翻译成不同的语言，同时需要在应用程序中处理这些不同的语言。在 GraphQL 中，多语言支持可以通过两种方式实现：
- 动态查询 - 在每个查询中传入语言参数，以便服务器知道应该返回哪种语言的文本。
- 静态查询 - 生成一组已翻译的查询，以便在客户端上快速返回已翻译的文本。
实现多语言支持的方式
动态查询
动态查询是在每个查询中传入语言参数，以便服务器知道应该返回哪种语言的文本。这需要在服务器端编写一个语言解析器，以便服务器知道在哪种语言下该返回哪些文本。在以下示例中，我们使用 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