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

相关文章

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

使用Python和python-pptx构建Markdown到PowerPoint转换器

《使用Python和python-pptx构建Markdown到PowerPoint转换器》在这篇博客中,我们将深入分析一个使用Python开发的应用程序,该程序可以将Markdown文件转换为Pow... 目录引言应用概述代码结构与分析1. 类定义与初始化2. 事件处理3. Markdown 处理4. 转

使用Python高效获取网络数据的操作指南

《使用Python高效获取网络数据的操作指南》网络爬虫是一种自动化程序,用于访问和提取网站上的数据,Python是进行网络爬虫开发的理想语言,拥有丰富的库和工具,使得编写和维护爬虫变得简单高效,本文将... 目录网络爬虫的基本概念常用库介绍安装库Requests和BeautifulSoup爬虫开发发送请求解

Java使用Mail构建邮件功能的完整指南

《Java使用Mail构建邮件功能的完整指南》JavaMailAPI是一个功能强大的工具,它可以帮助开发者轻松实现邮件的发送与接收功能,本文将介绍如何使用JavaMail发送和接收邮件,希望对大家有所... 目录1、简述2、主要特点3、发送样例3.1 发送纯文本邮件3.2 发送 html 邮件3.3 发送带

Python结合Flask框架构建一个简易的远程控制系统

《Python结合Flask框架构建一个简易的远程控制系统》这篇文章主要为大家详细介绍了如何使用Python与Flask框架构建一个简易的远程控制系统,能够远程执行操作命令(如关机、重启、锁屏等),还... 目录1.概述2.功能使用系统命令执行实时屏幕监控3. BUG修复过程1. Authorization

C++实现回文串判断的两种高效方法

《C++实现回文串判断的两种高效方法》文章介绍了两种判断回文串的方法:解法一通过创建新字符串来处理,解法二在原字符串上直接筛选判断,两种方法都使用了双指针法,文中通过代码示例讲解的非常详细,需要的朋友... 目录一、问题描述示例二、解法一:将字母数字连接到新的 string思路代码实现代码解释复杂度分析三、