1. ホーム
  2. reactjs

[解決済み] Apolloクライアントでログアウトした後、ストアをリセットする

2022-02-02 08:18:05

質問

私は私のreact-apolloアプリケーションでログアウト後にストアをリセットしようとしています。

そこで、ボタンをクリックしたときに呼び出される "logout" というメソッドを作成しました(そして 'onDisconnect' プロパティによって渡されます)。

そのために、私はこの例に従ってみました。 https://www.apollographql.com/docs/react/recipes/authentication.html

しかし、私の場合、HOCとしてLayoutComponentが欲しいのです(そして、それはgraphQL Queryなしです)。

これが私のコンポーネントです。

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'が定義されていないため、正しくログアウトできないことです。 この状況に対処するためのアイデアや、apolloクライアントからログアウトするための例/ベストプラクティスをご存知でしょうか?

ありがとうございました。

どのように解決するのですか?

キャッシュをクリアする必要があり、アクティブなクエリをすべて取得する必要がない場合は、この方法を使用することができます。

client.cache.reset()

client Apolloのクライアントであること。

これは onResetStore イベントが発生します。