javascript - 无法使用 Apollo 和 GraphQL 访问从 refetchQueries 返回的数据

Question

我可以在网络选项卡中成功看到我的重新获取收集数据。但我看不出有什么方法可以检索并使用这些数据。

下面是我处理重新获取的方式，我希望数据是 {(mutation, result, ...rest) => { 的一部分，但是这些在 中没有休息

<容器/>

const onUpdateTask = ({ render }) => <Mutation
    mutation={UPDATE_TASK}
    refetchQueries={
      [
        {
          query: GET_TASKS_BY_USER_ID,
          variables: {
            assigneeId: authStorage.get().id,
          },
        },
      ]
    }
    awaitRefetchQueries={true}
  >
    {(mutation, result, ...rest) => {
      return render({ mutation, result, rest })
    }}
  </Mutation>

export default adopt({
  onUpdateTask,
});

容器.js

  <Container {...this.props}>
    {({
      onUpdateTask,
    }) => {
        console.info(onUpdateTask); //see image
    }}
  </Container>

据我所知，data 更新了一些我不理解的随机查询。

这是网络选项卡中查询的数据:

[{"data":{"tasks":{"edges":[{"node":{"id":1,"title":"Task 11212111","createdAt":"2019-03-12T12:14:21.640904+00:00","priority":"HIGH","dueDate":"2019-03-03T12:37:57.68033+00:00","details":"Some details","status":"OPEN","assigneeId":"auth0|5b448ea16d829f1018602bd6","creatorId":"auth0|5b448ea16d829f1018602bd6","__typename":"IssueTask"},"__typename":"IssueTasksEdge"},{"node":{"id":2,"title":"1Task 211","createdAt":"2019-03-12T12:14:21.642818+00:00","priority":"MEDIUM","dueDate":"2019-03-03T12:37:57.68033+00:00","details":"Some details","status":"OPEN","assigneeId":"auth0|5b448ea16d829f1018602bd6","creatorId":"auth0|5b448ea16d829f1018602bd6","__typename":"IssueTask"},"__typename":"IssueTasksEdge"},{"node":{"id":3,"title":"Task 1111","createdAt":"2019-03-12T12:14:21.644163+00:00","priority":"LOW","dueDate":"2019-03-03T12:37:57.68033+00:00","details":"Some details","status":"OPEN","assigneeId":"auth0|5b448ea16d829f1018602bd6","creatorId":"auth0|5b448ea16d829f1018602bd6","__typename":"IssueTask"},"__typename":"IssueTasksEdge"},{"node":{"id":4,"title":"Cock","createdAt":"2019-03-12T12:14:21.645699+00:00","priority":"MEDIUM","dueDate":"2019-03-03T12:37:57.68033+00:00","details":"Some details","status":"OPEN","assigneeId":"auth0|5b448ea16d829f1018602bd6","creatorId":"auth0|5b448ea16d829f1018602bd6","__typename":"IssueTask"},"__typename":"IssueTasksEdge"},{"node":{"id":5,"title":"Task 5 balls","createdAt":"2019-03-12T12:14:21.646978+00:00","priority":"LOW","dueDate":"2019-03-03T12:37:57.68033+00:00","details":"Some details","status":"OPEN","assigneeId":"auth0|5b448ea16d829f1018602bd6","creatorId":"auth0|5b448ea16d829f1018602bd6","__typename":"IssueTask"},"__typename":"IssueTasksEdge"},{"node":{"id":6,"title":"Task 6","createdAt":"2019-03-12T12:14:21.648202+00:00","priority":"HIGH","dueDate":"2019-03-03T12:37:57.68033+00:00","details":"Some details","status":"OPEN","assigneeId":"auth0|5b448ea16d829f1018602bd6","creatorId":"auth0|5b448ea16d829f1018602","__typename":"IssueTask"},"__typename":"IssueTasksEdge"},{"node":{"id":7,"title":"Task 7","createdAt":"2019-03-12T12:14:21.649414+00:00","priority":"MEDIUM","dueDate":"2019-03-03T12:37:57.68033+00:00","details":"Some details","status":"OPEN","assigneeId":"auth0|5b448ea16d829f1018602bd6","creatorId":"auth0|5b448ea16d829f1018602bd6","__typename":"IssueTask"},"__typename":"IssueTasksEdge"},{"node":{"id":8,"title":"Jamie","createdAt":"2019-03-12T12:14:21.650558+00:00","priority":"LOW","dueDate":"2019-03-03T12:37:57.68033+00:00","details":"Some details","status":"OPEN","assigneeId":"auth0|5b448ea16d829f1018602bd6","creatorId":"auth0|5b448ea16d829f1018602bd6","__typename":"IssueTask"},"__typename":"IssueTasksEdge"},{"node":{"id":9,"title":"Task 911","createdAt":"2019-03-12T12:14:21.651912+00:00","priority":"HIGH","dueDate":"2019-03-03T12:37:57.68033+00:00","details":"Some details","status":"OPEN","assigneeId":"auth0|5b448ea16d829f1018602bd6","creatorId":"auth0|5b448ea16d829f1018602bd6","__typename":"IssueTask"},"__typename":"IssueTasksEdge"},{"node":{"id":10,"title":"Task 10","createdAt":"2019-03-12T12:14:21.653051+00:00","priority":"MEDIUM","dueDate":"2019-03-03T12:37:57.68033+00:00","details":"Some details","status":"OPEN","assigneeId":"auth0|5b448ea16d829f1018602bd6","creatorId":"auth0|5b448ea16d829f1018602bd6","__typename":"IssueTask"},"__typename":"IssueTasksEdge"}],"__typename":"IssueTasksConnection"}}}]

Package.json

"apollo-client": "^2.5.1",
"graphql": "14.0.2",
"graphql-tag": "2.10.0",
"react-apollo": "2.3.3",

Answer 1

<Mutation/>对象不访问对 refetchQueries 的响应以在页面上显示数据 - 这是 <Query/> 的工作. <Mutation/> s 的工作是更改数据和 <Query/>他的工作是访问数据(从服务器或缓存)——这就是为什么您会看到“在网络选项卡中重新获取收集数据”，即您在 refetchQueries 中记录的查询。在它自己的调用中单独触发，并将数据插入 <Query/> 的缓存中s 在屏幕上显示更新的数据。

当您触发一个突变时，您将取回您要求的数据(如您在“result.data.updateIssueByTaskId”中所示)，并且该数据将被推送到缓存中。在大多数情况下，这足以更新任何 <Query/> s 在观察该数据的页面上，但在某些情况下(例如列表，并且您已将项目添加到列表中)，您可能需要进行一些干预(例如使用 refetchQueries 或 update )

我怀疑在这种情况下你不需要使用 refetchQueries当您改变单个对象时，我怀疑您将在页面上显示该单个对象(在 <Query/> 的帮助下)。但是，如果您的数据在服务器上发生更改，您将希望保留 refetchQueries .

下面是一个小的(丑陋的)示例，其中我将您对 Mutation 的实现包装在获取数据的查询中。当你点击按钮时，它会触发 Mutation(但没有参数，所以我想什么都不会改变？)，然后 Mutation 将重新获取 GET_TASKS_BY_USER_ID。查询，以及 <Query/>组件将看到更新的缓存，因此自动在其子组件中显示新数据。 (我没有使用查询的错误或加载状态，但已将它们放在那里以便您了解它们)

<Query query={GET_TASKS_BY_USER_ID} variables={{assigneeId: authStorage.get().id}}>
  {({ data, error, loading }) => (
    <div>
      {data && data.tasks.edges.map(edge => (
        <span>{edge.node.id}></span>
        <span>{edge.node.title}</span>
      )}
      <Container {...this.props}>
        {({onUpdateTask}) => (
          <button onClick={onUpdateTask}>Update Task </button>
        )}
      </Container>
    </div>
  )}
</Query>

试一试这样的东西，了解它们的工作原理。您可能需要向突变添加一些变量，以便数据发生变化，然后在屏幕上确认它发生了变化。尝试从您的突变中删除 refetchQueries 并查看它是否仍按您的意愿更新。

如果您发现在没有 refetchQueries 的情况下您的数据没有像您想要的那样更新，但是当您有 refetchQueries 时它会更新，请查看突变的“更新”选项。它是 refetchQueries 的替代方法，允许您以预定方式手动更新缓存，而不是对服务器进行往返调用以获取新数据。