개츠비는 CMS연동을 지원한다. 설정을 해두면 빌드 시 명시한 CMS의 컨텐츠를 가져와 gql로 조회 가능하며 아주 편리하다.
Contentful을 사용했다.
BookModel
- title [string]
- author [string]
- rating [number]
- coverImage [file]
- children (static asset)
- name [string]
- type [string]
- file [file]
대강 요런식으로 모델을 잡았다.
gatsby-config.ts
...
plugins:[ {
resolve: "gatsby-source-contentful",
options: {
accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
spaceId: process.env.CONTENTFUL_SPACE_TOKEN,
contentTypeFilter: (contentType: any) => contentType.sys.id === "books",
},
},
...
특정 모델만을 요청하거나, Contentful 자체에서 특정 도메인에 특정 모델을 제공하는 설정을 찾지 못했다.
좀 이상한 방식같지만 일반적으로 contentTypeFilter
를 이용하는듯 하여 books 모델만을 가져오도록 했다.
bookList.tsx
...
const {
allContentfulBooks: { nodes: books },
} = useStaticQuery<Queries.getBooksQuery>(graphql`
query getBooks {
allContentfulBooks {
nodes {
id
author
title
rating
coverImage {
file {
url
}
}
}
}
}
`);
gql로 CMS에서 fetch해온 데이터를 이용할 수 있다.
Queries.getBooksQuery["allContentfulBooks"]["nodes"][number]
타입도 제공해줘 아주 편하다.
라우트 구조는 다음과 같이 잡았다.
- /index
- /mail
- /book
/book/${bookName}
디테일 페이지는 책 별로 물리 페이지를 작성
웹 비주얼 프로젝트다보니 공통 레이아웃을 잡고 데이터를 박아넣는 방식이 아닌 책 별로 페이지를 가져야했다. bookList
에 대응하는 디테일 페이지 파일을 하나씩 만들어 독후감 페이지를 만든다. 하드코딩이 아닌 하드파일 방식이랄까
fetch한 책 리스트를 index에 뿌리고, 페이지 진입시 해당 책의 coverImage 파일을 three.js 책 오브젝트 겉에 씌워 bookCover를 보여준다. 3D 책을 클릭해 물리적으로 작성한 디테일 페이지로 이동하는 구조이다.