React Native 앱에서 GraphQL과 Relay로 사용자 가입 구현

19 분

릴레이를 통한 사용자 가입 소개 당신의 앱이 가장 먼저 할 일은 아마도 사용자가 가입하도록 요청하는 것입니다 back4app/parse는 기본적으로 사용자 클래스를 제공하며, 이는 앱에 필요할 때 새로운 사용자를 가입시키기 위한 준비된 graphql 변이를 이미 가지고 있습니다 이 가이드에서는 relay를 사용하여 back4app에 데이터를 지속적으로 저장하는 react native 앱의 가입 기능을 생성할 것입니다 흐름은 쿼리 렌더러를 만드는 것과 매우 유사합니다 구현 후, relay 컴파일러는 프론트엔드(조각)와 백엔드(데이터 모델)를 확인하고 모든 것이 일치하는지 반환합니다 그렇다면 타입과 애플리케이션은 이미 백엔드와 통신할 준비가 되어 있습니다 언제든지 이 프로젝트에 접근하여 스타일과 전체 코드를 확인할 수 있습니다 자바스크립트 예제 저장소 목표 이 가이드의 끝에서, 당신은 아래와 같이 사용자 가입 기능이 구현된 react native 애플리케이션을 갖게 될 것입니다 전제 조건 back4app에서 생성된 앱으로, parse server 버전 3 10 이상이어야 합니다 다음의 relay 환경 설정 튜토리얼 이번 튜토리얼에서는 expo를 react native 프레임워크로 사용할 것입니다; 이번 튜토리얼에서는 javascript를 기본 구현 언어로 사용할 것입니다; 이번 튜토리얼에서는 우리의 style css 샘플을 사용할 것입니다; 1 회원가입 양식 만들기 애플리케이션에 이미 form 컴포넌트가 있다면 2단계로 넘어가세요 그렇지 않다면, 우리의 보일러플레이트를 따라 하세요 우리는 사용자 이름과 비밀번호가 있는 form을 가진 expo 앱을 사용할 것입니다 우리의 작업을 더 쉽게 하기 위해, 회원가입 기능을 구축하는 데 도움이 되는 몇 가지 서드파티 라이브러리를 사용할 것입니다 우리의 폼 컴포넌트는 formik 라이브러리를 사용할 것입니다 최종 결과를 추론하지 않는다는 점이 중요합니다 formik 설치하기 새로운 컴포넌트를 만들고 이름을 formsignup js formsignup js 다음 코드를 그 안에 붙여넣으세요 1 import react, { usestate } from 'react'; 2 import { button, text, textinput, view, touchableopacity } from "react native"; 3 import { useformik, formikprovider } from 'formik'; 4 import styles from " / /style" 5 import environment from ' / /relay/environment'; 6	 7 const signup = () => { 8 const \[usercreated, setusercreated] = usestate(); 9	 10 const onsubmit = (values) => { 11 // @todo the mutation will be implemented here 12 }; 13	 14 const formikbag = useformik({ 15 initialvalues { 16 username '', 17 password '', 18 }, 19 onsubmit, 20 }); 21	 22 const { handlesubmit, setfieldvalue } = formikbag; 23 if (usercreated? id) { 24 return ( 25 \<view style={ {margintop 15, alignitems 'center'} }> 26 \<text>user {usercreated name} created\</text> 27 \</view> 28 ); 29 } 30	 31 return ( 32 \<formikprovider value={formikbag}> 33 \<view style={styles login wrapper}> 34 \<view style={styles form}> 35 \<text>username\</text> 36 \<textinput 37 name={"username"} 38 style={styles form input} 39 autocapitalize="none" 40 onchangetext={(text) => setfieldvalue("username", text)} 41 /> 42 \<text>password\</text> 43 \<textinput 44 style={styles form input} 45 name={"password"} 46 autocapitalize="none" 47 securetextentry 48 onchangetext={(text) => setfieldvalue("password", text)} 49 /> 50 \<touchableopacity onpress={() => handlesubmit()}> 51 \<view style={styles button}> 52 \<text style={styles button label}>{"sign in"}\</text> 53 \</view> 54 \</touchableopacity> 55 \</view> 56 \</view> 57 \</formikprovider> 58 ); 59 }; 60	 61 export default signup; 애플리케이션은 여기까지 잘 실행되어야 합니다 폼은 다음과 같아야 합니다 우리 구성 요소를 설명하는 몇 가지 포인트를 정리해 보겠습니다 우리는 formik을 사용하여 폼 값을 제어하고 있습니다 html, css 및 js로 폼을 사용할 수도 있습니다 styled components는 구성 요소에 간단한 css 스타일을 제공하는 데 사용됩니다 사용자가 등록되었는지 여부를 제어하기 위해 use state가 있습니다 onsubmit 함수를 살펴보세요 relay mutation이 이 함수 안에 있을 것임을 주목하세요 다시 말하지만, 애플리케이션이 formik을 사용하지 않더라도 문제가 되지 않습니다 form component를 구현하는 경우, relay mutation은 제출 함수 안에서만 호출되면 됩니다 2 변이 생성하기 colocation 원칙을 사용하여, form component에 가장 가까운 새 폴더를 생성합시다 이름은 mutations mutations colocation에 대해 기억하기 위해, 우리의 문서 시작하기 , 에서 간단한 설명을 제공합니다 colocation을 처리하는 방법을 예시로 보여주면, 아래 이미지에서 signup 컴포넌트가 폴더에 감싸져 있습니다 이 폴더 안에서 mutations mutations 그리고 mutations mutations 폴더 안에서 relay mutation을 생성할 것입니다 이는 큰 프로젝트에서 완벽하게 작동합니다 컴포넌트와 관련된 모든 것이 가까이 배치되어 더 쉽게 작업하고 찾을 수 있습니다 애플리케이션의 모든 새로운 변이에 대해 이 접근 방식을 사용하세요 사용할 컴포넌트에 가까이 배치하세요 이 폴더 안에 signupmutation js signupmutation js 라는 새 파일을 생성할 것입니다 relay mutations에 대해 설명한 우리의 마지막 가이드에 따라, 그 안에 commit이라는 함수를 생성할 것입니다 아래 코드를 사용할 수 있습니다 1 function commit({ environment, input, oncompleted, onerror }) { 2 const variables = { input }; 3	 4 commitmutation(environment, { 5 mutation, 6 variables, 7 oncompleted, 8 onerror, 9 }); 10 } 11	 12 export default { 13 commit, 14 }; 양식 구성 요소로 돌아가기 전에, 변수를 생성하여 graphql fragment를 수신하도록 하겠습니다 이 fragment는 mutation을 나타냅니다 graphql fragment는 relay compiler가 읽고 schema graphql과 일치시키는 것입니다 commitmutation 전에 다음 코드를 복사하여 붙여넣으세요 1 const mutation = graphql` 2 mutation signupmutation($input signupinput!) { 3 signup(input $input) { 4 viewer { 5 user { 6 id 7 username 8 createdat 9 } 10 sessiontoken 11 } 12 } 13 } 14 `; 최종 파일 1 import {commitmutation, graphql} from 'react relay'; 2	 3 const mutation = graphql` 4 mutation signupmutation($input signupinput!) { 5 signup(input $input) { 6 viewer { 7 user { 8 id 9 username 10 createdat 11 } 12 sessiontoken 13 } 14 } 15 } 16 `; 17	 18 function commit({environment, input, oncompleted, onerror}) { 19 const variables = {input}; 20	 21 commitmutation(environment, { 22 mutation, 23 variables, 24 oncompleted, 25 onerror, 26 }); 27 } 28	 29 export default { 30 commit, 31 }; graphql fragment가 백엔드를 나타내므로, relay mutation의 코드를 얻으려면 back4app graphql cookbook 로 가서 fragment를 찾을 수 있습니다 새로운 mutation을 생성하고 파일을 업데이트하려면 yarn relay yarn relay 를 실행하세요 모든 것이 괜찮다면 mutation의 유형이 생성되고 계속 진행할 수 있습니다 3 제출 함수 구현 제출 단계가 가장 중요합니다 여기서 relay mutation의 마법이 일어납니다 이 단계에서는 formik에서 양식의 값을 가져옵니다 애플리케이션이 formik을 사용하지 않는 경우, 값은 가져오는 방법과 관계없이 여기에서 사용할 수 있어야 합니다 폼 컴포넌트로 돌아가서 relay mutation의 구현을 시작해 보겠습니다 변경 사항 가져오기 1 import signupmutation from ' /mutations/signupmutation'; onsubmit 함수 내부에서 입력 변수를 생성하기 시작합니다 1 const onsubmit = (values) => { 2 const {username, password} = values; 3 4 const input = { 5 userfields { 6 username, 7 password, 8 }, 9 }; 10 } 값은 formik에 의해 주입됩니다 여기서 formik을 사용하지 않는 경우, 값은 아마도 폼의 기본 osubmit을 통해 또는 원하는 대로 올 것입니다 마지막으로, 모든 props를 전달하여 mutation을 호출합니다(가져오는 것을 잊지 마세요) 1 signupmutation commit({ 2 environment, 3 input, 4 oncompleted ({signup}) => { 5 const { viewer } = signup; 6 const { sessiontoken, user } = viewer; 7	 8 if (sessiontoken !== null) { 9 alert(`user ${user username} successfully created`); 10 setusercreated(user); 11 return; 12 } 13 }, 14 onerror (errors) => { 15 alert(errors\[0] message); 16 }, 17 }); onsubmit의 최종 결과 1 const onsubmit = (values) => { 2 const { username, password } = values; 3 4 const input = { 5 userfields { 6 username, 7 password, 8 }, 9 }; 10	 11 signupmutation commit({ 12 environment, 13 input, 14 oncompleted ({signup}) => { 15 const { viewer } = signup; 16 const { sessiontoken, user } = viewer; 17 18 if (sessiontoken !== null) { 19 alert(`user ${user username} successfully created`); 20 setusercreated(user); 21 return; 22 } 23 }, 24 onerror (errors) => { 25 alert(errors\[0] message); 26 }, 27 }); 28 }; 프로젝트를 실행하고, 사용자를 등록한 다음 back4app 대시보드에서 확인하세요 mutation은 서버에서 값을 반환합니다 세션 토큰이 반환되면 애플리케이션은 이를 관리할 수 있습니다 오류 처리 커밋 변이에서 애플리케이션은 onerror에서 오류를 처리할 수 있습니다 항상 오류 배열을 받게 됩니다 가장 일반적인 경우는 이 배열에 오류 메시지를 포함하는 객체가 하나만 있는 것입니다 아래 예제를 참조하세요 이 예제를 바탕으로 자유롭게 오류 처리를 생성하세요 현재로서는 오류가 반환되면 경고로 표시합니다 1 onerror (errors) => { 2 alert(errors\[0] message); 3 }, 결론 이제 완전히 작동하는 회원가입 기능이 있는 애플리케이션을 갖게 되었습니다 다음 가이드에서는 사용자를 인증(로그인)하고 같은 접근 방식을 사용하여 로그아웃하는 방법을 이해하게 될 것입니다 또한 relay 변이를 사용하여 백엔드를 호출할 것입니다