inflearn logo
강의

Khóa học

Chia sẻ kiến thức

Phát triển blog công nghệ với Gatsby dựa trên React

Nhận Props từ trang chính và in dữ liệu bài viết

index.tsx allMarkdownRemark 에러..

592

Heejin Jeong

1 câu hỏi đã được viết

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

Câu trả lời 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

853

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

932

1

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

1

340

1

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

1

280

1

Unhandled Runtime Error 가 뜹니다

0

502

2

sign in with GitHub 클릭 시

1

393

3

동작 반복 시 오류

1

350

2

const BackgroundImage 질문

1

209

1

오타 문의

1

300

2

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

1

200

1

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

1

248

1

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

3

344

2

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

1

280

1

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

2

278

1

index.tsx오류

2

452

1