Jak udělat dynamické příběhy ve Storybooku s GraphQL API?

Takže, pokud chceš udělat dynamické příběhy ve Storybooku s GraphQL, tak určitě začni s mockováním dat. Můžeš použít Apollo Client, ale klidně i nějakou jinou knihovnu jako MockedProvider od Apollo, což ti umožní snadno simulovat odpovědi z API. V Storybooku pak nastavíš globální decorator, který obalí tvé komponenty tímto mock providerem.

Můžeš si vytvořit různé varianty příběhů pomocí různých mock dat. Tím pádem můžeš testovat, jak komponenta reaguje na různé odpovědi z API, což je super pro ukázku v Storybooku. Nezapomeň na to, že bys měl mít vždycky nějaký defaultní stav nebo loading stav, aby to vypadalo realisticky.

Co se týče testování, můžeš použít jest a react-testing-library k otestování různých variant s mock daty. Takže když budeš mít mock data ve formátu, který potřebuješ, můžeš je pak snadno měnit a kontrolovat, jak se komponenta chová.

Taky se podívej na Storybook Addons jako je Storybook Knobs, díky kterým můžeš dynamicky měnit props a vidět výstup v reálném čase. Pomůže ti to ukázat variabilitu komponenty vůči různým datům z API.

Takhle bys měl být schopný skloubit Storybook s GraphQL docela efektivně.

Myslím, že nejlepší způsob, jak to udělat, je začít s mockováním dat. Storybook ti umožní používat příběhy, kde můžeš definovat různá data pro komponenty bez potřeby připojení k API. Můžeš třeba použít Apollo Client v kombinaci s nějakým mock serverem jako apollo-server nebo si vytvořit vlastní mock data přímo ve tvých příbězích.

Zkus vytvořit příběh, kde si definuješ "mock" data jako objekt a pak je předáš komponentě. Tak budeš mít reálné varianty bez nutnosti skutečného volání API. Pak se můžeš zaměřit na testování různých stavů komponenty – úspěch, chyba, loading atd.

Co se týče testování, můžeš si udělat pár různých variant příběhů s různými daty a tím pokrýt možné scénáře. Uvidíš, že to hodně pomáhá při vývoji a ladění komponent.

Pokud chceš vidět konkrétní příklady, doporučuji kouknout na GitHub repo projektů s Storybookem a GraphQL, tam najdeš spoustu inspirace jak to poskládat dohromady.

Pokud chceš udělat dynamické příběhy ve Storybooku s GraphQL, doporučuji začít s mockováním dat. Můžeš použít Apollo Client, ale pro Storybook to je často zbytečné. Lepší je použít nějakou knihovnu na mockování, třeba MockedProvider z Apollo, nebo si vytvořit vlastní mocky. Takže první krok by byl vytvořit mock dat, které odpovídají struktuře toho, co dostáváš z API. Pak můžeš napsat příběh pro komponentu a předat jí tyto mock data jako props.

Tady je příklad: v příběhu si udělej varianty s různými daty. Například jeden příběh může mít data pro prázdný stav a druhý pro plné, aby jsi viděl, jak se komponenta chová v různých situacích. Tím pádem si i usnadníš testování, protože snadno změníš data a uvidíš, jak komponenta reaguje. Až to bude fungovat, můžeš to pak lépe napojit na skutečné API v produkci.

Takže shrnuto: 1) udělej mocky 2) napiš příběhy s různými daty 3) testuj varianty. Díky tomu ti Storybook ukáže tvoje komponenty tak, jak budou v reálu. Hodně štěstí!