21 포스트 아이템 링크를 만들어 해당 게시글 페이지 연결하기 - 템플릿 컴포넌트 내에서 Slug에 맞는 데이터 조회하기

source: categories/study/gatsby/gatsby_9-12.md

slug

템플릿 컴포넌트 내에서 Slug에 맞는 데이터 조회하기

createPage API의 파라미터

저번 챕터에서 Gatsby API인 createPage 함수의 파라미터로 pageOptions라는 이름으로 생성 옵션을 담은 객체를 넘겨주었습니다.

해당 객체에는 페이지 링크, 템플릿 컴포넌트, context의 세 가지 프로퍼티가 들어있었는데, context라는 이름으로 넘긴 객체 내의 값들은 컴포넌트에서 Props로 받을 수 있을 뿐더러 GraphQL Query의 파라미터로도 받을 수 있다고 했었습니다.

따라서 이번 챕터에서는 파라미터로 받은 Slug 데이터를 통해 그에 맞는 마크다운 데이터 Query 코드를 작성하겠습니다.

GraphQL Query에서 파라미터를 어떻게 받을까?

Query 내에서 사용하기 위한 파라미터의 이름은 필드 이름과 구분하기 위해 $ 와 같은 접두사를 붙여줘야하며, 그에 맞는 타입을 명시해주어야 합니다.

그리고, context 객체 내의 프로퍼티와 동일한 이름으로 파라미터 이름을 설정해주어야 합니다.

이에 따라 slug라는 이름으로 값을 전달해주었으니, Query에서는 $slug 라는 이름으로 파라미터를 받아야 합니다.

그럼 다음과 같이 작성함으로써 Query 내에서 파라미터를 사용할 수 있습니다.

query queryMarkdownDataBySlug($slug: String) {
  ...
}

그럼 저희는 filter를 통해 마크다운 데이터 내의 slug 데이터와 파라미터 값이 일치하는 데이터를 필터링할 수 있습니다.

해당 부분은 GraphiQL IDE를 통해 확인할 수 있으므로 직접 필드를 클릭해보며 어떻게 필터를 작성하는지 확인해보세요.

query queryMarkdownDataBySlug($slug: String) {
  allMarkdownRemark(filter: { fields: { slug: { eq: $slug } } }) {
    ...
  }
}

filter를 통해 값을 비교할 필드에 접근한 후, equal을 짧게 줄인 형태인 eq라는 프로퍼티로 일치하는지 비교할 파라미터 또는 값을 지정할 수 있습니다.

따라서 파라미터로 받은 slug와 일치하는 마크다운 데이터에서 다음과 같이 필요한 값만 Query 할 수 있습니다.

query queryMarkdownDataBySlug($slug: String) {
  allMarkdownRemark(filter: { fields: { slug: { eq: $slug } } }) {
    edges {
      node {
        html
        frontmatter {
          title
          summary
          date(formatString: "YYYY.MM.DD.")
          categories
          thumbnail {
            childImageSharp {
              gatsbyImageData
            }
          }
        }
      }
    }
  }
}

템플릿 컴포넌트에서 Query 코드 작성하기

그럼 이제 위의 Query 코드를 템플릿 컴포넌트에 추가해봅시다.

일반 페이지 컴포넌트에서의 Query 작성법과 동일하게 코드를 작성해주시면 됩니다.

다음과 같이 코드를 수정해주세요.

  • src/templates/post_template.tsx
import React, { FunctionComponent } from 'react'
import { graphql } from 'gatsby'

type PostTemplateProps = {}

const PostTemplate: FunctionComponent<PostTemplateProps> = function (props) {
  console.log(props)

  return <div>Post Template</div>
}

export default PostTemplate

export const queryMarkdownDataBySlug = graphql`
  query queryMarkdownDataBySlug($slug: String) {
    allMarkdownRemark(filter: { fields: { slug: { eq: $slug } } }) {
      edges {
        node {
          html
          frontmatter {
            title
            summary
            date(formatString: "YYYY.MM.DD.")
            categories
            thumbnail {
              childImageSharp {
                gatsbyImageData
              }
            }
          }
        }
      }
    }
  }
`

여기까지 작성한 후, 로컬 서버를 실행해 아무 게시글 페이지에 접속해보세요.

data 프로퍼티에 올바른 마크다운 데이터가 출력되었나요?