Relay와 GraphQL로 React Native에서 현재 사용자 정보 조회하기

relay를 사용하여 react native 앱에서 현재 사용자 가져오기 소개 relay를 사용하여 react native 앱에 사용자 등록 및 로그인을 구현한 후, 다양한 작업 및 요청을 수행하기 위해 현재 로그인한 사용자 데이터를 검색해야 합니다 이 가이드에서는 로그인한 사용자 가져오기 graphql 요리책 가이드 https //www back4app com/docs/parse graphql/graphql get current user 와 쿼리 렌더러 https //www back4app com/docs/react native/graphql/relay query renderer 를 따라 현재 사용자에 대한 정보를 검색할 것입니다 graphql로 표현된 쿼리는 다음과 같습니다 1 query me { 2 viewer { 3 user{ 4 id 5 createdat 6 updatedat 7 username 8 } 9 sessiontoken 10 } 11 } 언제든지 github 리포지토리를 통해 이 프로젝트에 접근하여 스타일과 전체 코드를 확인할 수 있습니다 자바스크립트 예제 리포지토리 목표 현재 사용자에 대한 정보를 가져오는 컴포넌트를 생성합니다 전제 조건 parse server 버전 3 10 이상을 사용하여 back4app에서 생성된 앱입니다 다음의 relay 환경 설정 튜토리얼 다음의 relay를 사용한 react native 로그인 샘플 다음의 react native 사용자 로그인 이번 튜토리얼에서는 react native 프레임워크로 expo를 사용할 것입니다; 이번 튜토리얼에서는 자바스크립트를 기본 구현 언어로 사용할 것입니다; 언제든지 github 리포지토리를 통해 이 프로젝트에 접근하여 스타일과 전체 코드를 확인할 수 있습니다 javascript 예제 리포지토리 1 사용자 로그인 컴포넌트 생성 signin 컴포넌트 폴더에 새 파일을 만들고 이름을 userloggedrenderer js userloggedrenderer js 로 지정합니다 안에 userloggedrenderer js userloggedrenderer js , query renderer 튜토리얼과 매우 유사한 컴포넌트를 생성하겠습니다 하지만 이 경우에는 쿼리 렌더러만 필요합니다 유효한 세션 토큰이 애플리케이션에 들어가면, 컴포넌트가 호출되어 현재 사용자 정보를 가져옵니다 쿼리 렌더러 컴포넌트는 다음과 같이 보일 것입니다 1 return ( 2 \<queryrenderer 3 environment={environment} 4 query={// @todo implement the query necessary} 5 variables={null} 6 render={({error, props}) => { 7 if (error) { 8 return ( 9 \<view> 10 \<text>{error message}\</text> 11 \</view> 12 ); 13 } else if (props) { 14 // @todo implement a funcion to render the viewer 15 } 16 return ( 17 \<view> 18 \<text>loading\</text> 19 \</view> 20 ); 21 }} 22 /> 23 ); 첫 번째 @todo는 로그인한 사용자로부터 정보를 검색하는 쿼리로 구현되어야 합니다 이 작업에 사용되는 쿼리는 로그인한 사용자 가져오기 graphql 요리책 가이드 https //www back4app com/docs/parse graphql/graphql get current user 1 graphql` 2 query userloggedrendererquery { 3 viewer { 4 user { 5 id 6 createdat 7 updatedat 8 username 9 } 10 sessiontoken 11 } 12 } 13&#x9; 두 번째 @todo는 사용자에 대한 정보를 존재할 경우에만 렌더링하는 함수를 구현해야 합니다 오류가 없으면 아래에 설명된 rendercontent rendercontent 함수를 반환할 것입니다 이 함수는 현재 사용자 정보를(이메일 및 사용자 이름) 안전하게 렌더링합니다 1 const rendercontent = (viewer) => { 2 if (!viewer? user) { 3 return null; 4 } 5&#x9; 6 const {user} = viewer; 7&#x9; 8 return ( 9 \<view style={ {margintop 15, alignitems 'center'} }> 10 \<text>user {user? username || user? email} logged\</text> 11 \</view> 12 ); 13 }; 쿼리 렌더러 컴포넌트 전에 함수를 구현해야 합니다 컴포넌트의 최종 결과는 다음과 같아야 합니다 1 import react from 'react'; 2 import {graphql, queryrenderer} from 'react relay'; 3 import environment from ' / /relay/environment'; 4 import {text, view} from 'react native'; 5&#x9; 6 const userloggedrenderer = () => { 7 const rendercontent = (viewer) => { 8 if (!viewer? user) { 9 return null; 10 } 11&#x9; 12 const {user} = viewer; 13&#x9; 14 return ( 15 \<view style={ {margintop 15, alignitems 'center'} }> 16 \<text>user {user? username || user? email} logged\</text> 17 \</view> 18 ); 19 }; 20&#x9; 21 return ( 22 \<queryrenderer 23 environment={environment} 24 query={graphql` 25 query userloggedrendererquery { 26 viewer { 27 user { 28 id 29 createdat 30 updatedat 31 username 32 } 33 sessiontoken 34 } 35 } 36 `} 37 variables={null} 38 render={({error, props}) => { 39 if (error) { 40 return ( 41 \<view> 42 \<text>{error message}\</text> 43 \</view> 44 ); 45 } else if (props) { 46 return rendercontent(props viewer); 47 } 48 return ( 49 \<view> 50 \<text>loading\</text> 51 \</view> 52 ); 53 }} 54 /> 55 ); 56 }; 57&#x9; 58 export default userloggedrenderer; 2 signin 컴포넌트에 userloggedrenderer 가져오기 formsignin 컴포넌트로 돌아가서 현재 사용자 정보를 반환하는 코드를 새로운 사용자 로그인 컴포넌트로 교체하세요 에서 1 if (sessiontoken) { 2 console warn(sessiontoken); 3 return ( 4 \<view style={ { margintop 15, alignitems 'center' } }> 5 \<text>user logged\</text> 6 \</view> 7 ); 8 } 로 이제 yarn relay yarn relay 명령어를 실행하여 새로운 쿼리로 업데이트하세요 yarn relay yarn relay 이제 유효한 세션 토큰이 있는 사용자 이름 또는 이메일이 표시됩니다 그렇지 않으면 컴포넌트가 렌더링되지 않으며, 로그인 프로세스가 실행됩니다 또한, usestate userlogged userlogged 는 더 이상 의미가 없으므로 코드에서 제거할 수 있습니다 완료된 함수에서 login 변이로부터 그것을 제거하는 것을 잊지 마세요 결론 이 단계의 최종 결과는 마지막 단계와 동일해야 합니다 그에 대한 정보가 표시되지만 이제 사용자 이름 또는 이메일이 뒤따릅니다 다음 문서에서는 이 사용자의 로그아웃을 수행하고 세션을 정리하여 앱을 로그인 또는 가입 흐름으로 되돌리는 버튼을 만들어 보겠습니다