useStaticQuery
useStaticQuery는 빌드 시 리액트 훅을 사용하여 Gatsby의 GraphQL 데이터 계층을 쿼리 하는 기능을 제공합니다. 이를 통해 React 컴포넌트는 구문 분석, 평가 및 컴포넌트에 삽입될 GraphQL 쿼리를 통해 데이터를 검색할 수 있습니다.
useStaticQuery 훅은 모든 컴포넌트 또는 페이지에서 사용할 수 있습니다.
1 | const data = useStaticQuery(graphql` |
사용 방법
TypeScript를 사용하고 gatsby-config.ts
파일에서 GraphQL 타입 생성에 관한 항목인 graphqlTypegen
값이 true로 설정되어 있다면 Gatsby가 쿼리를 읽고서 자동적으로 맞는 타입을 생성합니다.
gatsby-types.d.ts
파일을 열어서 보면 정의한 쿼리를 읽고 자동 타입 생성을 해버렸음을 확인 할 수 있습니다.
1 | // useStaticQuery 정의 |
1 | // gatsby-types.d.ts |
이렇게 자동 타입이 생성되었다면 Queries
를 사용하여 SeoDataQuery
를 찾아 타입을 부여합니다. TypeScript 자동완성이 제공됩니다.
1 | const data = useStaticQuery<Queries.SeoDataQuery>( |
전체 코드
GraphQL 쿼리를 통해 조회해서 Title를 설정하는 코드입니다.
1 | import { graphql, useStaticQuery } from 'gatsby'; |