Рубрики
Без рубрики

Почему я мигрировал в MSW с JSON-Server

Введение в мою компанию, мы использовали JSON-Server с начала начинающегося … Tagged с JavaScript, насмешкой MSW.

Введение

У моей компании мы использовали JSON-Server С начала начала простых. Теперь мы достигли точки, где настройка просто недостаточно без написания полноценного сервера узла с Express. Поэтому мне посоветовали взглянуть на Mock Service Worker (MSW) И я могу сказать, что теперь у меня есть все, что мне нужно издеваться над всеми нашими API.

JSON-Server

Уровень: Я слишком молод, чтобы умереть

Мы начали с горсткой API, которые были довольно простыми, это было очень легко справиться с JSON-Server Я создал db.json Файл с API я хотел издеваться:

{
  "auth": {
    "user_id": 60
  },
  "campaigns": [
    { 
      "id": 1,
      "created_at": "2020-05-12T09:45:56.681+02:00",
      "name": "Khadijah Clayton"
    },
    {
      "id": 2,
      "created_at": "2020-05-12T09:45:56.681+02:00",
      "name": "Caroline Mayer"
    },
    {
      "id": 3,
      "created_at": "2020-05-12T09:45:56.681+02:00",
      "name": "Vanessa Way"
    },
    {
      "id": 4,
      "created_at": "2020-05-12T09:45:56.681+02:00",
      "name": "Generation X"
    },
    {
      "id": 5,
      "created_at": "2020-05-12T09:45:56.681+02:00",
      "name": "Mariam Todd (Mitzi)"
    }
  ]
}

А json-server.json Файл со следующим конфигом:

{
  "host": "localhost",
  "port": 4000,
  "delay": 250
}

И А package.json Сценарий:

"api": "json-server demo/db.json",

Беги это с Пряжа бежит API и ударить localhost: 4000/кампании вернет список кампаний, пока так хорошо.

Уровень: Эй, не слишком грубо

Некоторые API будут вложены под Campaign_id PARAL I.E. /Кампании/: Campaign_ID/Задачи Отказ Так что представляем маршруты :

json-server.json :

{
  "routes": "demo/routes.json",
  "host": "localhost",
  "port": 4000,
  "delay": 250
}

Маршруты.json :

{
  "/campaigns/:campaign_id/tasks": "/campaigns_tasks"
}

Таким образом, любой удар Localhost: 4000/Кампании/321/Задачи будет путь к /campaigns_tasks. В моем файле базы данных.

Уровень: больно мне много

Как вы можете себе представить, что файл базы данных вырос неразумно, очень быстро. Так что представляем средние годы :

json-server.json :

{
  "routes": "demo/routes.json",
  "middlewares": "demo/middleware.js",
  "host": "localhost",
  "port": 4000,
  "delay": 250
}

Middleware.js :

import campaigns from './demo/campaigns.json';

module.exports = function (req, res, next) {
  if (req.method === 'DELETE' || req.method === 'PUT') {
    return res.jsonp();
  }

  if (req.originalUrl === '/campaigns') {
    return res.jsonp(campaigns);
  }

  next();
}

Это позволило мне отделить данные на несколько кусков JSON и позволил мне обработать другие методы, такие как УДАЛИТЬ или Поставить без действий, редактирующих базу данных.

Уровень: ультрасильное насилие

Однако приложение продолжало расти, и так ли сумма Backenc API доставит, что я хотел, чтобы я хотел издеваться. Поэтому я обновил промежуточное программное обеспечение для обработки URL-адресов с помощью Regex, чтобы точно настроить ответ.

Middleware.js :

import campaign from './demo/campaign.json';
import tasks from './demo/tasks.json';

module.exports = function (req, res, next) {
  if (req.method === 'DELETE' || req.method === 'PUT') {
    return res.jsonp();
  }

  if (req.originalUrl.match(/\/campaigns\/[0-9]*$/)) {
    return res.jsonp(campaign);
  }

  if (req.originalUrl.match(/\/campaigns\/([0-9]+)\/tasks/)) {
    return res.jsonp(tasks);
  }

  next();
}

Уровень: Кошмар!

Поскольку промежуточное программное ПО выросло больше, так что каждый отдельный файл JSON, длинные массивы сотен предметов были очень трудно поддерживать. Поэтому для того, чтобы данные коротко и динамики, я добавил Faker.js Отказ

Middleware.js :

import campaign from './demo/campaign.js';

module.exports = function (req, res, next) {
  if (req.originalUrl.match(/\/campaigns\/[0-9]*$/)) {
    const data = campaign();
    return res.jsonp(data);
  }

  next();
}

Campaigns.js :

import faker from 'faker';

const gen = (fn) => {
  const count = faker.random.number({ min: 1, max: 10 });
  return new Array(count).fill(0).map((_, idx) => fn(idx));
};

module.exports = () => {
  faker.seed(32);

  return gen(() => ({
    id: faker.random.number(),
    owner_id: faker.random.number(),
    active: faker.random.boolean(),
    budget: faker.random.number(),
    description: faker.lorem.sentence(),
    created_at: new Date(faker.date.recent()).toISOString()
  }));
};

Взаимодействовать

Так как вы можете видеть, мы достигли точки, где это было сложнее и сложнее поддерживать. Итак, на данный момент мне было предложено попробовать Mock Service Worker (MSW) Отказ

Местный

Я собираюсь пропустить настройку часть, так как там много статей 1, 2, 3, 4, чтобы связать несколько плюс, конечно, их собственная документация, которая является 👌🏻.

Конфигурация

Я хочу упомянуть, подумал, что у меня установлена как типы браузера, так и узла, потому что я хочу, чтобы браузер обрабатывающую API через сервисный работник, и я также хочу, чтобы спецификация читала отсюда через узел.

server.js.

import { setupServer } from 'msw/node';
import { handlers } from './handlers';

// This configures a request mocking server with the given request handlers.
export const server = setupServer(...handlers);

браузер.js.

import { setupWorker } from 'msw';
import { handlers } from './handlers';

// This configures a Service Worker with the given request handlers.
export const worker = setupWorker(...handlers);

Handlers.js.

export const handlers = [
  ...
]

Я также должен был настроить CRA запустить Browser.js на старте и jest запустить Server.js для всех тестов.

Удаление избыточности

Теперь нет необходимости использовать регулярные выражения, поскольку внутри обработчиков я могу настроить Отдых API логика. Итак, удаление MILDWARE.js и Marross.json.

Handlers.js.

import { rest } from 'msw';
import campaigns from './demo/campaigns.js';
import campaign from './demo/campaign.js';

export const handlers = [
  rest.get('/campaigns', (_, res, ctx) => {
    return res(
      ctx.json(campaigns())
    );
  },

  rest.get('/campaigns/:id', (req, res, ctx) => {
    const { id } = req.params;

    return res(
      ctx.json(campaign(id))
    );
  },

  rest.get('/campaigns/:id/*', (req, res, ctx) => {   
    return res(
      ctx.status(200)
    );
  },
]

Вы можете быстро увидеть, что это может быть разделено на несколько разделов, таких как Кампания Хаус и другие, которые бы легче читать.

import campaignHelpers from './handlers/campaigns';

export const handlers = [
  ...campaignHelpers,
  ...others,
]

Следующие шаги Mswjs/data

Следующие шаги, на которых я хочу работать, когда у меня есть время, устанавливает фабрики данных, чтобы я мог создавать предметы по требованию и иметь более чистое структуру с моделями.

Последние мысли

Да, эта статья выглядит больше похожей на JSON-Server тут, но я думал, что это может быть полезно показать борьбу, которую я прошел и что заставил меня искать еще одно большее решение.

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

Оригинал: “https://dev.to/alextrastero/why-i-migrated-to-msw-from-json-server-2ihl”

Читайте ещё по теме: