javascript – 如何在突变后更新分页列表？

2019年7月28日 130次阅读

我有一个带有消息列表的线程,它使用GET_THREAD_MESSAGES查询获取.该查询是分页的,并且取决于用户之前是否已经看过该线程可能加载第一页,最后一页或仅加载新消息. (即任何第一个/之后/之前/最后一个可以传递任何值)

thread(id: "asdf") {
  messageConnection(after: $after, first: $first, before: $before, last: $last) {
    edges {
      cursor
      node { ...messageInfo }
    }
  }
}

现在我有一个sendMessage变异,我调用,然后在该变异的更新方法中,我想乐观地将发送的消息添加到线程消息中以获得更好的UX.没有分页,我知道我会这样做：

const data = store.readQuery({
  query: GET_THREAD_MESSAGES,
  variables: { id: message.threadId }
})

data.messageConnection.edges.push(newMessageEdge);

store.writeQuery({
  query: GET_THREAD_MESSAGES,
  variables: { id: message.threadId },
  data,
})

不幸的是,因为我知道有分页,所以store.readQuery调用会抛出错误,说“它无法找到该字段的字段messageConnection”,因为该字段现在类似于messageConnection({after：’jfds1223asdhfl’,first：50,之前：null,last：null}). Apollo docs说应该在查询中使用@connection指令来解决这个问题.我试图更新查询,看起来像这样：

thread(id: "asdf") {
  messageConnection(...) @connection(key: "messageConnection") {
    edges {
      cursor
      node { ...messageInfo }
    }
  }
}

不幸的是,当我使用它时,返回并正确显示乐观更新,但是一旦服务器返回存储的实际消息,我就会收到一条错误消息,指出“{node：{id：’…’中缺少字段光标, timestamp：’…’“,因为很明显服务器返回的消息不是MessageConnectionEdge,它只是节点,因此没有光标字段.

我如何告诉Apollo只替换乐观响应的节点,而不是整个边缘？有没有其他方法可以解决原始问题？

最佳答案 我会对此有所了解.

没有看到突变,我会认为它看起来像下面这样.

mutation NewMessage($message: String!, $threadId: ID!) {
  sendMessage(message: $message, threadId: $threadId) {
    ...messageInfo
  }
}

如果是这种情况,那么推断消息应该在连接中的哪个位置可能是不可靠的.由于游标是不透明的字符串,因此我们无法确定此消息是否应该在最新消息之后.

相反,我会尝试以下内容.

mutation NewMessage(message: String!, threadId: ID!, $after: Cursor, first: Int) {

  sendMessage(message: $message, threadId: $threadId) {
    messageConnection(
      after: $after,
      first: $first,
      before: null,
      last: null
    ) @connection(key: "messageConnection") {
      edges {
        cursor
        node { ...messageInfo }
      }
    }
  }
}

此连接应包括新消息以及之后添加的任何其他消息.

点赞