vuejs / apollo

🚀 Apollo/GraphQL integration for VueJS

Home Page:http://apollo.vuejs.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Can't receive messages in a chat using subscription

agustin-mesa opened this issue · comments

Describe the bug
Hey!
I'm migrating a project from Nuxt 2 to Nuxt 3, with @nuxtjs/apollo: 4.0.1-rc.5 to @nuxtjs/apollo: 5.0.0-alpha.6, and also aws-appsync, in which I have a chat in which I'm not receiving in real time the message from the other person. I can send and the other person receives it, but I don't receive the messages. The chat is an EvMessenger.vue component where I render in a setup a useMessenger.js composable.
I would think that the problem is in the subscription, because when the observable.subscribe() component is mounted it is executed only once, but when I want to receive a message it is not executed, and that should happen, right?
I attach a function in which I use in a composable of Vue the apollo subscription. This function is executed in an onMounted so that it can be rendered.

   const loadMessages = () => {
    const observable = client.watchQuery({
      query: GET_MESSAGES_BY_CONVERSATION_ID,
      variables: {
        conversationId,
        first: app.$messenger.constants.messageFirst,
      },
    })

    observable.subscribe(({ data }) => {
      const newMessages = data.allMessageConnection.messages
      messages.value = [...newMessages].reverse()
      loading.value = false
      nextToken.value = data.allMessageConnection.nextToken
    })
    observable.subscribeToMore({
      document: SUBSCRIBE_TO_NEW_MESSAGES,
      variables: { conversationId },
      updateQuery: (
        previousMessages,
        {
          subscriptionData: {
            data: { subscribeToNewMessage: message },
          },
        },
      ) => {
        return app.$messenger.unshiftMessage(previousMessages, message)
      },
    })
    observedQuery.value = observable
  }

Expected behavior
Receive messages in real time mode.

Versions
vue: 3
@nuxt/apollo: 5.0.0-alpha.6
aws-appsync: ^4.1.9

Additional context
In the previous Nuxt 2 project, everything worked fine, but now in the migration it does not.