GraphQL Editor is not just frontend GraphQL visualisation. You can create fully working production-ready backends with the help of our Open Source tools.

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

We want you to be able to make any app using GraphQL Editor. We'd like to help you go through the process - so that everything is clear for you, your team of developers, designers, or business people.

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

• TypeScript

Designing the schema

For our markdown cloud project, we will need Users and Blog posts so let's start from there. From our experience, a schema-first approach is the best model for system design - you can effectively architect your project at the very beginning.

We will go step by step and describe how the schema design is done. The finished schema is available here: https://app.graphqleditor.com/editor-tutorials/introduction?v=latest​

Author

It is a model responsible for holding the 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 the title and the 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 it yourself, you are good to go without it, as we've 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:

Congratulations, you've just generated your first GraphQL resolver! Hold on for a second, we still 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.

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. We've only created a main query so far. Let's add some possibilities. Create src/Authors.ts file. As this is a very simple project we will hold our Authors in a const variable.

import { Author } from './graphql-zeus';
import { FieldResolveInput } from 'stucco-js';
​
export const Authors: Author[] = [
  {
    firstName: 'Bilbo',
    lastName: 'Baggins',
  },
  {
    firstName: 'Samwise',
    lastName: 'Gamgee',
  },
];
​
export const getAuthorOrThrow = (input: FieldResolveInput) => {
  const headers = input.protocol?.headers;
  if (!headers) {
    throw new Error('No headers present');
  }
  const { Author } = headers;
  if (!Author) {
    throw new Error('No Author header present');
  }
  // encode our first name lastName to one string on frontend like 'Author: Bilbo Baggins'
  const [firstName, lastName] = Author[0].split(' ');
  const foundAuthor = Authors.find((a) => a.firstName === firstName && a.lastName === lastName);
  if (!foundAuthor) {
    throw new Error('You shall not pass!');
  }
  return foundAuthor;
};
​

In our case, we will validate author through header. We are doing this since this is how Authorization works in most GraphQL cases but with real Auth systems. We are ready to generate UserMutation field resolvers.

centaur code