Тез баштоо

Бул эч нерседен чыныгы, өз колдонмоңуздан чакыра турган эндпоинтке чейинки эң кыска жолду көрсөтөт. Болжол менен беш мүнөт талап кылынат.

1. Аккаунт түзүү

/register барагында email жана сырсөз менен катталыңыз. Дашбордго түшөсүз — ал азырынча бош, анткени сиз али долбоор түзө элексиз.

2. Долбоор түзүү

Долбоор — жөн эле namespace: ал бир же бир нече ресурсту камтыйт жана анын ар бир эндпоинт URL'унда пайда болуучу keyге ээ. New project баскычын басыңыз, ага ат бериңиз, ошондо MockLab сиз үчүн кокус долбоор ачкычын генерациялайт — demo7k2m9x сыяктуу бир нерсе. Бул ачкычты өзүңүз эч качан тандабайсыз; ал сиздин эндпоинт URL'уңуз долбоордун атынан божомолдонбошу үчүн бар.

3. Ресурс түзүү

Долбооруңуздун ичинде ресурс түзүп, ага ат бериңиз — мисалы, products. Ресурс — бир схема: ар бири өз түрүнө ээ талаалардын тизмеси. Сынап көрүү үчүн үч талаа кошуңуз:

Сиз кошкон ар бир талаа так ошол эле экрандагы live алдын ала көрүү таблицасын жаңылайт, ошондуктан клиенттик код жаза электе эле чыныгы генерацияланган саптарды көрө аласыз. 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 }

TanStack Query менен React компонентинде так ошол эле чакыруу мындай көрүнөт:

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>
  );
}

Ушул эле — өзүңүздүн серверсиз эле, пагинация, чыпкалоо, иреттөө жана толук CRUD менен иштеген чыныгы REST ресурсу. Мындан ары: Схема жана талаа түрлөрү ресурсуңуз үчүн жеткиликтүү бардык талаа түрлөрүн камтыйт, ал эми Сурам параметрлери тизме эндпоинтине URL аркылуу жасай турган бардык нерсени камтыйт.