突变缓存更新不适用于 vue-apollo 和 Hasura答案

【问题标题】：Mutation cache update not working with vue-apollo and Hasura突变缓存更新不适用于 vue-apollo 和 Hasura
【发布时间】：2019-08-01 20:31:18
【问题描述】：

我对这些技术完全陌生，并且难以理解它，所以请耐心等待。所以，我的情况是我已经在 Heroku 上部署了 Hasura 并添加了一些数据，现在我正在尝试实现一些功能，我可以在其中添加和编辑表格的某些行。具体来说，我一直在关注 Hasura 的 this 和 vue-apollo 的 this。

我已经实现了添加和编辑（有效），现在还想通过使用突变的update 属性并更新缓存来在表中反映这一点。不幸的是，这就是我迷路的地方。我将在下面粘贴一些代码以使我的问题更清楚：

添加玩家的突变 (ADD_PLAYER_MUTATION)（与上面链接的 Hasura 文档中的相同）：

mutation addPlayer($objects: [players_insert_input!]!) {
  insert_players(objects: $objects) {
    returning {
      id
      name
    }
  }
}

.vue 文件中的突变代码

addPlayer(player, currentTimestamp) {
  this.$apollo.mutate({
    mutation: PLAYER_ADD_MUTATION,
    variables: {
      objects: [
        {
          name: player.name,
          team_id: player.team.id,
          created_at: currentTimestamp,
          updated_at: currentTimestamp,
          role_id: player.role.id,
          first_name: player.first_name,
          last_name: player.last_name
        }
      ]
    },
    update: (store, { data: { addPlayer } }) => {
      const data = store.readQuery({
        query: PLAYERS
      });
      console.log(data);
      console.log(addPlayer);
      data.players.push(addPlayer);
      store.writeQuery({ query: PLAYERS, data });
    }
  });
},

我并没有真正理解突变的update 部分。在大多数示例中，{ data: { x } } 位使用函数名称代替x，所以我也这样做了，尽管我真的不明白为什么（至少我很困惑）。记录data 时，会记录玩家数组，但记录addPlayer 时会记录undefined。

我可能做错了对其他人来说非常简单的事情，但我显然不确定是什么。也许突变没有返回正确的东西（尽管我认为在这种情况下它不会记录undefined），或者根本没有返回任何东西。这尤其令人困惑，因为播放器实际上已添加到数据库中，因此只是 update 部分不起作用 - 另外，大多数指南/教程都显示相同的内容而没有太多解释.

【问题讨论】：

标签： postgresql vue.js graphql vue-apollo hasura

【解决方案1】：

好的，所以对于像我这样愚蠢的人来说，这基本上就是我做错的地方：

而不是update: (store, { data: { addPlayer } }) 中的addPlayer，它应该是突变的名称，所以在本例中为insert_players。
默认情况下，来自 Hasura 的突变响应有一个 returning 字段，这是一个列表，因此添加的玩家是列表中的第一个元素，因此您可以这样获取：const addedPlayer = insert_players.returning[0];

我不想在发布问题后不久就删除我的问题，以防这对像我这样的其他人有用，所以我会保留它。

【讨论】：