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

Question

我可以在网络选项卡中成功查看我的重新获取数据。但我看不到检索数据并使用它的方法。

下面是我如何处理重新获取，我希望数据是{(mutation, result, ...rest) => {的一部分但是这些在rest中没什么

< Container />

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,
});

container.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/>s工作是访问数据（来自服务器或缓存） - 这就是为什么你看到'重新获取网络选项卡中的数据'，你在refetchQueries中记录的查询是单独触发的它自己的调用，数据被推送到缓存中以便<Query/>s在屏幕上显示更新的数据。

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

我怀疑在这种情况下，您不需要使用refetchQueries，因为您正在改变单个对象，我怀疑您将在页面上显示该单个对象（借助于<Query/>）。但是，如果您在服务器上更改了数据，则需要保留refetchQueries。

下面是一个小（丑陋）的例子，我将一个Mutation的实现包装在一个获取数据的Query中。当你单击按钮时它将触发Mutation（但没有args，所以我猜没有什么会改变？），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时它会发生，请查看突发的'update'选项。它是refetchQueries的替代方法，允许您以预定方式手动更新缓存，而不是对服务器进行往返调用以获取新数据。