搜索
首页web前端js教程GraphQL 在现代 Web 应用程序中的应用和优势
GraphQL 在现代 Web 应用程序中的应用和优势
DDD
DDD
Dec 23, 2024 pm 06:58 PM

Applications and Advantages of GraphQL in Modern Web Applications

GraphQL 是一种现代 API 查询语言，广泛应用于现代 Web 应用程序中，因为它提供了一种高效、灵活且强大的获取数据的方式

GraphQL 基本快速应用示例：

1.后端设置（使用graphql-yoga）

首先，我们需要创建一个 GraphQL 服务器。安装 graphql-yoga 并创建一个简单的 GraphQL 模式：

npm init -y
npm install graphql yoga graphql-yoga

# server.js
const { GraphQLServer } = require('graphql-yoga');

const typeDefs = `
  type Query {
    hello: String
  }

  type Mutation {
    addMessage(message: String!): String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
  Mutation: {
    addMessage: (_, { message }) => `You added the message "${message}"`,
  },
};

const server = new GraphQLServer({ typeDefs, resolvers });
server.start(() => console.log(`Server is running on http://localhost:4000`));

2.前端设置（使用Apollo Client）

接下来，我们需要在前端应用程序中配置 Apollo Client 来与我们的 GraphQL 服务器通信：

npm install apollo-boost @apollo/client graphql

# client.js
import ApolloClient from 'apollo-boost';
import { InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache(),
});

export default client;

3.编写前端组件

现在，我们在React组件中使用Apollo Client来执行查询和突变：

// App.js
import React from 'react';
import { gql, useQuery, useMutation } from '@apollo/client';
import client from './client';

const GET_HELLO = gql`
  query GetHello {
    hello
  }
`;

const ADD_MESSAGE_MUTATION = gql`
  mutation AddMessage($message: String!) {
    addMessage(message: $message)
  }
`;

function App() {
  const { loading, error, data } = useQuery(GET_HELLO);
  const [addMessage, { data: mutationData }] = useMutation(ADD_MESSAGE_MUTATION);

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

  return (
    <div>
      <h1 id="data-hello">{data.hello}</h1>
      <button onclick="{()"> addMessage({ variables: { message: 'Hello from frontend!' } })}>
        Add Message
      </button>
      {mutationData && <p>New message: {mutationData.addMessage}</p>}
    </div>
  );
}
export default App;

我们创建一个 GET_HELLO 查询来获取服务器的问候语并将其显示在页面上。同时，我们定义了一个ADD_MESSAGE_MUTATION突变操作，当用户点击按钮时，它会向服务器发送一条新消息。

4. 运行应用程序

启动后端服务器：

node server.js

然后启动前端应用程序，假设创建React App：

npm start

GraphQL 基本查询

1. 查询语言：查询、变异、订阅

在 GraphQL 中，查询和突变是由类似 JSON 的结构表示的字符串。这是一个简单的例子：

# Query Example
query GetUser {
  user(id: 1) {
    name
    email
  }
}

# Mutation Example
mutation CreateUser {
  createUser(name: "Alice", email: "alice@example.com") {
    id
    name
  }
}

# Subscription Example (Assuming WebSocket)
subscription OnNewUser {
  newUser {
    id
    name
  }
}

在上面的代码中，GetUser 查询请求用户 ID 为 1 的用户的姓名和电子邮件。CreateUser 突变创建一个新用户并返回新用户的 ID 和名称。 OnNewUser 订阅等待新用户创建并返回新用户的信息。

2. 类型系统

在后端，我们定义了一个 GraphQL 模式来描述这些类型：

type User {
  id: ID!
  name: String!
  email: String!
}

type Mutation {
  createUser(name: String!, email: String!): User
}

type Subscription {
  newUser: User
}

这里我们定义了一个 User 对象类型，一个用于变异操作的 Mutation 类型，以及一个用于订阅操作的 Subscription 类型。

3. 查询结构：字段和参数

查询结构由字段和参数组成。在上面的查询示例中，user 是字段，id 和 email 是 user 字段的子字段。 id:1等参数用于自定义查询。

4. 层次结构和嵌套

GraphQL 查询可以嵌套。这是一个更复杂的示例：

query GetUsersAndPosts {
  users {
    id
    name
    posts {
      id
      title
      content
      author {
        id
        name
      }
    }
  }
}

此查询请求所有用户及其各自的帖子，其中还包括有关作者的信息。层次结构允许在一个请求中检索多个级别的数据。

客户端代码示例（使用 Apollo 客户端） 

npm init -y
npm install graphql yoga graphql-yoga

# server.js
const { GraphQLServer } = require('graphql-yoga');

const typeDefs = `
  type Query {
    hello: String
  }

  type Mutation {
    addMessage(message: String!): String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
  Mutation: {
    addMessage: (_, { message }) => `You added the message "${message}"`,
  },
};

const server = new GraphQLServer({ typeDefs, resolvers });
server.start(() => console.log(`Server is running on http://localhost:4000`));

在此 React 组件中，我们使用 useQuery 从 GraphQL 服务器获取数据并呈现有关用户及其帖子的信息。这就是 GraphQL 查询、类型系统和层次结构发挥作用的方式。

GraphQL 架构

GraphQL 模式定义语言（SDL）是一种用于描述 GraphQL 模式的语言。它以简洁、人类可读的格式定义数据类型、查询、突变和指令。

定义类型
首先，让我们定义一些基本数据类型。例如，定义一个 User 类型和一个 Post 类型。

npm install apollo-boost @apollo/client graphql

# client.js
import ApolloClient from 'apollo-boost';
import { InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache(),
});

export default client;

这里，用户类型有 id、用户名、电子邮件字段和链接到多个帖子的帖子字段。 Post 类型包含 id、标题、内容字段和指向用户的作者字段。

查询根和变异根
接下来，定义 GraphQL 查询根（Query）和变异根（Mutation）类型，它们是客户端请求数据和修改数据的入口点。

// App.js
import React from 'react';
import { gql, useQuery, useMutation } from '@apollo/client';
import client from './client';

const GET_HELLO = gql`
  query GetHello {
    hello
  }
`;

const ADD_MESSAGE_MUTATION = gql`
  mutation AddMessage($message: String!) {
    addMessage(message: $message)
  }
`;

function App() {
  const { loading, error, data } = useQuery(GET_HELLO);
  const [addMessage, { data: mutationData }] = useMutation(ADD_MESSAGE_MUTATION);

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

  return (
    <div>
      <h1 id="data-hello">{data.hello}</h1>
      <button onclick="{()"> addMessage({ variables: { message: 'Hello from frontend!' } })}>
        Add Message
      </button>
      {mutationData && <p>New message: {mutationData.addMessage}</p>}
    </div>
  );
}
export default App;

在查询类型中，我们定义了获取单个用户、所有用户、单个帖子和所有帖子的查询。在 Mutation 类型中，我们定义了创建新用户和新帖子的操作。

理解和使用指令
指令是 GraphQL 模式中更改执行行为的指令。它们可以应用于类型系统定义的任何部分，例如字段、输入类型、对象类型等。下面演示如何使用自定义 @auth 指令来控制访问权限。

首先，假设我们定义一个 @auth 指令来限制对某些字段的访问并要求用户登录。

node server.js

接下来，在架构中应用此指令：

npm start

在上面的示例中，me查询和用户名字段无需特殊权限即可访问，但访问用户的电子邮件字段需要管理员权限（由@auth(requires: ADMIN)指令指定）。

GraphQL 高级应用

1. 分页

使用 GraphQL 基于游标的分页来提高性能和用户体验。

架构定义：

# Query Example
query GetUser {
  user(id: 1) {
    name
    email
  }
}

# Mutation Example
mutation CreateUser {
  createUser(name: "Alice", email: "alice@example.com") {
    id
    name
  }
}

# Subscription Example (Assuming WebSocket)
subscription OnNewUser {
  newUser {
    id
    name
  }
}

解析器示例：

type User {
  id: ID!
  name: String!
  email: String!
}

type Mutation {
  createUser(name: String!, email: String!): User
}

type Subscription {
  newUser: User
}

2. 错误处理

自定义错误处理，提高客户端处理错误的能力。

解析器示例：

query GetUsersAndPosts {
  users {
    id
    name
    posts {
      id
      title
      content
      author {
        id
        name
      }
    }
  }
}

3. 自定义指令

创建自定义指令来实现特定的业务逻辑或安全要求。

架构定义：

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

const GET_USERS_AND_POSTS = gql`
  query GetUsersAndPosts {
    users {
      id
      name
      posts {
        id
        title
        content
        author {
          id
          name
        }
      }
    }
  }
`;

function App() {
  const { loading, error, data } = useQuery(GET_USERS_AND_POSTS);

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

  return (
    <div>
      {data.users.map(user => (
        <div key="{user.id}">
          <h2 id="user-name">{user.name}</h2>
          <ul>
            {user.posts.map(post => (
              <li key="{post.id}">
                <h3 id="post-title">{post.title}</h3>
                <p>{post.content}</p>
                <p>Author: {post.author.name}</p>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

export default App;

解析器示例：

type User {
  id: ID!
  username: String!
  email: String!
  posts: [Post!]!
}

type Post {
  id: ID!
  title: String!
  content: String!
  author: User!
}

确保在您的 GraphQL 服务器配置中注册此指令处理程序。

4.GraphQL联邦

Federation 允许构建由多个服务组成的单个 GraphQL API。

服务架构：

npm init -y
npm install graphql yoga graphql-yoga

# server.js
const { GraphQLServer } = require('graphql-yoga');

const typeDefs = `
  type Query {
    hello: String
  }

  type Mutation {
    addMessage(message: String!): String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
  Mutation: {
    addMessage: (_, { message }) => `You added the message "${message}"`,
  },
};

const server = new GraphQLServer({ typeDefs, resolvers });
server.start(() => console.log(`Server is running on http://localhost:4000`));

服务 B 架构：

npm install apollo-boost @apollo/client graphql

# client.js
import ApolloClient from 'apollo-boost';
import { InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache(),
});

export default client;

5.复杂查询优化

使用 GraphQL 的字段解析器和数据加载器来优化性能。

数据加载器示例：

// App.js
import React from 'react';
import { gql, useQuery, useMutation } from '@apollo/client';
import client from './client';

const GET_HELLO = gql`
  query GetHello {
    hello
  }
`;

const ADD_MESSAGE_MUTATION = gql`
  mutation AddMessage($message: String!) {
    addMessage(message: $message)
  }
`;

function App() {
  const { loading, error, data } = useQuery(GET_HELLO);
  const [addMessage, { data: mutationData }] = useMutation(ADD_MESSAGE_MUTATION);

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

  return (
    <div>
      <h1 id="data-hello">{data.hello}</h1>
      <button onclick="{()"> addMessage({ variables: { message: 'Hello from frontend!' } })}>
        Add Message
      </button>
      {mutationData && <p>New message: {mutationData.addMessage}</p>}
    </div>
  );
}
export default App;

GraphQL 的特点和优势

  • 性能优化：通过按需获取数据，降低网络传输开销，提高页面加载速度。
  • 减少错误：客户端定义查询结构，服务器返回预期形状，减少接口不匹配导致的错误。
  • 更好的API设计：强类型系统保证了数据的一致性和正确性，使API更易于理解和维护。
  • 客户端控制：客户端可以决定获取多少数据以及何时获取，提高了用户体验。
  • 缓存优化：客户端可以根据返回的数据结构更轻松地实现缓存策略。
  • 降低后端复杂度：后端不再需要创建多个API端点来满足不同客户端的需求。

以上是GraphQL 在现代 Web 应用程序中的应用和优势的详细内容。更多信息请关注PHP中文网其他相关文章！

声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
相关文章
在JavaScript中替换字符串字符在JavaScript中替换字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替换方法详解及常见问题解答 本文将探讨两种在JavaScript中替换字符串字符的方法：在JavaScript代码内部替换和在网页HTML内部替换。 在JavaScript代码内部替换字符串 最直接的方法是使用replace()方法： str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项，需使用正则表达式并添加全局标志g： str = str.replace(/fi

构建您自己的Ajax Web应用程序构建您自己的Ajax Web应用程序Mar 09, 2025 am 12:11 AM

因此，在这里，您准备好了解所有称为Ajax的东西。但是，到底是什么？ AJAX一词是指用于创建动态，交互式Web内容的一系列宽松的技术。 Ajax一词，最初由Jesse J创造

10个JQuery Fun and Games插件10个JQuery Fun and Games插件Mar 08, 2025 am 12:42 AM

10款趣味横生的jQuery游戏插件，让您的网站更具吸引力，提升用户粘性！虽然Flash仍然是开发休闲网页游戏的最佳软件，但jQuery也能创造出令人惊喜的效果，虽然无法与纯动作Flash游戏媲美，但在某些情况下，您也能在浏览器中获得意想不到的乐趣。 jQuery井字棋游戏 游戏编程的“Hello world”，现在有了jQuery版本。 源码 jQuery疯狂填词游戏 这是一个填空游戏，由于不知道单词的上下文，可能会产生一些古怪的结果。 源码 jQuery扫雷游戏

如何创建和发布自己的JavaScript库？如何创建和发布自己的JavaScript库？Mar 18, 2025 pm 03:12 PM

文章讨论了创建，发布和维护JavaScript库，专注于计划，开发，测试，文档和促销策略。

jQuery视差教程 - 动画标题背景jQuery视差教程 - 动画标题背景Mar 08, 2025 am 12:39 AM

本教程演示了如何使用jQuery创建迷人的视差背景效果。 我们将构建一个带有分层图像的标题横幅，从而创造出令人惊叹的视觉深度。 更新的插件可与JQuery 1.6.4及更高版本一起使用。 下载

如何在浏览器中优化JavaScript代码以进行性能？如何在浏览器中优化JavaScript代码以进行性能？Mar 18, 2025 pm 03:14 PM

本文讨论了在浏览器中优化JavaScript性能的策略，重点是减少执行时间并最大程度地减少对页面负载速度的影响。

Matter.js入门：简介Matter.js入门：简介Mar 08, 2025 am 12:53 AM

Matter.js是一个用JavaScript编写的2D刚体物理引擎。此库可以帮助您轻松地在浏览器中模拟2D物理。它提供了许多功能，例如创建刚体并为其分配质量、面积或密度等物理属性的能力。您还可以模拟不同类型的碰撞和力，例如重力摩擦力。 Matter.js支持所有主流浏览器。此外，它也适用于移动设备，因为它可以检测触摸并具有响应能力。所有这些功能都使其值得您投入时间学习如何使用该引擎，因为这样您就可以轻松创建基于物理的2D游戏或模拟。在本教程中，我将介绍此库的基础知识，包括其安装和用法，并提供一

使用jQuery和Ajax自动刷新DIV内容使用jQuery和Ajax自动刷新DIV内容Mar 08, 2025 am 12:58 AM

本文演示了如何使用jQuery和ajax自动每5秒自动刷新DIV的内容。 该示例从RSS提要中获取并显示了最新的博客文章以及最后的刷新时间戳。 加载图像是选择

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

显示更多

热门文章

R.E.P.O.能量晶体解释及其做什么（黄色晶体）
2 周前By尊渡假赌尊渡假赌尊渡假赌
击败分裂小说需要多长时间？
1 个月前ByDDD
R.E.P.O.最佳图形设置
2 周前By尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
1 周前ByDDD
R.E.P.O.如果您听不到任何人，如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
显示更多

热工具

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

SublimeText3 英文版

SublimeText3 英文版

推荐：为Win版本，支持代码提示！

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具，用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

显示更多

热门话题

gmail邮箱登陆入口在哪里
7413
15
CakePHP 教程
1359
52
steam的账户名称是什么格式
76
11
win11激活密钥永久
21
19
显示更多