Question

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

所以我创建了一个名为＆＃34; logout＆＃34;的方法。当我点击一个按钮（然后通过＆on-onDisconnect＆＃39;道具传递）时调用它。

要做到这一点，我试图效仿这个例子： 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);

这里的问题是＆＃39;客户＆＃39;没有定义，我无法正常注销。您是否有任何想法帮助我处理这种情况或从阿波罗客户端注销的示例/最佳实践？

先谢谢

Answer 1

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

client.cache.reset()

client是您的Apollo客户。

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

Answer 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
                  });
                }}

Answer 3

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

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

const client = useApolloClient();

client.clearStore();

Answer 4

您非常亲密！

应该是 this.props.client.resetStore（）

，而不是 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不会重新获取所有活动查询。

使用Apollo客户端

4 个答案: