Intro to
GraphQL
We expect cooperation from all participants to help ensure a safe environment for everybody.
We treat everyone with respect, we refrain from using offensive language and imagery, and we encourage to report any derogatory or offensive behavior to a member of the JSLeague community.
We provide a fantastic environment for everyone to learn and share skills regardless of gender, gender identity and expression, age, sexual orientation, disability, physical appearance, body size, race, ethnicity, religion (or lack thereof), or technology choices.
We value your attendance and your participation in the JSLeague community and expect everyone to accord to the community Code of Conduct at all JSLeague workshops and other events.
Code of conduct
Sabin Marcu
Software Engineer at R/GA
Been working in web since '09
React Dev since 2015
React trainer @ JSLeague
Whoami
Overview
Intro to GraphQL
Intro to GraphQL
Agenda
Async Resolve Functions
Nested Queries
Usage with Prisma
RootQuery Entry Points
Bidirectional Relations
Circular References
Introduction
Language and Entities
REST-ful Routing
GraphQL Schemas
Root Queries
The GraphiQL Tool
Introduction
Intro to GraphQL
Intro to GraphQL
What is it?
a syntax that describes how to ask for data
Intro to GraphQL
It lets the client specify exactly what data it needs
It makes it easier to aggregate data from multiple sources
It uses a type system to describe data
Why?
Intro to GraphQL
Language and Entities
Intro to GraphQL
Intro to GraphQL
Type System
{
hero {
name
appearsIn
}
}{
"data": {
"hero": {
"name": "R2-D2",
"appearsIn": [
"NEWHOPE",
"EMPIRE",
"JEDI"
]
}
}
}Object types and fields
Intro to GraphQL
type Character {
name: String!
appearsIn: [Episode!]!
}
object type
fields
Intro to GraphQL
type Character {
name: String!
appearsIn: [Episode!]!
}String = scalar type, can't have sub-selections in the query
String! = non-nullable
[Episode!]! = non-nullable array of Episode objects
Intro to GraphQL
Arguments
type Starship {
id: ID!
name: String!
length(unit: LengthUnit = METER): Float
}
argument
Intro to GraphQL
3 root operations
type Query {
... query operations ...
}
type Mutation {
... mutation operations ...
}
type Subscription {
... subscription operations ...
}Intro to GraphQL
type Query {
hero(episode: Episode): Character
droid(id: ID!): Droid
}query {
hero {
name
}
droid(id: "2000") {
name
}
}{
"data": {
"hero": {
"name": "R2-D2"
},
"droid": {
"name": "C-3PO"
}
}
}Intro to GraphQL
Scalar types
- Int, Float, String, Boolean, ID
- custom: Date
- special: Enums
Entity types
type Character {
name: String!
appearsIn: [Episode!]!
}Intro to GraphQL
Interfaces
interface Character {
id: ID!
name: String!
friends: [Character]
appearsIn: [Episode]!
}type Human implements Character {
id: ID!
name: String!
friends: [Character]
appearsIn: [Episode]!
starships: [Starship]
totalCredits: Int
}
type Droid implements Character {
id: ID!
name: String!
friends: [Character]
appearsIn: [Episode]!
primaryFunction: String
}Intro to GraphQL
Union types
union SearchResult = Human | Droid | Starship{
search(text: "an") {
__typename
... on Human {
name
height
}
... on Droid {
name
primaryFunction
}
... on Starship {
name
length
}
}
}{
"data": {
"search": [
{
"__typename": "Human",
"name": "Han Solo",
"height": 1.8
},
{
"__typename": "Human",
"name": "Leia Organa",
"height": 1.5
},
{
"__typename": "Starship",
"name": "TIE Advanced x1",
"length": 9.2
}
]
}
}Intro to GraphQL
Input types
input ReviewInput {
stars: Int!
commentary: String
}mutation CreateReviewForEpisode($ep: Episode!, $review: ReviewInput!) {
createReview(episode: $ep, review: $review) {
stars
commentary
}
}{
"data": {
"createReview": {
"stars": 5,
"commentary": "This is a great movie!"
}
}
}Q&A
JavaScript Beyond the Basics
Thank you!
Intro to GraphQL
By Sabin Marcu
