На главную

Быстрый старт

Здесь описан самый короткий путь от нуля до настоящего эндпоинта, который можно вызывать из своего приложения. Это займёт около пяти минут.

1. Создайте аккаунт

Зарегистрируйтесь на /register, указав email и пароль. Вы попадёте на дашборд — пустой, пока вы не создали ни одного проекта.

2. Создайте проект

Проект — это просто пространство имён: он содержит один или несколько ресурсов и владеет key, который появляется в каждом URL его эндпоинтов. Нажмите New project, дайте ему название, и MockLab сгенерирует для вас случайный ключ проекта — что-то вроде demo7k2m9x. Вы никогда не выбираете этот ключ сами: это сделано специально, чтобы URL вашего эндпоинта нельзя было угадать по названию проекта.

3. Создайте ресурс

Внутри проекта создайте ресурс и назовите его — например, products. Ресурс — это одна схема: список полей, у каждого из которых есть тип. Добавьте три поля, чтобы попробовать:

Имя поляТипПримечание
titlewordодно сгенерированное слово
pricepriceустановите опцию symbol в $
inStockbooleantrue/false

Каждое добавленное поле сразу обновляет таблицу предпросмотра на том же экране, так что вы видите настоящие сгенерированные строки ещё до того, как напишете хоть одну строку клиентского кода. Установите Record count на нужное значение — 50 для быстрого теста или 100 000, чтобы убедиться, что заявление «без ограничения на количество записей» действительно работает. Какое бы число вы ни выбрали, время ответа на одну страницу почти не меняется, потому что MockLab никогда не генерирует больше, чем одну страницу записей на запрос.

4. Обратитесь к своему эндпоинту

Эндпоинт вашего ресурса становится живым сразу после создания — отдельного шага «publish» или «deploy» не существует. Полный URL следует одному шаблону:

https://mocklab.dev/m/{project-key}/{resource-name}

То есть для проекта и ресурса выше:

const response = await fetch("https://mocklab.dev/m/demo7k2m9x/products");
const products = await response.json();
console.log(products[0]);
// { id: "a1b2c3d4-...", title: "vivid", price: "$48.19", inStock: true }

В React-компоненте с TanStack Query тот же вызов выглядит так:

import { useQuery } from "@tanstack/react-query";

function ProductList() {
  const {
    data: products,
    isPending,
    isError,
  } = useQuery({
    queryKey: ["products"],
    queryFn: () => fetch("https://mocklab.dev/m/demo7k2m9x/products").then((res) => res.json()),
  });

  if (isPending) return <p>Loading…</p>;
  if (isError) return <p>Something went wrong.</p>;

  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>
          {product.title} — {product.price}
        </li>
      ))}
    </ul>
  );
}

Вот и всё — настоящий REST-ресурс с пагинацией, фильтрацией, сортировкой и полным CRUD, без собственного сервера. Дальше: Схема и типы полей рассказывает о каждом типе поля, доступном для вашего ресурса, а Параметры запроса — обо всём, что можно сделать со списковым эндпоинтом через URL.