I have a paginated query from lighthouse-php. An example data structure looks like:

const {data, ...} = useQuery(GET_FOO, { variables: { page: 1, first 10 } })

const firstMessage = data.messages.data[0]

console.log(firstMessage) #=> { id: 1, readBy: [{id: 1, userId: 1, messageId: 1}] }

In another component:

{data.messages.data.map(message => <MessageItem key={message.id} message={message} [...] />)}

The key part I want to modify is the "readBy" object inside the "firstMessage":

// In the MessageItem component, I need to show if this message was read by the current user:

// inside MessageItem
const { message, currentUser } = props

// true/false
const seen = message.readBy.some(m => m.userId === currentUser.id)

// do something with seen

No issues there should I make changes in the database then refresh the page. The issues is with using cache.writeQuery(). After a mutation, I perform the change then call cache.writeQuery:

// Parent component of MessageItem

const [updateMessgeRead] = useMutation(markReadUnread)

const onMessageSeen = (id, value) => {
  
  // Value can be true or false
  // id is the message id
updateMessgeRead({
  variables: { ... },
  update: (cache) => {
    const query = { query: GET_FOO, variables: { first: 100, page: 1 } }
    
    const data = cache.readQuery(query);

    // Message that needs updating
    let message = data.messages.data.find(m => m.id === id)

   message = {...message, readBy: [...message.readBy, {userId: props.currentUser.id}]}

    data.messages.data = [...data.messages.data.filter(m => m.id !== id), message]

    cache.writeQuery({ query: GET_FOO }, data );

    console.log(data) // Shows me the correct data
  }
})
.catch(e => console.log(e))
}

After calling onMessageSeen(), MessageItem re-renders but without the updated cache. Does the way that I update the cache is the problem?