gatsby#CreatePagesArgs TypeScript Examples

The following examples show how to use gatsby#CreatePagesArgs. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: createHooks.ts    From usehooks-ts with MIT License 5 votes vote down vote up 
export default async function createHooks(args: CreatePagesArgs) {
  const results = await args.graphql<Query>(
    `
      {
        posts: allMdx(filter: { fields: { type: { eq: "post" } } }) {
          ${hookQuery}
        }
        hooks: allMdx(filter: { fields: { type: { eq: "hook" } } }) {
          ${hookQuery}
        }
        demos: allMdx(filter: { fields: { type: { eq: "demo" } } }) {
          ${hookQuery}
        }
      }
    `,
  )

  if (results.errors) {
    args.reporter.panicOnBuild(
      `Error while running GraphQL posts query.`,
      results.errors,
    )
    return
  }

  if (results.data) {
    const { posts, hooks, demos } = results.data

    const filteredPosts = filterHook(posts.nodes, hooks.nodes, demos.nodes)

    filteredPosts.forEach(({ post, hookId, demoId }) => {
      const { id, fields } = post
      const pageData = {
        component: path.resolve(`./src/templates/post.tsx`),
        context: { id, hookId, demoId },
      }

      args.actions.createPage({
        ...pageData,
        path: `/react-hook${fields.path}`,
      })

      args.actions.createRedirect({
        fromPath: fields.path,
        toPath: `/react-hook${fields.path}`,
        isPermanent: true,
      })
    })
  }
}
Example #2
Source File: create-types.ts    From website-docs with MIT License 5 votes vote down vote up 
createExtraType = ({ actions }: CreatePagesArgs) => {
  const { createTypes, createFieldExtension } = actions

  const typeDefs = `
    """
    Markdown Node
    """
    type Mdx implements Node @dontInfer {
      frontmatter: Frontmatter
    }

    """
    Markdown Frontmatter
    """
    type Frontmatter {
      title: String!
      summary: String
      aliases: [String!]
      draft: Boolean
    }
  `

  createTypes(typeDefs)

  createFieldExtension({
    name: 'navigation',
    extend() {
      return {
        async resolve(
          mdxNode: any,
          args: unknown,
          context: unknown,
          info: any
        ) {
          if (mdxNode.nav) return mdxNode.nav
          const types = info.schema.getType('Mdx').getFields()
          const slug = await types['slug'].resolve(mdxNode, args, context, {
            fieldName: 'slug',
          })

          const mdxAST: Root = await types['mdxAST'].resolve(
            mdxNode,
            args,
            context,
            {
              fieldName: 'mdxAST',
            }
          )

          if (!slug.endsWith('TOC'))
            throw new Error(`unsupported query in ${slug}`)
          const { config } = generateConfig(slug)
          const res = mdxAstToToc(
            (mdxAST.children.find(node => node.type === 'list') as List)
              .children,
            config
          )
          mdxNode.nav = res
          return res
        },
      }
    },
  })
  createTypes(`
    type Mdx implements Node {
      navigation: JSON! @navigation
    }
  `)
}
Example #3
Source File: create-pages.ts    From website-docs with MIT License 4 votes vote down vote up 
createDocs = async ({
  actions: { createPage, createRedirect },
  graphql,
}: CreatePagesArgs) => {
  const template = resolve(__dirname, '../src/doc/index.tsx')

  const docs = await graphql<PageQueryData>(`
    {
      allMdx(
        filter: {
          fileAbsolutePath: { regex: "/^(?!.*TOC).*$/" }
          frontmatter: { draft: { ne: true } }
        }
      ) {
        nodes {
          id
          frontmatter {
            aliases
          }
          slug
          parent {
            ... on File {
              relativePath
            }
          }
        }
      }
    }
  `)

  if (docs.errors) {
    sig.error(docs.errors)
  }

  const nodes = docs.data!.allMdx.nodes.map(node => {
    const { config, name, filePath } = generateConfig(node.slug)
    return { ...node, pathConfig: config, name, filePath }
  })

  const versionRecord = nodes.reduce(
    (acc, { pathConfig, name }) => {
      if (acc[pathConfig.locale][pathConfig.repo] == null) {
        acc[pathConfig.locale][pathConfig.repo] = {}
      }

      if (acc[pathConfig.locale][pathConfig.repo][name] == null) {
        acc[pathConfig.locale][pathConfig.repo][name] = []
      }

      acc[pathConfig.locale][pathConfig.repo][name].push(pathConfig.version)

      return acc
    },
    {
      en: {} as Record<Repo, Record<string, (string | null)[]>>,
      zh: {} as Record<Repo, Record<string, (string | null)[]>>,
    }
  )

  nodes.forEach(node => {
    const { id, name, pathConfig, filePath } = node

    const path = generateUrl(name, pathConfig)
    const navUrl = generateNav(pathConfig)

    const locale = [Locale.en, Locale.zh]
      .map(l =>
        versionRecord[l][pathConfig.repo]?.[name]?.includes(pathConfig.version)
          ? l
          : undefined
      )
      .filter(Boolean)

    createPage({
      path,
      component: template,
      context: {
        id,
        name,
        pathConfig,
        // use for edit in github
        filePath,
        navUrl,
        availIn: {
          locale,
          version: versionRecord[pathConfig.locale][pathConfig.repo][name],
        },
      },
    })

    // create redirects
    if (node.frontmatter.aliases) {
      node.frontmatter.aliases.forEach(fromPath => {
        createRedirect({
          fromPath,
          toPath: path,
          isPermanent: true,
        })
      })
    }
  })
}