This material should come after ABC and definitely before ABC. Students should already be familiar with ABC and ABC.
This material usually takes XXX-time to introduce and XXX-time for exercises and reinforcement.
This module covers GraphQL as an API and database interlayer. Using GraphQL with a client side framework is part of the FrontEndFrameworks/GraphQL Module.
Students will have one of three levels of understanding about each topic upon completion of this module.
- grok: fully understand the topic in order to replicate code, communicate, and explain concepts without referring to any notes.
- explain: understand enough about the topic to describe concepts without referring to notes.
- know about: understand enough to look up further documentation when asked about the subject.
- Students should know about XXX-thing
- Students should grok XXX-thing
- Students should be able to explain XXX-thing
The following format is meant to be a guideline for effective delivery. Instructors can present material in another way if it is more effective for the students.
- Declarative Nature
- Compositional Nature
- Strong-Typed Nature
- Query Language
- standard
- Runtime
- the interlayer that translates the graphql query language stuff into something the server understands, like sql etc.
- whiteboard : (Client) - (GraphQL) - (Server)
- it's an agent that translates to the server, or multiple servers
- standardizes communication
- single point to communicate with
- cause usually data is stored in multiple places
- the interlayer that translates the graphql query language stuff into something the server understands, like sql etc.
- Declarative nature
- describe what you want, not how to get it
- data requirement is declarative
- graphs
- any data is a graph
- because there are nodes
- any node could be connected to the other nodes
- true to any database
- because there are nodes
- once you start at a node, the graph becomes a tree
- a tree is just a specialized version of a graph
- because it's a graph, there are multiple root levels
- every root level will be it's own tree
http://slides.com/theremix/graphql-interactive-intro
- GraphQL language
- Graphiql
- queries
- notice the query is the same structure as the result!
- declarative power to achieve the mental model
- query drives the shape of the response
- if you have the query, you know the shape of the response
- be confident without having to inspect, console.log, read documentation
- inverse is true!
- if you have the response, you can create the query request
- no overfetching!
- compare against actual github api
- client is not filtering the data
- server is actually querying exactly what you need
- notice the query is the same structure as the result!
- introspective api
- arguments
- query variables
- mutation
- subscription
- fragments
- aliases
- directive
- in Relay, if you flip the switch, it only sends data about the avatar
- explore the swapi api http://swapi.co
- http://swapi.co/api/people/4
- clone the https://github.com/graphql/swapi-graphql repo and run it
- person(personID: 4){ name, birthYear, height }
- person(personID: 4){ name, diameter, residentConnection { edges { node { name } } } }
- edges and nodes is fancy Relay stuff
The exercise is conducted as a live workshop led by the slideshow.
- Repository: XXX-$$JON to add completed repo with DB Seed
- Average Time Alotted: XXX sessions
- Individual or Group: Individual Exercise
- Slideshow: GraphQL Server
- Completed Example: https://gist.github.com/JoeKarlsson1/ca1d2f3e95fa2412feb418aedfbf9844
- Very important to enable postgres logging and tail the log to demonstrate data-loader, this is one of the most important and compelling reasons to use graphql! https://gist.github.com/JoeKarlsson1/ca1d2f3e95fa2412feb418aedfbf9844#file-1readme-md
- Concepts Practiced: XXX