type Props = {
      data: CategoryQueryQuery;
    };
    
    const CategoryPage = ({ data: { category } }: Props) => {
      const { categories } = useCategories();
      if (!category) return null;
      const categoryName = category?.name;
      const projects = category?.projects;
    
      return (
        <Layout>
          <h1>{categoryName}</h1>
          <CategoryList categories={categories} />
          <ProjectGrid projects={projects} />
        </Layout>
      );
    };
    
    export default CategoryPage;
    
    export const pageQuery = graphql`
      query CategoryQuery($slug: String!) {
        category: graphCmsCategory(slug: { eq: $slug }) {
          name
          slug
          projects {
            id: remoteId
            name
            slug
          }
        }
      }
    `;

    exports.createPages = async ({ graphql, actions: { createPage } }) => {
      const { data } = await graphql(`
        query Projects {
          projects: allGraphCmsProject(
            sort: { order: DESC, fields: createdAt }
            filter: { stage: { eq: PUBLISHED } }
          ) {
            edges {
              next {
                name
                slug
              }
              previous {
                name
                slug
              }
              node {
                slug
              }
            }
          }
          categories: allGraphCmsCategory {
            nodes {
              id: remoteId
              slug
            }
          }
        }
      `);
    
      const categories = data.categories.nodes;
    
      if (categories) {
        categories.forEach(({ id, slug }) =>
          createPage({
            path: `/projects/${slug}`,
            component: path.resolve('./src/templates/CategoryPage.tsx'),
            context: { id, slug },
          }),
        );
      }
    
      const projects = data.projects.edges;
    
      if (projects) {
        projects.forEach(({ node, previous, next }) => {
          createPage({
            path: `/projects/${node.slug}`,
            component: path.resolve('./src/templates/ProjectPage.tsx'),
            context: {
              slug: node.slug,
              previous,
              next,
            },
          });
        });
      }
    };