[解決済み] 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
イベントが発生します。
関連
-
[解決済み】React - 式は1つの親要素を持つ必要がありますか?
-
[解決済み] エラー: 未定義のプロパティ 'map' を読み取ることができません。
-
[解決済み】<Router>の外側で<Link>を使用してはならない
-
[解決済み] react - createMuiThemeとcreateThemeの違い。
-
[解決済み] configuration.module に未知のプロパティ 'loaders' があります。
-
[解決済み] Webpack + Babelです。プリセット "es2015 "がディレクトリに相対して見つからなかった
-
[解決済み] React - _this2.SetStateは関数ではありません。
-
[解決済み] ReactJS - SCRIPT1010: 期待される識別子 - IE11 で本番ビルドが実行されない
-
[解決済み] ReactコンポーネントのJest SnapshotテストにおけるSnapshotテストの仕組みとtoMatchSnapshot()関数は何をするのか?
-
[解決済み] Reactのrender()にFont Awesomeのアイコンを入れる方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] MUI Boxは何のためのコンポーネントですか?
-
[解決済み] React - 予想外のトークン、予想外の;
-
[解決済み] React TypeScriptで作業しているときに、Jestが予期しないトークンに遭遇した
-
[解決済み] react.jsでng-ifに相当するものは何ですか?
-
[解決済み] react.jsで複数のモジュールをエクスポートする
-
[解決済み] ReactJs "インバリアント違反..." リアクトの古典的な問題
-
[解決済み] ReactコンポーネントのJest SnapshotテストにおけるSnapshotテストの仕組みとtoMatchSnapshot()関数は何をするのか?
-
[解決済み] componentWillReceivePropsライフサイクルメソッドはいつ使用するのですか?
-
[解決済み] React QueryとReduxの主な違いは何ですか?
-
[解決済み] ESLintとTSLintの違い【クローズド】について