gatsbyjs / 개츠비 / api / 게츠비
gatsby 의 createPages, createResolvers
createPages, createResolvers 2개의 함수는 gatsby-node.js 에 정의된다.
createPages[ref. 1]
gatsby-node.js 에서 createPages를 export 하면 page를 생성할 수 있다. static page 들을 programatically 하게 만들어낼 수 있다. 아래 product 같은 경우를 보면, product 가 여러개 있을 때, 각 product 마다 static page 를 만들어주게 할 수 있다. createPage를 loop 돌려서.
exports.createPages = async ({ graphql, actions }) => {
// page 생성 1
createPage({
path: `/collection/${collection.slug}`,
component: require.resolve("./src/templates/collection.tsx"),
context: {
collection,
products,
childCollections,
},
defer: false,
})
...
// page 생성 2
createPage({
path: `/product/${product.slug}`,
component: require.resolve("./src/templates/product.tsx"),
context: {
product,
},
defer: false,
})
}creatResolvers[ref.2]
아래 예제에서 Vendure_Asset 은 Vendure 의 Asset type 을 이야기한다.
그래서 아래 createResolvers은 Vendure_Asset graphQL 에 imageFile을 추가하겠다.라는 뜻이다.
exports.createResolvers = ({
actions,
cache,
createNodeId,
createResolvers,
store,
reporter,
}) => {
const { createNode } = actions
createResolvers({
Vendure_Asset: {
imageFile: {
type: `File`,
resolve(source, args, context, info) {
const url = new URL(source.preview).href;
return createRemoteFileNode({
url,
store,
cache,
createNode,
createNodeId,
reporter,
})
},
},
},
Vendure_SearchResultAsset: {
imageFile: {
type: `File`,
resolve(source, args, context, info) {
return createRemoteFileNode({
url: source.preview,
store,
cache,
createNode,
createNodeId,
reporter,
})
},
},
},
})
}그래서 아처럼 graphQL 에서 Asset type 에 imageField 가 추가된다.
const GET_COLLECTIONS = /* GraphQL */ `
query {
vendure {
collections {
items {
id
name
description
slug
breadcrumbs {
id
name
slug
}
featuredAsset {
id
preview
imageFile {
childImageSharp {
gatsbyImageData(width: 300, height: 300, quality: 85)
}
}
}
parent {
id
name
}
}
}
}
}
`
