GraphQL

React Query의 가져오기 메커니즘은 Promise를 기반으로 특정 구현에 구애받지 않도록 구축되었으므로, GraphQL을 포함해 말 그대로 모든 비동기 데이터 가져오기 클라이언트와 React Query를 함께 사용할 수 있습니다!

React Query는 정규화된 캐싱을 지원하지 않는다는 점에 유의하세요. 대다수 사용자는 실제로 정규화된 캐시가 필요하지 않으며 자신이 생각하는 만큼 이점을 얻지도 못하지만, 매우 드물게 정규화된 캐시가 필요한 상황이 있을 수 있으므로 이것이 정말 필요한지 확인하려면 먼저 저희에게 문의하세요!

타입 안전성 및 코드 생성

graphql-request^5 및 GraphQL 코드 생성기와 함께 사용하는 React Query는 완전히 타입이 지정된 GraphQL 작업을 제공합니다:

import request from 'graphql-request'
import { useQuery } from '@tanstack/react-query'

import { graphql } from './gql/gql'

const allFilmsWithVariablesQueryDocument = graphql(/* GraphQL */ `
  query allFilmsWithVariablesQuery($first: Int!) {
    allFilms(first: $first) {
      edges {
        node {
          id
          title
        }
      }
    }
  }
`)

function App() {
  // `data` is fully typed!
  const { data } = useQuery({
    queryKey: ['films'],
    queryFn: async () =>
      request(
        'https://swapi-graphql.netlify.app/.netlify/functions/index',
        allFilmsWithVariablesQueryDocument,
        // variables are type-checked too!
        { first: 10 },
      ),
  })
  // ...
}

저장소에서 전체 예제를 확인할 수 있습니다

GraphQL Code Generator 문서 전용 가이드에서 시작합니다.