For some time now, I have been reading a lot about GraphQL but never got round to actually checking it out. It sounded like the next hype and yet another thing to implement and learn. However, I gave it a try this morning and after piecing together the scattered documentation I am completely hooked. Because I had trouble finding a simple tutorial that covered the basics I am documenting what I found here in what hopefully will be the most simple way of getting started with graphql. If I got your attention please read on. I promise that you will have a server with database up and running in 5 minutes (provided that you already have a mongodb database running).
Like the title may suggest we are going to use graphql-yoga to get started. Because this package abstracts away a huge amount of the setup we only need three things to get our app running:
Two types of operations are used. Queries and Mutations. These are pretty self explanatory. Here we will only focus on querying. In my experience once you get one full flow working, the rest will be easy. So let’s code.
Create a package.json like below and run npm install
on the folder. This will install some babel presets for ES6 and Async/Await together with the mongoose and graphql-yoga packages.
Also we need to add a .babelrc file with the following contents.
That’s it. We are ready to go.
We are going to work from database to endpoint, so we are starting with creating a mongoose model to query our database. The simple scenario is that we are creating a web shop and have a database containing our products that we want to be offering. The products have a name, an image, a description and a price. To get this from the database our model definition will look something like this:
Now we are going to create the types. We need two types. One for our product data and one defining the query that we want to call based on our products. That all looks something like this:
Notice how the query uses the Product type when the plural products query is called. This returns a list of our product type definition.
Lastly, we want to add our resolvers. The only thing that these functions need to do is to query our mongo database through our created mongoose model. That will look like this:
When we put this all together we have the result below:
Save this to index.js and run it using npm run dev
. If you go to http://localhost:4000 you will find your playground where you can test the queries.
If all is well this will already return results. Basically you have created a backend which fits on an A4 sheet of paper which already serves content from a database. Well done!
The project https://github.com/graphcool/prisma is a package to use GraphQL with databases. Mongo currently is not supported yet, but they are working on it. This will probably make things even simpler.
Next op is defining Mutations to also update or delete your products. For help with this you can check docs below. Seems pretty easy to piece together. Happy coding!
GraphQL: A query language for APIs._GraphQL provides a complete description of the data in your API, gives clients the power to ask for exactly what they…_graphql.org