React Native使用subscribeToMore触发GraphQL订阅无法解构data报错

1. 修正订阅变量引用错误 #

你导出的订阅常量命名为TOPIC_MESSAGE_SUBSCRIPTION，但调用subscribeToMore时传入的document是MESSAGE_SUBSCRIPTION，二者名称不匹配，大概率是导入错误或者调用时写错了变量名，导致传入的订阅文档为undefined，触发后续报错。
修正后的调用示例：

// 先确保导入正确的订阅常量
import { TOPIC_MESSAGE_SUBSCRIPTION } from '你的订阅定义文件路径'

// 调用时传入正确的订阅文档
subscribeToMore({
  document: TOPIC_MESSAGE_SUBSCRIPTION,
  // 其余配置保持不变
})

2. 为updateQuery参数添加安全兜底 #

当前你直接在参数位解构subscriptionData，如果订阅请求返回异常响应，第二个参数整体为undefined时，解构操作就会直接抛出你遇到的报错。修改为带默认值的解构+可选链判断即可：

updateQuery: (prev, payload = {}) => {
  const { subscriptionData } = payload
  // 先判断层级数据存在再操作
  if (!subscriptionData?.data) return prev
  console.log(prev, subscriptionData)
  // 后续数据合并逻辑写在此处
  return prev
}

3. 检查Apollo客户端的订阅链路配置 #

GraphQL订阅依赖WebSocket协议，Playground默认会自动处理ws连接，但是React Native端的ApolloClient实例需要单独配置WebSocketLink才能正常发起订阅请求，如果没配置的话订阅请求会失败，返回空响应。
确认你的ApolloClient初始化代码包含类似如下配置：

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';

const httpLink = new HttpLink({
  uri: '你的GraphQL HTTP接口地址'
});

const wsLink = new GraphQLWsLink(createClient({
  url: '你的GraphQL WebSocket接口地址', // 通常为ws://或wss://开头
}));

// 拆分请求逻辑：查询/变更走HTTP，订阅走WebSocket
const splitLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  },
  wsLink,
  httpLink,
);

const client = new ApolloClient({
  link: splitLink,
  cache: new InMemoryCache(),
});

4. 添加错误回调捕获异常 #

给subscribeToMore添加onError配置，捕获订阅过程中出现的错误，避免未处理的异常抛出：

subscribeToMore({
  document: TOPIC_MESSAGE_SUBSCRIPTION,
  variables: {
    data: {
      _id: params._id,
    },
  },
  updateQuery: (prev, payload = {}) => {
    const { subscriptionData } = payload
    if (!subscriptionData?.data) return prev
    console.log(prev, subscriptionData)
    return prev
  },
  // 新增错误回调
  onError: (err) => {
    console.log('订阅出错：', err)
  }
})

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