EVERYTHING YOU NEED TO KNOW ABOUT

GraphQL

in 3 Components

Eve Porcello

@eveporcello

link: bit.ly/graphql-react-rally

8%

3.2%

Tahoe City, California

Salt Lake City, Utah

🍺

function howMuchShouldIDrink(n, isSLC, talksTomorrow) {
  var drinks = n + 1

  if(isSLC) {
    var slcDrinks = drinks * 3
    return slcDrinks - talksTomorrow
  }

  return drinks - talksTomorrow
}

howMuchShouldIDrink(3, true, 1)
// 11 drinks

d = 1

d = 2

d = 3

d = 4

d = 5

d = 6

d = 7

d = 8

d = 9

d = 10

d = 11

GraphQL is a query language for your API.

https://treefest.com/attendees

https://treefest.com/vendors

https://treefest.com/musicians

https://treefest.com/trees

https://treefest.com/graphql

query {
  allAttendees {
    name
    favoriteMusician {
      name
    }
    favoriteTree {
      name
    }
    vendor
  }
}

https://treefest.com/graphql

{
  "data":{
    "allAttendees": [
      {
        "name": "Jean Johnson",
        "favoriteMusician": {
            "name": "Plantadestiny"
        },
        "favoriteTree": {
            "name": "SugarPine"
        },
        "vendor": false
      }
    ]
  }
}

https://treefest.com/graphql

https://treefest.com/attendees

https://treefest.com/vendors

https://treefest.com/musicians

https://treefest.com/trees

https://treefest.com/graphql

GraphQL is better than REST.

well, actually

How Do I Actually Learn This?

Vanilla GraphQL

GraphQL is just a spec.

react-apollo

<Query />

<Mutation />

<Subscription />

<ApolloProvider />

Demo

<Subscription subscription={GAME_CHANGE_SUBSCRIPTION}>
  {({ loading, data }) => loading ?
    <p>Waiting for Instruments...</p> :
    <div>
      <ul>
        {data.gameChange.playingMusic.map((p, i) => 
            <li key={i}>{p.instrument}</li>
        )}
      </ul>
    </div>
  }
</Subscription>

Thank you!

@eveporcello

www.graphqlworkshop.com

www.moonhighway.com

bit.ly/graphql-react-rally

React Rally 2018

By Moon Highway

React Rally 2018

  • 1,185