Tengo una consulta paginada de lighthouse-php . Una estructura de datos de ejemplo se parece a:

 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}] }

En otro componente:

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

La parte clave que quiero modificar es el objeto "readBy" dentro del "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 hay problema, debo hacer cambios en la base de datos y luego actualizar la página. El problema es con el uso de cache.writeQuery() . Después de una mutación, realizo el cambio y luego llamo a 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)) }

Después de llamar a onMessageSeen() , MessageItem vuelve a renderizarse pero sin la caché actualizada. ¿La forma en que actualizo el caché es el problema?