Modelos no Mirage JS

Mirage JS é uma biblioteca de simulação de API muito útil para desenvolvedores front-end, especialmente quando estão trabalhando em aplicações que dependem de back-end que ainda não foi implementado ou está inacessível. Vamos abordar como definir e configurar modelos em Mirage JS, estabelecer relacionamentos entre eles, e por fim, apresentar um exemplo prático de modelos de Usuários e Postagens, utilizando TypeScript.

1. Definindo e Configurando Modelos

Modelos no Mirage JS são definidos usando a função Model. Cada modelo representa um tipo de dado que você espera manipular na sua aplicação, como um usuário, uma postagem, ou qualquer outro objeto de negócio.

Em TypeScript, você pode definir modelos para adicionar tipagem e aproveitar as vantagens da análise estática que o TypeScript oferece. Aqui está como você pode definir um modelo simples para um Usuário:

// src/mirage/server.ts
import { Model, Server } from "miragejs";

const criarServidor = () => {
  return new Server({
    models: {
      user: Model.extend<Partial<{ name: string; email: string }>>({}),
    },
  });
};

Neste exemplo, o modelo user tem propriedades name e email. O uso de Partial permite que cada propriedade do modelo seja opcional, o que é útil para simulações.

2. Relacionamentos entre Modelos

Relacionamentos são fundamentais em qualquer simulação que envolve mais de um tipo de modelo. Mirage JS suporta relacionamentos como hasMany e belongsTo.

Vamos expandir o exemplo para incluir um modelo de Post que está relacionado aos usuários:

// src/mirage/server.ts
import { Model, Server, hasMany, belongsTo } from "miragejs";

const criarServidor = () => {
  return new Server({
    models: {
      user: Model.extend<Partial<{ name: string; email: string; posts: any }>>({
        posts: hasMany(),
      }),
      post: Model.extend<
        Partial<{ title: string; content: string; user: any }>
      >({
        user: belongsTo(),
      }),
    },
  });
};

Neste código, definimos que um user pode ter muitas posts e cada post pertence a um user.

3. Exemplo Prático: Modelos de Usuários e Postagens

Agora que temos os modelos e relacionamentos configurados, vamos criar um exemplo prático que usa esses modelos:

// Seeds
// Criando um novo usuário com postagens associadas
server.create("user", {
  name: "Tony Stark",
  email: "tony@starkindustries.com",
  posts: [
    server.create("post", {
      title: "Novas Inovações em IA",
      content: "Explorando avanços em inteligência artificial...",
    }),
    server.create("post", {
      title: "Sustentabilidade em Tecnologia",
      content: "Como a tecnologia pode liderar em sustentabilidade...",
    }),
  ],
});

// Routes
// Consultando usuários e suas postagens
const users = schema.users.all();
console.log(
  users.models.map((user) => ({
    name: user.name,
    posts: user.posts.models.map((post) => ({
      title: post.title,
      content: post.content,
    })),
  }))
);

Esse script cria um novo usuário chamado Tony Stark com duas postagens. Ele também recupera todos os usuários e suas postagens associadas, mostrando como você pode manipular e acessar dados relacionados em Mirage JS.

Usando Mirage JS com TypeScript, você consegue simular APIs de uma forma que é segura em termos de tipo, proporcionando uma experiência de desenvolvimento robusta e produtiva enquanto espera pelo desenvolvimento do back-end.