[Gatsby] useStaticQuery(정적 쿼리 사용)

useStaticQuery

useStaticQuery는 빌드 시 리액트 훅을 사용하여 Gatsby의 GraphQL 데이터 계층을 쿼리 하는 기능을 제공합니다. 이를 통해 React 컴포넌트는 구문 분석, 평가 및 컴포넌트에 삽입될 GraphQL 쿼리를 통해 데이터를 검색할 수 있습니다.

useStaticQuery 훅은 모든 컴포넌트 또는 페이지에서 사용할 수 있습니다.

const data = useStaticQuery(graphql`
  query HeaderQuery {
    site {
      siteMetadata {
        title
      }
    }
  }
`);

사용 방법

TypeScript를 사용하고 gatsby-config.ts 파일에서 GraphQL 타입 생성에 관한 항목인 graphqlTypegen 값이 true로 설정되어 있다면 Gatsby가 쿼리를 읽고서 자동적으로 맞는 타입을 생성합니다.

gatsby-types.d.ts 파일을 열어서 보면 정의한 쿼리를 읽고 자동 타입 생성을 해버렸음을 확인 할 수 있습니다.

// useStaticQuery 정의
const data = useStaticQuery(graphql`
  query SeoData {
    site {
      siteMetadata {
        title
      }
    }
  }
`);

// gatsby-types.d.ts
type SeoDataQuery = { readonly site: { readonly siteMetadata: { readonly title: string | null } | null } | null };

이렇게 자동 타입이 생성되었다면 Queries를 사용하여 SeoDataQuery를 찾아 타입을 부여합니다. TypeScript 자동완성이 제공됩니다.

const data = useStaticQuery<Queries.SeoDataQuery>(
  graphql`
    query SeoData {
      site {
        siteMetadata {
          title
        }
      }
    }
  `
);
console.log(data.site?.siteMetadata?.title);

전체 코드

GraphQL 쿼리를 통해 조회해서 Title를 설정하는 코드입니다.

import { graphql, useStaticQuery } from 'gatsby';
import React from 'react';

interface ISeoProps {
  title: string;
}

export default function Seo({ title }: ISeoProps) {
  const data = useStaticQuery<Queries.SeoDataQuery>(graphql`
    query SeoData {
      site {
        siteMetadata {
          title
        }
      }
    }
  `);
  return (
    <title>
      {title} | {data.site?.siteMetadata?.title}
    </title>
  );
}

참고

• https://www.gatsbyjs.com/docs/how-to/querying-data/use-static-query/
• https://www.gatsbyjs.com/docs/reference/graphql-data-layer/graphql-api/#usestaticquery
• GraphQL Typegen