useQuery와 useMutation 훅

@apollo/client의 gql 템플릿 태그는 모듈이 로드될 때 GraphQL 쿼리 문자열을 DocumentNode로 구문 분석합니다. 컴포넌트 외부에서 쿼리를 정의하십시오: const GET_USERS = gql`query GetUsers { users { id name email } }`.

참고: 프로덕션 코드에서는 gql로 감싼 작은따옴표 문자열을 태그된 템플릿으로 사용하십시오. gql 태그는 JavaScript 소스에서 템플릿 리터럴 구문을 허용합니다.

useQuery(GET_USERS)는 { loading, error, data, refetch, fetchMore, networkStatus }를 반환합니다. 초기 가져오기 중에는 loading이 true입니다. error에는 GraphQL 오류나 네트워크 오류가 포함됩니다. data에는 쿼리 구조에 맞는 쿼리 결과가 포함됩니다.

null 값이 렌더링되는 것을 방지하려면 data에 접근하기 전에 먼저 loading과 error를 확인하십시오.

loading이 true인 동안에는 스켈레톤 컴포넌트를 렌더링하십시오. error가 정의되어 있으면 오류 메시지를 렌더링하십시오(오류 텍스트에는 error.message를 사용합니다). data가 정의되어 있고 loading이 false일 때만 실제 콘텐츠를 렌더링하십시오.

이 세 가지 상태 패턴(로딩 / 오류 / 데이터)은 Apollo Client 컴포넌트 구조의 표준입니다.

data 객체는 GraphQL 쿼리 구조를 그대로 반영합니다. query { users { id name } } 쿼리에서는 {id, name} 객체의 배열인 data.users에 접근하십시오. graphql-codegen을 사용하여 타입이 지정된 훅을 생성하면 TypeScript 타입이 일치합니다.

코드 생성 없이 data의 타입은 any입니다. 코드 생성을 사용하면 useQuery가 완전히 타입이 지정된 데이터를 자동으로 반환합니다.

두 번째 인수로 변수를 전달하십시오: useQuery(GET_USER, { variables: { id: userId } }). userId가 변경되면 useEffect의 종속성 배열과 마찬가지로 쿼리가 자동으로 다시 실행됩니다.

Apollo Client는 쿼리와 변수의 각 고유한 조합을 별도로 캐시하므로 id: "1"인 GET_USER와 id: "2"인 GET_USER는 서로 독립적인 캐시 항목을 가집니다.

쿼리가 실행되지 않도록 옵션에 skip: true를 전달하십시오: useQuery(GET_USER, { skip: !userId }). skip이 true이면 Apollo는 요청을 전송하지 않으며 loading은 false이고 data는 정의되지 않습니다.

이는 SWR의 null 키 및 React Query의 enabled: false 옵션에 해당하는 Apollo 방식입니다.

useQuery가 반환하는 refetch 함수는 가져오기 정책과 관계없이 네트워크 요청을 실행합니다. 서버 데이터를 변경했을 수 있는 사용자 작업 후에 refetch()를 호출하십시오. 예를 들어 양식을 제출한 후 refetch()를 호출할 수 있습니다.

refetch에 새 변수를 전달하여 다른 매개변수로 다시 가져올 수 있습니다: refetch({ id: newId }).

네트워크 상태가 변경될 때(가져오기, 다시 가져오기, 폴링 등) 업데이트를 받으려면 옵션에 notifyOnNetworkStatusChange: true를 전달하십시오. networkStatus 필드에는 NetworkStatus 열거형의 숫자 코드가 포함됩니다.

이를 사용하면 현재 데이터를 숨기지 않고 백그라운드에서 다시 가져오는 동안 미묘한 "새로 고침 중" 표시를 보여 줄 수 있습니다.

useMutation(CREATE_USER)은 [mutateFunction, { loading, error, data, reset }]을 반환합니다. 사용자가 양식을 제출할 때 변이 함수를 호출합니다. 이 함수는 { data, errors }를 포함하는 Promise를 반환합니다.

변이에 입력을 전달하려면 mutate({ variables: { name: 'Alice', email: 'alice@example.com' } })를 호출하십시오.

useMutation 옵션에 onCompleted: (data) => navigate('/dashboard') 및 onError: (error) => showToast(error.message)를 전달하십시오. 이 콜백은 변이가 성공적으로 처리되거나 거부된 후에 실행됩니다.

onCompleted는 변이 결과 데이터를 받으며, 탐색을 실행하거나 성공 메시지를 표시하거나 양식을 초기화할 때 유용합니다.

mutate 호출의 optimisticResponse 옵션은 서버가 응답하기 전에 합성 결과를 캐시에 즉시 기록합니다. Apollo는 낙관적 데이터를 즉시 렌더링한 다음 응답이 도착하면 실제 서버 응답으로 대체합니다.

변이가 실패하면 Apollo는 낙관적 업데이트 이전의 캐시 상태로 자동 롤백하여 사용자 인터페이스의 일관성을 유지합니다.

skip: true가 전달되면 useQuery에는 어떤 일이 발생합니까?

gql 태그로 쿼리를 정의하고, useQuery(QUERY, { variables, skip })를 호출한 다음 로딩, 오류 및 데이터 상태를 처리하십시오. useMutation은 트리거 함수와 상태 객체를 반환합니다. 변수와 함께 호출하고 onCompleted 및 onError를 통해 결과를 처리하십시오. 낙관적 응답은 실패 시 자동 롤백과 함께 캐시를 즉시 업데이트합니다.

skip 옵션과 변수에 따른 다시 가져오기를 사용하면 조건부 데이터 로딩과 매개변수화된 데이터 로딩을 처리할 수 있습니다.