[컴] gatsby 의 createPages, createResolvers

 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
          }
        }
      }
    }
  }
`

References

1. Creating and Modifying Pages | Gatsby
2. creatResolvers | Gatsby Node APIs | Gatsby