变异后如何更新本地数据？

如何解决变异后如何更新本地数据？

我想找到一种更好的方法在执行mutation后更新本地组件状态。我正在使用 svelte-apollo，但我的问题是关于基本原则的。我有 watchQuery 获取项目列表并在组件中返回 ObservableQuery。

query GetItems($sort: String,$search: String!) {
  items(
    sort: $sort
    where: { name_contains: $search }
  ) {
    id
    name
    item_picture{
      pictures{
        url
        previewUrl
      }
    }
    description
    created_at
  }
}

在组件中我称之为：

<script>
  $: query = GetItems({
    variables: {
      sort: 'created_at:DESC',search
    }
  });
</script>
...
{#each $query.data?.items || [] as item,key (item.id)}
  <div>
    <Item
      deleteItem={dropItem}
      item={item}
      setActiveItem={setActiveItem}
    />
  </div>
{/each}
...

而且我有 addItem 突变。

mutation addItem($name: String!,$description: String) {
  createItem(
    input: { data: { name: $name,description: $description } }
  ) {
    item {
      name
      description
    }
  }
}

我只是想更新本地状态并将新项目添加到 addItem 变异后的可观察查询结果中，而不使用 refetchQueries（因为我不想通过网络获取所有列表时我只是添加了一项）。 我在缓存中看到了这个项目，但我的视图没有更新。

附言如果您有类似的问题和解决方法，很高兴看到您的一些案例。

解决方法

我相信在这种情况下，如果您希望跳过来自 refetchQueries 的网络请求，您可以使用 cache.modify 函数直接修改缓存。这对您的用例有用吗？ https://www.apollographql.com/docs/react/data/mutations/#making-all-other-cache-updates

如果您不介意网络请求，我喜欢使用 cache.evict 来驱逐缓存中我知道个人更改的数据。在大多数情况下，我更喜欢 refetchQueries，因为它会重新获取使用该数据的所有查询，而不仅仅是我指定的查询。