如何从突变查询中更新 Apollo 数据存储/缓存，更新选项似乎没有触发

Posted 2023-03-08

【中文标题】如何从突变查询中更新 Apollo 数据存储/缓存，更新选项似乎没有触发

【英文标题】：How do I update the Apollo data store/cache from a mutation query, the update option doesn't seem to trigger

【发布时间】：2017-10-16 02:28:41

【问题描述】：

我的 React Native 应用程序中有一个高阶组件，用于检索配置文件。当我调用“添加追随者”突变时，我希望它更新个人资料以反映其追随者集合中的新追随者。如何手动触发对商店的更新。我可以重新获取整个配置文件对象，但更愿意只在没有网络重新获取的情况下进行插入客户端。目前，当我触发突变时，配置文件不会反映屏幕上的变化。

看起来我应该使用update 选项，但它似乎不适用于我命名的突变。 http://dev.apollodata.com/react/api-mutations.html#graphql-mutation-options-update

const getUserQuery = gql`
 query getUserQuery($userId:ID!) 
    User(id:$userId) 
      id
      username
      headline
      photo
      followers 
        id
        username
        thumbnail
      
    
 
`;
...

const followUserMutation = gql`
  mutation followUser($followingUserId: ID!, $followersUserId: ID!) 
    addToUserFollowing(followingUserId: $followingUserId, followersUserId: $followersUserId) 
      followersUser 
        id
        username
        thumbnail
      
    
  `;
...

@graphql(getUserQuery)
@graphql(followUserMutation,  name: 'follow' )
@graphql(unfollowUserMutation,  name: 'unfollow' )
export default class MyProfileScreen extends Component Profile

...

  this.props.follow(
    variables,
    update: (store,  data:  followersUser  ) => 
      //this update never seems to get called
      console.log('this never triggers here');
      const newData = store.readQuery( getUserQuery );
      newData.followers.push(followersUser);
      store.writeQuery( getUserQuery, newData );
    ,
  );

【参考方案1】：

编辑：刚刚意识到您需要将更新添加到突变的 graphql 定义中。

编辑 2：@MonkeyBonkey 发现您必须在读取查询函数中添加变量

@graphql(getUserQuery)
@graphql(followUserMutation, 
  name: 'follow',
  options: 
    update: (store,  data:  followersUser  ) => 

       console.log('this never triggers here');
       const newData = store.readQuery(query:getUserQuery, variables);
       newData.followers.push(followersUser);
       store.writeQuery( getUserQuery, newData );
     
  ,
);
@graphql(unfollowUserMutation, 
  name: 'unfollow'
)
export default class MyProfileScreen extends Component Profile

  ...

  this.props.follow(
      variables:  .... ,
    );

我建议您使用updateQueries 功能link 更新商店。

例如看这个post

您可以使用compose 将突变添加到组件中。在突变内部，您不需要调用client.mutate。您只需在关注用户点击时调用突变。

也可以让 apollo 为您处理更新。如果您稍微更改突变响应，则将以下用户添加到被关注用户并添加 dataIdFromObject 功能。 link

【讨论】：

根据文档 - 它说 updateQueries 已被弃用并使用更新而不是dev.apollodata.com/react/cache-updates.html#updateQueries，我尝试使用更新选项，但它似乎没有触发更新 - 我将更新该代码的问题 sn-p

你有 console.log(newData).一件事，您可能必须为readQuery 命名查询才能找到它。 const getUserQuery = gql'query getUserQuery ....

我命名了 readquery - 但仍然没有触发更新功能 - 我 console.log 第一行但它没有被调用 - 我将使用 console.log 和你的更新问题为查询命名的建议

更新了我的答案。我认为您必须在 graphQL 定义中添加更新定义。也许它不是这样工作的，但它是要走的路

我在你的示例中的 graphql 定义中尝试过，但它似乎仍然没有触发，我使用的是 apollo-client 版本 1.2.2 和 react-apollo 1.2.0