Мок-сервер React с MirageJS — Часть 1

Пример проекта: https://github.com/xiao617/mirage-workshop

0. Определить тип:

export interface TodoObject{    
    id: string,    
    name: string,
}

1. Модели:

В MirageJS модель — это место для определения схемы.

models: {      
    todo: Model.extend<Partial<TodoObject>>({})    
},

Здесь мы определяем модель «todo» и сообщаем MirageJS, что ее тип — TodoObject.

Примечание. Частично означает, что не все столбцы в TodoObject должны быть предоставлены. Другими вариантами являются Обязательный (сделать все свойства типа обязательными) и Только для чтения (сделать все свойства типа доступными только для чтения).

2. Фабрики

Если мы хотим обеспечить некоторое начальное значение для наших данных, мы можем использовать фабрики.

factories: {      
    todo: Factory.extend<Partial<TodoObject>>({        
        get name() {          
            return `Listen to ${faker.music.genre()}`;        
        }      
    })    
},

name — это свойство в нашем TodoObject.

Примечание. faker — это библиотека, которая может помочь нам в создании поддельных данных.

3. Семена

Мы можем предоставить некоторые исходные данные.

seeds(server) {      
    server.create("todo", { name: "Buy Cookies" });
    server.createList("todo", 3); 
   // if you did not provide init value factory will help you to generate some.
    server.db.loadData(JSON_FORMAT_DATA)
    //you can load from json file 
     
},

4. Маршруты

Использование версии машинописного текста:

routes() {      
    //this.urlPrefix = "YOU_PREFIX";  
    this.get("/todos", (schema, request) => {        
         return schema.all("todo");      
    });      
    this.post("/todos", (schema, request) => {             
         let attrs = JSON.parse(request.requestBody);
         schema.create("todo", attrs);        
         return schema.all("todo");      
    });      
    this.del("/todos/:key", (schema, request) => {        
         let keyid = request.params.key;        
         let post = schema.findBy("todo", {id: keyid})       
         if(post !== null)          
              post.destroy();       
         return schema.all("todo");      
    });    
}

Спасибо за чтение! Это основное использование TypeScript с MirageJS.