如何使用 GraphQL 和 PostgreSQL 构建全栈 Web 应用程序-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常会使用 REST API 来获取数据。但是，REST API 有一些缺点，比如需要多次请求才能获取完整的数据，而且 API 的设计往往是固定的，难以满足复杂的数据查询需求。GraphQL 是一种新的 API 设计语言，它可以让我们更灵活地查询数据。本文将介绍如何使用 GraphQL 和 PostgreSQL 构建全栈 Web 应用程序。

什么是 GraphQL？

GraphQL 是一种用于 API 设计的查询语言和运行时。它允许客户端定义自己需要的数据，并且只返回客户端需要的数据。这个特点使得 GraphQL 在移动设备和低带宽网络环境下表现得更好。GraphQL 还支持多个查询同时执行，这使得我们可以构建更高效的 Web 应用程序。

什么是 PostgreSQL？

PostgreSQL 是一个强大的开源关系型数据库。它支持多种数据类型，包括文本、数值、日期等等。PostgreSQL 还支持 ACID 事务，保证数据的一致性和完整性。

如何使用 GraphQL 和 PostgreSQL？

为了使用 GraphQL 和 PostgreSQL，我们需要使用一个 GraphQL 服务器，并将其连接到 PostgreSQL 数据库。我们可以使用 Node.js 来创建 GraphQL 服务器，并使用 Sequelize 来连接 PostgreSQL 数据库。

首先，我们需要安装 Node.js 和 PostgreSQL。安装完成后，我们可以创建一个新的 Node.js 项目，并安装以下依赖项：

npm install express graphql express-graphql sequelize pg pg-hstore

接下来，我们可以创建一个 index.js 文件，并编写以下代码：

// javascriptcn.com 代码示例
const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const { Sequelize } = require('sequelize');
const { graphql, buildSchema } = require('graphql');

// 创建 Sequelize 实例
const sequelize = new Sequelize('database', 'username', 'password', {
  host: 'localhost',
  dialect: 'postgres',
  logging: false,
});

// 定义数据模型
const User = sequelize.define('user', {
  id: {
    type: Sequelize.INTEGER,
    allowNull: false,
    autoIncrement: true,
    primaryKey: true,
  },
  name: {
    type: Sequelize.STRING,
    allowNull: false,
  },
  email: {
    type: Sequelize.STRING,
    allowNull: false,
    unique: true,
    validate: {
      isEmail: true,
    },
  },
  password: {
    type: Sequelize.STRING,
    allowNull: false,
  },
});

// 定义 GraphQL schema
const schema = buildSchema(`
  type User {
    id: Int!
    name: String!
    email: String!
  }

  type Query {
    users: [User]
    user(id: Int!): User
  }

  input UserInput {
    name: String!
    email: String!
    password: String!
  }

  type Mutation {
    createUser(input: UserInput): User
    updateUser(id: Int!, input: UserInput): User
    deleteUser(id: Int!): Boolean
  }
`);

// 定义 GraphQL resolver
const root = {
  users: async () => {
    const users = await User.findAll();
    return users;
  },
  user: async ({ id }) => {
    const user = await User.findOne({ where: { id } });
    return user;
  },
  createUser: async ({ input }) => {
    const user = await User.create(input);
    return user;
  },
  updateUser: async ({ id, input }) => {
    const user = await User.findOne({ where: { id } });
    if (!user) {
      throw new Error(`User with id ${id} not found`);
    }
    await user.update(input);
    return user;
  },
  deleteUser: async ({ id }) => {
    const user = await User.findOne({ where: { id } });
    if (!user) {
      throw new Error(`User with id ${id} not found`);
    }
    await user.destroy();
    return true;
  },
};

// 创建 Express 应用程序
const app = express();

// 添加 GraphQL 中间件
app.use(
  '/graphql',
  graphqlHTTP({
    schema,
    rootValue: root,
    graphiql: true,
  })
);

// 启动服务器
app.listen(3000, () => {
  console.log('Server started on http://localhost:3000');
});

这个代码片段创建了一个 Express 应用程序，并添加了一个 GraphQL 中间件。GraphQL schema 定义了 User 类型、Query 类型和 Mutation 类型。GraphQL resolver 实现了查询和操作 User 数据的逻辑。我们还定义了一个 Sequelize 模型来连接 PostgreSQL 数据库。

现在，我们可以运行这个应用程序，并在浏览器中打开 http://localhost:3000/graphql。这将打开 GraphQL Playground，可以让我们测试 GraphQL 查询和操作。以下是一些示例查询和操作：

查询所有用户：

query {
  users {
    id
    name
    email
  }
}

查询单个用户：

query {
  user(id: 1) {
    id
    name
    email
  }
}

创建用户：

mutation {
  createUser(input: { name: "Alice", email: "alice@example.com", password: "password" }) {
    id
    name
    email
  }
}

更新用户：

mutation {
  updateUser(id: 1, input: { name: "Bob", email: "bob@example.com", password: "newpassword" }) {
    id
    name
    email
  }
}

删除用户：

mutation {
  deleteUser(id: 1)
}

总结

本文介绍了如何使用 GraphQL 和 PostgreSQL 构建全栈 Web 应用程序。我们使用 Node.js 创建了一个 GraphQL 服务器，并将其连接到 PostgreSQL 数据库。我们还学习了如何定义 GraphQL schema 和 resolver，并使用 Sequelize 实现了数据库连接和操作。这个示例程序可以帮助你更好地理解 GraphQL 和 PostgreSQL 的使用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/656ea8d0d2f5e1655d6dea70