graphql - Meetupfiles.meetup.com/19555115/graphql.pdf · GraphQL Schema + Type Language Object types and ﬁelds Similar to queries type Project { name: String! tagline: String contributors:

GraphQL React Dallas

Conrad VanLandingham @conrad_vanl conrad@differential.com

GraphQL

Conrad VanLandingham

@conrad_vanl conrad@differential.com

Engineering and Product Lead @BeDifferential

Venture Studio Partners

Development Studio Partners

IN SHORT, SOFTWARE IS

EATING THE WORLD.

M A R C A N D R E E S E N

(he made )

Building Apps TodayConsistent delivery cycles

Integration with third-party and micro services Smarter, fatter clients Multi-platform apps,

code reusability across platforms Generous use of A/B testing (thanks Netflix)

GraphQL

An application-layer query language

(built by )

GraphQL

Product-centric, Client-specified

Driven by the requirements of UI and the engineers that build them.

Needs to easily adjust to changing product requirements

GraphQL

Arbitrary (but structured!)Data fetching is not bound in any way to how that data is stored, or accessed, by

the server.

GraphQL is more like a URL then it is SQL

GraphQL

Facebook has a minimum of 52 different versions of their app per platform (!!)

querying their servers at any given time.

Two-week release cycle, 2-year support pledge

Backwards Compatible

Have we yet to agree on how to best version REST-ful APIs?

GraphQL

Introspective

typeof null // object null instanceOf Object // false null == false // false !null // true … oh Javascript

Self-documenting, machine-readable schema and strong type system eases

integration and compatibility.

Because this makes perfect sense:

GraphQL

Schema Query Response

Product-centric, Client-specified

Introspective Arbitrary (but structured!)

Backwards Compatible

GraphQL

Describe your data

type Project { name: String tagline: String contributors: [User] }

Ask for what you want

{ project(name: “GraphQL”) { tagline } }

Get predictable results

{ “project”: { “tagline”: “A query …” } }

Schema Query Response

GraphQL

{ project(name: “GraphQL”) { tagline } }

Queries

Basic Query Response

{ “project”: { “tagline”: “A query …” } }

Query arguments

Fields

GraphQL

{ project(name: “GraphQL”) { name tagline } }

Queries

Basic Query Response{ “project”: { “name”: “GraphQL”, “tagline”: “A query …” } }

GraphQL

{ project(name: “GraphQL”) { name tagline contributors { name } } }

Queries

Nested Queries Response{ “project”: { “name”: “GraphQL”, “tagline”: “A query …”, “contributors”: [ { “name”: “leebyron”, },

{ “name”: “schrockn” } ] } }

GraphQL

{ project(name: “GraphQL”) { name tagline contributors(limit: 1) { name } } }

Queries

Nested Queries Response{ “project”: { “name”: “GraphQL”, “tagline”: “A query …”, “contributors”: [ { “name”: “leebyron” } ] } }

GraphQL

mutation { createProject( name: “Apollo”, tagline: “A graphql…” ) { name tagline } }

Queries

Mutations Response

{ “mutation”: { “createProject”: { “name”: “Apollo”, “tagline”: “A graphql…” } } }

Root mutation field (required)

Mutation

Fields

GraphQLGraph data structure

GraphQL Schema + Type Language

Object types and fields

Similar to queries

type Project { name: String! tagline: String contributors: [User] }

type ProjectDefines a type with some fields.

name, tagline, contributors

are fields on the Project type

StringString!

is a built in scalar typemeans that the field is non-nullable

contributors: [User]

represents an array of User objects

Arguments

all arguments are named

type Project { name: String! tagline: String contributors(limit: Int = 5): [User] }

default (optional)

Query & Mutation Types

schema { query: Query mutation: Mutation }

schemaThe root-level definition of your GraphQL schema

query, mutation

the two special types within a schema

Query, Mutation

Point to other type objects that you defined elsewhere

GraphQLschema { query: Query mutation: Mutation }

type Query { project(name: String!): Project }

type Mutation { createProject( name: String!, tagline: String, contributors: [String] ): Project }

type Project { name: String! tagline: String contributors: [String] }

Complete Schema

schema { query: Query mutation: Mutation }

type Query { project(name: String!): Project }

type Mutation { createProject( name: String!, tagline: String, contributors: [String] ): Project }

type Project { name: String! tagline: String contributors: [String] }

query { project(name: “GraphQL”) { name tagline contributors(limit: 1) { name } } }

mutation { createProject( name: “Apollo”, tagline: “A grpahql…” contributors: [“Sashko”] ) { name tagline } }

Code sampleshttp://graphql.org/

http://www.apollostack.com/

https://github.com/apollostack/apollo-server-tutorial

https://github.com/apollostack/GitHunt-API

GraphQL

Resourcesgithub.com/chentsulin/awesome-graphql

learngraphql.com

apollostack.com

graphql.org

Conrad VanLandingham

@conrad_vanl conrad@differential.com

Engineering and Product Lead @BeDifferential

graphql - Meetupfiles.meetup.com/19555115/graphql.pdf · GraphQL Schema + Type Language Object types and ﬁelds Similar to queries type Project { name: String! tagline: String contributors:

Documents

GraphQL - tutorialspoint.com · 2018-10-26 · GraphQL...

GraphQL Story: Intro To GraphQL

GRAPHQL APPLICATIONS SECURITY TESTING …• GraphQL clients...

GraphQL, l'avenir du REST ?

Into to GraphQL

Build federated GraphQL schemas in Java using OSGi and...

Building APIs with GraphQL in...

Effortless GraphQL with Transactional NoSQL ·...

GraphQL, Redux, and React

Navigating your transition to GraphQL with GraphQL first...

GraphQL-Based Access to Virtual Datasets Exposed by RML...

Mobile Day - GraphQL

GraphQL or Bust - dotfmp€¦ · Preface:Introductionto...

GraphQL & Relay

Intro to GraphQL

Explorando as oportunidades no mundo Mobile e iOT das...