突变后 React Apollo 更新客户端缓存

Question

我正在尝试在成功执行突变后更新我的 chache。这是我的查询和突变：

export const Dojo_QUERY = gql`
query Dojo($id: Int!){
  dojo(id: $id){
    id,
    name,
    logoUrl,
    location {
     id,
     city,
     country
    },
    members{
      id
    },
    disziplines{
      id,
      name
    }
  } 
}`;


export const addDiszipline_MUTATION = gql`
mutation createDisziplin($input:DisziplineInput!,$dojoId:Int!){
  createDisziplin(input:$input,dojoId:$dojoId){
    disziplin{
     name,
     id
    }
  }
}`;

我的突变调用：

const [createDisziplin] = useMutation(Constants.addDiszipline_MUTATION,
    {
      update(cache, { data: { createDisziplin } }) {
        console.log(cache)
        const { disziplines } = cache.readQuery({ query: Constants.Dojo_QUERY,variables: {id}});
        console.log(disziplines)
        cache.writeQuery({
        ...some update logic (craches in line above)
        });
      }
    }
    );

当我执行这个突变时，我得到了错误

Invariant Violation: "Can't find field dojo({"id":1}) on object {
  "dojo({\"id\":\"1\"})": {
    "type": "id",
    "generated": false,
    "id": "DojoType:1",
    "typename": "DojoType"
  }
}."

在我的客户端缓存中我可以看到

data{data{DojoType {...WITH ALL DATA INSIDE APPART FROM THE NEW DISZIPLINE}}

和

data{data{DisziplineType {THE NEW OBJECT}}

网络上的客户端缓存似乎存在很多混淆。不知何故 none 提出的解决方案对我有所帮助，或者对我有意义。任何帮助将不胜感激。

编辑 1： 也许这可以帮助？

ROOT_QUERY: {…}
"dojo({\"id\":\"1\"})": {…}
generated: false
id: "DojoType:1"
type: "id"
typename: "DojoType"
<prototype>: Object { … }
<prototype>: Object { … }

编辑 2

我听取了 Herku 的建议并开始使用片段。但是它似乎仍然不太有效。

我更新的代码：

 const [createDisziplin] = useMutation(Constants.addDiszipline_MUTATION,
    {
      update(cache, { data: { createDisziplin } }) {
        console.log(cache)
        const { dojo } = cache.readFragment(
          { fragment: Constants.Diszilines_FRAGMENT,
            id:"DojoType:"+id.toString()});
        console.log(dojo)
      }
    }
    );

和

export const Diszilines_FRAGMENT=gql`
  fragment currentDojo on Dojo{
    id,
    name,
    disziplines{
      id,
      name
    }
  }
`;

但是 console.log(dojo) 的结果仍然是 undefined.Any 建议？

Answer 1

所以我认为您的实际错误是您必须以字符串形式提供 ID：variables: {id: id.toString()}。可以看到这两行是不一样的：

dojo({\"id\":1})
dojo({\"id\":\"1\"})

但我强烈建议使用 readFragment 而不是 readQuery 并使用提供的 ID 更新 dojo。这也应该更新查询以及所有其他查询中出现的 dojo。您可以在 readFragment here.

上找到文档

另一个技巧是简单地 return 整个道场对突变的反应。我想说人们应该不那么害怕，不要做太多的缓存更新，因为缓存更新是你的 API 的隐式行为，这在你的类型系统中是不存在的。可以在 disziplins 字段中找到新的 disziplin 现在已在您的前端进行编码。想象一下，您想在这里添加另一个步骤，新的 disziplins 必须先获得批准才能进入。如果突变 return 是整个道场的一个简单的后端更改就可以完成这项工作，而您的客户不必知道这种行为。

突变后 React Apollo 更新客户端缓存

React Apollo updating client cache after mutation

reactjs

graphql

apollo

react-apollo