Reactjs 使用client.subscribe订阅查询后，如何更新apollo数据？

我尝试订阅不同于作为根查询执行的查询。这是因为订阅无法监视graphql服务器上的子节点的连接。因此，我订阅了所需的每个子连接，并希望使用收到的数据更新视图。以下是我目前掌握的情况：

client.subscribe({
    query: queries[queryName],
    variables,
    updateQuery: (previousResult, { subscriptionData }) => {
      console.log('this never happens');
      //this would be where I make my modifications if this function was ever called
      return {};
    },
  }).subscribe({
    next(resp) {
      //this function is called however I still don't know how to update the view with the response.
      that.newData(resp,queryName);
    },
    error,
    complete,

  })

---

以下是一些相关的示例代码：

   subscribe(fromID, toID, updateQueryViaSubscription) {
        const IM_SUBSCRIPTION_QUERY = gql`
          subscription getIMsViaSubscription($fromID: String!, $toID: String!){
              IMAdded(fromID:$fromID, toID: $toID){
                id,
                fromID,
                toID,
                msgText
              }
            } 
    `;
        this.subscriptionObserver = this.props.client.subscribe({
            query: IM_SUBSCRIPTION_QUERY,
            variables: { fromID: this.fromID, toID: this.toID },
        }).subscribe({
            next(data) {
                const newMsg = data.IMAdded;
                updateQueryViaSubscription((previousResult) => {
                    // if it's our own mutation, we might get the subscription result
                    // after the mutation result.
                    if (isDuplicateIM(newMsg, previousResult.instant_message)) {
                        return previousResult;
                    }
                    // update returns a new "immutable" list with the new comment
                    // added to the front.
                    return update(
                        previousResult,
                        {
                            instant_message: {
                                $push: [newMsg],
                            },
                        }
                    );
                });
            },
            error(err) {
                console.error('err', err); },
        });
    }

您会注意到，

updateQueryViaSubscription

作为参数传递给

subscribe

。以下是我的应用程序中它的来源：

//NOTE: NAME OF 2ND PROPERTY IN DATA OBJECT ("instant_message" in this example) MUST BE IDENTICAL TO NAME OF RESOLVER
//OTHERWISE DATA WILL NOT LOAD
const CreateIMPageWithDataAndMutations = graphql(GETIMS_QUERY, {
    options({ toID }) {
        const fromID = Meteor.userId();
        return {
            variables: { fromID: `${fromID}`, toID: `${toID}`}
        };
    }
    ,
    props({ data: { loading, instant_message, updateQuery } }) {
        //debugger;
        return { loading, instant_message, updateQueryViaSubscription: updateQuery };
    },
});



export default compose(
    CreateIMPageWithMutations,
    CreateIMPageWithDataAndMutations,
    withApollo
)(CreateIM);

export { GETIMS_QUERY };

请注意，函数

updateQuery

从Apollo传递到组件中，并由我的代码重命名为updateQueryViaSubscription，然后再添加到组件的道具中

我的代码在

componentDidMount

中调用

subscribe

：

componentDidMount() {
    const userIsLoggedIn = Meteor.userId() ? true : false;
    const {toID, ApolloClientWithSubscribeEnabled} = this.props;

    if (userIsLoggedIn && toID){
        this.fromID = Meteor.userId();
        this.toID = toID;
        this.subscribe(this.fromID, this.toID, this.props.updateQueryViaSubscription);
    }
}

…并在componentWillUnmount中取消订阅：

componentWillUnmount() {
    if (this.subscriptionObserver) {
        this.subscriptionObserver.unsubscribe();
    }
}

我希望这些信息是有用的