Slide 1

Slide 1 text

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools. — graphql.org

Slide 2

Slide 2 text

GraphQL is simply a specification for how clients get data from APIs This sounds exactly like HTTP REST , doesn’t it?

Slide 3

Slide 3 text

Very Long Documentation REST Client Server

Slide 4

Slide 4 text

REST Server Client Yo, if you want the information on users, just shout ‘/USERS’, and I’ll give you a list of them. But if you want to see the products the user has bought, you gotta shout ‘/USER/PRODUCTS’ along with the user’s ID and if you want…etc. Got it? *in Morty’s voice* Man, that was a lot of things, could you write that down for me? No way I could remember all that. Sure, the devs have written really nice documentation for you.

Slide 5

Slide 5 text

GraphQL Server Client Auto Docs

Slide 6

Slide 6 text

GraphQL Server Client Just ask for whatever, how you want it, in whatever combination you want. As long as you’re speaking GraphQL queries, I’m your man! Awesome!

Slide 7

Slide 7 text

GraphQL is actually almost like defining functions/methods that your client can call. Just a bit more powerful, because the client can determine exactly what it wants returned and can combine some of these functions. If you’ve ever used SQL, this should have started becoming clear by now. In SQL you write queries to get the data you want from the database, how you want it. The difference here is that: • You’re not querying from within the same application, you’re using the client application to query the server application. • You get to define what these queries are/can be.

Slide 8

Slide 8 text

This is an example of a GraphQL query a client would make if it wanted to get a list of Heroes and their names.

Slide 9

Slide 9 text

This is an example of a GraphQL query a client would make if it wanted to get a list of Heroes and their names, powers & a list of Villains, their names, powers and crimes they committed between ‘82 and 2017

Slide 10

Slide 10 text

Example response

Slide 11

Slide 11 text

Client Server Query Needs to parse and respond to query

Slide 12

Slide 12 text

Client Server

Slide 13

Slide 13 text

Other Tools In browser GraphQL IDE/explorer

Slide 14

Slide 14 text

Client chrome extension Other Tools

Slide 15

Slide 15 text

Build a Node.js API in your browser Other Tools

Slide 16

Slide 16 text

Other Tools GraphQL analytics

Slide 17

Slide 17 text

It does documentation automatically. Because everything is done with Types, tools like GraphiQL can generate docs from your server code easily. The client no longer needs to make multiple queries to display data of different models on one view. You can adopt it incrementally. One can just add GraphQL to their server without changing how it works. It’s not tied to any specific language or framework, you can use any DB you like! It improves organisation, communication between developers and stability of code.

Slide 18

Slide 18 text

Schema Language Basic concepts Types are the most basic components of a schema An Object Type is a type with some fields Built in scalar type. Like primitive types. This means non-nullable An array of Episode types This is a field. Define what can appear in a GraphQL query

Slide 19

Slide 19 text

Schema Language Argument and it’s type. Enum Type Remember, GraphQL is language agnostic, and we cannot rely on specific syntax to describe our data. That’s why the schema language is necessary. Each field is backed by an arbitrary function in the server’s code. ‼‼ More Pros Because GraphQL is strongly typed. It can provide descriptive error messages before queries are executed. Both on the server and client. GraphQL is introspective. Clients can query servers for the types it supports. IDEs and libraries leverage this for hints and code generation.

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Learn More graphql.org/learn howtographql.com learnapollo.com learnrelay.org graph.cool dev-blog.apollodata.com

Slide 22

Slide 22 text

No content