Apollo 订阅问题 - updateQuery 未触发答案

【问题标题】：Apollo subscription issue - updateQuery not firingApollo 订阅问题 - updateQuery 未触发
【发布时间】：2018-06-09 06:52:18
【问题描述】：

我有一个使用 Apollo 的 WebSocketLink 接口创建的有效网络套接字。我设法使用subscribeToMore 订阅了一个事件，并且服务器推送了一条消息（可以在网络选项卡中看到它）。不幸的是，updateQuery 函数永远不会被触发。我想知道是消息结构不正确（因此服务器实现错误）还是我的客户端代码有问题。

作为参考，我添加了从服务器发送的消息：

这里是我的组件的 graphql 配置：

import { graphql } from "react-apollo/index";
import Insights from 'components/insights/Insights';
import gql from "graphql-tag";
import { withRouter } from "react-router-dom";
import get from 'lodash/get';

const query = gql`
  query CampaignInsights($campaignId: ID) {
    campaigns (id: $campaignId) {
      edges {
        node {
          insights {
            campaignPlanningInsight {
              campaign
              plannedTotals {
                totalOptimizationRules
                totalOfferGroups
                totalOffers
              }
              liveTotals {
                totalOptimizationRules
                totalOfferGroups
                totalOffers
              }
            }
          }
        }
      }
    }
  }  
`;

const insightsSubscription = gql`
  subscription onInsightsUpdated($campaignId: ID) {
    campaignPlanningInsightUpdated(id: $campaignId) {
      id
      plannedTotals {
        totalOptimizationRules
        totalOfferGroups
        totalOffers
      }
      liveTotals {
        totalOptimizationRules
        totalOfferGroups
        totalOffers
      }
    }
  }
`;

const InsightsWithData = graphql(query, {
  options: (props) => {
    return {
      variables: {
        campaignId: props.match.params.campaignId
      }
    }
  },
  props: ({ data: { campaigns, subscribeToMore }, ownProps: { match } 
}) => {
    return {
      insights: get(campaigns, 
'edges[0].node.insights[0].campaignPlanningInsight', null),
      subscribeToInsightsUpdate: () => {
        return subscribeToMore({
          document: insightsSubscription,
          variables: {
            campaignId: match.params.campaignId
          },
          updateQuery: (prev, { subscriptionData }) => {
            debugger; // never gets here
            if (!subscriptionData.data) {
              return prev;
            }
          }
        })
      }
    }
  }
})(Insights);

export default withRouter(InsightsWithData);

【问题讨论】：

标签： reactjs websocket react-apollo

【解决方案1】：

我认为问题可能是graphql-ws websocket 协议的id。

那个id需要匹配前端在GQL_START消息中发送的那个。否则，组件不会在新消息上重新呈现。

更多详情，请查看subscription-transport-wsprotocol

【讨论】：