运行 GraphQL 的 WebSockets 的教学

GraphQL 是一种用于 API 的查询语言，它可以有效地减少前端与后端的通信，并提高数据查询与传输的效率。而 WebSockets 则是一种支持双向通信的协议，它可以让前端与后端之间实现实时数据更新。

本篇文章将介绍如何在前端中运行 GraphQL 的 WebSockets，为开发者提供详细的技术学习和指导意义。

准备工作

在使用 GraphQL 的 WebSockets 之前，需要安装依赖项和配置 GraphQL 服务器。具体步骤如下：

1. 在项目中安装 graphql-subscriptions 和 subscriptions-transport-ws：

npm install graphql-subscriptions subscriptions-transport-ws --save

1. 配置 GraphQL 服务器以支持 WebSocket：

// www.javascriptcn.com code example
import { SubscriptionServer } from 'subscriptions-transport-ws';
import { execute, subscribe } from 'graphql';
import { createServer } from 'http';
import express from 'express';
import { graphqlHTTP } from 'express-graphql';
import schema from './schema';

const app = express();

const server = createServer(app);

app.use(
  '/graphql',
  graphqlHTTP({
    schema,
    graphiql: true,
  }),
);

server.listen(8000, () => {
  new SubscriptionServer(
    {
      execute,
      subscribe,
      schema,
    },
    {
      server,
      path: '/subscriptions',
    },
  );
});

实现 GraphQL 的 WebSockets

在配置好 GraphQL 服务器后，下一步是实现 GraphQL 的 WebSockets。在前端中使用的示例代码如下：

// www.javascriptcn.com code example
import React, { useEffect, useState } from 'react';
import { useSubscription } from '@apollo/client';
import { WebSocketLink } from '@apollo/client/link/ws';
import { SubscriptionClient } from 'subscriptions-transport-ws';
import { gql } from '@apollo/client';

const wsClient = new SubscriptionClient('ws://localhost:8000/subscriptions', {
  reconnect: true,
});

const webSocketLink = new WebSocketLink(wsClient);

const NEW_MESSAGE_SUBSCRIPTION = gql`
  subscription {
    newMessage {
      content
    }
  }
`;

function App() {
  const { data } = useSubscription(NEW_MESSAGE_SUBSCRIPTION);
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    if (data) {
      setMessages([...messages, data]);
    }
  }, [data]);

  return (
    <div>
      {messages.map((message, index) => (
        <p key={index}>{message.newMessage.content}</p>
      ))}
    </div>
  );
}

export default App;

通过 useSubscription() 钩子可以实现订阅 GraphQL 的 WebSockets，当服务器更新数据时，前端会获取到最新的数据。上述代码中，通过 SubscriptionClient 和 WebSocketLink 可以创建一个 WebSocket 连接，然后通过 gql 函数来定义 GraphQL 请求。

在 useEffect() 钩子中，监听到数据更新后，使用 setMessages() 函数更新组件的状态，并渲染最新的数据。

指导意义

本篇文章介绍了如何在前端中运行 GraphQL 的 WebSockets，为开发者提供了详细的技术学习和指导意义。通过本文的阅读，读者可以学习如何配置 GraphQL 服务器以支持 WebSocket，并在前端中使用钩子来订阅 GraphQL 的 WebSockets。这种实时更新数据的方式，可以有效地提高应用的响应速度和用户体验。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67971da5504e4ea9bde23eb1