Integrace Storybooku s Apollo Client pro GraphQL aplikace

Úvod: Proč je Storybook skvělý nástroj pro GraphQL aplikace

V dnešním světě webového vývoje se neustále setkáváme s novými nástroji a technologiemi, které nám usnadňují práci a zrychlují proces vývoje. Mezi nimi vyniká Storybook, revoluční nástroj, který nám umožňuje snadno vytvářet a testovat komponenty UI izolovaně od naší aplikace. Ale co když pracujete s Apollo Client pro GraphQL? Jak tyto dva mocné nástroje zkombinovat, aby váš pracovní proces byl ještě efektivnější? V tomto článku se podíváme na integraci Storybooku s Apollo Clientem krok za krokem.

Co je to Storybook?

Pokud jste o Storybooku ještě neslyšeli, je to open-source nástroj, který vám umožňuje vyvíjet komponenty uživatelského rozhraní (UI) v izolaci od zbytku vaší aplikace. Můžete tak snadno testovat různé stavy komponentů, což výrazně usnadňuje spolupráci mezi designéry a vývojáři. Bez ohledu na to, zda používáte React, Vue nebo Angular, Storybook vám poskytuje vizuální platformu pro správu vašich komponentů.

Co je Apollo Client?

Apollo Client je mocný nástroj pro správu dat v aplikacích využívajících GraphQL. Umožňuje efektivně komunikovat se serverem a spravovat data v klientské části aplikace. S Apollo Clientem můžete nejen provádět dotazy a mutace, ale také cachovat data a automaticky aktualizovat uživatelské rozhraní při změnách dat.

Proč kombinovat Storybook s Apollo Clientem?

Kombinací Storybooku a Apollo Clientu získáte nejefektivnější workflow pro vývoj vašich GraphQL aplikací. Můžete testovat své UI komponenty s reálnými daty z GraphQL serveru bez nutnosti spouštět celou aplikaci. To urychluje vývojové cykly a umožňuje snadné ladění.

Krok 1: Nastavení vašeho projektu

Než se pustíme do integrace Storybooku s Apollo Clientem, ujistěte se, že máte nainstalovány potřebné balíčky. Začněte novým projektem React (nebo jiným frameworkem podle vašeho výběru) a nainstalujte Storybook:

npx sb init

Tímto příkazem vytvoříte základní strukturu pro váš projekt ve Storybooku.

Nyní nainstalujte Apollo Client:

npm install @apollo/client graphql

Tímto máte připravené všechny potřebné knihovny pro práci s GraphQL pomocí Apollo Clientu.

Krok 2: Nastavení Apollo Provideru

Dalším důležitým krokem je nastavit Apollo Provider. Tento provider bude obklopovat vaše komponenty v rámci Storybooku, aby měly přístup k Apollo Clientovi. Vytvořte soubor ApolloProvider.js ve složce src:

 import React from 'react';
 import \{ ApolloClient, InMemoryCache, ApolloProvider \} from '@apollo/client';

const client = new ApolloClient(\{
  uri: 'https://your-graphql-endpoint.com/graphql',
  cache: new InMemoryCache(),
\});

const CustomApolloProvider = (\{ children \}) =\> \{
  return \<ApolloProvider client=\{client\}\>\{children\}\</ApolloProvider\>;
\};

 export default CustomApolloProvider;

Tento provider zajistí, že všechny vaše komponenty budou mít přístup k datům z GraphQL serveru.

Krok 3: Vytvoření příběhu pro komponenty

Nyní je čas vytvořit příběh (story) pro jednu z vašich komponent. Řekněme, že máme komponentu UserList, která zobrazuje seznam uživatelů. Vytvořte soubor UserList.stories.js ve složce src/components:

 import React from 'react';
 import UserList from './UserList';
 import CustomApolloProvider from '../ApolloProvider';
 import \{ MockedProvider \} from '@apollo/client/testing';
 import \{ GET_USERS \} from './queries';

const mocks = [
  \{
    request: \{ query: GET_USERS \},
    result: \{
      data: \{
        users: [
          \{ id: 1, name: 'Alice' \},
          \{ id: 2, name: 'Bob' \},
        ],
      \},
    \},
  \},
];

 export default \{
  title: 'UserList',
  component: UserList,
\};

 export const Default = () =\> (
  \<MockedProvider mocks=\{mocks\} addTypename=\{false\}\>
    \<UserList /\>
  \</MockedProvider\>
);

V tomto příběhu jsme použili MockedProvider ze @apollo/client/testing, abychom mohli simulovat odpovědi z GraphQL API bez nutnosti skutečného dotazu na server.

Krok 4: Spuštění Storybooku a testování komponentů

Nyní byste měli být schopni spustit Storybook:

npm run storybook

v prohlížeči se vám otevře okno Storybooku, kde uvidíte vaši komponentu UserList. Tímto způsobem můžete snadno testovat různé stavy vaší komponenty s různými mockovanými daty.

Krok 5: Pokročilé techniky – Dynamické dotazy a interakce

Jakmile máte základní integraci hotovou, můžete začít experimentovat s pokročilejšími technikami. Například můžete simulovat různé scénáře interakcí uživatelů nebo dynamické dotazy na základě vstupních parametrů. Můžete také použít useQuery a propasírovat proměnnou do mockovaných dat:

 export const WithVariable = () =\> (
  \<MockedProvider mocks=\{[\{ request: \{ query: GET_USERS, variables: \{ limit: 5 \} \}, result: \{ data: \{ users: [...yourDataHere] \} \} \}]\}\> \
\\<UserList limit=\{5\} /\>\r\\</MockedProvider\>")
a tímto způsobem otestujete chování vaší komponenty na základě různých vstupních hodnot.