[Gatsby] 플러그인, GraphQL, useStaticQuery

YunHee·2024년 1월 25일

React gatsby gatsby-plugin-image graphql plugin query siteMetadata useStaticQuery

Gatsby

목록 보기

2/7

1. 🧩플러그인 사용하기

웹사이트에 새로운 기능을 구축하는 것은 많은 작업이 될 수 있습니다. 다행히 Gatsby 플러그인을 사용하면 처음부터 사이트를 직접 구축할 필요 없이 사이트에 새로운 기능을 빠르게 추가할 수 있습니다.

1-1. 플러그인 설치하기

npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem

gatsby-plugin-image : 정적 이미지를 추가하는 데 사용합니다.

gatsby-plugin-sharp : gatsby-plugin-image에서 사용되는 실질적인 이미지 처리 기능을 제공합니다.

gatsby-source-filesystem : 컴퓨터의 파일 시스템에서 데이터를 가져올 수 있습니다.

1-2. 플러그인 적용하기

gatsby-config.js 파일에 플러그인을 추가합니다.

/* gatsby-config.js */
module.exports = {
  siteMetadata: {
    title: "My First Gatsby Site",
  },
  plugins: [
    "gatsby-plugin-image",
    "gatsby-plugin-sharp",
  ],
};

1-3. 홈페이지에 이미지 URL 추가하기

StaticImage 컴포넌트는 HTML의 img 태그를 사용하는 것과 유사한 방식입니다. StaticImage의 prop에는 src와 alt가 있습니다.

/* src/pages/index.js */
import * as React from 'react'
import Layout from '../components/layout'
import { StaticImage } from 'gatsby-plugin-image'

const IndexPage = () => {
  return (
    <Layout pageTitle="Home Page">
      <p>I'm making this by following the Gatsby Tutorial.</p>
      <StaticImage
        alt="Clifford, a reddish-brown pitbull, posing on a couch and looking stoically at the camera"
        src="https://pbs.twimg.com/media/E1oMV3QVgAIr1NT?format=jpg&name=large"
      />
    </Layout>
  )
}

export const Head = () => <title>Home Page</title>

export default IndexPage

1-4. 로컬의 이미지로 추가하기

StaticImage를 사용하여 로컬 파일 시스템에서 이미지를 렌더링할 수도 있습니다 .

사진을 컴퓨터에 다운로드하고 src/images 디텍터리로 옮깁니다.

URL 대신 파일의 상대 경로로 업데이트하세요.

/* src/pages/index.js */
import * as React from 'react'
import Layout from '../components/layout'
import { StaticImage } from 'gatsby-plugin-image'

const IndexPage = () => {
  return (
    <Layout pageTitle="Home Page">
      <p>I'm making this by following the Gatsby Tutorial.</p>
      <StaticImage
        alt="Clifford, a reddish-brown pitbull, dozing in a bean bag chair"
        src="../images/clifford.jpg"
      />
    </Layout>
  )
}

export const Head = () => <title>Home Page</title>

export default IndexPage

2. GraphQL로 데이터 가져오기

2-1. GraphQL 쿼리 언어

GraphQL 이라는 쿼리 언어를 사용하여 데이터를 쉽게 가져 올 수 있습니다.

첫째, 데이터는 하나 이상의 source에 저장됩니다.

해당 소스는 컴퓨터 파일 시스템의 폴더, WordPress와 같은 CMS(콘텐츠 관리 시스템) 또는 데이터베이스일 수 있습니다. 여러 데이터 소스가 있을 수도 있습니다!

source -> data layer : 소스에서 데이터 영역(Layer)으로 데이터를 어떻게 가져오나요?

source plugins 이라는 플러그인 type(유형)을 사이트에 추가합니다. 각 소스 플러그인은 특정 소스와 통신하도록 설계되었습니다. 사이트를 구축할 때 각 소스 플러그인은 특정 소스에서 데이터를 가져와 사이트의 GraphQL 데이터 레이어에 추가합니다.

data layer -> data : 데이터 영역에서 데이터를 어떻게 다시 가져오나요?

컴포넌트 내부에 GraphQL queries를 작성하여 사이트에서 사용하려는 데이터를 가져올 수 있습니다. 사이트를 build하면 Gatsby는 컴포넌트에서 모든 GraphQL 쿼리를 찾아 실행하고 결과 데이터를 컴포넌트에 저장합니다.

2-2. GraphiQL를 사용하여 데이터 레이어를 탐색하고 GraphQL 쿼리 작성하기

GraphiQL이라는 브라우저 내 도구를 사용할 수 있는 특별한 엔드포인트를 자동으로 생성합니다.

GraphiQL을 사용하면 사이트의 데이터를 탐색하고 GraphQL 쿼리를 작성할 수 있습니다.

GraphiQL interface

서버를 시작합니다.

gatsby develop (or npm run start)

웹 브라우저로 이동합니다.

http://localhost:8000/___graphql

3. useStaticQuery

GraphQL 쿼리를 React 구성 요소에서 어떻게 사용하는지 알아봅니다.
useStaticQuery hook을 사용합니다.

3-1. 💡Key Gatsby Concept

💡Key Gatsby Concept
: useStaticQuery를 사용하여 빌딩 블록 구성 요소로 데이터 끌어오기

gatsby 패키지에서 useStaticQuery hook과 graphql 태그를 가져옵니다.

import { useStaticQuery, graphql } from "gatsby"

컴포넌트 내에서 useStaticQuery template tag와 GraphiQL의 쿼리를 사용하여 graphql를 호출합니다. 결과를 새로운 변수에 저장하면 나중에 컴포넌트에서 사용할 수 있습니다.

const data = useStaticQuery(graphql`
  // Copy-paste your query from GraphiQL here, 
     and delete the query name "MyQuery"
`)

점 연산자(.)를 사용하여 컴포넌트에서 해당 필드에 액세스 할 수 있습니다.

/* src/components/header.js */
import * as React from 'react'

// Step 1: Import the useStaticQuery hook and graphql tag
import { useStaticQuery, graphql } from 'gatsby'

const Header = () => {
  /* Step 2: Use the useStaticQuery hook and
    graphql tag to query for data
    (The query gets run at build time) */
  const data = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <header>
      {/* Step 3: Use the data in your component */}
      <h1>{data.site.siteMetadata.title}</h1>
    </header>
  )
}

export default Header

3-2. Site Title 을 Layout 컴포넌트로 끌어오기

useStaticQuery 를 사용해서 사이트 메타데이터의 사이트 제목을 나의 components 로 가져올 수 있습니다.

Gatsby 패키지에서 useStaticQuery 함수와 graphql 태그를 가져옵니다.

/* src/components/layout.js */
import * as React from 'react'
import { Link, useStaticQuery, graphql } from 'gatsby'

const Layout = ({ pageTitle, children }) => {
  return (
    // ...
  )
}

export default Layout

useStaticQuery 사용하여 GraphiQL에서 생성한 쿼리를 호출 하고 전달합니다. Gatsby가 전달하는 문자열이 GraphQL 쿼리임을 알 수 있도록 graphql tag를 사용해야 합니다.

/* src/components/layout.js */
import * as React from 'react'
import { Link, useStaticQuery, graphql } from 'gatsby'

const Layout = ({ pageTitle, children }) => {
  const data = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    // ...
  )
}

export default Layout

Site title에 액세스하려면 자바스크립트 점 연산자(.)를 사용하여 data.site.siteMetadata.title 값을 가져옵니다.

/* src/components/layout.js */
import * as React from 'react'
import { Link, useStaticQuery, graphql } from 'gatsby'

const Layout = ({ pageTitle, children }) => {
  const data = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <div className={container}>
      <header>{data.site.siteMetadata.title}</header>
      <nav>
        <ul className={navLinks}>
          <li className={navLinkItem}>
            <Link to="/" className={navLinkText}>
              Home
            </Link>
          </li>
          <li className={navLinkItem}>
            <Link to="/about" className={navLinkText}>
              About
            </Link>
          </li>
        </ul>
      </nav>
      <main>
        <h1 className={heading}>{pageTitle}</h1>
        {children}
      </main>
    </div>
  )
}

export default Layout

3-3. Page title를 SEO 컴포넌트로 가져오기

src/components 밑에 seo.tsx 컴포넌트를 만들어줍니다.
쿼리를 작성하고 <title> tag 에 반환합니다.

/* src/components/seo.tsx */
import * as React from 'react'
import { graphql, useStaticQuery } from 'gatsby'

interface ISeoProps {
  title: string;
}

const Seo = ({ title }: ISeoProps) => {
  const data = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <title>{title} | {data.site.siteMetadata.title}</title>
  )
}

export default Seo

Index 페이지 컴포넌트에 Seo 컴포넌트를 업데이트 시켜줍니다.

/* src/pages/index.tsx */
import * as React from 'react'
import Layout from '../components/layout'
import Seo from '../components/seo'

const IndexPage = () => {
  return (
    <Layout title="welcome to my blog👋🏻">
      <p></p>
    </Layout>
  )
}

export const Head = () => <Seo title="Home Page" />

export default IndexPage

동일한 방식으로 모든 페이지(ex. about)를 업데이트 시켜줍니다.

3-4. 쿼리 데이터의 타입 (with 타입스크립트)

gatsby-config.ts 의 graphqlTypegen: true 는 gatsby가 쿼리를 읽고 자동으로 타입을 생성하도록 합니다.

gatsby-config.ts

SeoData 쿼리를 생성하고 gatsby-types.d.ts 를 열어보면, 자동으로 쿼리의 타입이 만들어져 있다.

// components/Seo.tsx
export default function Seo({ title }: SeoProps) {
  const data = useStaticQuery(graphql`
    query SeoData {
      site {
        siteMetadata {
          title
        }
      }
    }
  `);

gatsby-types.d.ts

다시 Seo.tsx 로 가서 <Queries.SeoDataQuery>를 입력해준다.

// components/Seo.tsx
import React from "react";
import { useStaticQuery, graphql } from "gatsby";

interface SeoProps {
  title: string;
}

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

  return (
    <title>
      {title} | {data.site?.siteMetadata?.title}
    </title>
  );
}