GraphQL Workshop
So you want to learn GraphQL? That is awesome! But like any other technology it's not easy to get started and get the basics of it mainly because all the docs are spread all over the place.
In this 8 hour workshop we will create a GraphQL server with Apollo Server, connect it to a Postgres database in Heroku to have a fully functional GraphQL Server.
After that we will jump to the frontend using React and Apollo to query and mutate a GraphQL Endpoint easily.
Presentation
https://graphql-workshop-presentation.now.sh/
Requirements
- Node installed, I have version 10.3.0 but anything that supports async await is great!
- I use yarn but npm is
π― - Git
- Heroku Account - https://heroku.com/
- Postgres DB in Heroku - Video on how to do it: https://cdn.rawgit.com/SaraVieira/graphql-workshop/13d73f3b/howtoheroku.mp4
- CodeSanbox Account is preferred so you can keep all the files in your account
- Javascript knowledge
- React knowledge
Backend
- An overview of what GraphQL is
- The basics of a querying with GraphQL
- The basics of a mutations in GraphQL
- Connect to a Postgres DB
- Using context
- Make multiple requests in one Query
Frontend
- Making simple queries with React and React-Apollo
- Making advanced queries with React and React-Apollo
- Creating our own query component
- Mutations with React Apollo
- Updating the UI automatically after a mutation
- Using pagination
- Questions
What We will be building
- Server: https://graphql-workshop-server.now.sh/
- Front End: https://graphql-workshop-fe.now.sh/
Frontend
Start
git clone [email protected]:yldio/graphql-workshop.git
cd graphql-workshop/1-server-start
yarn # or npm i
yarn dev # npm run dev
Videos (4h)
- Part 1 (41:54m) - https://www.youtube.com/watch?v=Ql_iiJH0whM
- Part 2 (48:56m) - https://www.youtube.com/watch?v=2DT6esPbO_U
- Part 3 (45:58m) - https://www.youtube.com/watch?v=yO-mqTln-co
- Part 4 (25:04m) - https://www.youtube.com/watch?v=fIfRfbjiBUI
- Part 5 (1h 16:15m) - https://www.youtube.com/watch?v=9bz2xKqDkek
Exercises
Queries
- 1: Start - https://codesandbox.io/s/p3nz4p0w60
- 1: End - https://codesandbox.io/s/ql2zjk19qw
- 1.1 - Query Exercise: https://codesandbox.io/s/177w5v217
- 1.2 - Query Exercise Solution: https://codesandbox.io/s/r0jrnj59vq
- 2: Make your own query component - Start: https://codesandbox.io/s/n5m93n3y14
- 2: Make your own query component - End: https://codesandbox.io/s/v1qk8y0xw7
- 3: Variables in Query - Start: https://codesandbox.io/s/y20oywypmx
- 3: Variables in Query - End: https://codesandbox.io/s/x7513py6rq
- 3.1: Variables - Exercise - https://codesandbox.io/s/k9l6ypj7p5
- 3.1.1: Variables - Exercise - End - https://codesandbox.io/s/pkkxjv287j
Mutations
- 1: Start - https://codesandbox.io/s/l5k20vz4v7
- 1: End - https://codesandbox.io/s/q312699npq
- 1.1 - Exercise Start: https://codesandbox.io/s/2vz43jylrr
- 1.2 - Exercise End: https://codesandbox.io/s/yqr36koox9
- 2: Update UI - Start: https://codesandbox.io/s/zzwx03v53
- 2: Update UI - End: https://codesandbox.io/s/r74mqn22jm
- 2.1: Update Ui Exercise - Start: https://codesandbox.io/s/5z2krwqyon
- 2.1: Update Ui Exercise - End: https://codesandbox.io/s/yqr36koox9