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

本文是小编为大家收集整理的关于使用Apollo客户端注销后重置商店的处理/解决方法，可以参考本文帮助大家快速定位并解决问题，中文翻译不准确的可切换到English标签页查看源文。

中文
English

问题描述

我正在尝试在我的React-Apollo应用程序中注销后重置商店.

所以我创建了一种名为"logout"的方法，当我点击一个按钮时被调用(并通过'ondisconnect'props).

要做我试图遵循这个例子: https://www.apollographql.com/docs/reacod/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 Client注销的这种情况或一个示例/最佳实践?

通过前进感谢

其他推荐答案

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

其他推荐答案

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

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

const client = useApolloClient();

client.clearStore();

本文地址：https://www.itbaoku.cn/post/1938054.html

百度翻译此文有道翻译此文

问题描述

I'm trying to reset the store after logout in my react-apollo application.

So I've created a method called "logout" which is called when I click on a button (and passed by the 'onDisconnect' props).

To do that I've tried to follow this example : https://www.apollographql.com/docs/react/recipes/authentication.html

But in my case I want LayoutComponent as HOC (and it's without graphQL Query).

Here is my component :

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

The issue here is that 'client' is not defined and I can't logout properly. Do you have any idea to help me to handle this situation or an example/best practices to logout from apollo client ?

Thanks by advance

其他推荐答案

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

Above statement is very correct.

I was also having the logout related problem. After using client.resetStore() It refetched all pending queries, so if you logout the user and remove session token after logout you will get authentication errors.

I used below approach to solve this problem -

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

Important part is this function -

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

其他推荐答案

you can use useApolloClient to access apollo client.

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

const client = useApolloClient();

client.clearStore();

上一篇：使用apollo graphql的react firebase认证

下一篇：graphql模式的循环引用是一种反模式吗？