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.
backend holding all the blog posts in markdown format
front-end rendering blog posts
front-end admin for editing blog posts
TypeScript
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​
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.
Our main model. Holds data like the title and the content of the blog post.
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-centaurcentaur init
This will take you through the step-by-step repository creation.
centaur code
Next, install the dependencies.
cd your_projectnpm 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 buildnpm 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{titlecontent}}
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