inflearn logo
강의

講義

知識共有

ReactベースのGatsbyで技術ブログを開発する

メインページからPropsとして受け取り、ポストデータを出力する

index.tsx allMarkdownRemark 에러..

591

Heejin Jeong

投稿した質問数 1

0

이런 에러가 나는데 해결방법을 모르겠습니다.
제 깃허브는 https://github.com/pie-heejin/pie-heejin.github.io/tree/develop 입니다..
 
 
index.tsx 파일 입니다!
import React, { FunctionComponent } from 'react'
import styled from '@emotion/styled'
import GlobalStyle from 'components/Common/GlobalStyle'
import Footer from 'components/Common/Footer'
import CategoryList from 'components/Main/CategoryList'
import Introduction from 'components/Main/Introduction'
import PostList, { PostType } from 'components/Main/PostList'
import { graphql } from 'gatsby'
import { IGatsbyImageData } from 'gatsby-plugin-image'
import { PostListItemType } from 'types/PostItem.types'

type IndexPageProps = {
  data: {
    allMarkdownRemark: {
      edges: PostListItemType[]
    }
    file: {
      childImageSharp: {
        gatsbyImageData: IGatsbyImageData
      }
    }
  }
}

const CATEGORY_LIST = {
  All: 5,
  Web: 3,
  Mobile: 2,
}

const Container = styled.div`
  display: flex;
  flex-direction: column;
  height: 100%;
`

const IndexPage: FunctionComponent<IndexPageProps> = function ({
  data: {
    allMarkdownRemark: { edges },
    file: {
      childImageSharp: { gatsbyImageData },
    },
  },
}) {
  return (
    <Container>
      <GlobalStyle />
      <Introduction profileImage={gatsbyImageData} />
      <CategoryList selectedCategory="Web" categoryList={CATEGORY_LIST} />
      <PostList posts={edges} />
      <Footer />
    </Container>
  )
}

export default IndexPage

export const getPostList = graphql`
  query getPostList {
    allMarkdownRemark(
      sort: { order: DESC, fields: [frontmatter___date, frontmatter___title] }
    ) {
      edges {
        node {
          id
          frontmatter {
            title
            summary
            date(formatString: "YYYY.MM.DD.")
            categories
            thumbnail {
              childImageSharp {
                gatsbyImageData(width: 768, height: 400)
              }
            }
          }
        }
      }
    }
    file(name: { eq: "profile-image" }) {
      childImageSharp {
        gatsbyImageData(width: 120, height: 120)
      }
    }
  }
`

allMarkdownRemark blog Gatsby

回答 2

0

ji5485

안녕하세요, Heejin Jeong님

일단 레포지토리 클론 받아서 실행시켰을 때 해당 에러는 뜨지 않는 걸 보니 해결이 된 것 같네요.

대신 다른 문제점이 있었는데 썸네일 이미지 처리가 제대로 되지 않고 있었습니다.

확인을 해보니 우선 gatsby-config.js 파일에서 이미지 처리를 담당하는 라이브러리인

gatsby-plugin-sharp 라이브러리가 두 번 선언이 되어있었습니다.

따라서 하단의 중복 선언 코드를 삭제해주셔야 합니다.

 

{
resolve: `gatsby-plugin-sharp`,
options: {
defaults: {
formats: ['auto', 'webp'],
quality: 100,
placeholder: 'blurred',
}
}
},
`gatsby-transformer-sharp`,
`gatsby-plugin-image`,
`gatsby-plugin-sharp`, <- 삭제

 

그리고 yarn clean 명령어를 통해 Gatsby Cache 파일을 전부 삭제해주신 후, test.md 썸네일 이미지 이름을 올바르게 설정해주시고 프로젝트를 실행시켜주세요.

프로젝트 컴파일이 잘 되면, http://localhost:8000/__graphiql 에 접속해

allMarkdownRemark -> edges -> node -> frontmatter -> thumbnail 프로퍼티 내에 childImageSharp를 포함한 여러 프로퍼티가 존재하는지 확인 바랍니다 :)

0

ji5485

안녕하세요, Heejin Jeong님!

정확한 원인 파악을 위해 프로젝트를 업로드한 깃허브 링크를 댓글로 달아주시면 감사하겠습니다.

링크 달아주시면 원인 파악 후 답변 달아드리겠습니다 :)

0

Heejin Jeong

https://github.com/pie-heejin/pie-heejin.github.io/tree/develop

입니다ㅠㅠ 확인 부탁드리겠습니다 감사합니다

쿼리오류 Field "thumbnail" must not have a selection...

1

852

1

타입스크립트를 설정할 때 jsxPragma 옵션을 뺀 이유는 무엇인가요?

1

585

1

마지막 배포 부분 질문드립니다!

1

617

1

'[username]/[username].github.io' -> 'username/reponame'

0

337

0

IntersectionObserver deploy( gatsby build) 시 오류(자답)

1

387

1

PostHead.tsx BackgroundImage 동작오류(자답)

1

288

0

19강 인피니티 스크롤 IntersectionObserver 코드 위치 수정이 필요합니다.

1

402

1

썸네일 이미지 제작 및 학습 방법 관련 문의

1

436

1

배포 후 포스트 업로드 방법

1

378

1

배포 질문이요!

1

512

1

gatsby develop 오류

1

931

1

깃허브 레퍼지토리 질문드려요

1

339

1

특정 게시글을 클릭하여 상세 페이지로 넘어가는 과정과 SPA에 관한 질문

1

280

1

Unhandled Runtime Error 가 뜹니다

0

502

2

sign in with GitHub 클릭 시

1

392

3

동작 반복 시 오류

1

350

2

const BackgroundImage 질문

1

209

1

오타 문의

1

299

2

Props로 받아 포스트 데이터 출력하기가 안됩니다.

1

199

1

스네이크 케이스로 변수명을 짓는 이유

1

248

1

'Tagged Template Literal 방식을 통해 정의한 CSS 적용 방법'에서 발생하는 문제

3

343

2

상단 이미지를 썸네일 사용하지않고 다른 이미지를 쓰고싶습니다

1

279

1

여기까지 했는데 runtime 에러가 발생합니다

2

278

1

index.tsx오류

2

451

1