Jak začít s Apollo Client a TypeScript ve svém React projektu?

Když chceš začít s Apollo Client a TypeScriptem, tak prvně bys měl nainstalovat potřebný balíčky. Tedy @apollo/client a graphql. Měj na paměti, že pokud používáš TypeScript, je dobré mít i typy pro GraphQL, takže se můžeš podívat na graphql-tools nebo třeba graphql-code-generator, co ti pomůže generovat typy z tvého schématu.

Pak bys měl nastavit ApolloProvider kolem tvé aplikace, což vypadá nějak takhle:

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

const client = new ApolloClient(\{
  uri: 'tvůj-graphql-endpoint',
  cache: new InMemoryCache(),
\});

function App() \{
  return (
    \<ApolloProvider client=\{client\}\>
      \{/* tvoje komponenty */\}
    \</ApolloProvider\>
  );
\}

Co se týče typování dotazů a odpovědí, můžeš použít gql z Apollo k definici svých GraphQL dotazů a pak využít generované typy z graphql-code-generatoru. Takže místo psaní typů ručně si ušetříš spoustu práce.

Struktura složek záleží na tobě, ale obvykle se dává věci jako komponenty do složky components, dotazy do queries, apod. Taky je fajn mít nějakou složku pro typy. Předtím, než začneš psát komponenty, ujisti se, že máš hotové schéma a endpoint pro GraphQL.

Tady je pár užitečných odkazů:

• Oficiální dokumentace Apollo Client
• Návody na youtube k Apollo Client s TypeScriptem
• Příklad projektu na GitHubu s nastavením Apollo a TypeScript.

Takže to je takový základ, co určitě potřebuješ vědět. Držím palce!

Pro začátek s Apollo Client a TypeScript je dobré mít nainstalované potřebné balíčky. Takže nejdřív nainstaluj @apollo/client a graphql. Potom je potřeba nastavit ApolloProvider kolem tvé aplikace, aby mohl být Apollo Client dostupný v celém komponentovém stromu. Můžeš to udělat v index.js nebo App.js, něco jako:

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

const client = new ApolloClient(\{
  uri: 'https://tvuj-api-endpoint/graphql', // zadej správný endpoint
  cache: new InMemoryCache(),
\});

ReactDOM.render(
  \<ApolloProvider client=\{client\}\>
    \<App /\>
  \</ApolloProvider\>,
  document.getElementById('root')
);

Pokud jde o typování, tak je dobrý nápad používat GraphQL Code Generator, který ti vygeneruje typy pro dotazy a odpovědi. Ušetříš si tím spoustu práce s ručním psaním typů. Můžeš nastavit generátor tak, aby bral .graphql soubory a generoval .ts soubory s typy.

Pak můžeš používat hooky jako useQuery a useMutation, ty už automaticky budou mít typy podle toho, co jsi vygeneroval.

Struktura složek záleží na tobě, ale většinou je dobrý mít komponenty v components, dotazy v graphql, a nějakou složku pro typy třeba types.

Je důležitý mít backend nastavený tak, aby odpovídal na GraphQL dotazy – pokud tohle nebude chodit, tak se nikam neposuneš.

A odkazy? Určitě zkus podívat na dokumentaci Apollo Client a třeba i nějaké tutoriály na YouTube. Většinou tam najdeš i příklady kódu. Tak hodně štěstí!

Takže, s Apollo Client a TypeScriptem to není tak složitý, jak to vypadá. První krok je nainstalovat Apollo Client a potřebný balíček pro GraphQL. Můžeš použít npm nebo yarn:

npm install @apollo/client graphql

Pak, co se týče TypeScriptu, tak si určitě nastav typy pro Apollo. Tím se vyhneš většině problémů s typováním. Potom budeš mít ApolloProvider, což je nutné obalit celou aplikaci, aby ses dostal k Apollo Clientu. Takže něco jako:

 import \{ ApolloProvider \} from '@apollo/client';
 import \{ client \} from './apolloClient'; // Tady máš svůj Apollo Client

function App() \{
    return (
        \<ApolloProvider client=\{client\}\>
            \{/* Tvoje komponenty */\}
        \</ApolloProvider\>
    );
\}

Co se týče typování dotazů a odpovědí, můžeš použít graphql-codegen, což ti generuje typy přímo z tvého GraphQL schématu. To ti hodně ulehčí práci, protože pak máš typy automaticky bez ručního zadávání.

Struktura složek záleží na tobě, ale obvykle se dělí na komponenty, graphql (dotazy a mutace) a apollo (client apod.). Je dobrý mít to nějak přehledně.

Co se týče pozadí, ujisti se, že máš server s GraphQL ready, jinak to nebude fungovat. Koukni na tutoriály jako je ten od Apollo docs nebo nějaké YouTube videa – ty tě provedou základním setupem.

Takže shrnutí: nainstaluj balíčky, nastav ApolloProvider, použij graphql-codegen pro typy a pěkně si strukturovej složky. To by mělo být tak všechno, co potřebuješ na začátek.