GraphQL

그래프큐엘의 장점 : 필요한 데이터만 받아올 수 있음!!

예시

출처 : 인프런 React 기반 Gatsby로 기술블로그 만들기

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

// Query 결과 반환 값

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

메타데이터 불러오기

갯츠비에서의 활용

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

// 메타데이터 props로 받아서 리턴으로 추출하기
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
      }
    }
  }
`