アポロクライアント2.0 graphqlは、私はアポロ/ graphqlに新たなんだと私は私の認証はグリ​​ーンフィールドプロジェクト内で適切に行わ取得しようとしている認証

Question

を反応させます。私の認証プロバイダはAWS cognitoです。私はそれとやり取りするコグニティブヘルパーモジュールを書いた。

私は私の認証状態で私のアポロクライアントを同期するかどうかはかなりよく分からないけど。今私はちょうど私のコンポーネントハンドラを反応させ、それらを呼び出すことにより、ログイン情報を処理するために、これらの機能を使用してい

export const authenticate = (username: string, password: string) => { 
    const authDetails = new AuthenticationDetails({ 
    Username: username, 
    Password: password, 
    }) 
    const cognitoUser = getCognitoUser(username) 
    return new Promise((resolve, reject) => { 
    cognitoUser.authenticateUser(authDetails, { 
     onSuccess: result => { 
     resolve(result) 
     }, 
     onFailure: err => { 
     reject(err) 
     }, 
    }) 
    }) 
} 

export const getCurrentUserToken =() => { 
    return new Promise((resolve, reject) => { 
    const currentUser = userPool.getCurrentUser() 
    if (currentUser) { 
     currentUser.getSession((error, session) => { 
     if (error) { 
      reject(error) 
     } 
     resolve(session.getIdToken().getJwtToken()) 
     }) 
    } else { 
     resolve(null) 
    } 
    }) 
} 

export const logout =() => { 
    const currentUser = userPool.getCurrentUser() 
    if (currentUser) { 
    currentUser.signOut() 
    } 
} 

。 authヘッダーを追加するためのアポロリンクを設定しました。私のJWTトークンデータをバックエンドのコンテキストに注入し、バックエンドにcurrentUserクエリーリゾルバを実装しました。私は

const resolvers = { 
    RootQuery: { 
    currentUser: (obj, args, context) => 
     context.tokenData 
     ? { 
      id: context.tokenData.sub, 
      name: context.tokenData.name, 
      email: context.tokenData.email, 
      username: context.tokenData['cognito:username'], 
      } 
     : null, 
    }, 
} 

私はそのcurrentUserクエリをクエリコンポーネントUserPanelを得たアプリケーションのレイアウトを反応させます。

const CURRENT_USER_QUERY = gql` 
    query { 
    currentUser { 
     name 
    } 
    } 
` 

export default graphql(CURRENT_USER_QUERY)(UserPanel) 

私が今明らかにUserPanelは、私はページのOFCをリロードてる以外のcurrentUserクエリを更新しないでログインしています。しかし、私も、それらを同期させるための良い解決策を見いだすのに苦労しています。

私は、ローカルにそれを行うと、誰かが中/ログアウト場合は再フェッチするためにこれらを見てapollo-link-stateを使用してgraphql突然変異を経て、私のログインを実装することを考えました。私は、このリンクがその突然変異のリゾルバで非同期のもの（例えば約束）を解決できないように思えるので、これがうまくいけば分かりません。

私が考えていたもう一つの選択肢は、authプロセスをapolloクライアントから完全に切り離して、Observablesというauth pubsubシステムを実装し、認証状態が変更された場合に反応コンポーネントがクエリを再取得するようにすることでした。

私が継続すると私は考えているすべてのソリューションを行くための推奨される方法のように感じることはありませんどのように非常に不確かです。

Answer 1

私はあなたのセットアップを反応させるのが、ここで私は行くにに関して全体像を持っていません。 ApolloクライアントがCURRENT_USER_QUERYをローカルにキャッシュしていて、前のクエリの結果を表示している可能性があります。私は私の親コンポーネントであるAppContainerある中で反応している何

export default graphql(CURRENT_USER_QUERY, { options: {fetchPolicy: 'network-only' }})(UserPanel) 

：あなたは、クエリの network-onlyオプションを試みることができます。私のUserProfileのページに続いて

const loggedInUser = gql` 
    query loggedInUser{ 
    user { 
     id 
     role 
    } 
    }` 


export default graphql(loggedInUser, { options: {fetchPolicy: 'network-only' }})(AppContainer) 

、私はのUserProfileの子コンポーネントにそれを渡す前に、データをフェッチするデータコンテナを使用します。これは、ユーザーがログインしているかどうかをチェックします。私はloggedInUserクエリが自動的にアポロストアのユーザーを更新すると思います。それによって、apollo-clientはuserQueryを再取得する必要があることを認識します。それは役に立ちますか？

const userQuery = gql` 
    query userQuery { 
    user { 
     id 
     name 
     email 
     role 
     company 
    } 
    } 
` 
export default graphql(userQuery, {name: 'userQuery'})(UserDataContainer);