深入理解urql中的GraphQL订阅功能

最新推荐文章于 2025-06-12 20:43:10 发布

乔嫣忱

最新推荐文章于 2025-06-12 20:43:10 发布

阅读量260

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00944/article/details/148419557

深入理解urql中的GraphQL订阅功能

urql The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow. 项目地址: https://gitcode.com/gh_mirrors/ur/urql

什么是GraphQL订阅

GraphQL订阅是一种实时通信机制，允许客户端从服务器接收持续更新的数据。与传统的查询和变更不同，订阅建立了一个长期连接，当服务器端数据发生变化时，会自动推送更新到客户端。

urql中的订阅实现

urql通过subscriptionExchange来实现订阅功能，这是一个可配置的交换器(exchange)，需要与其他核心交换器一起使用。

基本配置

要启用订阅功能，首先需要在urql客户端中添加订阅交换器：

import { Client, cacheExchange, fetchExchange, subscriptionExchange } from 'urql';

const client = new Client({
  url: 'http://localhost:3000/graphql',
  exchanges: [
    cacheExchange,
    fetchExchange,
    subscriptionExchange({
      forwardSubscription,
    }),
  ],
});

传输协议选择

urql本身不限定具体的传输协议，而是通过forwardSubscription函数来适配不同的订阅实现方式。

1. 使用graphql-ws（推荐）

对于支持新协议graphql-ws的后端，推荐使用这种方式：

import { createClient as createWSClient } from 'graphql-ws';

const wsClient = createWSClient({
  url: 'ws://localhost/graphql',
});

const forwardSubscription = (request) => {
  const input = { ...request, query: request.query || '' };
  return {
    subscribe(sink) {
      const unsubscribe = wsClient.subscribe(input, sink);
      return { unsubscribe };
    },
  };
};

2. 使用subscriptions-transport-ws（旧版）

对于仍在使用Apollo旧版订阅实现的系统：

import { SubscriptionClient } from 'subscriptions-transport-ws';

const subscriptionClient = new SubscriptionClient('ws://localhost/graphql', { 
  reconnect: true 
});

const forwardSubscription = (request) => 
  subscriptionClient.request(request);

3. 使用HTTP Fetch（特殊场景）

某些GraphQL实现（如GraphQL Yoga）支持通过HTTP实现订阅：

const client = new Client({
  url: '/graphql',
  fetchSubscriptions: true,  // 启用fetch订阅
  exchanges: [cacheExchange, fetchExchange],
});

在各框架中的使用

React/Preact中的使用

React中使用useSubscription钩子：

const handleSubscription = (messages = [], response) => {
  return [response.newMessages, ...messages];
};

const Messages = () => {
  const [res] = useSubscription({ query: NEW_MESSAGES_SUBSCRIPTION }, handleSubscription);

  return (
    <ul>
      {res.data?.map(message => (
        <li key={message.id}>{message.from}: "{message.text}"</li>
      ))}
    </ul>
  );
};

Svelte中的使用

Svelte中使用subscriptionStore：

<script>
  import { subscriptionStore } from '@urql/svelte';
  
  const messages = subscriptionStore({
    query: NEW_MESSAGES_SUBSCRIPTION
  });
</script>

{#each $messages.data?.newMessages || [] as message}
  <p>{message.from}: "{message.text}"</p>
{/each}

Vue中的使用

Vue中使用useSubscription组合式API：

<script setup>
import { useSubscription } from '@urql/vue';

const handleSubscription = (messages = [], response) => {
  return [response.newMessages, ...messages];
};

const result = useSubscription({
  query: NEW_MESSAGES_SUBSCRIPTION
}, handleSubscription);
</script>

<template>
  <ul>
    <li v-for="msg in result.data" :key="msg.id">
      {{ msg.from }}: "{{ msg.text }}"
    </li>
  </ul>
</template>

核心API直接使用

不依赖框架时，可以直接使用客户端的subscription方法：

const { unsubscribe } = client.subscription(NEW_MESSAGES_SUBSCRIPTION)
  .subscribe(result => {
    console.log('New message:', result.data.newMessages);
  });

// 需要时取消订阅
unsubscribe();