GraphQL

已于 2024-08-27 15:06:51 修改
阅读量515 收藏 12
点赞数 20
文章标签： graphql
于 2024-08-27 14:41:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_55046209/article/details/141602499
版权

GraphQL

GraphQL 是一种用于请求和操作数据的查询语言，与传统的 REST API 不同，GraphQL 允许客户端精确指定所需的数据。想象一下你去餐厅点餐，REST API 更像是套餐，给你一整套固定的菜品，而 GraphQL 则像自助餐，你可以根据自己的喜好，按需选择你想要的菜。这样不仅可以避免不必要的数据传输，也让前端开发更为灵活和高效。

1. 如何使用 GraphQL

工具和步骤：

  1. 搭建 GraphQL 服务：

    • 使用 Apollo Server（Node.js）：
      1. 安装 Node.js（如果未安装）：Node.js 官网
      2. 创建一个新项目：
        mkdir graphql-example
cd graphql-example
npm init -y
      3. 安装 Apollo Server 和 GraphQL：
        npm install apollo-server graphql
      4. 编写 GraphQL 服务器代码：
        在项目根目录创建 index.js，并添加以下代码：
        const { ApolloServer, gql } = require('apollo-server');

// 定义 Schema，描述数据模型
const typeDefs = gql`
  type Book {
    title: String
    author: String
  }

  type Query {
    books: [Book]
  }
`;

// 定义 Resolvers，处理查询请求
const resolvers = {
  Query: {
    books: () => [
      { title: 'The Awakening', author: 'Kate Chopin' },
      { title: 'City of Glass', author: 'Paul Auster' },
    ],
  },
};

// 创建 Apollo Server 实例
const server = new ApolloServer({ typeDefs, resolvers });

// 启动服务器
server.listen().then(({ url }) => {
  console.log(`Server ready at ${url}`);
});
      5. 启动服务器：
        node index.js
        服务器启动后，你会看到一个 URL（例如 http://localhost:4000/），可以在浏览器中访问该 URL，使用内置的 GraphQL Playground 进行查询测试。

  2. 使用 GraphQL 客户端：

    • 在前端使用 Apollo Client：

      1. 安装 Apollo Client：

        npm install @apollo/client graphql

      2. 创建 React 项目并配置 Apollo Client：

        import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloProvider, InMemoryCache, ApolloClient } from '@apollo/client';
import App from './App';

const client = new ApolloClient({
  uri: 'http://localhost:4000/',  // 指向 GraphQL 服务器的 URL
  cache: new InMemoryCache()
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
);

      3. 编写查询请求：
        在 App.js 中编写一个简单的查询请求：

        import React from 'react';
import { useQuery, gql } from '@apollo/client';

// 定义 GraphQL 查询
const GET_BOOKS = gql`
  query GetBooks {
    books {
      title
      author
    }
  }
`;

function App() {
  // 使用 useQuery 钩子执行查询
  const { loading, error, data } = useQuery(GET_BOOKS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  // 渲染查询结果
  return data.books.map(({ title, author }) => (
    <div key={title}>
      <p>
        {title} by {author}
      </p>
    </div>
  ));
}

export default App;

        这样，前端可以根据需要从 GraphQL 服务器获取数据，并渲染到页面上。

2. 如何学习 GraphQL

  1. 基础概念学习：

    • Schema：学习 GraphQL Schema，了解如何定义数据结构。
    • Resolvers：学习如何编写 Resolvers 以处理查询和变更请求。
    • Queries 和 Mutations：理解如何使用查询获取数据，如何使用变更修改数据。

  2. 动手实践：

    • 创建简单的 GraphQL 服务：从简单的增删改查入手，如一个用户管理系统，可以增删查用户信息。
    • 前端集成：使用 Apollo Client 或 Relay 将 GraphQL 集成到前端应用中，练习如何进行查询和变更操作。

  3. 深入理解：

    • 复杂查询：尝试编写带有参数的复杂查询、分页、过滤等。
    • 安全与认证：学习如何在 GraphQL 中实现认证、权限控制，保护数据安全。

  4. 实际项目应用：

    • 优化性能：学习如何优化 GraphQL 查询，减少服务器负担。
    • 错误处理：理解如何处理和返回错误信息。

3. 需要注意什么（要点）

使用 GraphQL 需要注意的要点：

  1. 查询性能：客户端可以请求非常多的数据，可能导致服务器负载过重，因此需要对查询进行适当限制，例如设置深度限制、复杂度限制等。

  2. 安全性：由于查询的灵活性，需要特别注意数据泄露的风险。可以通过权限验证来确保用户只能访问他们有权限的数据。

  3. 缓存机制：GraphQL 本身不带有缓存机制，建议在客户端和服务器端引入缓存策略以提高性能，避免不必要的查询。

  4. 版本控制：传统 REST API 通过 URL 进行版本控制，而 GraphQL 中一般通过字段或查询模式进行版本控制，保持 API 的向后兼容性。

4. 应用场景

  1. 社交媒体平台：

    • 允许客户端获取一个用户的信息及其发布的所有帖子。
    • 示例代码：
      query {
  user(id: "1") {
    id
    name
    posts {
      title
      content
    }
  }
}
    • 说明：
      此查询返回用户的 id、name 以及他们发布的所有 posts（包含 title 和 content）。

  2. 电商网站：

    • 获取产品列表，并根据用户选择的条件筛选出符合要求的产品。
    • 示例代码：
      query GetProducts($minPrice: Float, $maxPrice: Float) {
  products(filter: { minPrice: $minPrice, maxPrice: $maxPrice }) {
    id
    name
    price
  }
}
    • 说明：
      此查询使用了参数 minPrice 和 maxPrice 来筛选产品，返回符合条件的产品 id、name 和 price。

5. 举例说明

  1. GraphQL 服务端代码：

    const { ApolloServer, gql } = require('apollo-server');

// 定义数据结构（Schema），包括 Book 类型和查询类型
const typeDefs = gql`
  type Book {
    id: ID
    title: String
    author: String
  }

  type Query {
    books: [Book]   // 查询返回一个 Book 类型的数组
    book(id: ID!): Book  // 查询返回一个特定的 Book 类型
  }

  type Mutation {
    addBook(title: String!, author: String!): Book  // 添加一本书，返回添加的书籍信息
  }
`;

// 模拟数据库
let books = [
  { id: '1', title: '1984', author: 'George Orwell' },
  { id: '2', title: 'Brave New World', author: 'Aldous Huxley' },
];

// 定义解析器（Resolvers），处理查询和变更
const resolvers = {
  Query: {
    books: () => books,  // 返回所有书籍
    book: (parent, args) => books.find(book => book.id === args.id),  // 根据 ID 查找特定书籍
  },
  Mutation: {
    addBook: (parent, args) => {
      const newBook = {
        id: `${books.length + 1}`,
        title: args.title,
        author: args.author
      };
      books.push(newBook);  // 将新书籍添加到数组中
      return newBook;  // 返回添加的书籍信息
    }
  }
};

// 创建并启动 Apollo Server
const server = new ApolloServer({ typeDefs, resolvers });
server.listen().

工具

1. Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它可以在服务器端运行 JavaScript 代码。Node.js 使得 JavaScript 不再局限于浏览器，可以用于开发服务器端应用，比如 web 服务器、API 等。

  • 安装与配置：

    • 下载并安装 Node.js：Node.js 官网
    • 安装完成后，可以使用终端运行 node -v 检查版本，确认安装成功。

  • 学习基础：

  • 动手实践：

    • 创建一个简单的 HTTP 服务器：
      const http = require('http');

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World\n');
});

server.listen(3000, () => {
  console.log('Server running at http://localhost:3000/');
});

2. Apollo Server

Apollo Server 是一个开源的 GraphQL 服务器库，它使得在 Node.js 中构建 GraphQL API 变得简单。Apollo Server 处理 GraphQL 查询、变更、订阅等请求，并且与多种数据源（如数据库、REST API）集成良好。

  • 安装与配置：

    • 安装 Apollo Server：
      npm install apollo-server graphql

  • 学习基础：

  • 动手实践：

    • 创建一个简单的 Apollo Server 实例：
      const { ApolloServer, gql } = require('apollo-server');

const typeDefs = gql`
  type Query {
    hello: String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
};

const server = new ApolloServer({ typeDefs, resolvers });

server.listen().then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

3. Apollo Client

Apollo Client 是一个用于在前端应用中与 GraphQL API 进行交互的库。它提供了强大的功能，如查询缓存、乐观更新、错误处理等，使得在 React、Angular 或 Vue.js 等框架中使用 GraphQL 变得简单。

  • 安装与配置：

    • 在 React 项目中安装 Apollo Client：
      npm install @apollo/client graphql

  • 学习基础：

  • 动手实践：

    • 创建一个简单的查询组件：
      import React from 'react';
import { useQuery, gql } from '@apollo/client';

const GET_GREETING = gql`
  query GetGreeting {
    hello
  }
`;

function Greeting() {
  const { loading, error, data } = useQuery(GET_GREETING);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return <h1>{data.hello}</h1>;
}

export default Greeting;

4. Graphene

Graphene 是一个用于在 Python 中构建 GraphQL API 的库。它让开发者能够使用 Python 简单而快速地创建强大的 GraphQL 服务，特别适合与 Django 或 Flask 等框架集成。

  • 安装与配置：

    • 在 Python 项目中安装 Graphene：
      pip install graphene

  • 学习基础：

  • 动手实践：

    • 创建一个简单的 Graphene 服务：
      import graphene

class Query(graphene.ObjectType):
    hello = graphene.String(default_value="Hello world!")

schema = graphene.Schema(query=Query)

result = schema.execute('{ hello }')
print(result.data['hello'])

5. GraphQL Playground

GraphQL Playground 是一个交互式的开发环境，它允许开发者直接在浏览器中编写和测试 GraphQL 查询。与 Apollo Server 集成时，GraphQL Playground 通常作为默认的调试工具。

  • 安装与使用：

    • GraphQL Playground 通常是 Apollo Server 的默认配置，无需额外安装。启动 Apollo Server 后，在浏览器中访问 http://localhost:4000/，即可使用。

  • 学习基础：

  • 动手实践：

    • 在 GraphQL Playground 中编写并运行以下查询：
      query {
  books {
    title
    author
  }
}

6. Relay

Relay 是 Facebook 开发的一种用于 React 应用的 GraphQL 客户端库，专注于高效的数据查询和状态管理。与 Apollo Client 类似，Relay 也用于前端与 GraphQL API 的交互，但它更加注重性能优化和复杂的数据结构管理。

  • 安装与配置：

    • 在 React 项目中安装 Relay：
      npm install react-relay relay-runtime

  • 学习基础：

  • 动手实践：

    • 创建一个简单的 Relay 查询组件：
      import React from 'react';
import { graphql, QueryRenderer } from 'react-relay';
import environment from './environment';

const AppQuery = graphql`
  query AppQuery {
    viewer {
      id
      name
    }
  }
`;

function App() {
  return (
    <QueryRenderer
      environment={environment}
      query={AppQuery}
      render={({ error, props }) => {
        if (error) {
          return <div>Error!</div>;
        }
        if (!props) {
          return <div>Loading...</div>;
        }
        return <div>{props.viewer.name}</div>;
      }}
    />
  );
}

export default App;

7. MongoDB

MongoDB 是一种 NoSQL 数据库，使用 JSON 风格的文档存储数据，非常适合处理结构化或非结构化的大数据量。与传统的关系型数据库不同，MongoDB 提供了灵活的数据模型和强大的查询能力。

8. PostgreSQL

PostgreSQL 是一个功能强大且开源的关系型数据库管理系统。它以其丰富的特性和强大的性能而闻名，支持复杂的查询、事务处理、多版本并发控制（MVCC）等高级功能。

  • 安装与配置：

  • 学习基础：

  • 动手实践：

    • 使用 psql 创建一个新数据库和表，并插入一些数据：
      CREATE DATABASE mydatabase;
\c mydatabase
CREATE TABLE users (
  id SERIAL PRIMARY KEY,
  name VARCHAR(100),
  age INT
);
INSERT INTO users (name, age) VALUES ('Alice', 25);
SELECT * FROM users;
呆淋
关注
  • 20
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
GraphQL入门
王和平的第三个果园
08-01 508
GraphQL是由Facebook创造的用于描述复杂数据模型的一种查询语言。这里查询语言所指的并不是常规意义上的类似sql语句的查询语言，而是一种用于前后端数据查询方式的规范。
初识GraphQL
zhixin9001的博客
08-05 668
最近项目上接触到了GraphQL，但由于对其的理解很不足，应用的时候出现了很多问题和困扰。此外，GraphQL据说是为了替代RestFul，但在为数不多的实践中，GraphQL并没有像Docker、K8S那样带给人直观的颠覆性体验，可能随着使用经历的增加，会有新的体会吧。本文属入门性质，分两部分：GraphQL与RestFul、SQL、BFF的对比GraphQL基础。......
GraphQL 入门
weixin_42467874的博客
02-25 687
## GraphQL 入门 GraphQL 是一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时（类型系统由你的数据定义）。GraphQL 并没有和任何特定数据库或者存储引擎绑定，而是依靠你现有的代码和数据支撑。 一个 GraphQL 服务是通过定义类型和类型上的字段来创建的，然后给每个类型上的每个字段提供解析函数。例如，一个 GraphQL 服务告诉我们当前登录用户是 me，这个用户的名称可能像这样： ``` type Query { me: User } type Us.
graphql-php：GraphQL规范PHP7实现
01-30
GraphQL 这是基于JavaScript的PHP。 相关项目 要求 PHP版本> = 7.1 外部字符串 目录 安装 运行以下命令以通过Composer安装软件包： composer require digiaonline/graphql 例 这是一个简单的示例，演示了如何从...
graphql-loader:用于.graphql文档的Webpack加载器
05-02
用于Webpack的GraphQL加载程序 用于.graphql查询文档的Webpack加载器，具有对模式验证和片段定义的一流支持。 graphql-loader可与 ， 以及任何您想在前端提供GraphQL查询文档的地方配合使用。 安装 yarn add --dev ...
graphql-code-generator：一种用于基于GraphQL模式和GraphQL操作（querymutationsubscription）生成代码的工具，并灵活支持自定义插件
01-31
GraphQL代码生成器是一种可从GraphQL模式生成代码的工具。 无论是开发前端还是后端，都可以利用GraphQL代码生成器从GraphQL模式和GraphQL文档（查询/变异/订阅/片段）生成输出。 通过分析架构和文档并进行解析，...
graphql-java-annotations：Java的GraphQL注释
02-04
GraphQL-Java批注 是一个很棒的库，但是它的语法有点冗长。 该库为GraphQL模式定义提供了基于注释的语法。 如果您想使用使用graphql-java-annotations创建graphql spring引导服务器的工具，则可以查看库。 目录 ...
graphql-java-kickstart:使用graphql-java-kickstart的Spring Boot GraphQL端点
04-05
GraphQL是一种强大的API设计语言，它允许客户端精确地指定它们需要的数据，从而减少了网络请求的数量和数据冗余。在Java世界中，graphql-java-kickstart是一个流行的库，它为Spring Boot应用提供了一套全面的工具来...
WHAT - graphql 系列（一）
weixin_58540586的博客
08-23 654
GraphQL 是一种用于 API 的查询语言及其运行时环境，它提供了一种灵活的方式来获取和操作数据。与传统的 REST API 方式不同，GraphQL 允许客户端请求具体的数据结构，这样客户端只会收到它请求的数据，而不是固定的格式。以下是 GraphQL 的一些关键概念和功能，以及如何在项目中使用它。在服务器端，你需要定义 GraphQL 的 schema，描述数据类型和操作。id: ID!
WHAT - graphql 系列（二）- graphql-codegen
weixin_58540586的博客
08-23 543
是一个工具，用于生成 TypeScript 类型、查询和其他 GraphQL 相关代码。它可以大大简化 GraphQL 开发过程，提高开发效率和代码一致性。以下是如何使用来为你的项目生成 TypeScript 类型和其他代码的一些基本步骤和示例配置。可以极大地提高 GraphQL 项目的开发效率，通过自动生成类型和 hooks，帮助你减少重复代码和类型错误。你可以根据项目的实际需求和 GraphQL 服务的复杂性调整配置和生成的内容。
GraphQL：API开发的未来，重塑数据交互的艺术
2401_85743969的博客
08-24 404
GraphQL是一种查询语言，用于API运行时的查询和变更语言，以及一种使用现有数据定义来完全描述API的类型系统。使用GraphQL的类型语言定义数据结构。id: ID!
基于微信小程序奶茶点餐小程序设计与实现.docx
08-27
基于微信小程序奶茶点餐小程序设计与实现.docx
点火时序控制系统硬件设计毕业论文（设计）.doc
08-27
点火时序控制系统硬件设计毕业论文（设计）.doc
扫雷游戏 java课程设计（源码+论文）
最新发布
08-27
项目描述: 使用Java独立开发了一款高级扫雷游戏，具备自定义难度设置、智能化提示、实时计时和排行榜功能。通过面向对象设计模式实现了模块化代码结构，增强了程序的可维护性和扩展性。 主要功能: 自定义难度: 用户可以自由设置游戏的雷区大小和雷数。 智能提示: 提供智能化的地雷提示，提高游戏的趣味性与挑战性。 实时计时与排行榜: 实现了实时计时功能，并记录历史最佳成绩，增强用户体验。
springboot411箱包存储系统pf.zip
08-27
箱包存储系统可以对箱包存储系统信息进行集中管理，可以真正避免传统管理的缺陷。箱包存储系统是一款运用软件开发技术设计实现的应用系统，在信息处理上可以达到快速的目的，不管是针对数据添加，数据维护和统计，以及数据查询等处理要求，箱包存储系统都可以轻松应对。所以，箱包存储系统的运用是让箱包存储系统信息管理升级的最好方式。它可以实现信息处理的便利化要求，还可以规范信息处理的流程，让事务处理成为管理人员手中的一件简单事，而不是之前手工处理时的困难事。尽管箱包存储系统具备较完善的功能，但是也需要管理人员利用闲暇时间提升自身素质以及个人能力，在操作箱包存储系统时可以最大化运用箱包存储系统提供的功能，让系统在满足高效率处理数据的同时，也能始终稳定运行，还可以确保数据的可靠性与数据处理的质量。
驾驭数据洪流：深入MySQL API的数据访问与操作
08-27
MySQL是一个流行的开源关系型数据库管理系统（RDBMS），广泛用于Web应用程序的后端数据存储。它基于结构化查询语言（SQL）来管理数据，并且是LAMP（Linux, Apache, MySQL, PHP/Python/Perl）技术栈的一部分，这个技术栈常用于构建动态网站和Web应用程序。 MySQL的特点包括： - **开放源代码**：MySQL的源代码是公开的，任何人都可以自由使用和修改。 - **跨平台**：MySQL可以在多种操作系统上运行，包括Linux、Windows、macOS等。 - **高性能**：MySQL以其快速的查询处理和良好的性能而闻名。 - **可靠性**：MySQL提供了多种机制来确保数据的完整性和可靠性，包括事务支持、备份和恢复功能。 - **易于使用**：MySQL提供了简单直观的界面和丰富的文档，便于用户学习和使用。 - **可扩展性**：MySQL支持从小型应用到大型企业级应用的扩展。 - **社区支持**：由于其广泛的使用，MySQL拥有一个活跃的开发者社区，提供大量的资源和支持。 MySQL被广泛应用于各种场景，包括在线事务处理（OL
二叉排序树.c
08-27
二叉排序树.c
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值