[TanStakQuery] GraphQL

React Query의 fetching 메커니즘은 Promises를 기반으로 하기 때문에 GraphQL을 포함한 말 그대로 모든 비동기 데이터 fetching 클라이언트와 함께 React Query를 사용할 수 있습니다!

"React Query는 정규화된 캐싱을 지원하지 않는다는 점에 유의하세요. 대다수의 사용자는 실제로 정규화된 캐시를 필요로 하지 않거나 캐시의 이점을 누릴 수 있는 경우는 거의 없지만, 매우 드문 상황이 발생할 수 있으므로 먼저 저희에게 확인하여 진정으로 필요한 것인지 확인하십시오!"

타입 안정성과 코드 생성(Type-Safety and Code Generation)

graphql-request^5, GraphQL Code Generator와 함께 사용되는 React Query는 전체 유형(full-typed)의 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 코드 생성기 문서의 전용 가이드로 시작하세요.

Reference

• GraphQL | TanStack Query Docs