In this workshop, we are going to create a GraphQL API that integrates with an external REST API. We are going to create schemas and resolver functions and discover some best practices along the way.
This workshop is broken up into steps that are separated by Git branches. You're likely on the master branch now, which has some introductions. After you read through the comments in server.js, switch to the step1 branch (with $ git checkout step1) and move forward from there. The step1-solution branch has the solution for step1 and so on. There are 6 steps to this workshop.
Day 1 -- Basics and beyond
- master — Introduces graphql-yoga and some GraphQL concepts like typeDefs/schema, resolvers, etc.
- step1 — Get familiar w/ adding new fields and resolvers.
- step2 — Optional and required arguments and demonstrates the use of the
rootObj - step3 — Deprecate a field. Add a new field that is a “link” to another type. This new field makes another API call. More practice w/ schema design.
- step4 — Dedupe API calls w/ dataloader
Day 2 -- GraphQL in practice
- step5 — Using
contextto share loaders between resolvers - step6 - Refactoring the project into a hierarchical directory structure w/ schema files and resolvers using merge-graphql-schemas
- step7 - Integrate w/ a GraphQL server using react-apollo
All of these must be available in your PATH. To verify things are set up
properly, you can run this:
git --version
node --version
npm --version
If you have trouble with any of these, learn more about the PATH environment variable and how to fix it here for windows or mac/linux.
- Ensure you're using at least
node@8andnpm@5 - Clone, install, and run the server
$ git clone https://github.com/mstuart/graphql-workshop.git
$ cd graphql-workshop
$ npm install
To get the app up and running (and really see if it worked), run:
$ npm start
$ open http://localhost:4000
npm start will start the API server. Your browser should open up automatically to http://localhost:4000 (if it doesn't, just open that yourself) and you should be able to start messing around with the app.
Here's what you should be looking at:
GraphQL Playground is a great tool for writing and testing out queries. GraphQL Playground has some docs to explore on the right panel and offers an auto-complete-as-you-type experience. This is what GraphQL is all about, the developer experience! :-)