Custom React Hooks for GraphQL
[펌] GraphQL에 대한 사용자 정의 React Hooks 작성
원본 URL : https://medium.com/open-graphql/react-hooks-for-graphql-3fa8ebdd6c62
일반적인 GraphQL 작업을 처리하기 위해 사용자 정의 React 후크를 만드는 방법.
Wi 번째 새의 최근 버전은 컨퍼런스 2018 반응하는 후크 개발자 반응 사용할 것을 새로운 기회의 주위에 만들어 토론 및 오픈 소스 라이브러리의 질풍이 있었다에서 API를 반응한다.
후크가 처음 나왔을 때, 나는 질문이 있었다.
내가 배운 것은 기본적으로 후크를 사용하면 개발자가 추가 라이브러리 없이는 불가능했거나 새 API를 만들기 전에 훨씬 어려운 두 가지 작업을 수행 할 수 있다는 것입니다.
기능적인 React 컴포넌트 내에서 상태를 사용하십시오.
이전에는 공유 코드로 리팩토링 할 수 없었던 여러 구성 요소에서 공유 동작을 후크로 작성하십시오.
GraphQL (특히 "); background-size: 1px 1px; background-position: 0px calc(1em + 1px);">AWS AppSync ) 로 많은 작업을 해왔 기 때문에 GraphQL 구독을보다 쉽게 설정하기 위해 후크를 사용하는 것을 즉시 생각했습니다.
서브 스크립 션이 작동 한 후“질문과 돌연변이는 어떻습니까?”옆으로 뛰어 들었습니다.
React 후크를 사용하여 명시적인 비동기 호출을 사용하는 방법을 완전히 이해하지 못했기 때문에 구독 아이디어는 돌연변이 및 구독보다 즉시 이해하기가 더 쉬웠습니다.
이 글에서는 내가 배운 내용과 사용자 정의 React 후크를 사용하여 GraphQL 쿼리 , 돌연변이 및 구독 을 수행하는 방법을 안내 합니다 .
갈고리
우리가 작업 할 세 가지 후크는 다음과 같습니다."); background-size: 1px 1px; background-position: 0px calc(1em + 1px);">사용 효과
Docs : 렌더링이 화면에 커밋 된 후 useEffect에 전달 된 함수가 실행됩니다. 효과는 React의 순전히 기능적인 세계에서 명령형 세계로의 탈출구로 생각하십시오.
내가 생각 한 방법은
useEffect
내가 생각했을 방식과 유사
componentDidMount
및
componentDidUpdate
과거에."); background-size: 1px 1px; background-position: 0px calc(1em + 1px);">useState
문서 : 상태 저장 값과 값을 업데이트하는 함수를 반환합니다.
우리는
useState
기능적 구성 요소의 상태를 유지하는 데
사용할 것
입니다."); background-size: 1px 1px; background-position: 0px calc(1em + 1px);">useReducer문서 :의 대안 "); background-size: 1px 1px; background-position: 0px calc(1em + 1px);">useState입니다. 유형의 리듀서를 승인하고 메소드
(state, action) => newState와 쌍을 이루는 현재 상태를 리턴합니다
dispatch.
useReducer
redux 감속기가 작동하는 방식을 정확하게 작동합니다.
우리는 사용할 것이다
useReducer
우리가 필요한 우리의 후크의 여러 부분 간의 상태를 유지해야 할 때.당신은 후크에 대한 자세한 내용을 찾고 있다면, 나에게 도움이 두 자원은 정말 그들이 문서가 어떻게 작동하는지 이해 "); background-size: 1px 1px; background-position: 0px calc(1em + 1px);">여기 , 라이언 피렌체 컨퍼런스의 이야기 반응 "); background-size: 1px 1px; background-position: 0px calc(1em + 1px);">여기 .나는 '를 사용하고있을 것이다 "); background-size: 1px 1px; background-position: 0px calc(1em + 1px);">AWS 증폭 이 예에서 AWS AppSync API를 GraphQL 클라이언트를하지만 아폴로 클라이언트를 사용하여 함께 따라하려는 경우, 다음과 같은 구성을 사용하여 유사한 API와 함께 클라이언트를 사용할 수 있습니다 :
쿼리업데이트 : 향후 React Suspense & React-cache는 비동기 데이터 가져 오기를 처리하는 일류 방법을 제공하며 쿼리에 더 나은 API를 제공 할 것입니다. 나는 작업 예제를 설정 한 "); background-size: 1px 1px; background-position: 0px calc(1em + 1px);">여기에 새로운 & 불안정한 일에 관심이 있다면 � .
가장 먼저 할 일은 GraphQL 쿼리를 수행하는 것입니다. 이 작업을 생각할 수있는 두 가지 방법이 있습니다.
컴포넌트가 렌더링 될 때 즉시 쿼리
쿼리를 트리거하는 버튼 또는 이벤트가 있습니다
두 가지 방법을 모두 살펴 보자.
컴포넌트가 렌더링 될 때 쿼리하기위한 후크
이 예제에서는 후크가 호출 될 때 즉시 GraphQL API에서 쿼리 할 후크를 작성했습니다.
우리는
useState
후크를 사용하여 todos 배열을 빈 배열로 설정하여 초기 상태를 만듭니다.
후크가 사용되면
useEffect
API를 쿼리하고 할 일 배열을 업데이트하여 트리거됩니다.
여기서는
클래스 구성 요소에서
useEffect
사용한 방법과 유사하게 사용
componentDidMount
합니다.
마지막으로, 후크는 최신 버전의 todos 배열을 리턴합니다.
이제이 후크를 어떻게 사용할까요? 글쎄, 실제로는 매우 쉽습니다.
를 호출하면
useQuery
최신 버전의 할 일 목록이있는 배열이 반환됩니다.
뷰에서 우리는 todos 배열을 맵핑합니다.
쿼리를 수동으로 호출
쿼리를 호출하기 전에 이벤트를 기다리려면 어떻게해야합니까? 사용자가 버튼을 클릭 할 때 쿼리를 호출하는 방법을 살펴 보겠습니다.
이 후크
queryTodos
에는 API를 호출하는 데 사용할
함수
가 있습니다.
여기서 가장 큰 차이점은 더 이상
useEffect
부작용을 처리하기 위해 후크를
사용하지 않는다는
것입니다.
후크가로드되면 실제로 초기 상태를 설정하는 것 외에는 아무것도하지 않습니다.
리턴에서는 이제 값의 배열과 단일 값의 배열을 리턴합니다. 첫 번째 값은 할 일의 배열이고 두 번째 값은 API 작업을 트리거하는 함수 호출입니다.
이제 후크를 사용하려면 후크에서 두 값을 가져올 수 있습니다.
돌연변이
데이터를 쿼리하는 방법을 알았으므로 돌연변이를 만드는 방법을 살펴 보겠습니다.
음, 실제로 돌연변이에 필요한 고리는 없습니다. 구성 요소에서 직접 작성할 수 있습니다.
구독
하나의 매우 멋진 유스 케이스 (및 후크의 패러다임에 완벽하게 맞는)는 GraphQL 구독을 처리하는 것입니다.
구독은 일반적으로 클래스에서 라이프 사이클 메소드를 사용하여 작성 및 종료되었으므로
useEffect
React
의 새로운
후크는 구독을 구현하기에 완벽한 장소입니다.
이 예제에서는 먼저 할일의 초기 배열을 쿼리
useEffect
하고 구성 요소가로드 될 때 후크에
반환 될 때의 상태로 저장합니다
.
useEffect
GraphQL 구독을 만들기위한
또 다른
후크를 만듭니다.
구독은 작성중인 새 작업을 청취합니다.
새 할 일이 생성되면 구독이 시작되고 구독 데이터에 새 할 일을 추가하기 위해 할 일 배열을 업데이트합니다.
여기서 상태를 관리하는 방식은 이전에 사용했던 방식과 다릅니다
useState
.
여기서는
useReducer
여러 효과에서 상태를 공유해야하지만 구성 요소가로드 될 때 구독이 시작되기를 원하기 때문에 후크
를 활용하여 감속기를 사용하고
있습니다.
이를 달성하기 위해 두
useEffect
후크에
사용될 단일 감속기에서 모든 상태를 관리합니다
.
위의 구독 훅에서 먼저 todos의 초기 배열을 가져옵니다. API에서 돌아 오면 상태에서 todos 배열을 업데이트합니다.
또한 새 할 일을 수신 할 구독을 설정했습니다. 생성 될 때 상태에서 할 일 배열을 업데이트합니다.
기본 응용 프로그램에서 할일을 가져 와서 UI에 매핑합니다.useReducer에서 구독이 제대로 작동하도록하려면 시간이 좀 걸렸습니다. "); background-size: 1px 1px; background-position: 0px calc(1em + 1px);">솔루션을 알아내는 데 도움 을 "); background-size: 1px 1px; background-position: 0px calc(1em + 1px);">준 hurabielle marc 에게 감사합니다 !"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);">
결론
캐싱 또는 낙관적 UI에 대해서는 다루지 않았으며 Apollo 저장소와의 작업에 대해서는 다루지 않았지만 캐싱 / 낙관적 UI를 관리하는 후크의 예를 실제로보고 싶습니다.후크 작업의 예에서는 아직 캐싱을 지원하지 않지만 Apollo Client 및 AWS AppSync JS SDK를 모두 사용하는 AWS Amplify GraphQL 클라이언트를 사용했습니다. 양자 모두할 & 사용하여 유사한 API를 사용할 수 있습니다
client.query,
client.mutate,
client.subscribe(문서를 참조 "); background-size: 1px 1px; background-position: 0px calc(1em + 1px);">여기에 ).
