apollo client 2.0 graphql react auth

Question

저는 apollo/graphql을 처음 사용하고 있습니다. greenfield 프로젝트에서 제대로 인증을 받으려고합니다. 인증 공급자는 AWS cognito입니다. 나는 그것과 상호 작용하는인지 조수 모듈을 썼다.

내 autolate 상태로 내 apollo 클라이언트를 동기화하는 방법을 잘 모르겠지만.

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 헤더를 추가하기 위해 apollo-link를 구성했습니다. 내 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) 

내가 내가 페이지 OFC를 다시로드하고있어 제외하고는 지금 분명히 사용자 패널이 currentUser 쿼리를 업데이트하지 않습니다 로그인하고합니다. 나는 또한 그들을 동기화하는 좋은 해결책을 찾는 데 어려움을 겪고 있지만.

나는 로컬로 할 수있는 apollo-link-state을 사용하여 graphql 변이를 통해 로그인을 구현하려고 생각하고 있었고 누군가가 로그인/로그 아웃 한 경우 다시 가져 오는 것을 지켜 보았습니다. 이 링크가 돌연변이 해결 자에서 비동기적인 내용 (예 : 약속)을 ​​해결할 수 없다고 생각하기 때문에 괜찮은지 잘 모르겠습니다.

내가 생각했던 또 다른 옵션은 auth 프로세스를 apollo 클라이언트에서 완전히 분리하고 Observables이라는 인증 auth pubsub 시스템을 구현하고 인증 상태가 변경되면 반응 구성 요소가 쿼리를 다시 보냅니다.

나는 계속하는 방법과 내가 생각하고있는 모든 해결책이 권장되는 방법이라고 생각하지 않는다.

Answer 1

귀하의 반응 설정과 관련하여 전체적인 그림이 없지만 여기에 있습니다. Apollo-client가 로컬에서 CURRENT_USER_QUERY를 캐싱하고 이전 쿼리의 결과를 보여줄 수 있습니다. 당신은 쿼리에 network-only 옵션을 시도 할 수 :

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

가 내가있는이 반작용하는 내 상위 구성 요소 인 AppContainer이다.

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