Code that aims to explain the client and the server side of using GraphQL in apps.
Branch: master
Clone or download
Latest commit a39fd7d Sep 28, 2017
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Fixed #2 Sep 28, 2017
.gitignore Initial commit Sep 27, 2017 Create Sep 27, 2017 Create Sep 27, 2017 Create Sep 27, 2017
LICENSE Create LICENSE Sep 27, 2017 Fixed #2 Sep 28, 2017
package.json Housekeeping Sep 27, 2017
yarn.lock Fixes #1, was using local npm. Thanks for the fix, @webdevbrian Sep 27, 2017

Basically, Full-stack GraphQL GraphQL

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!

See it in action!

The Project

The project is basically a recipe search system to help someone cook yummy things. 🍜 It works by sending an ingredient as a query to a GraphQL server that retrieves data from (normally, what should be a database) a REST endpoint somewhere on the intrawebs (read: RecipePuppy) that has a nice open API we can query.

This project is literally meant to be a POC and nothing too serious.

Getting Started

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:

When it comes to frameworks or state managers, we can deal with those in other projects. 😄

Thanks to

  • Vue, for an amazingly versatile bootstrap process.

Happy Coding! 🎉