React+Type Script: Apollo Client의 GraphiQL 쿼리 사용

Apollo Client는 React에서 사용되는 상태 관리 라이브러리입니다.로컬 및 원격 데이터는 GraphiQL을 통해 처리됩니다.이 원고는 Apollo Client 공식 "Get started with Apollo Client"에 소개된 범례를 작성했다.그러나 Type Script를 사용하면 애플리케이션이 모듈로 간단히 분할됩니다.
Apollo Celient 애플리케이션 제작 준비
React 응용 프로그램의 초기 형태는 Create React App로 제작하기로 결정했다.옵션--template typescript인 경우 Type Script 환경을 쉽게 추가할 수 있습니다("Create React Apps를 사용하여 Type Script를 추가하는 기본 어플리케이션 만들기"참조).
그럼 Apollo Client설치하다.로 갑시다.GraphiQL에도 의존성이 있습니다. 설치에 추가하십시오. (조회할 필요가 없습니다.)

npm install @apollo/client graphql

초기화ApolloClient우선, ApolloClient의 실례를 만듭니다.구조기에 맡기는 것은 선택할 수 있는 대상이며 두 개의 설정이 추가되었다.uri는 GraphiQL 서버의 URL에 대한 문자열입니다.cache는 Apollo Celient가 읽은 검색 결과를 저장해야 하는 위치이며, 대부분의 경우InMemoryCache에서 실례를 설정합니다.

uri: string - Apollo Celient 통신의 GraphiQL의 단점 URI.

cache: ApolloCache - 질의 결과를 로컬로 저장하는 캐시에 Apollo Client가 적용됩니다(필수).@apollo/client 제공 패키지InMemoryCache를 추천합니다.

잠시 후 React의 페이지에 데이터를 삽입하여 조회를 보내보십시오. (코드 001)ApolloClient 실례를 호출하는 방법은query()이다.gql 템플릿 소양 패키지의 검색 문자열을 매개 변수에 건네주십시오.
코드001 ■ApolloClient로 쿼리 보내기
src/App.tsx

import { useEffect } from 'react';
import {
	ApolloClient,
	InMemoryCache,
	gql,
} from '@apollo/client';

const client = new ApolloClient({
	uri: 'https://48p1r2roz4.sse.codesandbox.io',
	cache: new InMemoryCache(),
});
function App() {
	useEffect(() => {
		client
			.query({
				query: gql`
					query GetRates {
						rates(currency: "USD") {
							currency
						}
					}
				`,
			})
			.then((result) => console.log(result));
	}, []);
	return (
		<div>
			<h1>Apollo Client</h1>
		</div>
	);
}
export default App;

코드를 실행하면 컨트롤에 조회 결과의 대상이 표시됩니다(그림001).코드샌드박스가 공개한 아래 샘플 001의 동작1을 확인해 주세요.
그림 001 ■ 콘솔에 출력된 쿼리 결과

샘플001 ■ React+Type Script: Using GraphiQL queries with Apollo Client 01ApolloProvider에서 React에 연결된 컨텍스트
ApolloProvider 어셈블리를 사용하여 Apollo Client를 React의 언어 환경에 연결할 수 있습니다.구조는 React의Context.Provider와 같다.Apollo Client 데이터는 패키지 트리의 구성 요소 중 어느 것이든 액세스할 수 있습니다.ApolloProvider에 GraphiQL 데이터를 사용하는 원본 구성 요소를 포함하십시오.속성client에 대한 실례ApolloClient.
src/App.tsx

// import { useEffect } from 'react';
// import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
import {

	ApolloProvider,

} from '@apollo/client';

function App() {
	/* useEffect(() => {

	}, []); */
	return (
		<ApolloProvider client={client}>
			<div>

			</div>
		</ApolloProvider>
	);
}

useQuery 연결 고리로 데이터 읽기ApolloProvider에서 React에 연결된 상하문에서 조회 요청을 통해 데이터를 페이지로 읽을 수 있습니다.사용하는 고리는useQuery입니다.GraphiQL의 데이터를 React와 공유합니다.쿼리는 루트 모듈src/App.tsx에서 변수ExchangeRates로 확인하십시오.요구의 속성으로 화폐currency 외에 환율rate도 증가했다.다음에 확인된 서브어셈블리ExchangeRates의 속성exchangeRates에 대한 질의를 추가합니다.
src/App.tsx

import { ExchangeRates } from './ExchangeRates';

const EXCHANGE_RATES = gql`
	query GetExchangeRates {
		rates(currency: "USD") {
			currency
			rate
		}
	}
`;
function App() {
	return (
		<ApolloProvider client={client}>
			<div>

				<ExchangeRates exchangeRates={EXCHANGE_RATES} />
			</div>
		</ApolloProvider>
	);
}

useQuery 연결된 조회 형식DocumentNode은 구성 요소를 그릴 때마다 실행되고 새로운 결실 대상을 되돌려줍니다.환율을 표시하는 서브모듈src/ExchangeRates.tsx에서 3개의 속성(코드 002)을 꺼냅니다.

loading: boolean - 로드 중인 부울 값을 나타냅니다.true시 조회 결과를 되돌려 주지 않았습니다.

error: ApolloError - 질의에 오류가 발생한 객체를 나타냅니다.

data: TData - GraphiQL 조회가 올바르게 실행되었을 때 얻은 결과의 데이터입니다.

코드를 실행하면 일정 시간 "Loading..."라는 문구가 표시되고 이후 환율의 일람이 표시된다.질의의 상태에 따라 어셈블리가 다시 활성화됩니다.새로 쓴 라우팅 모듈src/App.tsx의 코드도 함께 정리됐다.이벤트는 코드샌드박스가 공개한 아래 샘플 002를 확인해주세요.
코드 002 ■useQuery 페이지에 연결 고리로 읽은 데이터를 표시합니다.
src/ExchangeRates.tsx

import { VFC } from 'react';
import {
	DocumentNode,
	useQuery,
} from '@apollo/client';

type Props = {
	exchangeRates: DocumentNode;
};
export const ExchangeRates: VFC<Props> = ({ exchangeRates }) => {
	const { loading, error, data } = useQuery(exchangeRates);
	if (loading) return <p>Loading...</p>;
	if (error) return <p>Error :(</p>;
	return data.rates.map(
		({ currency, rate }: { currency: string; rate: string }) => (
			<div key={currency}>
				<p>
					{currency}: {rate}
				</p>
			</div>
		)
	);
};

src/App.tsx

import {
	ApolloClient,
	ApolloProvider,
	InMemoryCache,
	gql
} from '@apollo/client';
import { ExchangeRates } from './ExchangeRates';

const client = new ApolloClient({
	uri: 'https://48p1r2roz4.sse.codesandbox.io',
	cache: new InMemoryCache(),
});
const EXCHANGE_RATES = gql`
	query GetExchangeRates {
		rates(currency: "USD") {
			currency
			rate
		}
	}
`;
function App() {
	return (
		<ApolloProvider client={client}>
			<div>
				<h1>Apollo Client</h1>
				<ExchangeRates exchangeRates={EXCHANGE_RATES} />
			</div>
		</ApolloProvider>
	);
}
export default App;

샘플 002 ■ React+Type Script: Using GraphiQL queries with Apollo Client02
또 코드샌드박스에서 그래픽ql 버전을 16 이상으로 설정하면TypeError 나온다.↩