React Native에서 Relay 환경 설정하기: 개발자 가이드

릴레이 설정 소개 이전 가이드에서는 스키마 파일을 가져오고, 저장하고, react native 애플리케이션에 붙여넣는 방법을 배웠습니다 이번 가이드에서는 relay를 설치하고 react native 애플리케이션 개발을 시작하기 위한 환경을 준비할 것입니다 목표 릴레이를 설정하기 위해 먼저 react native 애플리케이션에 relay를 설치하고, 그 다음 relay 환경을 준비해야 합니다 전제 조건 다음 주제에 대한 기본적인 이해를 권장합니다 relay modern , babel js , javascript (ecs5 및 ecs6), graphql js readme 로컬 환경에서 실행 중인 react native 기본 프로젝트 react native 프로젝트에 다운로드된 schema graphql 파일 다음 단계에서는 react native 애플리케이션에 초점을 맞춘 기본 relay 설치를 찾을 수 있습니다 이 주제에 대해 더 깊이 알고 싶다면 공식 문서 를 방문해 주세요 1 react relay 공식 api 설치 공식 라이브러리 react relay 를 설치하는 것부터 시작합시다 이 라이브러리는 relay core team의 공식 api로, 데이터 조각을 구축하는 데 필요한 모든 것을 포함하고 있습니다 이 튜토리얼을 위해 relay modern을 10 0 0 버전으로 설치하는 것이 중요합니다 11 0 0 버전부터는 새로운 훅 때문에 react relay를 사용하는 방식이 다릅니다 2 relay 구성 relay 구성은 relay 컴파일러에 필요한 정보를 가지고 있습니다 여기에서 relay 컴파일러가 schema file을 찾을 수 있는 위치, 검색해야 할 폴더 및 기타 구성을 지정할 것입니다 먼저 relay config 패키지를 설치합시다 참고 이 튜토리얼은 패키지 클라이언트로 yarn을 사용하지만, npm을 사용해도 괜찮습니다 이제 relay가 스키마 경로를 찾을 relay 구성 파일을 생성합시다 애플리케이션의 루트에 새 파일을 만듭니다 파일 이름을 relay config js로 지정합니다 파일을 열고 아래 정보를 사용하여 저장하세요 3 릴레이 바벨 플러그인 런타임에서 graphql 아티팩트를 변환하려면 바벨 플러그인을 설치해야 합니다 이제 바벨 구성 파일 안에 플러그인 배열에 릴레이 바벨 플러그인을 추가해야 합니다 최종 babel config js는 다음과 같이 보일 것입니다 엑스포 프로젝트에서는 presets 배열 바로 뒤에 babel config js 안에 플러그인 배열을 추가하는 동일한 접근 방식을 따르세요 최종 결과는 다음과 같아야 합니다 1 module exports = function (api) { 2 api cache(true); 3 return { 4 presets \[ 5 "babel preset expo", 6 ], 7 plugins \[ 8 'relay' 9 ] 10 }; 11 }; 릴레이 플러그인은 graphql 아티팩트의 올바른 변환을 위해 다른 플러그인보다 먼저 실행되어야 합니다 더 많은 정보를 원하시면 플러그인 바벨 문서를 확인하세요 4 릴레이 컴파일러 첫 번째 문서 이후로 우리는 릴레이 컴파일러에 대해 설명해왔습니다 우리의 애플리케이션이 데이터 조각을 컴파일할 수 있도록 지금 설치하겠습니다 패키지 json을 열고 릴레이 컴파일러를 실행할 새로운 스크립트 명령을 구성합시다 watchman은 릴레이 컴파일러가 릴레이 조각의 변경 사항을 감지해야 하는지 여부를 구성하는 역할을 합니다 true이면 각 변경 시 다시 실행됩니다 false이면 yarn relay를 단독으로 실행한 후에 실행됩니다 패키지 json 파일은 다음과 같아야 합니다 1 "scripts" { 2 "android" "react native run android", 3 "ios" "react native run ios", 4 "start" "react native start", 5 "test" "jest", 6 "lint" "eslint ", 7 "relay" "relay compiler watchman false" 8 }, 5 yarn relay 실행하기 마지막으로, 설치 단계가 완료되었으므로, 애플리케이션의 루트에서 yarn relay 명령을 실행할 수 있습니다 데이터 조각을 빌드하지 않기 때문에, relay compiler는 변경된 파일을 반환합니다 좋습니다, 귀하의 애플리케이션에는 이미 relay가 설치되고 구성되었습니다 이제 back4app 서버에 요청을 시작하기 위해 환경을 구현해 보겠습니다 6 fetch 환경 준비하기 relay 환경은 네트워크 레이어가 요청을 처리하는 방법과 relay store 가 작동하는 방식을 정의합니다 store는 변경될 때만 업데이트하고 캐싱하여 프론트엔드에서 데이터를 제어합니다 간단한 환경은 최소한 네트워크 레이어와 store가 필요합니다 네트워크 계층 이 네트워크 계층 은 구축하기 쉽습니다 이 계층은 우리의 애플리케이션의 각 요청을 처리하며, 쿼리, 변형 및 구독(애플리케이션이 지원하는 경우)을 수행합니다 relay는 이를 소비하여 애플리케이션 서버에 접근하기 위한 호출을 준비하는 방법을 알게 됩니다 릴레이 스토어 이 스토어 는 클라이언트 측에서 우리의 애플리케이션 데이터를 업데이트하는 책임이 있습니다 각 요청은 업데이트 함수가 있을 수 있습니다 업데이트 함수 내에서, 스토어 인터페이스를 사용하여 데이터를 업데이트하기 위한 도우미 함수 목록을 사용할 수 있습니다 릴레이 환경을 준비하기 위해 환경 구성 파일을 생성해야 합니다 이 파일은 쿼리가 수행될 때마다 쿼리 렌더러에 의해 읽힐 것입니다 이 파일을 준비해 봅시다 6 1 환경 파일 생성 우리는 릴레이 라이브러리의 디자인 원칙인 콜로케이션 개념을 따를 것입니다 시작하기 위해, 애플리케이션의 루트에 폴더를 만들고 이름을 relay로 지정합시다 그 안에 파일을 만들고 이름을 environment js environment js 로 지정합니다 6 2 환경 구성 그 후, relay runtime relay runtime 에서 가져옵니다 1 import { 2 environment, 3 network, 4 recordsource, 5 store, 6 } from 'relay runtime'; 6 3 네트워크 레이어 구성 네트워크 레이어는 서버에서 데이터를 가져오는 기능이 필요합니다 우선, post 요청을 수행하는 fetch 함수를 생성해 보겠습니다 1 const fetchquery = async (request, variables) => { 2 const body = json stringify({ 3 query request text, 4 variables, 5 }); 6	 7 const headers = { 8 accept 'application/json', 9 'content type' 'application/json', 10 'x parse application id' 'x parse application id', 11 'x parse client key' 'x parse client key', 12 }; 13	 14 try { 15 const response = await fetch(`https //parseapi back4app com/graphql`, { 16 method 'post', 17 headers, 18 body, 19 }); 20 21 const data = await response json(); 22 23 if (data errors) { 24 throw data errors; 25 } 26 27 return data; 28 } catch (err) { 29 console log('err on fetch graphql', err); 30 31 throw err; 32 } 33 }; 백엔드 요청을 try catch로 감쌉니다 오류가 발생하면 애플리케이션이 이를 처리합니다 그렇지 않으면 정상적인 동작을 따르며 데이터를 반환합니다 네트워크 레이어에서는 애플리케이션 서버 연결을 구성합니다 back4app에서는 두 가지 주요 키를 사용합니다 애플리케이션 id와 클라이언트 키 키는 서버 url과 함께 헤더에 입력해야 합니다 이 정보를 얻으려면 앱으로 가서 api 콘솔 > graphql 메뉴를 클릭하세요 graphql 콘솔이 열리면 상단에 url이 표시되고 하단에는 필요한 애플리케이션 키가 표시됩니다 fetch 함수에 귀하의 정보로 교체하세요 마스터 키를 노출하지 않도록 기억하세요 6 4 환경 내보내기 relay runtime은 네트워크 레이어를 소비하는 데 필요한 기능을 제공하고 스토어를 생성합니다 마지막으로, 이들을 새로운 환경으로 결합하고 애플리케이션에 내보냅시다 아래 코드를 환경 파일에 사용하세요 1 const environment = new environment({ 2 network network create(fetchquery), 3 store new store(new recordsource()), 4 }); 5	 6 export default environment; 환경 최종 파일은 다음과 같이 보일 것입니다 1 import { 2 environment, 3 network, 4 recordsource, 5 store, 6 } from 'relay runtime'; 7	 8 const fetchquery = async (request, variables) => { 9 const body = json stringify({ 10 query request text, 11 variables, 12 }); 13	 14 const headers = { 15 accept 'application/json', 16 'content type' 'application/json', 17 'x parse application id' 'x parse application id', 18 'x parse client key' 'x parse client key', 19 }; 20	 21 try { 22 const response = await fetch(`https //parseapi back4app com/graphql`, { 23 method 'post', 24 headers, 25 body, 26 }); 27 28 const data = await response json(); 29 30 if (data errors) { 31 throw data errors; 32 } 33 34 return data; 35 } catch (err) { 36 console log('err on fetch graphql', err); 37 38 throw err; 39 } 40 }; 41	 42 const environment = new environment({ 43 network network create(fetchquery), 44 store new store(new recordsource()), 45 }); 46	 47 export default environment; 결론 멋지네요 이제 relay와 relay 환경이 설치되고 구성되었으니 back4app graphql api를 소비할 준비가 되었습니다 다음 단계는 첫 번째 쿼리 렌더러를 생성하고 서버와 통신하는 것입니다