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

2. Wrap the app in ApolloClient

Wrap the app in ApolloClient

3. Refactor greeting to fetch data from the API

Decorate Greeting with the required data

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

Getting started with Apollo GraphQL

By Kadi Kraman

Getting started with Apollo GraphQL

Slides for CityJS

  • 1,259