Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
agustin-mesa opened this issue Nov 25, 2023 · 0 comments
Open

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

agustin-mesa opened this issue Nov 25, 2023 · 0 comments

Comments

@agustin-mesa
Copy link

agustin-mesa commented Nov 25, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant