This fairly trivial project aims at introducing a newcomer to GraphQL and the way it works. The code aims to explain the client and the server side of things.
The source code has been heavily commented and documented in order to explain what's going on. It is highly recommended to read through it. Do not be afraid!
The project is basically a recipe search system to help someone cook yummy things.
This project is literally meant to be a POC and nothing too serious.
To run the example locally, simply clone the repo and run
yarn install, then
yarn start. The project will be accessible under
http://localhost:4000. Be sure to inspect the network requests for more insights into how it all works.
Frequently Asked Questions
But what about Redux/VueX?
For this project, my motivation was that I was afraid for the longest time of the server side of GraphQL. HOW DOES IT KNOW WHATS GOING ON IN THE DATA LAYER? So I looked into how it works from zero to deployment, and when I found my answers (and was comfortable enough with them to explain them to others), other developers seemed to have been comforted by this explanation.
In essence, this project aims to be a mass-produced version of that explanation, regardless of UI framework. Basically, it is meant to answer 3 questions:
- How does GraphQL communicate with a database? (./src/server/resolver)
- How does GraphQL know about my data? (.src/server/schema)
- How do I interact with it from my web page? (./src/client/index)
When it comes to frameworks or state managers, we can deal with those in other projects.
- Vue, for an amazingly versatile bootstrap process.