Your first GraphQL project - Markdown Cloud

Create project in GraphQL Editor and deploy fully operational backend from it

In this tutorial, we will build a fully operational backend and front-end using GraphQL Editor its CLI, and the JAMstack engine. You should complete this introduction within 1 hour.

I want you to be able to do any app using GraphQL Editor and help you to go through the process so everything is clear for the whole team of developers, designers, business people, and so on

What result should you get:

  • backend holding all the blog posts in markdown format

  • front-end rendering blog posts

  • front-end admin for editing blog posts

Prerequisites

  • Javascript

Designing the schema

In our opinion schema first approach is the best. You can decide and architect your system just at the beginning. For our markdown cloud project, we will need Users and Blog posts so let's start from there. https://app.graphqleditor.com/editor-tutorials/introduction?v=latest

Schema is available here but we will go step by step how the schema design is done.

Author

It is the model responsible for holding data about the authors inside your Markdown Cloud. For the purpose of this project, we will hold all the authors inside our backend with a dead-simple authorization system

Post

Our main model. Holds data like title and content of the blog post

Creating the backend

When we have the schema ready we can start creating our backend. First of all you need to deploy faker from the project. If you are using our schema and not designing yourself you are good to go without it as we already deployed faker for the project.

Then go to your projects folder on your computer and type in terminal:

npm install -g graphql-centaur
centaur init

This will take you through the step-by-step repository creation.

centaur code

Next, install the dependencies

cd your_project
npm i

Now use the power of centaur code command

centaur code

Type the editor-tutorials namespace and select the introduction project. Next, choose as follows:

centaur resolver generation

This way you've just generated your first GraphQL resolver !. Hold on for a second, we need a database to store our documents. GraphQL centaur includes the database command to run docker MongoDB locally. For serverless deployments, we recommend Mongo Atlas.

npm run database

OK, we are ready to test our backend, let's run it.

npm run build
npm run start

The server should be up and running on

http://localhost:8080/graphql

Writing our first query should be fairly easy. We want to receive a wall of our markdown posts.

{
wall{
title
content
}
}

The response should look like that:

{
wall:[]
}

It is correct because we haven't created anything yet.