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

Question

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

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（因为我不想获取所有列表当我刚添加一个项目时通过网络）。我在缓存中看到了这个项目，但我的视图没有更新。

P.S。如果您也有类似的问题和解决方法，很高兴看到您的案例。

Answer 1

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

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

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

How to update local data after mutation?

apollo

apollo-client

svelte

svelte-3

svelte-store