如何在突变后更新阿波罗缓存（使用过滤器查询）

Posted 2023-03-08

【中文标题】如何在突变后更新阿波罗缓存（使用过滤器查询）

【英文标题】：How to update apollo cache after mutation (query with filter)

【发布时间】：2018-08-05 18:39:40

【问题描述】：

我对 GraphQL 很陌生。我在带有 apollo 的 Vue.js 项目中使用 graph.cool。

我现在正在使用内存缓存。 我之前有一个简单的“allPosts”查询。 在创建一个新的之后，我使用了 update() 钩子和 readQuery() + writeQuery()

但是我希望登录的用户只能看到他们的帖子。所以我用过滤器修改了查询。

query userStreams ($ownerId: ID!) 
  allStreams(filter: 
   owner: 
     id: $ownerId
   
  ) 
    id
    name
    url
    progress
    duration
    watched
    owner 
      id
    
  

我的想法是，我只需要传入 userid 变量。但是，这是行不通的。我总是得到

Error: Can't find field allStreams("filter":"owner":) on object (ROOT_QUERY) undefined.




this.$apollo.mutate(
      mutation: CREATE_STREAM,
      variables: 
        name,
        url,
        ownerId
      ,
      update: (store,  data:  createStream  ) => 
        const data = store.readQuery(
          query: USERSTREAMS,
          variables: 
            id: ownerId
          
        )
        data.allStreams.push(createStream)
        store.writeQuery(
          query: USER_STREAMS,
          variables: 
            id: ownerId
          ,
          data
        )
      
    )

【参考方案1】：

当您使用 readQuery 或 writeQuery 时，您应该使用相同的变量名。所以替换

  variables:  id: ownerId 

有

  variables:  ownerId 

此外，您收到异常的原因是，如果数据不在存储中，readQuery 会引发异常。这发生在您第一次使用 writeQuery（或通过其他查询获取数据）之前。

您可以在调用此突变之前将一些默认值写入存储。

您也可以使用返回 null 而不是抛出异常的 readFragment。但这需要对您的代码进行更多更改。