使用 client.subscribe 订阅查询后如何更新我的 apollo 数据？答案

【问题标题】：How do I update my apollo data after subscribing to a query using client.subscribe?使用 client.subscribe 订阅查询后如何更新我的 apollo 数据？
【发布时间】：2017-05-29 09:40:12
【问题描述】：

我正在尝试订阅不同于作为根查询执行的查询。这是因为订阅无法在我的 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,

  })

【问题讨论】：

标签： reactjs graphql apollo

【解决方案1】：

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

   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 传递到组件中，并在添加到组件的 props 之前由我的代码重命名为 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();
    }
}

我希望这些信息对您有所帮助。

【讨论】：