Table of Contents
Why GraphQL?
GraphQL Schema Definition Language (SDL)
Schema Driven Design
Define the API first, the rest will follow
Design Constraints
What's a Presentation
?
type Presentation {
id: ID!
title: String
slides: [Slide]!
}
type Query {
presentations: [Presentation]!
presentation(id: ID!): Presentation
...
}
What's a Slide
?
type Slide {
# The first slide contains theme
theme: Theme
layout: Layout!
content: ContentType!
background: Image
skip: Boolean
}
enum Layout {
TITLE
SECTION
EMBED
MARKDOWN
GRID
}
type Image {
asset: String!
source: String
}
What's a Theme
?
type Theme {
id: ID!
primaryColor: String!
secondaryColor: String!
background: String!
}
type Query {
themes: [Theme]!
theme(id: ID!): Theme
...
}
What's Content
?
union ContentType =
Image
| TitleContent
| SectionContent
| EmbedContent
| MarkdownContent
| GridContent
interface Content {
title: String
}
type TitleContent implements Content {
title: String
author: String
}
What Do Presentations Look Like?
- theme: graphql-finland
layout: title
content:
title: Let's Make a GraphQL Presentation
author: Juho Vepsäläinen
- layout: toc
content:
title: Table of Contents
...
title
theme: graphql-finland
layout: title
content:
title: Let's Make a GraphQL Presentation
author: Juho Vepsäläinen
section
layout: section
content:
title: Layout Types
toc
layout: toc
content:
title: Table of Contents
image
layout: image
content:
asset: client/assets/images/theme.jpg
markdown
layout: markdown
content:
title: `markdown`
markup: |
> Slides with Markdown content
```yaml
...
```
grid
layout: grid
content:
title: Column demo
columns:
- |
First column
- |
Second column
embed
<iframe>
embeds
layout: embed
content:
title: GraphQL
link: https://graphql.org/
include
s to compose slides