如何用 GraphQL 管理多语言信息-JavaScript中文网-JavaScript教程资源分享门户

在国际化的应用程序中，多语言信息是至关重要的。为了提供良好的用户体验，我们需要确保所有文本都能够被正确地翻译成用户所使用的语言。然而，在前端开发中，管理多语言信息可能会变得复杂和棘手。

GraphQL 是一种强大的查询语言，它为前端开发人员提供了一种优雅的方式来管理多语言信息。在本文中，我们将介绍如何使用 GraphQL 来管理多语言信息，并提供示例代码。

什么是 GraphQL？

GraphQL 是一种查询语言，它提供了一种优雅的方式来获取和修改数据。与传统的 RESTful API 不同，GraphQL 允许客户端指定所需的数据，并返回与请求匹配的精确数据。

GraphQL 的优点包括：

更好的性能：GraphQL 允许客户端精确指定所需的数据，从而减少了不必要的数据传输，提高了性能。
更好的可扩展性：GraphQL 允许添加新的字段和类型，而不会破坏现有的客户端代码。
更好的开发体验：GraphQL 允许客户端指定所需的数据类型，从而提供了更好的文档和类型检查。

如何使用 GraphQL 管理多语言信息？

在 GraphQL 中管理多语言信息的关键是使用嵌套对象。我们可以将每种语言的文本作为一个属性，并将其嵌套在一个对象中。例如，以下是一个包含英文和西班牙文本的对象：

{
  "id": "1",
  "title": {
    "en": "Hello World",
    "es": "Hola Mundo"
  }
}

在这个例子中，title 属性是一个对象，其中包含英语和西班牙语文本。我们可以通过查询指定所需的语言，并返回相应的文本。

以下是一个使用 GraphQL 查询多语言信息的示例：

query {
  article(id: "1") {
    title(language: "en")
  }
}

在这个查询中，我们请求 id 为 1 的文章的 title 属性，并指定所需的语言为英语。GraphQL 将返回以下结果：

{
  "data": {
    "article": {
      "title": "Hello World"
    }
  }
}

我们可以通过更改 language 参数来请求其他语言的文本。

示例代码

以下是一个使用 GraphQL 管理多语言信息的示例代码。我们将创建一个简单的服务器，用于获取和修改文章的多语言信息。我们将使用 Node.js 和 Express.js 来创建服务器，使用 GraphQL 和 MongoDB 来管理数据。

首先，我们需要安装以下依赖项：

npm install express graphql express-graphql mongoose --save

接下来，我们将创建一个 server.js 文件，并添加以下代码：

// www.javascriptcn.com code example
const express = require('express');
const graphqlHTTP = require('express-graphql');
const mongoose = require('mongoose');
const { buildSchema } = require('graphql');

// 连接到 MongoDB
mongoose.connect('mongodb://localhost:27017/myapp', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

// 定义文章模型
const Article = mongoose.model('Article', {
  title: {
    en: String,
    es: String,
  },
});

// 定义 GraphQL 模式
const schema = buildSchema(`
  type Query {
    article(id: String!): Article
  }

  type Mutation {
    updateArticle(id: String!, title: String!, language: String!): Article
  }

  type Article {
    id: String
    title(language: String!): String
  }
`);

// 定义 GraphQL 根解析器
const root = {
  article: ({ id }) => Article.findById(id),
  updateArticle: ({ id, title, language }) => {
    const update = {};
    update[`title.${language}`] = title;
    return Article.findByIdAndUpdate(id, update, { new: true });
  },
};

// 创建服务器
const app = express();

app.use('/graphql', graphqlHTTP({
  schema,
  rootValue: root,
  graphiql: true,
}));

app.listen(3000, () => console.log('Server running on port 3000'));

在这个示例中，我们定义了一个 Article 模型，并创建了一个 schema，其中包含 Query 和 Mutation 类型。我们还定义了一个 root 解析器，用于处理 GraphQL 查询和突变。

我们可以使用以下命令启动服务器：

node server.js

现在，我们可以使用 GraphQL Playground 来测试我们的服务器。在浏览器中打开 http://localhost:3000/graphql，然后执行以下查询：

query {
  article(id: "5f5b7c0f5a5d1a0b9c9f1c8d") {
    title(language: "en")
  }
}

在这个查询中，我们请求 id 为 5f5b7c0f5a5d1a0b9c9f1c8d 的文章的 title 属性，并指定所需的语言为英语。GraphQL 将返回以下结果：

{
  "data": {
    "article": {
      "title": "Hello World"
    }
  }
}

我们还可以使用以下突变来更新文章的多语言信息：

mutation {
  updateArticle(id: "5f5b7c0f5a5d1a0b9c9f1c8d", title: "Hola Mundo", language: "es") {
    title(language: "es")
  }
}

在这个突变中，我们将 id 为 5f5b7c0f5a5d1a0b9c9f1c8d 的文章的西班牙语标题更新为 Hola Mundo。GraphQL 将返回以下结果：

{
  "data": {
    "updateArticle": {
      "title": "Hola Mundo"
    }
  }
}

现在，我们已经成功地使用 GraphQL 管理多语言信息。我们可以使用相同的方法来管理其他类型的多语言数据，如描述、按钮文本等。GraphQL 提供了一种优雅的方式来管理多语言信息，并提高了前端开发的效率和可维护性。

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

如何用 GraphQL 管理多语言信息

什么是 GraphQL？

如何使用 GraphQL 管理多语言信息？

示例代码

接着读