nuxt-modules / apollo

Nuxt.js module to use Vue-Apollo. The Apollo integration for GraphQL.
https://apollo.nuxtjs.org
MIT License
929 stars 194 forks source link

Can't receive messages in a chat using subscription #574

Open agustin-mesa opened 7 months ago

agustin-mesa commented 7 months ago

Environment

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

Describe the bug

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 behaviour

Receive messages in real time mode.

Additional context

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