阿波罗订阅与过滤器顺序混淆

如何解决阿波罗订阅与过滤器顺序混淆

const Mutation = {
  readMessage: (_,{ input: { roomId,userId } }) => {
    console.log('READ MESSAGE')
    const room = RoomAPI.updateReadMessageId(userId,roomId)
    pubsub.publish(MESSAGE_READ,{ messageRead: room,roomId })
    return true
  },}

const Subscription = {
  messageRead: {
    subscribe: withFilter(
      () => {
        console.log('WITH FILTER')
        return pubsub.asyncIterator([MESSAGE_READ])
      },(payload,{ input: { roomId } }) => {
        console.log(payload)
        return payload.roomId === roomId
      },),},}

当readMessage突变到达服务器时，我猜控制台日志的正确顺序是：

1. 阅读消息
2. 带过滤器
3. console.log(payload)

然而，这个顺序被混淆如下：

1. 带过滤器
2. 阅读消息
3. console.log(payload)

有时

1. 阅读消息
2. console.log(payload)
3. 带过滤器

甚至

1. 阅读消息
2. 带过滤器 （没有 console.log(payload)）

导致 apollo client 什么也没有收到。 我不确定这种关系是什么，但这种行为是在我添加 react-transition-group 后开始的。

  const generateRoutes = () =>
    routes.map(route => <Route key={route.path} path={route.path} exact component={route.component} />)

  return (
        <TransitionGroup className={slideDirection}>
          <CSSTransition key={location.key} classNames="slide" timeout={500}>
            <div className="slide-container">
              <Switch location={location}>{generateRoutes()}</Switch>
            </div>
          </CSSTransition>
        </TransitionGroup>
  )

有人知道为什么会这样吗？