Question

当道具更改时，我需要在Apollo Client函数中更改subscribeToMore函数的帮助。因此，我设计了一个一次性电子邮件网站，该网站使用query来获取与特定电子邮件地址相关联的电子邮件，并且我还运行着subscription，当新电子邮件到达时会收到警报并自动更新收件箱。但是，我还为用户提供了更改电子邮件地址的选项，并且我需要一种方法来重新运行与新电子邮件地址关联的subscribeToMore并关闭与旧电子邮件地址关联的订阅。所以这是我的代码的样子：

const InboxManagementWithData = ({address}) => (
  <Query
  query={GET_EMAILS}
  variables={{address}}>
  {({subscribeToMore, ...result}) => 
      <InboxManagement 
      {...result}
      subscribeToNewEmails={() => 
        subscribeToMore({
          document: GET_NEW_EMAILS,
          variables: {address},
          updateQuery: (prev, { subscriptionData }) => {
            console.log(prev, subscriptionData)
            if (!subscriptionData.data) return prev;
            const newEmail = subscriptionData.data.emailAdded;
            return Object.assign({}, prev, {
              emails: [newEmail, ...prev.emails]
            });
          }
        })
      }

      />
  }
  </Query>
)

class InboxManagement extends React.Component{
  componentDidMount() {
    this.props.subscribeToNewEmails()
  }
  render(){
    let {loading, error, data} = this.props
    return (
      <div>
        {loading &&
          <div className="inbox-loading">
            <Spin size="large"/>
          </div>
        }

        {error &&
        <div className="inbox-empty">
          <Icon type="inbox" style={{ fontSize: '100px'}}/>
          <h3>Error loading inbox :(</h3>
        </div>
        }

        {!loading && data.emails && data.emails.length == 0 &&
          <div className="inbox-empty">
            <Icon type="inbox" style={{ fontSize: '100px'}}/>
            <h3>Inbox empty</h3>
          </div>
        }

        {!loading && data.emails && data.emails.length > 0 &&
          <div>
            {data.emails.map(email => <Email email={email} key={email.token} />)}
          </div>
        }

      </div>
    )
  }
}

如您所见，<InboxManagement />通过了电子邮件地址作为道具，我调用了subscribeToMore函数来创建与用户电子邮件地址相关联的订阅。但是，如果用户更改了他/她的电子邮件地址，则subscribeToMore是固定的，并且其变量相同，因此它仍旧连接到具有旧电子邮件地址的订阅。有什么方法可以取消当前订阅？

道具更改时重新定义subscribeToMore

0 个答案: