使用 GraphQL 和 MySQL 构建高可用性 Web 应用-JavaScript中文网-JavaScript教程资源分享门户

引言

随着 Web 应用的不断发展，前端技术也随之不断进步。在过去，前端应用主要是通过 RESTful API 与后端进行通信，但是 RESTful API 存在一些缺点，例如需要多次请求才能获取到完整的数据、无法限制返回的数据等。GraphQL 应运而生，它可以解决这些问题并提供更好的 API 设计方式。

MySQL 是一种流行的关系型数据库，它使用 SQL 语言进行数据操作，被广泛应用于 Web 应用的后端。在本文中，我们将介绍如何使用 GraphQL 和 MySQL 构建高可用性的 Web 应用。

GraphQL 简介

GraphQL 是一种用于 API 设计的查询语言和运行时环境。它的主要设计目标是提供一种更加高效、强大和灵活的 API 设计方式。GraphQL 具有以下特点：

可以精确地指定需要返回的数据，避免了 RESTful API 中需要多次请求才能获取到完整的数据的问题。
支持类型系统，可以定义数据类型和接口，使得 API 设计更加清晰和易于维护。
支持多种数据源，可以方便地集成多种数据源，例如 MySQL、MongoDB 等。

GraphQL 的查询语言非常简洁，例如下面的查询：

{
  user(id: 123) {
    name
    email
  }
}

这个查询会返回 ID 为 123 的用户的姓名和邮箱。在 RESTful API 中，可能需要多次请求才能获取到这些数据。

MySQL 简介

MySQL 是一种流行的关系型数据库，它使用 SQL 语言进行数据操作。MySQL 具有以下特点：

支持 ACID 事务，保证数据的一致性和完整性。
支持多种数据类型和索引，可以根据不同的需求进行优化。
支持多种存储引擎，例如 InnoDB、MyISAM 等。

MySQL 的数据操作非常灵活，例如下面的 SQL 语句：

SELECT name, email FROM users WHERE id = 123;

这个 SQL 语句会返回 ID 为 123 的用户的姓名和邮箱。

使用 GraphQL 和 MySQL 构建 Web 应用

下面我们将介绍如何使用 GraphQL 和 MySQL 构建高可用性的 Web 应用。我们将使用 Node.js 和 GraphQL Yoga 作为后端，使用 React 和 Apollo Client 作为前端。

后端

首先，我们需要安装 Node.js 和 MySQL，并创建一个数据库和一个表。假设我们创建了一个名为 webapp 的数据库，其中包含一个名为 users 的表，该表包含 id、name 和 email 三个字段。

接下来，我们可以使用 GraphQL Yoga 创建一个 GraphQL 服务器。GraphQL Yoga 是一个基于 Express 和 GraphQL 的库，提供了易于使用的 API，并且支持实时数据传输。

首先，我们需要安装 GraphQL Yoga：

npm install graphql-yoga

然后，我们可以创建一个 index.js 文件，该文件包含以下代码：

const { GraphQLServer } = require('graphql-yoga');
const mysql = require('mysql');

const db = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '',
  database: 'webapp'
});

db.connect((err) => {
  if (err) throw err;
  console.log('Connected to MySQL database');
});

const typeDefs = `
  type Query {
    user(id: ID!): User
  }

  type User {
    id: ID!
    name: String!
    email: String!
  }
`;

const resolvers = {
  Query: {
    user: (_, { id }) => {
      return new Promise((resolve, reject) => {
        db.query(`SELECT * FROM users WHERE id = ${id}`, (err, results) => {
          if (err) return reject(err);
          resolve(results[0]);
        });
      });
    }
  }
};

const server = new GraphQLServer({ typeDefs, resolvers });
server.start(() => console.log('Server is running on http://localhost:4000'));

这个文件定义了一个 user 查询，该查询接受一个 id 参数，并返回 ID 为该参数的用户的姓名和邮箱。我们使用 mysql 模块连接到 MySQL 数据库，并在 user 查询中执行 SQL 语句。

接下来，我们可以运行该服务器：

node index.js

现在，我们可以使用 GraphQL Playground 工具测试该服务器。在浏览器中打开 http://localhost:4000，即可打开 GraphQL Playground。

在 GraphQL Playground 中，我们可以输入以下查询：

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

这个查询会返回 ID 为 1 的用户的姓名和邮箱。如果一切正常，服务器会返回以下结果：

{
  "data": {
    "user": {
      "name": "Alice",
      "email": "alice@example.com"
    }
  }
}

前端

现在，我们已经成功地创建了一个 GraphQL 服务器，并且可以通过查询获取用户数据。接下来，我们将创建一个前端应用，使用 Apollo Client 从服务器获取数据。

首先，我们需要安装 React 和 Apollo Client：

npm install react apollo-boost react-apollo graphql

然后，我们可以创建一个 index.js 文件，该文件包含以下代码：

import React from 'react';
import ReactDOM from 'react-dom';
import ApolloClient from 'apollo-boost';
import { ApolloProvider, Query } from 'react-apollo';
import gql from 'graphql-tag';

const client = new ApolloClient({
  uri: 'http://localhost:4000'
});

const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      name
      email
    }
  }
`;

const App = () => (
  <ApolloProvider client={client}>
    <Query query={GET_USER} variables={{ id: 1 }}>
      {({ loading, error, data }) => {
        if (loading) return <p>Loading...</p>;
        if (error) return <p>Error :(</p>;

        return (
          <div>
            <p>Name: {data.user.name}</p>
            <p>Email: {data.user.email}</p>
          </div>
        );
      }}
    </Query>
  </ApolloProvider>
);

ReactDOM.render(<App />, document.getElementById('root'));

这个文件定义了一个 GET_USER 查询，该查询接受一个 id 参数，并返回 ID 为该参数的用户的姓名和邮箱。我们使用 ApolloProvider 和 Query 组件从 GraphQL 服务器获取数据，并使用 gql 模板字符串定义查询。

接下来，我们可以运行该前端应用：

npm start

现在，我们可以在浏览器中打开 http://localhost:3000，即可看到该前端应用。

该应用会自动从 GraphQL 服务器获取 ID 为 1 的用户的姓名和邮箱，并显示在页面上。如果一切正常，页面会显示以下内容：

Name: Alice
Email: alice@example.com

总结

在本文中，我们介绍了如何使用 GraphQL 和 MySQL 构建高可用性的 Web 应用。我们使用 Node.js 和 GraphQL Yoga 作为后端，使用 React 和 Apollo Client 作为前端。通过这个示例，我们可以了解到 GraphQL 和 MySQL 的基本使用方法，并了解到如何将它们集成到 Web 应用中。希望本文对您有帮助。

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