• What is GraphQL?
• GraphQL Queries
• GraphQL Schema
• Implementing a Server
• Solutions

• 1930s - Operators between client and server
• 2000s - REST between client and server
• 2010s - GraphQL between client and server

• You have multiple consumers
• You have multiple legacy APIs and want to unite them
• You write applications

  Discuss: Think about your current projects. Can you see potential for using GraphQL?

The consumer is always right

1. Find a couple of GraphQL APIs online.
2. What sort of functionality do the APIs implement?
3. What commonalities do the APIs have?
4. What differences do the APIs have?

{
  themes {
    primaryColor
  }
  theme(id: "survivejs") {
    primaryColor
    secondaryColor
    background
  }
}

query getTheme {
  themes {
    primaryColor
  }
  theme(id: "survivejs") {
    primaryColor
    secondaryColor
    background
  }
}

query($themeID: ID!) {
  theme(id: $themeID) {
    primaryColor
  }
}

Variables

{
  "themeID": "survivejs"
}

fragment SponsorFragment on Contact {
  name
}

query RootQuery($conferenceId: ID!) {
  conference(id: $conferenceId) {
    partners {
      ...SponsorFragment
    }
    goldSponsors {
      ...SponsorFragment
    }
  }
}

{
  colors: themes {
    primaryColor
  }
}

mutation {
  changePresentationTheme(
    presentationID: "intro-to-graphql",
    themeID: "survivejs"
  ) {
    id
    theme {
      id
    }
  }
}

While query fields are executed in parallel, mutation fields run in series, one after the other. - GraphQL documentation

• GraphiQL
• GraphQL Playground

Discuss: Investigate the playgrounds. Can you see what functionality they have?

• graphql-request
• urql
• Relay
• Apollo Client

1. How many speakers does GraphQL Finland 2018 have? API. Source.

   Use conferenceId graphql-finland-2018 as an id to the conference query. See the schema explorer. You can count the data using a little script or perform the request using graphql-request and then process it further.

2. What was the title and release date of the first Star Wars movie? API. Source.
3. How many open source licenses is GitHub aware of? API. Documentation.
4. What are the names of the followers of the user LinusTorvalds in GitHub? (Not to be confused with Linux Linus.)

5. Choose a client from the list and try performing some of the queries using it.
6. Look up GraphQL directives. What's the purpose of those? Where would you use them?

• A definition language is used to define an API
• Separate language to describe types and their relations
• In addition code implementing Queries and Mutations is needed

type Presentation {
  id: ID!
  theme: Theme!
  slides: [Slide]!
}

Exercise: Which types does GraphQL support out of the box?

enum Layout {
  TITLE
  SECTION
  EMBED
  MARKDOWN
}

Discuss: What's the use case for enums? Where would use you use them?

union ContentType =
    TitleContent
  | SectionContent
  | EmbedContent
  | MarkdownContent

Discuss: What's the use case for unions? Where would use you use them?

interface Content {
  title: String
  background: ContentBackground
}

Discuss: What's the use case for interfaces? Where would use you use them?

type Query {
  themes: [Theme]!
  theme(id: String!): Theme
  presentations: [Presentation]!
  presentation(id: String!): Presentation
}

Discuss: What's the use case for queries? Where would use you use them?

type Mutation {
  changePresentationTheme(
    presentationID: String!,
    themeID: String!
  ): Presentation
}

Discuss: What's the use case for mutations? Where would use you use them?

{
  __schema {
    types {
      name
    }
  }
}

Discuss: What's the use case for introspection? Where would use you use it?

• graphql-config
• eslint-plugin-graphql
• type-graphql
• graphql-code-generator
• graphqlviz

1. What's the difference between an Interface and a Union?
2. Model a schema for a small presentation application API.
3. Try graphqlviz against an API.
4. Look up JSON Schema. What's the relationship between that and GraphQL SDL? See also graphql-json-schema.

• GraphQL.js
• graphql-yoga
• Prisma
• Apollo Server
• graphpack*

Let's jump to Sara's material now for the rest!

{
  conference(id: "graphql-finland-2018") {
    speakers {
      name
    }
  }
}

{
  allFilms {
    films {
      title
      releaseDate
    }
  }
}

query {
  licenses {
    name
  }
}

query {
  user(login: "LinusTorvalds") {
    followers(first: 10) {
      nodes {
        name
      }
    }
  }
}