Relay와 GraphQL로 React Native에서 현재 사용자 정보 조회하기
Relay를 사용하여 React Native 앱에서 현재 사용자 가져오기
소개
Relay를 사용하여 React Native 앱에 사용자 등록 및 로그인을 구현한 후, 다양한 작업 및 요청을 수행하기 위해 현재 로그인한 사용자 데이터를 검색해야 합니다. 이 가이드에서는 로그인한 사용자 가져오기 GraphQL 요리책 가이드와 쿼리 렌더러를 따라 현재 사용자에 대한 정보를 검색할 것입니다.
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에서 생성된 앱입니다.
- 이번 튜토리얼에서는 React Native 프레임워크로 Expo를 사용할 것입니다;
- 이번 튜토리얼에서는 자바스크립트를 기본 구현 언어로 사용할 것입니다;
언제든지 GitHub 리포지토리를 통해 이 프로젝트에 접근하여 스타일과 전체 코드를 확인할 수 있습니다.
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 요리책 가이드.
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 변이로부터 그것을 제거하는 것을 잊지 마세요.
결론
이 단계의 최종 결과는 마지막 단계와 동일해야 합니다. 그에 대한 정보가 표시되지만 이제 사용자 이름 또는 이메일이 뒤따릅니다.
다음 문서에서는 이 사용자의 로그아웃을 수행하고 세션을 정리하여 앱을 로그인 또는 가입 흐름으로 되돌리는 버튼을 만들어 보겠습니다.