GraphQL 是一种用于 API 的查询语言和运行时环境，由 Facebook 开发并开源。它提供了一种更高效、强大和灵活的方式来获取和修改数据，可以大大提高前端应用的开发效率和用户体验。
在本文中，我们将介绍 GraphQL 的基本概念、语法和用法，并提供一些示例代码和实践经验，帮助读者快速掌握如何使用 GraphQL 为前端应用提供数据。
什么是 GraphQL
GraphQL 是一种用于 API 的查询语言和运行时环境，它允许客户端指定需要的数据，而不是像 RESTful API 那样将所有数据都返回给客户端。GraphQL 的核心思想是“只返回客户端请求的数据”，这样可以避免网络传输过多的数据，提高响应速度和带宽利用率。
GraphQL 的主要特点包括：
- 客户端指定需要的数据，避免过度获取和传输数据
- 支持多个数据源和数据类型，可以聚合多个 API 的数据
- 可以定义和验证数据模型和查询规则，提高代码的可维护性和安全性
- 支持实时数据更新和订阅，可以实现实时通信和推送功能
GraphQL 的基本语法
GraphQL 的语法类似于 JSON，但是具有更高级的查询和操作功能。GraphQL 的基本语法包括以下几个部分：
查询
查询是用来获取数据的语句，它可以包含多个字段和参数，用逗号分隔。查询语句的格式如下：
// javascriptcn.com 代码示例
query {
fieldName1 {
subFieldName1
subFieldName2
...
}
fieldName2 {
subFieldName1
subFieldName2
...
}
...
}其中 query 是查询类型，fieldName 是需要查询的字段名，subFieldName 是需要查询的子字段名。查询可以嵌套，可以使用别名和变量来简化和优化查询语句。
变量
变量是用来传递参数的值，以 $ 开头，后面跟变量名和类型。变量的值可以在查询语句中使用，用 : 分隔。变量的格式如下：
query ($varName: varType) {
fieldName (argName: $varName) {
subFieldName
...
}
}其中 varName 是变量名，varType 是变量类型，argName 是参数名，$varName 是变量的值。
操作
操作是用来修改数据的语句，它包括创建、更新和删除等操作。操作语句的格式如下：
// javascriptcn.com 代码示例
mutation {
operationName (input: {
fieldName1: value1
fieldName2: value2
...
}) {
fieldName1
fieldName2
...
}
}其中 mutation 是操作类型，operationName 是操作名，input 是操作的输入参数，fieldName 是需要查询的字段名。
如何使用 GraphQL
使用 GraphQL 可以分为以下几个步骤：
1. 定义数据模型
首先需要定义数据模型，包括数据类型、字段名、字段类型、关联关系等。可以使用 GraphQL 的类型系统来定义数据模型，例如：
// javascriptcn.com 代码示例
type User {
id: ID!
name: String!
email: String!
posts: [Post!]!
}
type Post {
id: ID!
title: String!
content: String!
author: User!
}其中 User 和 Post 是数据类型，id、name、email、title、content 是字段名，ID、String 是字段类型，! 表示非空，[Post!]! 表示数组类型。
2. 定义 API
然后需要定义 API，包括查询和操作。可以使用 GraphQL 的语法来定义 API，例如：
// javascriptcn.com 代码示例
type Query {
users: [User!]!
user(id: ID!): User
posts: [Post!]!
post(id: ID!): Post
}
type Mutation {
createUser(name: String!, email: String!): User!
updateUser(id: ID!, name: String!, email: String!): User!
deleteUser(id: ID!): User!
createPost(title: String!, content: String!, authorId: ID!): Post!
updatePost(id: ID!, title: String!, content: String!): Post!
deletePost(id: ID!): Post!
}其中 Query 和 Mutation 是 API 类型，users、user、posts、post、createUser、updateUser、deleteUser、createPost、updatePost、deletePost 是 API 名称，后面跟参数和返回值类型。
3. 实现 API
然后需要实现 API，包括查询和操作。可以使用任何编程语言和框架来实现 API，只需要遵循 GraphQL 的规范和语法。例如，使用 Node.js + Express + GraphQL 来实现 API：
// javascriptcn.com 代码示例
const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');
const schema = buildSchema(`
type User {
id: ID!
name: String!
email: String!
posts: [Post!]!
}
type Post {
id: ID!
title: String!
content: String!
author: User!
}
type Query {
users: [User!]!
user(id: ID!): User
posts: [Post!]!
post(id: ID!): Post
}
type Mutation {
createUser(name: String!, email: String!): User!
updateUser(id: ID!, name: String!, email: String!): User!
deleteUser(id: ID!): User!
createPost(title: String!, content: String!, authorId: ID!): Post!
updatePost(id: ID!, title: String!, content: String!): Post!
deletePost(id: ID!): Post!
}
`);
const root = {
users: () => {
// return all users
},
user: ({ id }) => {
// return user by id
},
posts: () => {
// return all posts
},
post: ({ id }) => {
// return post by id
},
createUser: ({ name, email }) => {
// create user with name and email
},
updateUser: ({ id, name, email }) => {
// update user by id with name and email
},
deleteUser: ({ id }) => {
// delete user by id
},
createPost: ({ title, content, authorId }) => {
// create post with title, content and author id
},
updatePost: ({ id, title, content }) => {
// update post by id with title and content
},
deletePost: ({ id }) => {
// delete post by id
},
};
const app = express();
app.use('/graphql', graphqlHTTP({
schema,
rootValue: root,
graphiql: true,
}));
app.listen(3000, () => {
console.log('Server started on port 3000');
});其中 buildSchema 是用来定义数据模型和 API 的函数，graphqlHTTP 是用来处理 HTTP 请求和响应的函数，schema 是数据模型和 API 的定义，root 是 API 的实现。
4. 调用 API
最后需要调用 API，可以使用任何客户端库和框架来调用 API，只需要遵循 GraphQL 的规范和语法。例如，使用 React + Apollo 来调用 API：
// javascriptcn.com 代码示例
import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
const client = new ApolloClient({
uri: 'http://localhost:3000/graphql',
cache: new InMemoryCache(),
});
client
.query({
query: gql`
query {
users {
id
name
email
posts {
id
title
content
}
}
}
`,
})
.then((result) => console.log(result));其中 ApolloClient 是用来创建客户端的函数，InMemoryCache 是用来缓存数据的类，gql 是用来定义查询语句的函数，query 是用来发送查询请求的方法。
示例代码
以下是一个完整的示例代码，演示如何使用 GraphQL 为前端应用提供数据。
1. 定义数据模型
// javascriptcn.com 代码示例
type User {
id: ID!
name: String!
email: String!
posts: [Post!]!
}
type Post {
id: ID!
title: String!
content: String!
author: User!
}2. 定义 API
// javascriptcn.com 代码示例
type Query {
users: [User!]!
user(id: ID!): User
posts: [Post!]!
post(id: ID!): Post
}
type Mutation {
createUser(name: String!, email: String!): User!
updateUser(id: ID!, name: String!, email: String!): User!
deleteUser(id: ID!): User!
createPost(title: String!, content: String!, authorId: ID!): Post!
updatePost(id: ID!, title: String!, content: String!): Post!
deletePost(id: ID!): Post!
}3. 实现 API
// javascriptcn.com 代码示例
const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');
const schema = buildSchema(`
type User {
id: ID!
name: String!
email: String!
posts: [Post!]!
}
type Post {
id: ID!
title: String!
content: String!
author: User!
}
type Query {
users: [User!]!
user(id: ID!): User
posts: [Post!]!
post(id: ID!): Post
}
type Mutation {
createUser(name: String!, email: String!): User!
updateUser(id: ID!, name: String!, email: String!): User!
deleteUser(id: ID!): User!
createPost(title: String!, content: String!, authorId: ID!): Post!
updatePost(id: ID!, title: String!, content: String!): Post!
deletePost(id: ID!): Post!
}
`);
const users = [
{ id: '1', name: 'Alice', email: 'alice@example.com', posts: [] },
{ id: '2', name: 'Bob', email: 'bob@example.com', posts: [] },
{ id: '3', name: 'Charlie', email: 'charlie@example.com', posts: [] },
];
const posts = [
{ id: '1', title: 'GraphQL 101', content: 'Introduction to GraphQL', author: users[0] },
{ id: '2', title: 'GraphQL 201', content: 'Advanced GraphQL Techniques', author: users[1] },
{ id: '3', title: 'GraphQL 301', content: 'Real-world GraphQL Applications', author: users[2] },
];
const root = {
users: () => users,
user: ({ id }) => users.find(user => user.id === id),
posts: () => posts,
post: ({ id }) => posts.find(post => post.id === id),
createUser: ({ name, email }) => {
const user = { id: String(users.length + 1), name, email, posts: [] };
users.push(user);
return user;
},
updateUser: ({ id, name, email }) => {
const user = users.find(user => user.id === id);
if (!user) throw new Error(`User not found: ${id}`);
user.name = name;
user.email = email;
return user;
},
deleteUser: ({ id }) => {
const userIndex = users.findIndex(user => user.id === id);
if (userIndex < 0) throw new Error(`User not found: ${id}`);
const user = users.splice(userIndex, 1)[0];
return user;
},
createPost: ({ title, content, authorId }) => {
const post = { id: String(posts.length + 1), title, content, author: users.find(user => user.id === authorId) };
posts.push(post);
post.author.posts.push(post);
return post;
},
updatePost: ({ id, title, content }) => {
const post = posts.find(post => post.id === id);
if (!post) throw new Error(`Post not found: ${id}`);
post.title = title;
post.content = content;
return post;
},
deletePost: ({ id }) => {
const postIndex = posts.findIndex(post => post.id === id);
if (postIndex < 0) throw new Error(`Post not found: ${id}`);
const post = posts.splice(postIndex, 1)[0];
post.author.posts.splice(post.author.posts.findIndex(post => post.id === id), 1);
return post;
},
};
const app = express();
app.use('/graphql', graphqlHTTP({
schema,
rootValue: root,
graphiql: true,
}));
app.listen(3000, () => {
console.log('Server started on port 3000');
});4. 调用 API
// javascriptcn.com 代码示例
import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
const client = new ApolloClient({
uri: 'http://localhost:3000/graphql',
cache: new InMemoryCache(),
});
client
.query({
query: gql`
query {
users {
id
name
email
posts {
id
title
content
}
}
}
`,
})
.then((result) => console.log(result));总结
本文介绍了如何使用 GraphQL 为前端应用提供数据，包括定义数据模型、定义 API、实现 API 和调用 API 等步骤。GraphQL 的核心思想是“只返回客户端请求的数据”，它可以大大提高前端应用的开发效率和用户体验。GraphQL 的主要特点包括客户端指定需要的数据、支持多个数据源和数据类型、可以定义和验证数据模型和查询规则、支持实时数据更新和订阅等功能。GraphQL 可以使用任何编程语言和框架来实现 API，可以使用任何客户端库和框架来调用 API。GraphQL 是一种非常强大和灵活的技术，值得前端开发者深入学习和实践。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6569ba34d2f5e1655d247703