apollo subscription withFilter order mixed up

Question

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
      },
    ),
  },
}

When readMessage mutations arrives at the server, I guess the correct order of console log is:

1. READ MESSAGE
2. WITH FILTER
3. console.log(payload)

However, this order gets mixed up as the following:

1. WITH FILTER
2. READ MESSAGE
3. console.log(payload)

or sometimes

1. READ MESSAGE
2. console.log(payload)
3. WITH FILTER

or even

1. READ MESSAGE
2. WITH FILTER (no console.log(payload))

resulting apollo client to receive nothing. I am not sure what the relationship is but this behavior started after I added 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>
  )

Does anybody know why this is happening?

question from:https://stackoverflow.com/questions/66064042/apollo-subscription-withfilter-order-mixed-up

Answer 1

Waitting for answers