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

当您触发突变时，您将获得您要求的数据（正如您在'result.data.updateIssueByTaskId'中所示），并且该数据将被推送到缓存中。 在大多数情况下，这足以更新页面上正在观察该数据的任何<Query/> ，但在某些情况下（例如列表，并且您已将项目添加到列表中），您可能需要执行此操作一些干预（例如使用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的替代方法，允许您以预定方式手动更新缓存，而不是对服务器进行往返调用以获取新数据。