graphql - meetupfiles.meetup.com/19555115/graphql.pdf · graphql schema + type language object...

25
GraphQL React Dallas Conrad VanLandingham @conrad_vanl [email protected] GraphQL

Upload: others

Post on 09-Oct-2020

14 views

Category:

Documents


0 download

TRANSCRIPT

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

GraphQL React Dallas

Conrad VanLandingham @conrad_vanl [email protected]

GraphQL

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

Conrad VanLandingham

@conrad_vanl [email protected]

Engineering and Product Lead @BeDifferential

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

Conrad VanLandingham @conrad_vanl [email protected]

Venture Studio Partners

Development Studio Partners

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

IN SHORT, SOFTWARE IS

EATING THE WORLD.

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

(he made )

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

Conrad VanLandingham @conrad_vanl [email protected]

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)

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

Conrad VanLandingham @conrad_vanl [email protected]

GraphQL

An application-layer query language

(built by )

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

Conrad VanLandingham @conrad_vanl [email protected]

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

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

Conrad VanLandingham @conrad_vanl [email protected]

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

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

Conrad VanLandingham @conrad_vanl [email protected]

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?

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

Conrad VanLandingham @conrad_vanl [email protected]

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:

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

Conrad VanLandingham @conrad_vanl [email protected]

GraphQL

Schema Query Response

Product-centric, Client-specified

Introspective Arbitrary (but structured!)

Backwards Compatible

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

Conrad VanLandingham @conrad_vanl [email protected]

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

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

Conrad VanLandingham @conrad_vanl [email protected]

GraphQL

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

Queries

Basic Query Response

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

Query

Query arguments

Fields

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

Conrad VanLandingham @conrad_vanl [email protected]

GraphQL

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

Queries

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

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

Conrad VanLandingham @conrad_vanl [email protected]

GraphQL

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

Queries

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

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

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

Conrad VanLandingham @conrad_vanl [email protected]

GraphQL

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

Queries

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

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

Conrad VanLandingham @conrad_vanl [email protected]

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

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

Conrad VanLandingham @conrad_vanl [email protected]

GraphQLGraph data structure

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

Conrad VanLandingham @conrad_vanl [email protected]

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

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

Conrad VanLandingham @conrad_vanl [email protected]

GraphQL Schema + Type Language

Arguments

all arguments are named

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

default (optional)

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

Conrad VanLandingham @conrad_vanl [email protected]

GraphQL Schema + Type Language

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

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

Conrad VanLandingham @conrad_vanl [email protected]

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

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

Conrad VanLandingham @conrad_vanl [email protected]

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 } }