在线阅读小说网站开发,杭州建设厅官网,住建城乡建设网站,优化软件GraphQL入门教程#xff1a;构建更高效的APIs
GraphQL是一个用于API的查询语言#xff0c;由Facebook于2015年公开发布。它允许客户端精确地指定它们需要从API获取哪些数据#xff0c;从而使数据交换更加高效和强大。与传统的REST API相比#xff0c;GraphQL提供了更加灵活…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的优势在于其灵活性和效率
精确的数据获取客户端可以精确指定它们需要哪些数据避免了过度获取或数据不足的问题。单一请求不同于REST API需要多个请求来获取多资源的数据GraphQL可以通过单一请求聚合多种数据。强类型系统GraphQL的类型系统和架构定义提供了清晰的API文档使前后端开发更加一致且易于维护。
Spring Boot集成GraphQL
1、添加GraphQL依赖
dependencygroupIdcom.graphql-java-kickstart/groupIdartifactIdgraphql-spring-boot-starter/artifactIdversion11.1.0/version
/dependency
dependencygroupIdcom.graphql-java-kickstart/groupIdartifactIdgraphql-java-tools/artifactIdversion6.2.0/version
/dependency2、定义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 ListUser 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 graphql2、配置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.StrictModeApolloProvider client{client}App //ApolloProvider/React.StrictMode,document.getElementById(root)
);3、构建UI组件
创建React组件来进行用户的增、删、改、查操作使用useQuery和useMutation钩子与GraphQL交互。 创建用户列表组件 使用useQuery钩子获取用户列表 import { useQuery, gql } from apollo/client;const GET_USERS gqlquery GetUsers {users {idnameemailage}}
;function Users() {const { loading, error, data } useQuery(GET_USERS);if (loading) return pLoading.../p;if (error) return pError :(/p;return (div{data.users.map(({ id, name, email, age }) (div key{id}p{${name} (${email}) - Age: ${age}}/p/div))}/div);
}创建增、删、改操作的React组件 使用useMutation钩子来创建、更新和删除用户。这里是一个创建用户的示例 import { useMutation, gql } from apollo/client;const CREATE_USER gqlmutation CreateUser($userInput: UserInput!) {createUser(userInput: $userInput) {idname}}
;function AddUser() {let input;const [createUser, { data }] useMutation(CREATE_USER);return (divformonSubmit{e {e.preventDefault();createUser({ variables: { userInput: { name: input.value, email: emailexample.com, age: 30 } } });input.value ;}}inputref{node {input node;}}/button typesubmitAdd User/button/form/div);
}
