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