GraphQL을 시작하고 기본적으로 반응합니다

2012 년 Facebook 엔지니어 Nick Schrock은 처음에는 "SuperGraph"라는 프로젝트를 시작하여 구식의 지원되지 않는 파트너 API에서 Facebook의 뉴스 피드를 전원하는 데 전환했습니다. 이 프로토 타입은 결국 인기있는 오픈 소스 쿼리 언어 인 GraphQL의 개발에 크게 기여했습니다. Facebook은 GraphQL을 "API의 쿼리 언어 및 기존 데이터로 쿼리를 수행하기위한 런타임"으로 정의합니다. 본질적으로, 그것은 휴식 대안으로 견인력을 얻는다. 일반적으로 데이터를 수집하기 위해 여러 엔드 포인트 요청이 필요한 REST와 달리, GraphQL은 개발자가 정확한 데이터 요구를 지정하는 단일 쿼리를 보낼 수 있습니다.

React Native로 뛰어들 준비가 되셨습니까? 이 기사는 프리미엄 라이브러리에서 발췌 한 것입니다. Sitepoint Premium을 사용하여 기초, 프로젝트, 팁, 도구 등을 포함한 React Native Resources의 포괄적 인 컬렉션에 액세스하십시오. 월 $ 9 월에 구독하십시오.

키 하이라이트 :

GraphQL은 API 쿼리에 대한 동적이고 효율적인 방법을 제공하여 REST의 다중 엔드 포인트 요청과 달리 데이터 요구 사항을 정확하게 정의하는 단일 쿼리를 가능하게합니다. 프로젝트 설정에는 기본 React Native 및 Expo 지식이 필요합니다. 종속성 설치 및 환경 구성을위한 자세한 지침이 제공됩니다. 이 튜토리얼은 간단한 커피 빈 비교 응용 프로그램을 구축하여 React Native App 내에서 GraphQL 통합을 보여줍니다. 아폴로 클라이언트 및 기타 라이브러리를 사용하여 데이터를 가져오고 표시합니다. 튜토리얼은 인수, 별명 및 변수와 같은 GraphQL의 쿼리 기능을 탐색하여 특정 데이터 요구에 대한 쿼리를 사용자 정의하고 데이터 검색 유연성 및 효율성 향상 방법을 보여줍니다.

React Native App의 데이터 관리는 컨텍스트 API를 사용하여 간소화되어 PROP 드릴링없이 구성 요소 계층 전반에 걸쳐 효율적인 상태 전달 및 액세스를 가능하게합니다. 전제 조건 : 이 튜토리얼은 기본 반응 원시 지식과 엑스포 환경에 대한 친숙 함을 가정합니다. 모바일 장치 또는 호환 시뮬레이터에 엑스포 클라이언트를 설치해야합니다. 설치 지침을 사용할 수 있습니다

프로젝트 개요 :

이 튜토리얼은 커피 빈 비교 앱을 만들어 React Native의 GraphQL의 힘을 보여줍니다. 엑스포를 사용하여 구축 된 기본 템플릿은 프로세스를 단순화하고 GraphQL 기능에 중점을두기 위해 제공됩니다. 시작하려면이 저장소를 복제하고 "시작된"지점으로 전환하십시오.

이 지점에는 기본 뷰와 초기 종속성이 포함되어 있습니다

git clone https://github.com/jamiemaison/graphql-coffee-comparison.git
cd graphql-coffee-comparison
git checkout getting-started

다음, 설치 종속성 (노드 v11.10.1이 설치되었는지 확인) :

GraphQL을 통합하려면 추가 종속성을 설치하십시오

이러한 종속성은 다음과 같습니다

{
  "expo": "^32.0.0",
  "react": "16.5.0",
  "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
  "react-navigation": "^3.6.1"
}

: 반응/반응 원시를위한 단순화 된 그래프 QL 설정 : GraphQL을 Apollo 클라이언트와 통합합니다

: 템플릿 리터럴을 사용하여 GraphQL 쿼리를 구문 분석합니다 : JavaScript GraphQL 참조 구현

npm install

설치 후 . 엑스포 창이 나타나야하고 (시뮬레이터 또는 장치를 통해) 앱을 시작하면 다음과 유사한 화면이 표시되어야합니다.

앱에는 두 개의 화면 (에 의해 관리) : 가 특징입니다. 는 커피 원두의
• 를 표시합니다. 자세한 정보를 위해 Bean을 선택하면 apollo-boost로 탐색합니다. 다음 섹션은 이러한보기를 GraphQL 데이터로 채 웁니다.
• react-apollo
(응답의 나머지 부분은 제공된 텍스트를 계속 역설하고 구조 조정하고 이미지 배치 및 형식을 유지하고 Apollo Server Playground, GraphQL Query 기본 사항, 데이터 요청, 컨텍스트 API와 함께 데이터 저장과 같은 주제를 다루고 있습니다. 및 faqs.)
• graphql-tag

위 내용은 GraphQL을 시작하고 기본적으로 반응합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!