미해결
React 기반 Gatsby로 기술 블로그 개발하기
index.tsx allMarkdownRemark 에러..
이런 에러가 나는데 해결방법을 모르겠습니다.
제 깃허브는 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)
}
}
}
`
