Схема және өріс түрлері

Ресурстың схемасы — өрістердің реттелген тізімі. Әр өрістің name, type мәні бар, ал түріне байланысты кішкене options жиынтығы болуы мүмкін. Өрістердің реті бір нақты себеп үшін маңызды: template өрісі тек сол тізімде өзінен бұрын тұрған өрісті сілтей алады — төмендегі template жолын қараңыз.

Өріс атаулары кіші әріптен басталуы керек және тек әріптерден, сандардан және астыңғы сызықтан тұруы керек. Ресурста ең көбі 30 өріс болуы мүмкін. Әр генерацияланған жазба автоматты түрде id мәнін де алып жүреді — сіз оны өзіңіз ешқашан анықтамайсыз, ал id деп атаған өрісіңіз нағыз id-дың пайдасына үнсіз еленбей қалады.

Анықтамалық кесте

template түрі

template — өз мәнін генерациялаудың орнына басқа өрістерді оқитын жалғыз түр. Оның template баптауы — жай ғана жол; онда {{fieldName}} кездескен жерде, ол толтырғыш fieldName деп аталған өрістің осы жазба үшін генерациялаған мәнімен алмастырылады. Бұл тек схемада бұрынырақ анықталған өрістер үшін жұмыс істейді — үлгі әлі жегілмеген өрісті сілтей алмайды. Кең тараған пайдалану жағдайы: схемада бұрынырақ firstName және lastName өрісі болса, кейінгі email өрісі байланыссыз мән генерациялаудың орнына "{{firstName}}.{{lastName}}@example.com" деген template өрісі болып, есімге сай email қалыптастыра алады.

Детерминизм, қысқаша

Әр өріс түрі осы жазбадағы басқа әрбір өріспен бірдей seed-делген псевдокездейсоқ тізбектен мән алады, сондықтан дәл сол схема, seed және жазба индексі әрдайым дәл сол жазбаны — өріс-өрісіне дейін — қайтарады. Механизмнің толық сипаттамасы Генерация қалай жұмыс істейді бетінде берілген; мұнда маңыздысы — өрістің баптауларын өзгерту тек сол өрістің болашақ шығысын өзгертеді, ал схемадағы өрістерді қайта реттеу немесе басқа жерге өріс қосу бар жазбаларға берілген id-лерді араластырмайды — id мәндері схеманың қалған бөлігінен тәуелсіз генерацияланады.

Ресурс деректерін алу

Осының бәрі деректерді қалай оқитыныңызды өзгертпейді — қандай өрістері болса да, әр ресурс дәл осылай оқылады:

const response = await fetch("https://mocklab.dev/m/demo7k2m9x/products");
const products = await response.json();

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

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

  return <pre>{JSON.stringify(products, null, 2)}</pre>;
}