使用 Apollo 客户端注销后重置存储答案

【问题标题】：Reset store after logout with Apollo client使用 Apollo 客户端注销后重置存储
【发布时间】：2018-07-30 22:42:36
【问题描述】：

我正在尝试在我的 react-apollo 应用程序中注销后重置商店。

所以我创建了一个名为“logout”的方法，当我点击一个按钮时调用它（并通过“onDisconnect”道具传递）。

为此，我尝试遵循以下示例： https://www.apollographql.com/docs/react/recipes/authentication.html

但在我的情况下，我希望 LayoutComponent 作为 HOC（并且它没有 graphQL 查询）。

这是我的组件：

import React, {Component} from 'react';
import { withApollo, graphql } from 'react-apollo';
import { ApolloClient } from 'apollo-client';

import AppBar from 'material-ui/AppBar';
import Sidebar from 'Sidebar/Sidebar';
import RightMenu from 'RightMenu/RightMenu';

class Layout extends Component {
constructor(props) {
    super(props);        
}

logout = () => {
    client.resetStore();
    alert("YOUHOU");
}

render() {
    return (
        <div>
            <AppBar title="myApp" iconElementRight={<RightMenu onDisconnect={ this.logout() } />} />
        </div>
    );
}
}

export default withApollo(Layout);

这里的问题是未定义“客户端”，我无法正确注销。您有什么想法可以帮助我处理这种情况或从 apollo 客户端注销的示例/最佳实践吗？

提前致谢

【问题讨论】：

最后只需要添加 this.props.client.resetStore 来正确重置存储...
client.resetStore() 实际上并没有重置存储。它重新获取所有活动查询。
您适合重新获取所有活动查询，但似乎使用这种方法真正重置了存储，正如我在 apollo graphql 文档中看到的那样：apollographql.com/docs/react/recipes/…

标签： reactjs apollo react-apollo apollo-client

【解决方案1】：

如果您需要清除缓存并且不想获取您可以使用的所有活动查询：

client.cache.reset()

client 是您的 Apollo 客户。

请记住，这不会触发 onResetStore 事件。

【讨论】：

这些都不适合我，数据仍然存在于我的客户端缓存中。

【解决方案2】：

client.resetStore() 实际上并没有重置存储。它重新获取所有活跃的查询

以上说法非常正确。

我也遇到了与注销相关的问题。使用client.resetStore() 后，它重新获取了所有待处理的查询，因此如果您注销用户并在注销后删除会话令牌，您将收到身份验证错误。

我使用下面的方法来解决这个问题 -

<Mutation
    mutation={LOGOUT_MUTATION} 
                onCompleted={()=> {
                  sessionStorage.clear()
                  client.clearStore().then(() => {
                    client.resetStore();
                    history.push('/login')
                  });
                }}
              >
                {logout => (
                  <button
                    onClick={() => {
                      logout();
                    }}
                  >
                    Logout <span>{user.userName}</span>
                  </button>
                )}
              </Mutation>

重要的是这个功能-

onCompleted={()=> {
                  sessionStorage.clear(); // or localStorage
                  client.clearStore().then(() => {
                    client.resetStore();
                    history.push('/login') . // redirect user to login page
                  });
                }}

【讨论】：

【解决方案3】：

你很亲密！

而不是 client.resetStore() 它应该是 this.props.client.resetStore()

withApollo() 将创建一个传入实例的新组件 ApolloClient 作为客户端属性。

import { withApollo } from 'react-apollo';

class Layout extends Component {
  ...
  logout = () => {
    this.props.client.resetStore();
    alert("YOUHOU");
  }
  ...
}

export default withApollo(Layout);

对于那些不确定 resetStore 和 clearStore 之间的区别的人：

resetStore()

通过清除缓存来重置整个商店，然后重新执行所有活动查询。这使您可以保证您的商店中没有任何前一段时间的数据你调用了这个方法。

clearStore()

从存储中删除所有数据。与 resetStore 不同，clearStore 不会重新获取任何活动查询。

【讨论】：

withApollo 已弃用。现在使用 useApolloClient。

【解决方案4】：

您可以使用useApolloClient 访问apollo 客户端。

import { useApolloClient } from "@apollo/client";

const client = useApolloClient();

client.clearStore();

【讨论】：