Getting started with Apollo GraphQL

an end to end journey with Node.js and React

Kadi Kraman

Software Engineer

Let's get excited!

GraphQL - a new way to interact with your data

GraphQL in a nuthshell

http://graphql.org/

GraphQL is not a tool - it's a standard 🤔

GraphQL vs REST

GET /movies/1

{
  "title": "The Greatest Showman",
  "director": {
    "firstName": "Michael",
    "lastName": "Gracey"
  }
  // ... more fields
}

GET /movies/1

{
  "title": "The Greatest Showman",
  "directorId": 1
  // ... more fields
}


GET /directors/1

{
  "firstName": "Michael",
  "lastName": "Gracey"
  // ... more fields
}

GET /graphql?query={ movie(id: "1") { title, author { firstName } } }

{
  "title": "The Greatest Showman",
  "director": {
    "firstName": "Michael"
  }
}

In REST, the server is decides the structure of the data

In graphQL, the client does

Server

• Exposes a /graphql endpoint
• May use multiple data sources internally

Client

• Asks for only the data it needs from the agreed schema
• Caches old query results and reuses when applicable

To build a GraphQL server...

"Hello World" Express Server

Install the packages 📦

• graphql
• apollo-server-express
• graphql-tools
• body-parser

Describe your data

Resolve your data

Add the /graphql endpoint

Query your API

Explore your API?

Add a /graphiql endpoint

To build a GraphQL frontend...

yarn global add create-react-app

create-react-app my-app

cd my-app

yarn start

Install the packages 📦

• graphql
• react-apollo@beta
• graphql-tag

• apollo-boost

1. Refactor the greeting out of the root component

We have a full stack app!

Mutations

How can I change my name?

Caching

Apollo 1: Redux Store

Apollo 2: In Memory Cache

Apollo link rest

Honorable Mention

https://github.com/apollographql/apollo-link-rest

GraphQL Training Example

Honorable Mention

https://github.com/FormidableLabs/gql-workshop-app/

https://github.com/FormidableLabs/gql-workshop-app/tree/final-version

Thank you! 🤗

https://github.com/FormidableLabs/gql-workshop-app

http://graphql.org/learn/

https://www.apollographql.com/docs/apollo-server/

https://www.apollographql.com/docs/react/

@kadikraman