使用Apollo客户端注销后重置商店

Question

我正在尝试在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客户端注销的示例/最佳实践？

谢谢你提前

Answer 1

如果您需要清除缓存而不想获取所有活动查询,则可以使用:

client.cache.reset()

client 成为你的阿波罗客户.

请记住,这不会触发onResetStore事件.

Answer 2

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

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

const client = useApolloClient();

client.clearStore();

Answer 3

client.resetStore（）实际上并不重置商店。它重新获取所有活动查询

以上说法很正确。

我也有注销相关的问题。使用client.resetStore()It 后，将重新提取所有未决的查询，因此，如果注销用户并在注销后删除会话令牌，则会收到身份验证错误。

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

<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 4

你非常接近！

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

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

import { withApollo } from 'react-apollo';

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

export default withApollo(Layout);

对于那些不确定resetStore和clearStore之间差异的人：

重置存储（）

通过清除缓存然后重新执行所有活动查询来重置整个存储。这使得您可以保证在调用此方法之前没有数据留在您的商店中。

清除存储（）

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