[React기반 Gatsby로 블로그 개발하기] GraphQL 사용

GraphQL에서의 Query 사용법

GraphQL은 필요한 데이터만 받아올 수 있다는 점에서 매력을 가진다

[입력값]

query getPeopleList {
  allPeople {
    edges {
      node {
        id
        name
      }
    }
  }
}

[결과 반환값]

"data": {
    "allPeople": {
      "edges": [
        {
          "node": {
            "id": "cGVvcGxlOjE=",
            "name": "Luke Skywalker"
          }
        },
        {
          "node": {
            "id": "cGVvcGxlOjQ=",
            "name": "Darth Vader"
          }
        },
      ]
    }
  }
}

이처럼 원하는 데이터만 가져올 수 있다

GraphiQL : 강력한 기능

Gatsby에서는 홈페이지의 메타데이터, 마크다운 관련 데이터, 이미지 데이터 등을 Query를 통해 얻어올 수 있습니다.

GraphQL은 GraphiQL라는 IDE를 제공하는데 이를 통해 어떤 데이터를 요청할 수 있는지 알 수 있을 뿐더러 `쿼리 요청 전에 잠재적인 에러를 알려줄 수 있는 강력한 기능`을 제공한다

// 로컬 서버 실행시 나타나는 해당 GraphiQL IDE에 접속
<http://localhost:8000/___graphql>

IDE를 통해 사이트 메타데이터를 요청합니다

Gatsby에서 메타데이터는 `gatsby-config.js` 파일에서 확인할 수 있습니다

아래코드는 메타데이터를 바다오기 위해 작성한 코드.

query {
  site {
    siteMetadata {
      author
      description
      title
    }
  }
}

아래와 같이 gatsby-config.js에 있는 메타데이터 정보들을 가져온 것을 확인할 수 있습니다

Gatsby에서 GraphQL Query 사용법

Query 정의변수로서 정의가 불가능하고 StaticQuery라는 기능을 통해 정의 가능
Gatsby에서는 기본적으로 pages 폴더 내부의 파일과 Gatsby API를 통해 생성해주는 페이지의 템플릿에서만 Query 정의가 가능하다

pages 폴더 내부에 있는 컴포넌트에서는 아래와 같이 Query 정의하고 요청할 수 있음

▶ src/pages/info.tsx

import React, { FunctionComponent } from 'react'
import { graphql } from 'gatsby'
import Text from 'components/Text'

type InfoPageProps = {}

const InfoPage: FunctionComponent<InfoPageProps> = function () {
  return (
    <div>
      <Text text="Hello" />
    </div>
  )
}

export default InfoPage

export const metadataQuery = graphql`
  {
    site {
      siteMetadata {
        title
        description
        author
      }
    }
  }

아래와 같이 변수에 Qeury를 담아주고 이를 Export해주면 Gatsby 내부적으로 요청을 보냄
보낸 요청에 대한 응답으로 데이터를 Props로 전달해줌 (아래 데이터가 넘어옴)

{
  "data": {
    "site": {
      "siteMetadata": {
        "author": "@gatsbyjs",
        "description": "Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.",
        "title": "Gatsby Default Starter"
      }
    }
  }
}

data라는 키값 제외하면 위에 정의했던 Query형식과 일치
컴포넌트에서 받는 Props 객체의 data key값으로 Query에 대한 결과 값이 저장되어있어 아래와 같이 불러와 사용할 수 있음

import React, { FunctionComponent } from 'react'
import { graphql } from 'gatsby'
import Text from 'components/Text'

type InfoPageProps = {
  data: {
    site: {
      siteMetadata: {
        title: string
        description: string
        author: string
      }
    }
  }
}

const InfoPage: FunctionComponent<InfoPageProps> = function ({
  data: {
    site: {
      siteMetadata: { title, description, author },
    },
  },
}) {
  return (
    <div>
      <Text text={title} />
      <Text text={description} />
      <Text text={author} />
    </div>
  )
}

export default InfoPage

export const metadataQuery = graphql`
  {
    site {
      siteMetadata {
        title
        description
        author
      }
    }
  }
`;

위에서 확인한 쿼리 반환 결과 값에 따라 Props 타입을 지정해주었으며, Destructuring Assignment 문법을 활용해 title, description, author 값만 추출해 사용할 수 있습니다.

이렇게 Query를 통해 데이터 형식을 쉽게 파악할 수 있기 때문에 Props 타입 정의도 엄청 간편합니다.

`아래는 localhost:8000/info 결과값`

GraphQL에서의 Query 사용법

티스토리툴바