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

2024-04-03 19:12

本文主要是介绍GraphQL入门教程:构建更高效的APIs,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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组件来进行用户的增、删、改、查操作,使用useQueryuseMutation钩子与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>);
    }
    

这篇关于GraphQL入门教程:构建更高效的APIs的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/873746

相关文章

MySQL重复数据处理的七种高效方法

《MySQL重复数据处理的七种高效方法》你是不是也曾遇到过这样的烦恼:明明系统测试时一切正常,上线后却频频出现重复数据,大批量导数据时,总有那么几条不听话的记录导致整个事务莫名回滚,今天,我就跟大家分... 目录1. 重复数据插入问题分析1.1 问题本质1.2 常见场景图2. 基础解决方案:使用异常捕获3.

使用Python构建一个Hexo博客发布工具

《使用Python构建一个Hexo博客发布工具》虽然Hexo的命令行工具非常强大,但对于日常的博客撰写和发布过程,我总觉得缺少一个直观的图形界面来简化操作,下面我们就来看看如何使用Python构建一个... 目录引言Hexo博客系统简介设计需求技术选择代码实现主框架界面设计核心功能实现1. 发布文章2. 加

如何高效移除C++关联容器中的元素

《如何高效移除C++关联容器中的元素》关联容器和顺序容器有着很大不同,关联容器中的元素是按照关键字来保存和访问的,而顺序容器中的元素是按它们在容器中的位置来顺序保存和访问的,本文介绍了如何高效移除C+... 目录一、简介二、移除给定位置的元素三、移除与特定键值等价的元素四、移除满足特android定条件的元

基于Python实现高效PPT转图片工具

《基于Python实现高效PPT转图片工具》在日常工作中,PPT是我们常用的演示工具,但有时候我们需要将PPT的内容提取为图片格式以便于展示或保存,所以本文将用Python实现PPT转PNG工具,希望... 目录1. 概述2. 功能使用2.1 安装依赖2.2 使用步骤2.3 代码实现2.4 GUI界面3.效

Java图片压缩三种高效压缩方案详细解析

《Java图片压缩三种高效压缩方案详细解析》图片压缩通常涉及减少图片的尺寸缩放、调整图片的质量(针对JPEG、PNG等)、使用特定的算法来减少图片的数据量等,:本文主要介绍Java图片压缩三种高效... 目录一、基于OpenCV的智能尺寸压缩技术亮点:适用场景:二、JPEG质量参数压缩关键技术:压缩效果对比

C#使用SQLite进行大数据量高效处理的代码示例

《C#使用SQLite进行大数据量高效处理的代码示例》在软件开发中,高效处理大数据量是一个常见且具有挑战性的任务,SQLite因其零配置、嵌入式、跨平台的特性,成为许多开发者的首选数据库,本文将深入探... 目录前言准备工作数据实体核心技术批量插入:从乌龟到猎豹的蜕变分页查询:加载百万数据异步处理:拒绝界面

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战:从入门到进阶优化1. MyBatis

一文详解如何从零构建Spring Boot Starter并实现整合

《一文详解如何从零构建SpringBootStarter并实现整合》SpringBoot是一个开源的Java基础框架,用于创建独立、生产级的基于Spring框架的应用程序,:本文主要介绍如何从... 目录一、Spring Boot Starter的核心价值二、Starter项目创建全流程2.1 项目初始化(

使用Java实现通用树形结构构建工具类

《使用Java实现通用树形结构构建工具类》这篇文章主要为大家详细介绍了如何使用Java实现通用树形结构构建工具类,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录完整代码一、设计思想与核心功能二、核心实现原理1. 数据结构准备阶段2. 循环依赖检测算法3. 树形结构构建4. 搜索子

SpringBoot使用OkHttp完成高效网络请求详解

《SpringBoot使用OkHttp完成高效网络请求详解》OkHttp是一个高效的HTTP客户端,支持同步和异步请求,且具备自动处理cookie、缓存和连接池等高级功能,下面我们来看看SpringB... 目录一、OkHttp 简介二、在 Spring Boot 中集成 OkHttp三、封装 OkHttp