몽키스님의 게시글

질문&답변

childImageSharp가 자꾸 null이라고 뜨네요..ㅠ

해당 index.tsx의 코드는 아래와 같습니다. 깃허브에는 아직 업로드 하지 않았는데, 보시고 만약 더 필요하시면 깃허브에 업로드할게요! ----- import React, { FunctionComponent } from 'react'; import styled from '@emotion/styled'; import GlobalStyle from '../components/Common/GlobalStyle'; import Introduction from '../components/Main/Introduction'; import CategoryList from '../components/Main/CategoryList'; import Footer from '../components/Common/Footer'; import PostList, { PostType } from '../components/Main/PostList'; import { ProfileImageProps } from '../components/Main/ProfileImage'; import { graphql } from 'gatsby'; interface IndexPageProps { data: { allMarkdownRemark: { edges: PostType[]; }; file: { childImageSharp: { fluid: ProfileImageProps['profileImage']; }; }; }; } const CATEGORY_LIST = { All: 5, Web: 3, Mobile: 2, }; const Container = styled.div` display: flex; flex-direction: column; height: 100%; `; const IndexPage: FunctionComponent = function ({ data: { allMarkdownRemark: { edges }, file: { childImageSharp: { fluid }, }, }, }) { return ( ); }; export default IndexPage; export const queryPostList = graphql` query queryPostList { allMarkdownRemark( sort: { order: DESC, fields: [frontmatter___date, frontmatter___title] } ) { edges { node { id frontmatter { title summary date(formatString: "YYYY.MM.DD.") categories thumbnail { childImageSharp { fluid( maxWidth: 768 maxHeight: 200 fit: INSIDE quality: 100 ) { ...GatsbyImageSharpFluid_withWebp } } } } } } } file(name: { eq: "profile-image" }) { childImageSharp { fluid(maxWidth: 120, maxHeight: 120, fit: INSIDE, quality: 100) { ...GatsbyImageSharpFluid_withWebp } } } } `;