Definindo Rotas no Mirage JS

Em Mirage JS, as rotas são definidas dentro do método routes() do servidor. Cada rota pode simular operações CRUD (Create, Read, Update, Delete) e responder a diferentes métodos HTTP. O servidor de Mirage intercepta chamadas feitas pelos clientes e as redireciona para os handlers correspondentes definidos no seu código.

Métodos HTTP suportados

Mirage JS suporta os principais métodos HTTP que você esperaria de uma API REST:

• GET para buscar dados.
• POST para criar novos registros.
• PUT ou PATCH para atualizar registros existentes.
• DELETE para remover registros.

Exemplo prático: Rotas CRUD para Usuários

Vamos configurar um exemplo prático utilizando TypeScript, onde definimos um conjunto básico de rotas CRUD para um recurso "usuários". Aqui está como você pode fazer isso:

import { Server, Model } from "miragejs";

type UserType = {
  name: string;
  email: string;
  age: number;
};

new Server({
  models: {
    user: Model.extend<Partial<UserType>>({}),
  },

  seeds(server: Server) {
    server.create("user", {
      name: "Tony Stark",
      email: "tony@starkindustries.com",
      age: 45,
    });
    server.create("user", {
      name: "Bruce Banner",
      email: "bruce.banner@avengers.com",
      age: 49,
    });
  },

  routes() {
    this.namespace = "api";

    // GET: Lista todos os usuários
    this.get("/users", (schema) => {
      return schema.users.all();
    });

    // POST: Cria um novo usuário
    this.post("/users", (schema, request) => {
      const newUser = JSON.parse(request.requestBody) as UserType;
      return schema.users.create(newUser);
    });

    // GET: Busca um usuário por ID
    this.get("/users/:id", (schema, request) => {
      let id = request.params.id;
      return schema.users.find(id);
    });

    // PUT: Atualiza um usuário por ID
    this.put("/users/:id", (schema, request) => {
      let id = request.params.id;
      const newAttributes = JSON.parse(
        request.requestBody
      ) as Partial<UserType>;
      let user = schema.users.find(id);
      return user.update(newAttributes);
    });

    // DELETE: Remove um usuário por ID
    this.delete("/users/:id", (schema, request) => {
      let id = request.params.id;
      return schema.users.find(id).destroy();
    });
  },
});

Neste exemplo:

• Models: Define o modelo user com tipos básicos como name, email e age.
• Seeds: Popula o banco de dados inicial com alguns dados de usuário para testes.
• Routes: Configura as rotas CRUD dentro do namespace api, tratando cada tipo de requisição HTTP.

Com essas rotas configuradas, você pode agora simular chamadas à API e desenvolver sua aplicação front-end de forma isolada, garantindo que a interação com dados seja robusta e testável.