Making backend with nodejs and typescript is trendy nowadays. In this article I will show you the way how to make it type safe and totaly connected with frontend within a short period of time.

To make this kind of backend I have to use my open source experimental tool slothking. First of all we will create a diagram for our backend. We will not use any extensions to make everything from scratch.

1. Go to Slothking App
2. Register.
3. Click out this diagram

Now if you have it. Save this with some fancy name. then go to slothking cli repo. [Slothking CLI](https://github.com/graphql-editor/sloth)
Download it and login.

```bash
$ sloth login username password
```

Create mongodb with docker

```bash
$ docker run --rm -it -p 27017:27017 mongo:3
```

Next you have to clone backend starter or import it to your backend project it is up to you. If you want to procced with backend starter. Go ahead and download it

```bash
$ git clone https://github.com/graphql-editor/backend-nodets-boilerplate
$ cd backend-nodets-boilerplate
$ npm install
$ npm run dev
```

Open another tab in terminal.

```bash
$ sloth nodets your-project-name src/generated.ts
```

It will generate file with typeguard for your script hosting platform

```ts
import * as sloth from '@slothking-online/node';
import * as tg from 'typegoose';
import { ObjectId } from 'bson';

export type ImpType = {
  _id?: ObjectId;
  code: string;
  hash?: string;
  name?: string;
};
export class Imp extends tg.Typegoose {
  @tg.prop()
  code: string;
  @tg.prop()
  hash: string;
  @tg.prop()
  name: string;
}
export const Models = () => ({
  ImpModel: new Imp().getModelForClass(Imp),
});

const slothking: {
  simpleImpServer: {
    name: string;
    middlewares: {};
    endpoints: {
      get: sloth.SlothkingEndpoint<
        {
          name?: string;
        },
        {},
        {
          Imp: tg.InstanceType<Imp>;
        }
      >;
      createOrUpdate: sloth.SlothkingEndpoint<
        {
          Imp?: ImpType;
        },
        {},
        {
          Imp: tg.InstanceType<Imp>;
        }
      >;
    };
  };
} = {
  simpleImpServer: {
    name: 'simpleImpServer',
    middlewares: {},
    endpoints: {
      get: {
        path: 'get',
        middlewares: [],
      },
      createOrUpdate: {
        path: 'createOrUpdate',
        middlewares: [],
      },
    },
  },
};
export default slothking;
```

So you have type definitions and mongo generated. Lets start implementing our endpoints.

1. Create a file src/implement.ts

```ts
import generated, { Models, Imp } from './generated';
import * as crypto from 'crypto';
import { InstanceType } from 'typegoose';

const models = Models();

const {
  simpleImpServer: {
    endpoints: { createOrUpdate, get },
  },
} = generated;

createOrUpdate.run = async (props) => {
  const {
    Imp: { code, hash, name },
  } = props.context.arguments;
  let ImpInstance: InstanceType<Imp>;
  if (hash && name) {
    ImpInstance = await models.ImpModel.findOneAndUpdate(
      {
        hash,
      },
      {
        code,
      },
      {
        new: true,
      },
    );
  } else {
    ImpInstance = await models.ImpModel.create({
      name,
      code,
      hash: crypto.randomBytes(8).toString('hex'),
    });
  }
  return {
    Imp: ImpInstance,
  };
};
get.run = async (props) => {
  const { name } = props.context.arguments;
  return {
    Imp: await models.ImpModel.findOne({
      name,
    }),
  };
};
export { generated };
```

Now edit the src/index.ts file

```ts
import run from '@slothking-online/node';
import { generated } from './implement';
export default run([generated.simpleImpServer], process.env.MONGO);
```

Now you have fully working gist-like server, in next tutorial I will show you how to create CLI for this kind of gist server.


TS backend with slothking & Imp Gist implementation server

Getting started with React XP and faker is very easy. The final effect should look like this:

Whats nice about this app is the fact it is written in React XP. In this framework you get iOS, Android and tadadadam: Web. So you can just salut.

You will need to install packages in this tutorial:

[Create RX app](https://github.com/a-tarasyuk/create-rx-app). Worked for me in the first use!

```bash
$ npm install create-rx-app -g
```

[TS api faker](https://github.com/graphql-editor/ts-api-faker). A small tool for receiving fake data from faker and unsplash.

```bash
$ git clone https://github.com/graphql-editor/ts-api-faker
$ cd ts-api faker
$ npm install
$ npm run build
$ npm run start
```

So faker is running now its high time to create your react XP very app!

```ts
import * as RX from "reactxp";

const _styles = {
  twitts: RX.Styles.createViewStyle({
    flexDirection: "column",
    overflow:'visible',
    alignSelf:"stretch",
    flex:1,
  }),
  twitt: RX.Styles.createViewStyle({
    padding: 10,
    flexDirection: "row",
    alignSelf:"stretch",
  }),
  text: RX.Styles.createViewStyle({
    flexDirection: "column",
    flex: 1,
    alignSelf:"stretch",
    marginLeft: 10,
  }),
  topline: RX.Styles.createViewStyle({
    flexDirection: "row",
    flexWrap:"wrap",
    alignSelf:"stretch"
  }),
  username: RX.Styles.createTextStyle({
    fontWeight: "bold",
    fontSize:14
  }),
  acc: RX.Styles.createTextStyle({
    color: "#aaa",
    fontSize:14
  }),
  avatar: RX.Styles.createImageStyle({
    width: 50,
    height: 50,
    borderRadius: 50
  }),
  sentence: RX.Styles.createTextStyle({
    alignSelf: "stretch",
    fontWeight: "normal",
    fontSize:14
  })
};
type Twitt = {
  name: string;
  acc: string;
  avatar: string;
  twitt: string;
  retwitts: string;
  likes: string;
  comments: string;
};
const fakerPayload = () =>
  ({
    name: "internet.userName",
    acc: "internet.userName",
    avatar: "internet.avatar",
    twitt: "lorem.sentence",
    retwitts: "random.number",
    likes: "random.number",
    comments: "random.number"
  } as Twitt);
const fakerQuery: Twitt[] = new Array(Math.floor(20 + Math.random() * 40))
  .fill(1)
  .map(fakerPayload);

type AppState = {
  twitts: Twitt[];
};

export class App extends RX.Component<{}, AppState> {
  state: AppState = {
    twitts: []
  };
  componentDidMount() {
    fetch("http://localhost:3000", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(fakerQuery)
    })
      .then(response => response.json())
      .then((twitts: Twitt[]) => {
        this.setState({
          twitts
        });
      });
  }
  public render() {
    return (
      <RX.View style={_styles.twitts}>
        {this.state.twitts.map(t => (
          <RX.View style={_styles.twitt} key={t.name}>
            <RX.View>
              <RX.Image style={_styles.avatar} source={t.avatar} />
            </RX.View>
            <RX.View style={_styles.text}>
              <RX.View style={_styles.topline}>
                <RX.Text style={_styles.username}>{t.name}</RX.Text>
                <RX.Text style={_styles.acc}>{`@${t.acc}`}</RX.Text>
              </RX.View>
              <RX.Text style={_styles.sentence}>{t.twitt}</RX.Text>
            </RX.View>
          </RX.View>
        ))}
      </RX.View>
    );
  }
}

```

You see? There is nothing to explain, but lets go with most logical part of it.

```ts
const fakerPayload = () =>
  ({
    name: "internet.userName",
    acc: "internet.userName",
    avatar: "internet.avatar",
    twitt: "lorem.sentence",
    retwitts: "random.number",
    likes: "random.number",
    comments: "random.number"
  } as Twitt);
const fakerQuery: Twitt[] = new Array(Math.floor(20 + Math.random() * 40))
  .fill(1)
  .map(fakerPayload);
  ```

  So we are using faker nodes like `internet.userName` here. Then we generate Array with random length fill it with numbers so we can perform map on it and generating payload with fakerPayload function. 

Twitter clone with React XP and faker

Have you ever wondered to visualise your GraphQL schema? How it looks as a tree structure?

Explaining schema would be much easier on visual like graph. So you can easily see points where you can optimise it.

```gql
input CatReadInput {
  id: ID
}

input CatCreateInput {
  name: String
  Age: Int
}

input CatUpdateInput {
  name: String
  Age: Int
  id: ID
}

input CatRemoveInput {
  id: ID
}

type Cat {
  id: ID
  name: String
  Age: Int
}

type Query {
  listCat: [Cat]
  readCat(Cat: CatReadInput): Cat
}

type Mutation {
  createCat(Cat: CatCreateInput): Cat
  updateCat(Cat: CatUpdateInput): Cat
  removeCat(Cat: CatRemoveInput): Cat
}

schema {
  query: Query
  mutation: Mutation
}
```

Presenting this kind of text document wouldn't mean anything to sales or business person. However presenting visual diagram out of it helps them understand the whole data model

![schema.png](/schema.png)

You can create those schemas just by uploading file or url to [GraphQL Editor](https://graphqleditor.com)


Visualise your graphql schema

  
A while ago we have launched a new version of [GraphQL Editor](https://graphqleditor.com/) packed with features we believe can help developers save a lot of time & effort creating their GraphQL based APIs.

The [GraphQL Editor](https://graphqleditor.com/) is a supportive tool for both advanced GraphQL users as well as those making their first steps with GraphQL APIs. We still aim to solve two basic issues:

- make web development easier (both frontend & backend side)
- fix communication issues within a development team


## GraphQL Editor Features

Some of them are totally new features, some might be well-known for [GraphQL Editor](https://graphqleditor.com/) early adopters but undergone some serious upgrades. Among them, you can find such features as:

- **[GraphQL IDE](/graphql ide)** - Prototype your schema or import your own and start working with GraphQL right away.

- **Built-in [GraphiQL](/graphql-playground)** - Built-in most popular in-browser IDE for exploring GraphQL. No need to set up your own environment.

- **GraphQL Libraries** -  An idea similar to schema stitching, a much stable approach. Create new GraphQL schema from multiple underlying GraphQL APIs without conflicts.

- **Instant Fake Backend** - Generate fake backend out of your schema in a no time thanks to Levenshtein algorithm.

- **Schema Visualization** - Import your schema to the editor. You can do it both by importing GQL file or copying directly code.

And a lot more! You can read about the features [here](https://graphqleditor.com/).






Blog