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

Question

我想在执行突变后找到一种更好的方法来更新本地组件状态。我正在使用 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（因为我不想在刚添加一个项目时通过网络获取所有列表）。我在缓存中看到了这个项目，但我的视图没有更新。

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

Answer 1

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

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