109 lines
3.2 KiB
TypeScript
109 lines
3.2 KiB
TypeScript
import React from 'react'
|
|
import cx from 'classnames'
|
|
import { LinkIcon } from '@primer/octicons-react'
|
|
|
|
import { Enum } from 'components/graphql/Enum'
|
|
import { InputObject } from 'components/graphql/InputObject'
|
|
import { Interface } from 'components/graphql/Interface'
|
|
import { Scalar } from 'components/graphql/Scalar'
|
|
import { Mutation } from 'components/graphql/Mutation'
|
|
import { Object } from 'components/graphql/Object'
|
|
import { Query } from 'components/graphql/Query'
|
|
import { Union } from 'components/graphql/Union'
|
|
import type {
|
|
EnumT,
|
|
InputObjectT,
|
|
InterfaceT,
|
|
MutationT,
|
|
ObjectT,
|
|
QueryT,
|
|
ScalarT,
|
|
UnionT,
|
|
} from 'components/graphql/types'
|
|
import styles from 'components/ui/MarkdownContent/MarkdownContent.module.scss'
|
|
|
|
type Props = {
|
|
schema: Object
|
|
pageName: string
|
|
objects?: ObjectT[]
|
|
}
|
|
|
|
export const GraphqlPage = ({ schema, pageName, objects }: Props) => {
|
|
const graphqlItems: JSX.Element[] = [] // In the case of the H2s for Queries
|
|
|
|
// The queries page has two heading sections (connections and fields)
|
|
// So we need to add the heading component and the children under it
|
|
// for each section.
|
|
if (pageName === 'queries') {
|
|
graphqlItems.push(
|
|
<h2 id="connections" key="query-connections-heading">
|
|
<a className="doctocat-link" href="#connections">
|
|
<LinkIcon className="octicon-link" size="small" />
|
|
</a>
|
|
Connections
|
|
</h2>
|
|
)
|
|
graphqlItems.push(
|
|
...(schema as QueryT).connections.map((item) => (
|
|
<Query item={item} key={item.id + item.name} />
|
|
))
|
|
)
|
|
graphqlItems.push(
|
|
<h2 id="fields" key="query-fields-heading">
|
|
<a className="doctocat-link" href="#fields">
|
|
<LinkIcon className="octicon-link" size="small" />
|
|
</a>
|
|
Fields
|
|
</h2>
|
|
)
|
|
|
|
graphqlItems.push(
|
|
...(schema as QueryT).fields.map((item) => <Query item={item} key={item.id + item.name} />)
|
|
)
|
|
} else if (pageName === 'enums') {
|
|
graphqlItems.push(
|
|
...(schema as EnumT[]).map((item) => {
|
|
return <Enum key={item.id} item={item} />
|
|
})
|
|
)
|
|
} else if (pageName === 'inputObjects') {
|
|
graphqlItems.push(
|
|
...(schema as InputObjectT[]).map((item) => {
|
|
return <InputObject key={item.id} item={item} />
|
|
})
|
|
)
|
|
} else if (pageName === 'interfaces' && objects) {
|
|
graphqlItems.push(
|
|
...(schema as InterfaceT[]).map((item) => {
|
|
return <Interface key={item.id} item={item} objects={objects} />
|
|
})
|
|
)
|
|
} else if (pageName === 'mutations') {
|
|
graphqlItems.push(
|
|
...(schema as MutationT[]).map((item) => {
|
|
return <Mutation key={item.id} item={item} />
|
|
})
|
|
)
|
|
} else if (pageName === 'objects') {
|
|
graphqlItems.push(
|
|
...(schema as ObjectT[]).map((item) => {
|
|
return <Object key={item.id} item={item} />
|
|
})
|
|
)
|
|
} else if (pageName === 'scalars') {
|
|
graphqlItems.push(
|
|
...(schema as ScalarT[]).map((item) => {
|
|
return <Scalar key={item.id} item={item} />
|
|
})
|
|
)
|
|
} else if (pageName === 'unions') {
|
|
graphqlItems.push(
|
|
...(schema as UnionT[]).map((item) => {
|
|
return <Union key={item.id} item={item} />
|
|
})
|
|
)
|
|
}
|
|
|
|
return <div className={cx(styles.automatedPages, styles.markdownBody)}>{graphqlItems}</div>
|
|
}
|