index.tsx allMarkdownRemark 에러..
591
1 asked

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)
}
}
}
`
Answer 2
0
안녕하세요, Heejin Jeong님
일단 레포지토리 클론 받아서 실행시켰을 때 해당 에러는 뜨지 않는 걸 보니 해결이 된 것 같네요.
대신 다른 문제점이 있었는데 썸네일 이미지 처리가 제대로 되지 않고 있었습니다.
확인을 해보니 우선 gatsby-config.js 파일에서 이미지 처리를 담당하는 라이브러리인
gatsby-plugin-sharp 라이브러리가 두 번 선언이 되어있었습니다.
따라서 하단의 중복 선언 코드를 삭제해주셔야 합니다.
그리고 yarn clean 명령어를 통해 Gatsby Cache 파일을 전부 삭제해주신 후, test.md 썸네일 이미지 이름을 올바르게 설정해주시고 프로젝트를 실행시켜주세요.
프로젝트 컴파일이 잘 되면, http://localhost:8000/__graphiql 에 접속해
allMarkdownRemark -> edges -> node -> frontmatter -> thumbnail 프로퍼티 내에 childImageSharp를 포함한 여러 프로퍼티가 존재하는지 확인 바랍니다 :)
0
안녕하세요, Heejin Jeong님!
정확한 원인 파악을 위해 프로젝트를 업로드한 깃허브 링크를 댓글로 달아주시면 감사하겠습니다.
링크 달아주시면 원인 파악 후 답변 달아드리겠습니다 :)
0
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

