使用 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);

这里的问题是 'client' 没有定义，我无法正常注销。您有什么想法可以帮助我处理这种情况或 example/best 从 apollo 客户端注销的做法吗？

提前致谢

Answer 1

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

client.cache.reset()

client 成为您的 Apollo 客户。

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

Answer 2

client.resetStore() doesn't actually reset the store. It refetches all active queries

以上说法非常正确

我也遇到了与注销相关的问题。使用后 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

你们非常亲密！

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

withApollo() will create a new component which passes in an instance of ApolloClient as a client prop.

import { withApollo } from 'react-apollo';

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

export default withApollo(Layout);

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

resetStore()

Resets your entire store by clearing out your cache and then re-executing all of your active queries. This makes it so that you may guarantee that there is no data left in your store from a time before you called this method.

clearStore()

Remove all data from the store. Unlike resetStore, clearStore will not refetch any active queries.

Answer 4

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

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

const client = useApolloClient();

client.clearStore();

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

Reset store after logout with Apollo client

reactjs

apollo

react-apollo

apollo-client