GraphQL入门教程：构建更高效的APIs

GraphQL是一个用于API的查询语言，由Facebook于2015年公开发布。它允许客户端精确地指定它们需要从API获取哪些数据，从而使数据交换更加高效和强大。与传统的REST API相比，GraphQL提供了更加灵活和高效的方式来交互数据。

• 类型系统(Type System): GraphQL的类型系统允许定义复杂的数据结构，这些结构可用作API的契约。这种强类型的特性不仅能够确保数据的一致性，还可以通过自省(introspection)查询，为前端开发者提供一个明确和自文档化(self-documenting)的API。
• 查询(Query)与突变(Mutation): 查询用于获取数据，突变用于修改数据（包括创建、更新和删除）。GraphQL的这一设计哲学支持了数据的CRUD操作，同时保持了接口的简洁性。特别是，单一端点(single endpoint)的特性简化了前端的数据请求逻辑，无需记忆复杂的URL路径。
• 实时订阅(Subscription): GraphQL的订阅机制支持实时数据更新，这对于构建动态响应的用户界面至关重要，例如实时聊天应用或股票价格更新。

GraphQL的优势在于其灵活性和效率

1. 精确的数据获取：客户端可以精确指定它们需要哪些数据，避免了过度获取或数据不足的问题。
2. 单一请求：不同于REST API需要多个请求来获取多资源的数据，GraphQL可以通过单一请求聚合多种数据。
3. 强类型系统：GraphQL的类型系统和架构定义提供了清晰的API文档，使前后端开发更加一致且易于维护。

Spring Boot集成GraphQL

1、添加GraphQL依赖

<dependency><groupId>com.graphql-java-kickstart</groupId><artifactId>graphql-spring-boot-starter</artifactId><version>11.1.0</version>
</dependency>
<dependency><groupId>com.graphql-java-kickstart</groupId><artifactId>graphql-java-tools</artifactId><version>6.2.0</version>
</dependency>

2、定义GraphQL Schema

在src/main/resources/graphql/目录下创建.graphqls文件定义GraphQL模式。例如，user.graphqls：

type Query {userById(id: ID!): Userusers: [User!]!
}type Mutation {createUser(userInput: UserInput): UserupdateUser(id: ID!, userInput: UserInput): UserdeleteUser(id: ID!): Boolean
}input UserInput {name: String!email: String!age: Int
}type User {id: ID!name: String!email: String!age: Int
}

3、实现解析器

在Spring Boot项目中创建解析器，处理GraphQL操作：

@Component
public class UserResolver implements GraphQLQueryResolver, GraphQLMutationResolver {// 实现查询和突变方法@Autowiredprivate UserRepository userRepository; public User userById(String id) {return userRepository.findById(id);}public List<User> users() {return userRepository.findAll();}public User createUser(UserInput input) {return userRepository.save(new User(input.getName(), input.getEmail(), input.getAge()));}public User updateUser(String id, UserInput input) {return userRepository.update(id, input);}public boolean deleteUser(String id) {return userRepository.delete(id);}
}

React集成GraphQL

1、添加Apollo Client依赖

安装必要的包来在React项目中使用Apollo Client：

yarn add @apollo/client graphql

2、配置Apollo Client

在src/app.ts或你的入口文件中设置Apollo Client：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';const client = new ApolloClient({uri: 'http://localhost:8080/graphql',cache: new InMemoryCache(),
});ReactDOM.render(<React.StrictMode><ApolloProvider client={client}><App /></ApolloProvider></React.StrictMode>,document.getElementById('root')
);

3、构建UI组件

创建React组件来进行用户的增、删、改、查操作，使用useQuery和useMutation钩子与GraphQL交互。

1. 创建用户列表组件：

   使用useQuery钩子获取用户列表：

   import { useQuery, gql } from '@apollo/client';const GET_USERS = gql`query GetUsers {users {idnameemailage}}
   `;function Users() {const { loading, error, data } = useQuery(GET_USERS);if (loading) return <p>Loading...</p>;if (error) return <p>Error :(</p>;return (<div>{data.users.map(({ id, name, email, age }) => (<div key={id}><p>{`${name} (${email}) - Age: ${age}`}</p></div>))}</div>);
   }
   

2. 创建增、删、改操作的React组件：

   使用useMutation钩子来创建、更新和删除用户。这里是一个创建用户的示例：

   import { useMutation, gql } from '@apollo/client';const CREATE_USER = gql`mutation CreateUser($userInput: UserInput!) {createUser(userInput: $userInput) {idname}}
   `;function AddUser() {let input;const [createUser, { data }] = useMutation(CREATE_USER);return (<div><formonSubmit={e => {e.preventDefault();createUser({ variables: { userInput: { name: input.value, email: "email@example.com", age: 30 } } });input.value = '';}}><inputref={node => {input = node;}}/><button type="submit">Add User</button></form></div>);
   }