Real-time Message Deletion Subscription Returns Null

Question

I am currently working on implementing real-time message deletion in my GraphQL application. I have set up the necessary mutation and subscription resolvers, but I am encountering an issue where the messageDeleted subscription is returning null although message is delete for me but I want this is seen other user on the frontend when a message is deleted.

GraphQL Schema and Resolvers:

mutation

    deleteMessage: async (_, { messageId }) => {
      const message = await Message.query().findById(messageId).first()

      if (!message) {
        throw new Error('Message not found')
      }

      const pubsub = await getPubsub()

      await Message.query().deleteById(messageId)

      // Broadcast the deleted message ID to subscribers
      pubsub.publish(`${MESSAGE_DELETED}.${message.channelId}`, messageId)

      console.log(messageId,"messageId")
      return { success: true }
    },

subscription:

   messageDeleted: {
      resolve: async (messageId, _, context) => {
        const message = await Message.query()
          .findById(messageId)
          .withGraphJoined('user')

        return message
      },
      subscribe: async (_, vars) => {
        const pubsub = await getPubsub()
        return pubsub.asyncIterator(`${MESSAGE_DELETED}.${vars.channelId}`)
      },
    },
 




 type Message {
    content: String
    user: User
    id: String
    created: DateTime
    updated: DateTime
  }
extend type Subscription {
    messageDeleted(channelId: ID): Message
  }

getting messageId and channelId successfully but in client side getting subscriptionData.data null why ?

and here is my client side messageContainer.js

const MESSAGE_DELETED_SUBSCRIPTION = gql`
  subscription messageDeleted($channelId: ID) {
    messageDeleted(channelId: $channelId) {
      id
      content
    }
  }
`
const subscribeToMessageDeleted = (subscribeToMore, channelId) =>
  subscribeToMore({
    document: MESSAGE_DELETED_SUBSCRIPTION,
    variables: { channelId },
    updateQuery: (prev, { subscriptionData }) => {
      if (!subscriptionData.data) return prev
      console.log(subscriptionData, 'subscriptionData')
      const messageId = subscriptionData.data // Access the message ID directly
      // eslint-disable-next-line no-console
      console.log(messageId, 'messageId')

      // Filter out the deleted message from the messages list
      const updatedEdges = prev.messages.edges.filter(
        ({ id }) => id !== messageId,
      )

      return {
        ...prev,
        messages: {
          ...prev.messages,
          edges: updatedEdges,
        },
      }
    },
  })

Please let me know if you need further information or assistance in resolving this issue. Thank you!

score 0 · Accepted Answer · 2023-08-18 14:57:11Z

It’s probably because of how you are accessing the data from the subscription payload on the client side. In your subscription resolver, you are returning the deleted message from the messageDeleted subscription, but on the client side, you’re trying to access the data using subscriptionData.data. You should be accessing the deleted message ID using subscriptionData.data.messageDeleted.id. You can try something like this,

const subscribeToMessageDeleted = (subscribeToMore, channelId) =>
subscribeToMore({
  document: MESSAGE_DELETED_SUBSCRIPTION,
  variables: { channelId },
  updateQuery: (prev, { subscriptionData }) => {
    if (!subscriptionData.data) return prev
    const deletedMessage = subscriptionData.data.messageDeleted
    if (!deletedMessage) return prev

    // Filter out the deleted message from the messages list
    const updatedEdges = prev.messages.edges.filter(
      ({ id }) => id !== deletedMessage.id,
    )

    return {
      ...prev,
      messages: {
        ...prev.messages,
        edges: updatedEdges,
      },
    }
  },
})

Hey but in subscriptionData I get null messageDeleted {id: null, content: null, __typename: 'Message' — 44 mins ago

Real-time Message Deletion Subscription Returns Null