1. developmentClienttotrue(defaul) apk 파일로 빌드하며, apk 다운로드 링크가 제공된다. apk 빌드완료 후 expo-dev-clinet 를 사용하여 개발머신의 안드로이드 에뮬레이터에 띄우는 것이 특징이다. 그래서 expo-dev-client 가 설치되어 있지 않으면 설치를 요구한다. 개발머신에서 npx expo start --dev-client 커맨드를 사용하여 서버를 구동해야 하며, 에뮬레이터에서 해당 서버를 선택하여 사용한다.(아래 이미지참고)
2. distributiontointernal
빌드된 apk 파일을 다운로드 할 수 있는 QR과 링크가 생성되며, 이에 접속하면 손쉽게 팀원들에게 apk를 전달할 수 있다.
import ApolloClient from "apollo-boost";
import utils from "./commons/utils";
const client = new ApolloClient({
uri: utils.getApiServer
});
export default client;
위와 같이 apollo-boost 에서 클라이언트를 가져와 uri를 설정하며 생성한다. utils.getApiServer 는 단지 호스트:포트 를 반환하는 커스텀 모듈이다.(직접 주소를 써주면 됨)
3. 클라이언트 주입
App.js
import React from 'react';
import { ApolloProvider } from '@apollo/react-hooks';
// 사용자정의모듈
import client from "./src/apolloClient";
import Router from "./src/route";
export default function App() {
return (
<ApolloProvider client={client}>
<Router />
</ApolloProvider>
);
}
App.js 파일에 ApolloProvider 를 가져온다. redux를 설정할 때와 비슷하게 ApolloProvider 태그에 위에서 만들어둔 객체를 client 속성에 주입해준다. Router 는 나의 경우 materialTopTabNavigator 위에 createStackNavigator 를 올려서 구성했다(모르겠으면 구글링 ㄱㄱ)
4. 쿼리예시
queries.js
import { gql } from "apollo-boost";
// import gql from 'graphql-tag';
export const HOME_PAGE = gql`
query {
people {
id
name
age
gender
}
}
`;
예시는 Person 객체의 배열을 가져오는 쿼리다. gql 을 apollo-boost에서 가져오느냐 graphql-tag 에서 가져오느냐는 선택이지만, 최신 공식문서에서는 apollo-boost 에서 가져온다.(예전에는 graphql-tag만 사용했음)
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { useQuery } from '@apollo/react-hooks';
// 사용자정의모듈
import utils from "../commons/utils";
import { HOME_PAGE } from "../queries";
/**
* 피드목록컴포넌트 - useQuery 메서드를 사용하는 방식
* @method
*/
const Home = () => {
const { loading, error, data } = useQuery(HOME_PAGE);
console.log("=============");
console.log(loading);
console.log(data);
console.log(error);
console.log("=============");
let template = ``;
if (loading) {template = <Text>`로딩중... ${loading}`</Text>;}
if (error) {template = <Text>`에러발생 : ${error}`</Text>;}
if (data && data.people) {
template = data.people.map((item, index) =>
<Text key={index}>{item.id} / {item.name}</Text>
)
}
return (<View>{template}</View>);
}
export default Home;
자... 여기가 중요하다. 이부분 설명하려고 글쓰는것임.
두 컴포넌트는 완벽히 동일하게 작동하지만 문법이 다르다.
위의 방식은 react-apollo 모듈에서 Query 를 가져와 태그형식으로 가져온 데이터를 뷰에 그려준다. query={작성한쿼리} 속성을 주입하고, <Query> 태그 안에 스크립트문을 작성하는데, 이때 함수를 작성해주어야 하며, 이 함수가 반환한 jsx가 결과적으로 랜더린된다! Query 태그 안에서 함수를 작성해야 한다는 방식이 다소 생소하긴 하다.
두번째(아래) 방법은 좀더 언어적?인 것 같다. @apollo/react-hooks 에서 useQuery 를 가져와
const { loading, error, data } =useQuery(HOME_PAGE); 형식으로 쿼리를 인자로 넘겨 메서드를 호출한다.
그리고 data 를 가져와 jsx를 만들어 반환해주면 랜더링된다. 좀 더 우리에게 익숙한 방식인듯. 아마 그래서 최신에 react-hooks를 공식으로 지원하면서 이 방식을 권장할 것 같다...
