I got 99 problems but GraphQL ain't one

I really love GraphQL

LvivJS πŸ‡ΊπŸ‡¦πŸ‡§@NIkkitaFTW

GraphQL is Bae

State of the Browser 2018 πŸ‡¬πŸ‡§@NIkkitaFTW

My name is Sara

LvivJS πŸ‡ΊπŸ‡¦πŸ‡§@NIkkitaFTW
  • Developer Advocate at YLD
  • Really into shitty movies
  • Really into football
  • I have stickers
State of the Browser 2018 πŸ‡¬πŸ‡§@NIkkitaFTW

STICKERS

LvivJS πŸ‡ΊπŸ‡¦πŸ‡§@NIkkitaFTW

What is GraphQL?

LvivJS πŸ‡ΊπŸ‡¦πŸ‡§@NIkkitaFTW

A Query Language for your API

LvivJS πŸ‡ΊπŸ‡¦πŸ‡§@NIkkitaFTW

Why Should I Care ?

LvivJS πŸ‡ΊπŸ‡¦πŸ‡§@NIkkitaFTW

GraphQL APIs have a strongly typed schema

LvivJS πŸ‡ΊπŸ‡¦πŸ‡§@NIkkitaFTW
import gql from 'graphql-tag';

const Schema = gql`
  type Speaker {
    id: ID!
    name: String
    photo: String
    talks: [Talk]
  }

  type Talk {
    name: String
    speaker: Speaker
  }
`;
LvivJS πŸ‡ΊπŸ‡¦πŸ‡§@NIkkitaFTW

It's framework agnostic

LvivJS πŸ‡ΊπŸ‡¦πŸ‡§@NIkkitaFTW

And language too

LvivJS πŸ‡ΊπŸ‡¦πŸ‡§@NIkkitaFTW
  • Javascript
  • Typescript
  • Ruby
  • PHP
  • Python
  • Java
  • C/C++
  • Perl
  • .NET
  • Erlang
  • Elixir
  • Haskell
  • Rust
  • Lua
State of the Browser 2018 πŸ‡¬πŸ‡§@NIkkitaFTW
  • Scala
  • Clojure
  • ClojureScript
  • Swift
  • OCaml
  • SQL
  • R
  • Elm
  • Julia
  • Kotlin
  • Crystal
  • Go
State of the Browser 2018 πŸ‡¬πŸ‡§@NIkkitaFTW

You get the Point

LvivJS πŸ‡ΊπŸ‡¦πŸ‡§@NIkkitaFTW

Automatic Documentation

LvivJS πŸ‡ΊπŸ‡¦πŸ‡§@NIkkitaFTW

Since you have to type all your API graphql uses that to create automatic documentation for your API

LvivJS πŸ‡ΊπŸ‡¦πŸ‡§@NIkkitaFTW

UI Editors

LvivJS πŸ‡ΊπŸ‡¦πŸ‡§@NIkkitaFTW

GraphQL Playground

GraphiQL

You get what you asked for

LvivJS πŸ‡ΊπŸ‡¦πŸ‡§@NIkkitaFTW
LvivJS πŸ‡ΊπŸ‡¦πŸ‡§@NIkkitaFTW

The Frontend is Love

LvivJS πŸ‡ΊπŸ‡¦πŸ‡§@NIkkitaFTW

Tools like Apollo handle all the loading and error states for you.

LvivJS πŸ‡ΊπŸ‡¦πŸ‡§@NIkkitaFTW

Also the Caching. And we hate caching.

LvivJS πŸ‡ΊπŸ‡¦πŸ‡§@NIkkitaFTW

All The Frameworks

LvivJS πŸ‡ΊπŸ‡¦πŸ‡§@NIkkitaFTW
  <Query query={query}>
    {({ loading, error, data }) => {
      if (loading) return 'Loading...';
      if (error) return `Error! ${error.message}`;

      return (
        {data.dogs.map(dog => (
          <li key={dog.id} value={dog.breed}>
            {dog.breed}
          </li>
        ))}
      );
    }}
  </Query>
<ApolloQuery :query="require('../graphql/query.gql')">
  <template slot-scope="{ result: { loading, error, data } }">
    <div v-if="loading" class="loading apollo">Loading...</div>

    <div v-else-if="error" class="error apollo">An error occured</div>

    <div v-else-if="data" class="result apollo">{{ data.hello }}</div>

    <div v-else class="no-result apollo">No result :(</div>
  </template>
</ApolloQuery>
class ProfileComponent implements OnInit {
  loading: boolean;
  currentUser: any;

  private querySubscription: Subscription;

  constructor(private apollo: Apollo) {}

  ngOnInit() {
    this.querySubscription = this.apollo.watchQuery<any>({ query: Query})
    .valueChanges.subscribe(({ data, loading }) => {
        this.loading = loading;
        this.currentUser = data.currentUser;
    });
  }
}

There is no limit to what you can build

LvivJS πŸ‡ΊπŸ‡¦πŸ‡§@NIkkitaFTW

Apollo Link State

GraphQL CSS

Ready to learn ?

LvivJS πŸ‡ΊπŸ‡¦πŸ‡§@NIkkitaFTW