GraphQL 实现多语言 API 的技巧分享！-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 是一种新型的 API 查询语言，它可以让前端开发人员更加灵活地查询和获取后端数据。而对于多语言网站，GraphQL 可以提供很好的支持。本文将介绍如何使用 GraphQL 实现多语言 API，以及一些技巧和实用的示例代码。

什么是多语言 API？

多语言 API 是一个支持多种语言的 API，它可以根据用户的语言设置返回不同的数据。例如，如果用户的语言设置为英语，API 将返回英语版本的数据，如果用户的语言设置为法语，API 将返回法语版本的数据。

GraphQL 如何支持多语言 API？

在 GraphQL 中，我们可以使用 enum 类型来定义支持的语言，然后在查询中使用变量来指定用户的语言设置。例如，我们可以定义一个 Language 枚举类型：

enum Language {
  ENGLISH
  FRENCH
  SPANISH
}

然后在查询中使用变量来指定用户的语言设置：

query GetProduct($language: Language!) {
  product(language: $language) {
    name
    description
  }
}

在后端实现中，我们可以根据传入的语言变量来返回不同的数据。例如，如果语言变量为 ENGLISH，我们返回英语版本的数据，如果语言变量为 FRENCH，我们返回法语版本的数据。

实现多语言 API 的技巧

1. 使用国际化库

在实现多语言 API 时，我们可以使用一些国际化库来帮助我们管理多语言字符串。这些库可以让我们轻松地将多语言字符串存储在文件或数据库中，并根据用户的语言设置返回正确的字符串。

例如，我们可以使用 i18next 库来管理多语言字符串。我们可以将多语言字符串存储在 JSON 文件中，然后使用以下代码来初始化 i18next：

// www.javascriptcn.com code example
import i18next from 'i18next';
import Backend from 'i18next-node-fs-backend';

i18next.use(Backend).init({
  fallbackLng: 'en',
  backend: {
    loadPath: 'locales/{{lng}}/{{ns}}.json',
  },
});

然后我们可以使用以下代码来获取多语言字符串：

const translation = i18next.t('product.name', { lng: language });

2. 使用模板字符串

在返回多语言字符串时，我们可以使用模板字符串来方便地将变量插入到字符串中。例如，我们可以使用以下代码返回包含变量的多语言字符串：

const translation = i18next.t('product.description', { lng: language, name: 'Product A', price: 9.99 });
const description = `This is ${name}, it costs ${price}. ${translation}`;

3. 使用 GraphQL Fragments

在 GraphQL 中，我们可以使用 Fragments 来重用查询中的字段。例如，我们可以定义一个 ProductFields Fragment：

fragment ProductFields on Product {
  name
  description
  price
}

然后在查询中使用 ProductFields Fragment：

query GetProduct($language: Language!) {
  product(language: $language) {
    ...ProductFields
  }
}

这样可以避免在多个查询中重复定义相同的字段。

示例代码

以下是一个使用 GraphQL 和 i18next 实现多语言 API 的示例代码：

// www.javascriptcn.com code example
import express from 'express';
import graphqlHTTP from 'express-graphql';
import i18next from 'i18next';
import Backend from 'i18next-node-fs-backend';
import { buildSchema } from 'graphql';

i18next.use(Backend).init({
  fallbackLng: 'en',
  backend: {
    loadPath: 'locales/{{lng}}/{{ns}}.json',
  },
});

const schema = buildSchema(`
  enum Language {
    ENGLISH
    FRENCH
    SPANISH
  }

  type Product {
    name: String!
    description: String!
    price: Float!
  }

  type Query {
    product(language: Language!): Product!
  }
`);

const root = {
  product: ({ language }) => {
    const name = 'Product A';
    const price = 9.99;
    const translation = i18next.t('product.description', { lng: language, name, price });
    const description = `This is ${name}, it costs ${price}. ${translation}`;

    return { name, description, price };
  },
};

const app = express();
app.use(
  '/graphql',
  graphqlHTTP({
    schema,
    rootValue: root,
    graphiql: true,
  }),
);
app.listen(3000, () => console.log('Listening on http://localhost:3000/graphql'));

在此示例代码中，我们使用 i18next 库来管理多语言字符串，并使用 GraphQL 枚举类型和变量来指定用户的语言设置。我们还使用模板字符串来方便地将变量插入到多语言字符串中。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d90ab8a941bf7134077ab9

GraphQL 实现多语言 API 的技巧分享！