🔥 GraphQL

227자

3분

강의 목차

타입 안전성과 코드 생성

React Query의 데이터 가져오기 기능은 프로미스를 기반으로 하여 유연하게 설계되었습니다. 이로 인해 GraphQL을 포함한 모든 비동기 데이터 가져오기 클라이언트와 함께 사용할 수 있습니다.

React Query는 정규화된 캐싱을 지원하지 않는다는 점에 유의해야 합니다. 대부분의 사용자는 실제로 정규화된 캐시가 필요하지 않거나 생각만큼 큰 이점을 얻지 못합니다. 하지만 매우 드물게 정규화된 캐시가 필요한 경우가 있을 수 있습니다. 이런 경우에는 먼저 저희에게 문의하여 정말로 필요한지 확인하는 것이 좋습니다.

타입 안전성과 코드 생성

React Query를 graphql-request^5와 GraphQL Code Generator와 함께 사용하면 완전히 타입이 지정된 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`는 완전히 타입이 지정됩니다!
  const { data } = useQuery({
    queryKey: ['films'],
    queryFn: async () =>
      request(
        '<https://swapi-graphql.netlify.app/.netlify/functions/index>',
        allFilmsWithVariablesQueryDocument,
        // 변수도 타입 검사를 받습니다!
        { first: 10 },
      ),
  })
  // ...
}
 typescript

이 예제에서는 GraphQL 쿼리를 정의하고, React Query의 useQuery 훅을 사용하여 데이터를 가져옵니다. 타입 안전성 덕분에 data 객체와 쿼리 변수에 대한 타입 검사가 이루어집니다.

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

GraphQL Code Generator 문서에 있는 전용 가이드를 통해 시작해 보세요.

이 접근 방식을 사용하면 GraphQL 작업에 대한 타입 안전성을 확보할 수 있어, 개발 과정에서 오류를 줄이고 코드의 품질을 높일 수 있습니다.

강의 내용

타입 안전성과 코드 생성