Apollo项目缓存同步难题咨询：改用WebSocket实现实时数据同步

我完全懂你现在的糟心处境——Apollo项目规模一上来，本地缓存和数据库的同步简直是个甩不掉的“包袱”，改个mutation响应都要牵一发而动全身，各种依赖的查询跟着出问题，耦合高到根本没法轻松迭代。你想切换到以数据库为唯一数据源、靠WebSocket推送变更自动刷新所有数据的思路，方向太对了，这刚好能戳中缓存一致性和查询耦合的核心痛点。

下面给你拆解具体的落地步骤：

1. 配置Apollo Client的WebSocket链路 #

首先要把Apollo Client的请求链路拆分成HTTP（处理查询/变更）和WebSocket（处理订阅）两部分，用split方法自动区分请求类型：

import { ApolloClient, InMemoryCache, split, HttpLink } from '@apollo/client';
import { getMainDefinition } from '@apollo/client/utilities';
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
import { createClient } from 'graphql-ws';

// HTTP链路，处理常规查询和mutation
const httpLink = new HttpLink({
  uri: 'http://your-graphql-api-endpoint',
});

// WebSocket链路，处理订阅
const wsLink = new GraphQLWsLink(createClient({
  url: 'ws://your-graphql-subscription-endpoint',
  // 可选：配置重连策略，比如断网后自动重试
  retryAttempts: 5,
}));

// 自动判断请求类型，分发到对应链路
const splitLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  },
  wsLink,
  httpLink,
);

// 初始化Client，弱化缓存优先级（因为我们靠订阅刷新）
const client = new ApolloClient({
  link: splitLink,
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          // 可以给高频更新的字段设置缓存策略，比如每次读取都用最新缓存
          users: {
            read(existing) {
              return existing || [];
            },
          },
        },
      },
    },
  }),
});

2. 后端实现数据库变更的订阅触发器 #

要让WebSocket能实时推送变更，后端需要监听数据库的增删改事件，然后把事件推送给订阅的客户端。举个用Prisma + GraphQL Yoga的例子：

import { PrismaClient } from '@prisma/client';
import { createPubSub } from 'graphql-yoga';

const prisma = new PrismaClient();
const pubsub = createPubSub();

// 监听用户表的更新事件
prisma.$on('user:updated', async (event) => {
  // 把更新的数据推送到订阅通道
  await pubsub.publish('USER_UPDATED', {
    userUpdated: event.data,
  });
});

// 定义Subscription类型
const typeDefs = `
  type Subscription {
    userUpdated: User
  }

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

// 订阅Resolver
const resolvers = {
  Subscription: {
    userUpdated: {
      subscribe: () => pubsub.asyncIterator(['USER_UPDATED']),
    },
  },
};

如果用MongoDB，可以直接用Change Streams监听集合变更；用PostgreSQL的话，能借助LISTEN/NOTIFY机制实现类似功能。

3. 前端组件订阅变更并自动刷新 #

在需要实时更新的组件里，用useSubscription钩子监听后端推送的事件，收到变更后直接更新Apollo缓存，所有依赖该数据的查询都会自动刷新：

import { useSubscription, useQuery, useApolloClient } from '@apollo/client';
import { GET_USERS, USER_UPDATED } from './graphql/queries';

function UserList() {
  const client = useApolloClient();
  const { data, loading } = useQuery(GET_USERS);
  const { data: subscriptionData } = useSubscription(USER_UPDATED);

  // 收到用户更新事件时，更新缓存中的用户列表
  useEffect(() => {
    if (subscriptionData?.userUpdated) {
      const updatedUser = subscriptionData.userUpdated;
      client.writeQuery({
        query: GET_USERS,
        data: {
          users: data.users.map(user => 
            user.id === updatedUser.id ? updatedUser : user
          ),
        },
      });
    }
  }, [subscriptionData, data, client]);

  if (loading) return <div>加载中...</div>;

  return (
    <ul>
      {data.users.map(user => (
        <li key={user.id}>{user.name} - {user.email}</li>
      ))}
    </ul>
  );
}

4. 关键注意事项 #

• 连接稳定性：GraphQL-WS自带重连机制，但可以自定义重连间隔、重试次数，避免断网后丢失变更。
• 权限控制：订阅事件要校验用户权限，确保只有有权限的客户端能收到对应数据的变更通知。
• 性能优化：不要推送完整的对象，只传变更的字段和ID，前端再按需合并更新；批量变更时可以合并推送事件，减少前端刷新频率。
• 缓存弱化：如果完全依赖数据库作为唯一数据源，可以给某些查询设置fetchPolicy: 'network-only'，彻底绕过本地缓存，确保每次都拿最新数据。

这个方案的核心就是把数据的“单一数据源”牢牢锚定在数据库，用WebSocket订阅替代传统的缓存同步逻辑——以后再修改mutation响应，只要后端的订阅事件能正确推送变更，前端所有依赖该数据的组件都会自动刷新，再也不用头疼缓存同步和查询耦合的问题了。

内容的提问来源于stack exchange，提问作者Dan Rasmuson