apollo
apollo copied to clipboard
Can't receive messages in a chat using subscription
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.