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

9 분

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 리포지토리를 통해 이 프로젝트에 접근하여 스타일과 전체 코드를 확인할 수 있습니다 자바스크립트 예제 리포지토리 https //github com/templates back4app/react native graphql relay js users 목표 현재 사용자에 대한 정보를 가져오는 컴포넌트를 생성합니다 전제 조건 parse server 버전 3 10 이상을 사용하여 back4app에서 생성된 앱입니다 다음의 relay 환경 설정 튜토리얼 https //www back4app com/docs/react native/graphql/relay setup 다음의 relay를 사용한 react native 로그인 샘플 https //www back4app com/docs/react native/graphql/users/react native login sample 다음의 react native 사용자 로그인 https //app archbee com/docs/ roxiyumxobue9i7uv49e/6qyoyumfldrtjjy7dcgnr 이번 튜토리얼에서는 react native 프레임워크로 expo를 사용할 것입니다; 이번 튜토리얼에서는 자바스크립트를 기본 구현 언어로 사용할 것입니다; 언제든지 github 리포지토리를 통해 이 프로젝트에 접근하여 스타일과 전체 코드를 확인할 수 있습니다 javascript 예제 리포지토리 https //github com/templates back4app/react native graphql relay js users 1 사용자 로그인 컴포넌트 생성 signin 컴포넌트 폴더에 새 파일을 만들고 이름을 \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	 두 번째 @todo는 사용자에 대한 정보를 존재할 경우에만 렌더링하는 함수를 구현해야 합니다 오류가 없으면 아래에 설명된 \rendercontent\ 함수를 반환할 것입니다 이 함수는 현재 사용자 정보를(이메일 및 사용자 이름) 안전하게 렌더링합니다 1 const rendercontent = (viewer) => { 2 if (!viewer? user) { 3 return null; 4 } 5	 6 const {user} = viewer; 7	 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	 6 const userloggedrenderer = () => { 7 const rendercontent = (viewer) => { 8 if (!viewer? user) { 9 return null; 10 } 11	 12 const {user} = viewer; 13	 14 return ( 15 \<view style={ {margintop 15, alignitems 'center'} }> 16 \<text>user {user? username || user? email} logged\</text> 17 \</view> 18 ); 19 }; 20	 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	 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\ 이제 유효한 세션 토큰이 있는 사용자 이름 또는 이메일이 표시됩니다 그렇지 않으면 컴포넌트가 렌더링되지 않으며, 로그인 프로세스가 실행됩니다 또한, usestate \userlogged\ 는 더 이상 의미가 없으므로 코드에서 제거할 수 있습니다 완료된 함수에서 login 변이로부터 그것을 제거하는 것을 잊지 마세요 결론 이 단계의 최종 결과는 마지막 단계와 동일해야 합니다 그에 대한 정보가 표시되지만 이제 사용자 이름 또는 이메일이 뒤따릅니다 다음 문서에서는 이 사용자의 로그아웃을 수행하고 세션을 정리하여 앱을 로그인 또는 가입 흐름으로 되돌리는 버튼을 만들어 보겠습니다