1. 确保你已经安装了 apollo-link-ws 和 subscriptions-transport-ws 包。

2. 创建一个 WebSocket 连接，并将该连接传递给 subscriptions-transport-ws 的 createWebSocketLink 函数。

import { WebSocketLink } from 'apollo-link-ws';
import { SubscriptionClient } from 'subscriptions-transport-ws';
import { createWebSocketLink } from 'subscriptions-transport-ws';

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

const wsLink = new WebSocketLink(wsClient);

const createClient = () => {
  return new ApolloClient({
    cache: new InMemoryCache(),
    link: wsLink,
  });
};

3. 将链接传递给 ApolloProvider 并将客户端传递给 useApollo 钩子。

// pages/_app.js
import { ApolloProvider } from '@apollo/client';
import { useApollo } from '../lib/apolloClient';

export default function App({ Component, pageProps }) {
  const apolloClient = useApollo(pageProps.initialApolloState);

  return (
    
      
    
  );
}

4. 在页面上使用 useSubscription 钩子来订阅和接收数据。

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

const subscription = gql`
  subscription MySubscription {
    mySubscription {
      id
      name
    }
  }
`;

function Subscription() {
  const { data, error } = useSubscription(subscription);

  if (error) return 
Error
;

  return (
    

      
Subscription data:
      
{JSON.stringify(data, null, 2)}
    
  );
}

function Page() {
  return (
    

      
Subscriptions
      
    
  );
}