Update apollo cache whose response is in cursor pagination shape

Viewed 167

I have a direct message component where if I send the message, I need to update the cache with that new message sent. The list of messages that are shown is in cursor based pagination shape. This is how it looks like

data: {
  conversation: {
    status: 200,
    data: {
      pageInfo {
        startCursor
        endCursor
        hasNextPage
        hasPreviousPage
      }
      edges [{
        cursor: 'adsfskjaksfasd'
        node: {
          id: 'safasdks',
          content: {
            body: 'kjkajks'
          }
        }
      }]
    }
  }
}

The response I get while sending message is only a node

data: { sendMessage: { data: {id: 'safasdks', content: { body: 'kjkajks'}} } }

If conversation query which is used to show list of messages was not in cursor based pagination form then I would have done something like this

const [sendMessage] = useMutation(SEND_MESSAGE, {
    optimisticResponse: true,
    update(cache, result) {
      const existingMessages: any = cache.readQuery({ query: CONVERSATION });
      const newMessages = produce(existingMessages, (draft: any) => {
        if (draft?.conversation?.data) {
          draft.conversation.data.edges = result?.data?.sendMessage?.data;
          // sendMessage return the data object which is a part of node. e.g {id: 'safasdks', content: { body: 'kjkajks'}}
        }
      });
      cache.writeQuery({
        query: CONVERSATION,
        data: newMessages,
      });
    },
  });

But, I have no idea how I can update my cache where data is in cursor based.

0 Answers
Related