Reactjs

React Hooks가 있는 Apollo Client

조회 601 (작성일 2019.08.13 17:39)
- 음성
- 목록
- - 검색

우리의 임무는 Apollo Client를 React 개발자를 위한 가장 현대적이고 마찰 없는 상태 관리 솔루션으로 만드는 것입니다. React 커뮤니티가 시간이 지남에 따라 새로운 UI 개발 모범 사례를 발전시키고 개척함에 따라 Apollo Client는 이러한 관행을 채택하고 유지합니다. 이러한 전통에 따라 오늘 우리는 Apollo Client에 React Hooks를 추가하게 된 것을 기쁘게 생각합니다.

https://blog.apollographql.com/apollo-client-now-with-react-hooks-676d116eeae2

React 16.8에 도입 된 Hooks는 클래스의 함정을 피하면서 상태 저장 구성 요소를 작성하는 새로운 방법입니다. 이제 Apollo Client에는 현재 해당 상위 구성 요소를 사용하거나 렌더링 소품 구성 요소 인 useQuery, useMutation 및 useSubscription을 사용하여 앱에 놓을 수 있는 후크 3 개가 포함되어 있습니다. 이러한 후크는 시작하기 간단하며 번들 크기 감소 및 상용구 코드 감소를 포함하여 이전 API에 비해 많은 이점이 있습니다.

React에 대해 우리가 가장 좋아하는 것 중 하나는 핵심 팀과 커뮤니티가 항상 React 개발자 경험을 향상 시키기 위해 노력하고 있다는 것입니다. 모든 사람들이 사용을 시작하도록 권장합니다!

시작하기

새 Apollo 프로젝트를 시작하려면 Apollo Client 인스턴스를 설정 한 후 다음 패키지를 설치하는 것이 좋습니다.

npm install @apollo/react-hooks

이 패키지는 이전 API와 마찬가지로 ApolloProvider 구성 요소를 내보내 클라이언트를 React 앱에 연결합니다.

이미 Apollo 프로젝트가 있는 경우 후크로 전환하는 방법에 따라 몇 가지 옵션이 있습니다. 업그레이드에 대한 자세한 내용은 마이그레이션 안내서를 읽으십시오.

후크가 미래인 이유

Apollo Client는 여전히 상위 구성 요소 및 렌더 소품 API를 지원하며 잠시 동안 지원합니다. 앞으로 우리는 후크가 Apollo Client로 데이터를 가져 오는 가장 좋은 방법이라고 생각합니다. 이전 구성 요소를 모두 즉시 마이그레이션 할 필요는 없지만 새 구성 요소에는 후크를 적용해야 합니다. 이유는 다음과 같습니다.

적은 데이터 관리 코드

후크는 상용구 및 불필요한 데이터 관리 코드를 줄여서 추론하기 쉬운 더 작은 구성 요소로 이어집니다. 더 이상 고차 컴포넌트를 구성하거나 복잡한 렌더링 prop 로직을 추적하는 방법을 더 이상 이해할 필요가 없습니다. 데이터 가져 오기는 단일 useQuery 함수를 호출하는 것만 큼 간단합니다.

const LAST_LAUNCH = gql`
	query lastLaunch {
	launch {
	id
	timestamp
	}
	}
	`;

	export function LastLaunch() {
	const { loading, data } = useQuery(LAST_LAUNCH);
	return (
	<div>
	<h1>Last Launch</h1>
	{loading ? <p>Loading</p> : <p>Timestamp: {data.launch.timestamp}</p>}
	</div>
	);
	}

Apollo Client의 useQuery Hook로 데이터 가져 오기

Apollo Client 후크의 작동 예는 Apollo 플랫폼 자습서 앱을 참조하십시오.

Multiple mutations

단일 구성 요소에서 여러 변이를 처리 할 때 고차 구성 요소와 렌더 소품은 이해하기 어려운 코드를 생성 할 수 있습니다. render prop API를 사용하면 여러 Mutation 구성 요소를 중첩 하면 잘못된 계층 구조가 만들어집니다. 새로운 useMutation 후크는 단순히 함수를 호출하기 때문에 이 문제를 완전히 방지합니다. 아래 예제는 여러 돌연변이와 쿼리가 동일한 구성 요소 내에서 서로 상호 작용하는 방법을 보여줍니다.

function Message() {
	const [saveMessage, { loading }] = useMutation(SAVE_MESSAGE);
	const [deleteMessage] = useMutation(DELETE_MESSAGE);
	const { data } = useQuery(GET_MESSAGE);

	return (
	<div>
	<p>
	{loading
	? 'Loading ...'
	: `Message: ${data && data.message ? data.message.content : ''}`}
	</p>
	<p>
	<button onClick={() => saveMessage()}>Save</button>
	<button onClick={() => deleteMessage()}>Delete</button>
	</p>
	</div>
	);
	}

Multiple mutations with Apollo Client’s useMutation Hook

여기서 여러 돌연변이가 작동하는 것을 볼 수 있습니다. 이 예제 응용 프로그램에는 훅 접근 방식과 비교할 수 있는 렌더 props을 사용하여 제작 된 유사한 구성 요소도 포함되어 있습니다.

향상된 TypeScript 지원

우리가 아폴로에서 TypeScript를 좋아한다는 것은 비밀이 아닙니다. 새로운 후크는 Apollo CLI에 의해 생성 된 자동 유형 정의와 결합되어 이전보다 훨씬 안전한 유형 안전 React 구성 요소를 작성합니다. Apollo Client의 useQuery 및 TypeScript를 사용하여 데이터를 가져 오는 방법은 다음과 같습니다.

import { RocketData, RocketVars } from './types';

	const GET_ROCKET_INVENTORY = gql`
	query getRocketInventory($year: Int!) {
	rocketInventory(year: $year) {
	id
	year
	}
	}
	`;

	export function RocketInventoryList() {
	const { loading, data } = useQuery<RocketData, RocketVars>(
	GET_ROCKET_INVENTORY,
	{ variables: { year: 2019 } }
	);
	return (/* ... show data ... */);
	}

Apollo 후크 및 TypeScript를 사용하는 강력한 유형의 React 구성 요소

React 개발자를 위한 개선 사항

이 릴리스에서는 새로운 useQuery, useMutation 및 useSubscription 후크에 중점을 두지 만 다음과 같은 몇 가지 흥미로운 기능이 있습니다.

번들 크기 50 % 감소

반응-아폴로 2 패키지는 10.6 kB 축소 + gzipped 인 반면, 반응-아폴로 3은 7.8 kB에 불과하다. 또한 @ apollo / react-hooks 패키지 만 사용할 수 있는 경우 번들 크기는 5.1kB로 감소하여 react-apollo @ 2보다 50 % 절감됩니다.

쿼리 지연 평가

useQuery 후크는 함수가 호출되는 즉시 쿼리를 실행하므로 항상 바람직하지는 않습니다. 예를 들어 자동 완성 입력 상자를 고려하십시오. 검색 상자를 사용하여 입력을 받도록 구성 요소를 렌더링 할 수 있지만 사용자가 입력을 시작할 때까지 검색 쿼리 실행을 지연 시킬 수 있습니다. 이 동작을 가능하게 하려면 useLazyQuery 후크를 사용하십시오. 그러면 첫 번째 위치에 실행 함수가 있는 튜플이 반환 됩니다.

const [execute, { loading, data }] = useLazyQuery(GET_INVENTORY);

실행 함수를 호출 할 때까지 쿼리가 실행되지 않습니다.이 시점에서 구성 요소가 다시 렌더링 되고 일반적인 useQuery 워크 플로가 진행됩니다. 게으른 쿼리에 대한 아이디어를 얻은 커뮤니티 회원 Daniel K.에게 감사합니다!

새로운 API 문서

신규 이민자들이 아폴로 클라이언트에 권장하는 길로 갈고리를 강조하도록 문서를 업데이트했습니다. 그럼에도 불구하고, 우리의 문서는 여전히 렌더 소품 구성 요소와 고차 구성 요소를 다루고 있습니다. 새로운 드롭 다운 메뉴를 사용하여 원하는 패턴을 선택하십시오 (출시 예정 : TypeScript 지원!) :

1*9wdVh5bOUWIveMl6ms1fHQ.png