Javascript Developer and Community builder 👨🏻💻🤝 👨🏻🏫
Cristian Moreno
Cristian Moreno - Developer Avocado 🥑
GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. GraphQL isn't tied to any specific database or storage engine and is instead backed by your existing code and data.
GraphQL created at Facebook
React is released
React Native is released
GraphQL is open sourced
Relay Classic is open sourced
New GraphQL website graphql.org
First GraphQL Summit
GitHub announces GraphQL API
Relay Modern 1.0
Apollo Client 2.0
khriztianmoreno.com
@khriztianmoreno
khriztianmoreno.com
@khriztianmoreno
GraphQL Schemas and Types
khriztianmoreno.com
@khriztianmoreno
khriztianmoreno.com
@khriztianmoreno
khriztianmoreno.com
@khriztianmoreno
- Optional: String
- Mandatory: String!
- Arrays: [String]
query {
allPets {
name
weight
}
totalPets
}query {
allPets {
name
weight
category
}
totalPets
}query {
allPets {
name
weight
category
photo {
thumb
full
}
}
totalPets
}query {
totalPets (status: AVAILABLE)
allPets {
name
weight
category
photo {
thumb
full
}
}
}query {
totalPets (status: AVAILABLE)
totalPets (status: CHECKEDOUT)
available: totalPets (status: AVAILABLE)
checkedOut: totalPets (status: CHECKEDOUT)
allPets {
name
weight
category
photo {
thumb
full
}
}
}query ($category: PetCategory $status: PetStatus){
allPets(category: DOG status: AVAILABLE) {
id
name
status
category
}
}query PetPage {
availablePets: totalPets(status: AVAILABLE)
checkedOutPets: totalPets(status: CHECKEDOUT)
}
query CustomerPage {
totalCustomers
}Mutation queries modify data in the data store and returns a value. It can be used to insert, update, or delete data. Mutations are defined as a part of the schema.
mutation{
someEditOperation(dataField:"valueOfField"):returnType
}mutation($input: CreateAccountInput!) {
createAccount(input: $input) {
name
username
}
}
mutation {
logIn(username: "khriztianmoreno" password: "pass") {
customer {
name
}
token
}
}mutation CheckIn {
checkIn(id: "S-2") {
pet {
name
}
checkOutDate
checkInDate
late
}
}
mutation Checkout {
checkOut(id: "S-2") {
pet {
name
}
customer {
name
}
}
}query {
allPets(category: DOG, status: AVAILABLE) {
...PetDetails
}
}
fragment PetDetails on Pet {
name
weight
category
status
}
query {
allPets {
__typename
id
name
}
}query {
familyPets {
__typename
... on Cat {
name
sleepAmount
}
}
}subscription {
petReturned {
pet {
name
}
}
}@khriztianmoreno
khriztianmoreno.dev
By Khriztian Moreno
GraphQL is gaining traction as one of the most popular ways to create an API. Regardless of which GraphQL implementation you pick, you’ll use the QL in GraphQL — the query language — to query data, change data with mutations, and listen for data changes with subscriptions. You need to know the Query Language regardless of the server-side implementation.
