Download to read offline
![GRAPHQL
GRAPHS PERSON
[NAME, ID, …]
STARSHIP-A
[ID, MANUF,..]
STARSHIP-B
[ID, MANUF,..]
STARSHIP-C
[ID, MANUF,..]
PILOT-A
[ID, NAME,..]
STARSHIPCONNECTION
STARSHIPCONNECTION
STARSHIP CONNECTION
PILOT CONNECTION
HOMEWORLD-A
[ID, NAME,..]
HOMEWORLD CONNECTION
HOMEWORLDCONNECTION
NODE
NODE
EDGE](https://image.slidesharecdn.com/graphql-indyjs-april-2016-160422211331/75/GraphQL-IndyJS-April-2016-12-2048.jpg)
Uploaded byBrad Pillow
GraphQL IndyJS April 2016
This document discusses GraphQL, a query language for APIs and a runtime for fulfilling queries with existing data. It provides examples of basic queries, nested fields, connections, arguments, and fragments. It also covers GraphQL types including scalars, schemas, definitions, predicates, and data resolution. GraphQL allows clients to define the structure of the data required, and specifies querying, modifying, and transmitting data between client and server.
More Related Content
Similar to GraphQL IndyJS April 2016
GraphQL IndyJS April 2016
- 1.
- 2.
- 3. REST REST IS ANACRONYM FOR ?
- 4. REST REST HISTORY ▸ Theterm representational state transfer was introduced and defined in 2000 by Roy Fielding ▸ The defacto standard for communicating with a server ▸ Defines simple operations: GET, PUT, POST, DELETE ▸ A query operation (like GET) promises no side-effects (e.g. changes) in data being queried. Commands (like PUT/DELETE) answer no questions about the data, but compute changes applied to the data (e.g. UPDATE or INSERT to use database terms).
- 5. REST REST ISSUES ▸ Manyendpoints - proliferation of ad hoc endpoints ▸ Many round trips between the client and server ▸ First fetch pilots, then fetch homeworld info for each pilot, then… ▸ Very expensive for mobile apps ▸ Response structure may change over time ▸ Data overfetching ▸ We don’t always need all the data for a REST call ▸ Usually no metadata ▸ Big blob of data…we can’t run inquires on it’s types or structure
- 6. REST FIXES FOR REST?? ▸Define your own ad-hoc query language ▸ Use REST PATCH to minimize data transfer ? ▸ REST API introspection via Swagger (http://swagger.io/)
- 7. GRAPHQL JAVASCRIPT FATIGUE BECAUSE ANEW JAVASCRIPT FRAMEWORK IS RELEASED
- 8. GRAPHQL WHAT IS GRAPHQL? ▸Queries describe the shape of data that the client needs. The response has the same structure as the request query. ▸ Server interprets GraphQL calls and queries the database (or any other source of data) ▸ GraphQL is language-, database- and protocol-agnostic
- 9. GRAPHQL WAS INVENTED ATFACEBOOK IN 2012, BUT IT WAS FIRST SHOWN TO PUBLIC IN 2015 DURING REACT.JS CONF AS A PART OF FACEBOOK OPEN-SOURCE ECOSYSTEM.
- 10. GRAPHQL GRAPHQL MOTIVATION ▸ Singleendpoint ▸ Hierarchical nature ▸ Strongly typed - enables validation, introspection and more ▸ Response mirrors the shape of the query ▸ Introspection - make inquiries from your client about the schema ▸ Application-Layer Protocol ▸ GraphQL is an application-layer protocol and does not require a particular transport. It is a string that is parsed and interpreted by a server.
- 11. GRAPHQL GRAPHS - DAG/AST * - 397 + 6 DIRECTEDACYCLIC GRAPH ABSTRACT SYNTAX TREES (6 + 7) * (9 - 3)
- 12. GRAPHQL GRAPHS PERSON [NAME, ID,…] STARSHIP-A [ID, MANUF,..] STARSHIP-B [ID, MANUF,..] STARSHIP-C [ID, MANUF,..] PILOT-A [ID, NAME,..] STARSHIPCONNECTION STARSHIPCONNECTION STARSHIP CONNECTION PILOT CONNECTION HOMEWORLD-A [ID, NAME,..] HOMEWORLD CONNECTION HOMEWORLDCONNECTION NODE NODE EDGE
- 13. GRAPHQL FOLLOW ALONG! ▸ Gohere and follow along with me ▸ http://graphql-swapi.parseapp.com
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22. GRAPHQL SCARED YET? ▸ Syntax(covered) ▸ Type System ▸ Resolving ▸ Edges/Nodes & Pagination
- 23. GRAPHQL GRAPHQL TYPE SYSTEM ▸Scalars - basic types ▸ Schema - a representation of the capabilities of the GraphQL server ▸ Definitions - defining types ▸ Predicates - meta info on types ▸ Un-modifiers - type “un” modifiers
- 24. GRAPHQL GRAPHQL SCALARS ▸ GraphQLInt- integer number ▸ GraphQLFloat - float number ▸ GraphQLString - string ▸ GraphQLBoolean - boolean ▸ GraphQLID - represents an ID (essentially a string)
- 25. GRAPHQL GRAPHQL SCHEMAS ▸ Itall starts with a “root” query ▸ Fields on type can be plain data or “resolved” ▸ You can define your own types ▸ You can define/override the serialization on a type ▸ You can add enhanced validation to types ▸ From a schema, you can generate a more human readable schema and JSON based schema for clients to use
- 26. GRAPHQL GRAPHQL DEFINITIONS ▸ GraphQLScalarType- the class of scalars ▸ GraphQLObjectType - an object ▸ GraphQLInterfaceType - a interface ▸ GraphQLUnionType - a union ▸ GraphQLEnumType - enum ▸ GraphQLInputObjectType ▸ GraphQLList - what you use for lists arrays of objects ▸ GraphQLNonNull - an object for which null is an invalid value
- 27. GRAPHQL GRAPHQL DATA RESOLUTION ▸Resolve to data - synchronous result. Return the data as teh result of a resolve. ▸ Resolve to promise - asynchronous result. Return a promise that will return the data in the future. My preference is to use ES6 and async functions (which actually return promises).
- 28. GRAPHQL GRAPHQL EDGES/NODES ▸ Notbuilt into the language, but provided by types ▸ The type Facebook uses and I recommend you use too, are in : https://github.com/graphql/graphql-relay-js ▸ Using edges and nodes allow for pagination. If you don’t need pagination, then use a simple GraphQLList.
- 29. GRAPHQL RUNNING ON EXPRESShttps://github.com/graphql/graphql-js
- 30.
- 31. GRAPHQL CUSTOM SCALAR Credits: Snippetfrom https://github.com/mattkrick/meatier
- 32. GRAPHQL BUILD IT! ▸ Buildyour server…I use Babel and ES6 ▸ You’ll also need to run (see sample code) a script to “update” your schema. This creates a client and a human readable version of your schema. ▸ If you are using Relay, you will also need to use the Babel- Relay plugin to consume, compile and validate your GraphQL queries in your components. ▸ You also need to tell the Babel-Relay plugin where to find the schema you built above (the JSON form).
- 33. GRAPHQL MAKE SENSE? ▸ Hopefullymore sense than Chewy!
- 34. GRAPHQL GRAPHQL MISUNDERSTANDINGS ▸ Allof the queries you see are defined by your schema. I.e. things like viewer, user, edge, node are defined by the schema and not an inherent part of the language. ▸ GraphQL is Javascript only. Nope! ▸ There are 3rd party ports for Python, Scala, Go, Ruby, etc. ▸ GraphQL requires special communications protocol. Nope! ▸ The default implementation uses a basic REST post call, but you can use web sockets, etc. and even mix and match.
- 35. GRAPHQL & RELAY RESOURCES ▸Cartoon Guides To GraphQL: https://code- cartoons.com ▸ Awesome GraphQL - curated list on Github: https://github.com/ chentsulin/awesome- graphql
- 36. GRAPHQL & RELAY MORERESOURCES ▸ GraphQL Home: http://graphql.org/ ▸ GraphQL Spec: https://facebook.github.io/graphql/ ▸ Many REST APIs you can experiment with using GraphQL: https://www.graphqlhub.com/
- 37. QUESTIONS???▸ Twitter: @BradPillow,GitHub: pillowsoft THANKS!