Heroes Api with LoopBack 4

Part 1

Installing Loopback 4

npm i -g @loopback/cli

Generating a base application

lb4 app

Select appropriate options:

? Project name: heroes
? Project description: heroes api
? Project root directory: /heroes
? Application class name: Heroes
? Select features to enable in the project:
❯◉ Enable tslint
 ◉ Enable prettier
 ◉ Enable mocha
 ◉ Enable loopbackBuild
 ◉ Enable vscode
 ◉ Enable repositories
 ◉ Enable services

Creating your first model

run lb4 model to generate your model

Or
create a file under /src/models named character.model.ts and add:

import {Entity, model, property} from '@loopback/repository';

@model()
export class Character extends Entity {

  @property({
    type: 'number',
    id: true,
  })
  id: number;

  @property({
    type: 'string',
    required: true,
  })
  name: string;

  @property({
    type: 'string',
    required: true,
  })
  friend: string;

  @property({
    type: 'string',
    required: true,
  })
  planetId: string;

  @property({
    type: 'string',
    required: true,
  })
  species: string;

  constructor(data?: Partial<Character>) {
    super(data);
  }
}

add export * from './character.model'; to index.ts

Now we want to add a datasource

create two files, one called db.datasource.json and one called db.datasouce.ts in the folder /src/datasources
in db.datasource.json we want to add:

{
    "name": "db",
    "connector": "memory",
    "localStorage": "",
    "file": "./data/db.json"
}

in db.datasource.ts we want to add:

import {inject} from '@loopback/core';
import {juggler} from '@loopback/repository';
import * as config from './db.datasource.json';

export class DbDataSource extends juggler.DataSource {
  static dataSourceName = 'db';

  constructor(
    @inject('datasources.config.db', {optional: true})
    dsConfig: object = config,
  ) {
    super(dsConfig);
  }
}

We now want to create a folder called data with a file called db.json in the root directory of the app.

Next we are going to work on repository

create a file under /src/repositories named character.repository.ts

import {inject} from '@loopback/core';

export class CharacterRepository extends DefaultCrudRepository<
  Character,
  typeof Character.prototype.id
> {

  constructor(
    @inject('datasources.db') dataSource: DbDataSource,
  ) {
    super(Character, dataSource);
  }
}

add export * from './character.repository; to index.ts

For the final step to get your app up and running we need to add a controller

create a file under /src/repositories named character.controller.ts

import {
  Filter,
  repository,
  Where,
} from '@loopback/repository';
import {
  post,
  param,
  get,
  getFilterSchemaFor,
  getWhereSchemaFor,
  patch,
  del,
  requestBody,
} from '@loopback/rest';
import {Character} from '../models';
import {CharacterRepository} from '../repositories';

export class HeroController {
  constructor(
    @repository(CharacterRepository)
    public characterRepository : CharacterRepository,
  ) {}

  @post('/heroes', {
    responses: {
      '200': {
        description: 'Character model instance',
        content: {'application/json': {schema: {'x-ts-type': Character}}},
      },
    },
  })
  async create(@requestBody() character: Character): Promise<Character> {
    return await this.characterRepository.create(character);
  }

  @get('/heroes', {
    responses: {
      '200': {
        description: 'Array of Character model instances',
        content: {
          'application/json': {
            schema: {type: 'array', items: {'x-ts-type': Character}},
          },
        },
      },
    },
  })
  async find(
    @param.query.object('filter', getFilterSchemaFor(Character)) filter?: Filter,
  ): Promise<Character[]> {
    return await this.characterRepository.find(filter);
  }

  @patch('/heroes', {
    responses: {
      '200': {
        description: 'Character PATCH success count',
        content: {'application/json': {schema: CountSchema}},
      },
    },
  })
  async updateAll(
    @requestBody() character: Character,
    @param.query.object('where', getWhereSchemaFor(Character)) where?: Where,
  ): Promise<Count> {
    return await this.characterRepository.updateAll(character, where);
  }

  @get('/heroes/{id}', {
    responses: {
      '200': {
        description: 'Character model instance',
        content: {'application/json': {schema: {'x-ts-type': Character}}},
      },
    },
  })
  async findById(@param.path.number('id') id: number): Promise<Character> {
    return await this.characterRepository.findById(id);
  }

  @patch('/heroes/{id}', {
    responses: {
      '204': {
        description: 'Character PATCH success',
      },
    },
  })
  async updateById(
    @param.path.number('id') id: number,
    @requestBody() character: Character,
  ): Promise<void> {
    await this.characterRepository.updateById(id, character);
  }

  @del('/heroes/{id}', {
    responses: {
      '204': {
        description: 'Character DELETE success',
      },
    },
  })
  async deleteById(@param.path.number('id') id: number): Promise<void> {
    await this.characterRepository.deleteById(id);
  }

add export * from './character.controller; to index.ts

Now lets start our server:

npm run start

Part 2

Lets start by adding a few new models

first lets add planet.model.ts

import {Entity, model, property} from '@loopback/repository';

@model()
export class Planet extends Entity {
  @property({
    type: 'number',
    id: true,
  })
  id: number;

  @property({
    type: 'string',
    required: true
  })
  name: string;

  @property({
    type: 'string',
    required: true,
  })
  climate: string;

  constructor(data?: Partial<Planet>) {
    super(data);
  }
}

next lets add species.model.ts

import {model, property, Entity, belongsTo} from '@loopback/repository';
import { Planet } from './planet.model';

@model()
export class Species extends Entity {

  @property({
    type: 'number',
    id: true,
  })
  id: number;

  @property({
    name: 'name',
    description: "The species name",
    type: 'string',
  })
  name: string;

  @belongsTo(() => Planet, {keyTo: 'id'})
  planetId: number;
  
  @property({
    name: 'lifespan',
    description: "The lifespan of the species",
    type: 'number',
  })
  lifespan: number;

  constructor(data?: Partial<Species>) {
    super(data);
  }
 
}

and now lets update character.model.ts

import {Entity, model, property, belongsTo} from '@loopback/repository';
import { Planet } from './planet.model';
import { Species } from './species.model';

@model()
export class Character extends Entity {

  @property({
    type: 'number',
    id: true,
  })
  id: number;

  @property({
    type: 'string',
    required: true,
  })
  name: string;

  @belongsTo(() => Character, {keyTo: 'id'})
  friendId: number;

  @belongsTo(() => Planet, {keyTo: 'id'})
  planetId: number;

  @belongsTo(() => Species, {keyTo: 'id'})
  speciesId: number;

  constructor(data?: Partial<Character>) {
    super(data);
  }
}

Now lets work on repositories

lets create the planet repository by running:

lb4 repository

? Please select the datasource DbDatasource
? Select the model(s) you want to generate a repository Planet
   create src/repositories/planet.repository.ts
   update src/repositories/index.ts

Repository Todo was created in src/repositories/

now lets create the species repository the same way:

lb4 repository

? Please select the datasource DbDatasource
? Select the model(s) you want to generate a repository Species
   create src/repositories/species.repository.ts
   update src/repositories/index.ts

and finally lets update the Character repository

import {DefaultCrudRepository, juggler, BelongsToAccessor, repository} from '@loopback/repository';
import {Character, Species, Planet} from '../models';
import {DbDataSource} from '../datasources';
import {inject, Getter} from '@loopback/core';
import { SpeciesRepository } from './species.repository';
import { PlanetRepository } from './planet.repository';

export class CharacterRepository extends DefaultCrudRepository<
  Character,
  typeof Character.prototype.id
> {
  public readonly friend: BelongsToAccessor<
    Character,
    typeof Character.prototype.id
  >;

  public readonly species: BelongsToAccessor<
    Species,
    typeof Character.prototype.id
  >;

  public readonly planet: BelongsToAccessor<
    Planet,
    typeof Character.prototype.id
  >;

  constructor(
    @inject('datasources.db') dataSource: DbDataSource,
    @repository.getter('SpeciesRepository')
    speciesRepositoryGetter: Getter<SpeciesRepository>,
    @repository.getter('PlanetRepository')
    planetRepositoryGetter: Getter<PlanetRepository>,
  ) {
    super(Character, dataSource);
    this.friend = this._createBelongsToAccessorFor(
      'friend',
      Getter.fromValue(this),
    );
    this.species= this._createBelongsToAccessorFor(
      'species',
      speciesRepositoryGetter,
    );
    this.planet = this._createBelongsToAccessorFor(
      'planet',
      planetRepositoryGetter,
    );

  }
}

now for the controllers

We don't need to add the controllers for species and planet but we could by running lb4 controller and selecting the options.
We do want to add some new functionalities to the character.controller.ts. Add these new methods below the existing:

@get('/heroes/{id}/friend', {
    responses: {
      '200': {
        description: 'Character model instance',
        content: {'application/json': {schema: {'x-ts-type': Character}}},
      },
    },
  })
  async getFriend(
    @param.path.number('id') heroId: typeof Character.prototype.id,
  ): Promise<Character> {
    return await this.characterRepository.friend(heroId);
  }

  @get('/heroes/{id}/planet', {
    responses: {
      '200': {
        description: 'Character model instance',
        content: {'application/json': {schema: {'x-ts-type': Planet}}},
      },
    },
  })
  async getPlanet(
    @param.path.number('id') heroId: typeof Character.prototype.id,
  ): Promise<Planet> {
    return await this.characterRepository.planet(heroId);
  }

  @get('/heroes/{id}/species', {
    responses: {
      '200': {
        description: 'Character model instance',
        content: {'application/json': {schema: {'x-ts-type': Species}}},
      },
    },
  })
  async getSpecies(
    @param.path.number('id') heroId: typeof Character.prototype.id,
  ): Promise<Species> {
    return await this.characterRepository.species(heroId);
  }

Finally we want to add some data to the db.json

{
  "ids": {
    "Planet": 4,
    "Species": 4,
    "Character": 5
  },
  "models": {
    "Planet": {
      "1": "{\"id\":1,\"name\":\"Earth\",\"climate\":\"Earthy\"}",
      "2": "{\"id\":2,\"name\":\"Krypton\",\"climate\":\"Kryptony\"}",
      "3": "{\"id\":3,\"name\":\"Themyscira\",\"climate\":\"Themysciray\"}"

    },
    "Species": {
      "1": "{\"id\":1,\"name\":\"Human\",\"planetId\":1,\"lifespan\":80}",
      "2": "{\"id\":2,\"name\":\"Kryptonian\",\"planetId\":2,\"lifespan\":200}",
      "3": "{\"id\":3,\"name\":\"Demi-Goddess\",\"planetId\":3,\"lifespan\":1000}"

    },
    "Character": {
      "1": "{\"id\":1,\"name\":\"Batman\",\"friendId\":2,\"planetId\":1,\"speciesId\":1}",
      "2": "{\"id\":2,\"name\":\"Robin\",\"friendId\":1,\"planetId\":1,\"speciesId\":1}",
      "3": "{\"id\":3,\"name\":\"Superman\",\"friendId\":4,\"planetId\":2,\"speciesId\":2}",
      "4": "{\"id\":4,\"name\":\"Wonder Woman\",\"friendId\":3,\"planetId\":3,\"speciesId\":3}"
    }
  }

Now we are ready to run our server again:

npm run start

Part 3 (Generating base project from swagger)

Getting Swagger

Get the swagger from the end of part 2 at http://127.0.0.1:3000/openapi.json
Save this in a file called swagger.json
Generate a new base app using lb4 app
now we want to run: lb4 openapi and direct to the swagger we just created. This will create your models for you automatically and create stub controllers based on the swagger the rest is up to you.

Part 4 (Using OASGraph to convert to graphql)

Installing OASGRAPH

npm i oasgraph

Now if we run: oasgraph {pathToSwagger} we will start the graphql server
We also want to make sure that the api from part 2 is running npm run start

Now we want graphql to get the species, friend and planet data as well as the hero

Add links on the GET endpoints /heroes/{id} and /heroes under the response:

"links": {
    "friend": {
        "operationId": "getCurrentFriend",
        "parameters": {
            "id": "$response.body#/id"
        }
    },
    "planet": {
        "operationId": "getCurrentPlanet",
        "parameters": {
            "id": "$response.body#/id"
        }
    },
    "species": {
        "operationId": "getCurrentSpecies",
        "parameters": {
            "id": "$response.body#/id"
        }
    }
}

Update the operationId for the heroes/{id}/character, heroes/{id}/planet, and heroes/{id}/species endpoints.
Restart the oasgraph server

polakto / loopback4 Goto Github PK

loopback4's Introduction

Heroes Api with LoopBack 4

Part 1

Installing Loopback 4

Generating a base application

Select appropriate options:

Creating your first model

Now we want to add a datasource

Next we are going to work on repository

For the final step to get your app up and running we need to add a controller

Now lets start our server:

Part 2

Lets start by adding a few new models

Now lets work on repositories

now for the controllers

Finally we want to add some data to the db.json

Now we are ready to run our server again:

Part 3 (Generating base project from swagger)

Getting Swagger

Part 4 (Using OASGraph to convert to graphql)

Installing OASGRAPH

Now we want graphql to get the species, friend and planet data as well as the hero

loopback4's People

Recommend Projects

Recommend Topics

Recommend Org