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 complete this introduction 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 and 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

From our experience, a 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 and describe 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 the 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 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 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