2-2. GraphQL Query 알아보기

2장 간단하게 페이지 띄워보기

2-1. TypeScript로 컴포넌트 작성하기

2-2. GraphQL Query 알아보기

 

1) GraphQL에서의 Query는 어떻게 사용할까?

GraphQL : 필요한 데이터만 받아올 수 있음 (REST API와 다르게)

 

예시) 모든 유저들의 id과 name을 조회하는 getPeopleList 쿼리

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

 

반환값

 

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

 

쿼리를 정의하고, 이를 호출해 데이터를 얻음

 

2) GraphQL의 강력한 기능 중 하나인 GraphiQL

GraphiQL

- 컴패스나 워크벤치

- GraphQL 에 내장된 IDE로 자동화된 다양한 기능 제공

- http://localhost:8000/___graphql 에서 접속 가능

 

Gatsby에서 홈페이지의 메타데이터, 마크다운 관련 데이터, 이미지 데이터 등을 얻어올 수 있는데 GraphiQL로 쿼리를 작성하여 얻어와 보자

 

먼저 메타데이터가 위치한 gatsby-config.js 에서 뽑을 데이터를 확인한다.

 

그리고 GraphiQL에서 아래처럼 쿼리를 작성한다 (GUI로 뽑을 수도 있다)

 

// query 키워드는 생략 가능
query {
  site {
    siteMetadata {
      author
      description
      title
    }
  }
}

 

출력 결과

 

 

3) Gatsby에서 GraphQL Query은 어떻게 쓸 수 있을까?

그러면 코드에서 (컴포넌트에서) 어떻게 쿼리를 작성하고 실행할까?

 

(1) 먼저 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

 

(2) 쿼리 정의

Gatsby에서는

 

- pages 폴더 내부 파일

- Gatsby API를 통해 생성된 페이지의 템플릿 파일

 

에서만 쿼리 정의가 가능하다

 

일반 컴포넌트에서는 변수로 정의가 불가하고, StaticQuery 기능을 통해 정의 가능하다.

 

info.tsx에서 (컴포넌트) 위에서 작성한 메타데이터를 요청하는 쿼리를 그대로 사용해본다

 

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

type InfoPageProps = {}

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

export default InfoPage

// 변수에 쿼리를 담고 export 해주면 Gatsby에서 요청 보내줌
// 요청에 대한 응답으로 데이터가 props로 전달됨
export const metadataQuery = graphql`
  {
    site {
      siteMetadata {
        title
        description
        author
      }
    }
  }
`

 

반환된 데이터는 앞에서 IDE를 통해 출력한 데이터와 일치

 

(3) props로 받은 쿼리 결과를 렌더링

- 쿼리 반환 결과값에 따라 props 타입 지정

- 구조분해할당으로 title, description, author 를 매개변수로 사용

 

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
      }
    }
  }
`

 

http://localhost:8000/info 에 접속하고 메타데이터 렌더링 확인