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