🔥 GraphQL
227자
3분
강의 목차
React Query의 데이터 가져오기 기능은 프로미스를 기반으로 하여 유연하게 설계되었습니다. 이로 인해 GraphQL을 포함한 모든 비동기 데이터 가져오기 클라이언트와 함께 사용할 수 있습니다.
React Query는 정규화된 캐싱을 지원하지 않는다는 점에 유의해야 합니다. 대부분의 사용자는 실제로 정규화된 캐시가 필요하지 않거나 생각만큼 큰 이점을 얻지 못합니다. 하지만 매우 드물게 정규화된 캐시가 필요한 경우가 있을 수 있습니다. 이런 경우에는 먼저 저희에게 문의하여 정말로 필요한지 확인하는 것이 좋습니다.
타입 안전성과 코드 생성
React Query를 graphql-request^5와 GraphQL Code Generator와 함께 사용하면 완전히 타입이 지정된 GraphQL 작업을 수행할 수 있습니다.
typescript
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
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 },
),
})
// ...
}
이 예제에서는 GraphQL 쿼리를 정의하고, React Query의 useQuery 훅을 사용하여 데이터를 가져옵니다. 타입 안전성 덕분에 data 객체와 쿼리 변수에 대한 타입 검사가 이루어집니다.
전체 예제는 저장소에서 확인할 수 있습니다.
GraphQL Code Generator 문서에 있는 전용 가이드를 통해 시작해 보세요.
이 접근 방식을 사용하면 GraphQL 작업에 대한 타입 안전성을 확보할 수 있어, 개발 과정에서 오류를 줄이고 코드의 품질을 높일 수 있습니다.
YouTube 영상
