Jak začít s GraphQL subscriptions ve Vue?

Pro začátek s GraphQL subscriptions ve Vue bych doporučil použít Apollo Client, je to fakt jednoduchý a má dobrou dokumentaci. Nejprve si nainstaluj potřebné balíčky, třeba @apollo/client a graphql. Potom můžeš přidat WebSocket link pro subscriptions. Tady je příklad, jak to nastavit:

1. Vytvoř Apollo Client s WebSocket linkem:

 import \{ ApolloClient, InMemoryCache \} from '@apollo/client';
 import \{ WebSocketLink \} from '@apollo/client/link/ws';

const link = new WebSocketLink(\{
  uri: 'ws://tvůj-server/graphql',
  options: \{
    reconnect: true,
  \},
\});

const client = new ApolloClient(\{
  link,
  cache: new InMemoryCache(),
\});

2. V komponentách pak používáš useSubscription hook z Apollo:

 import \{ useSubscription \} from '@apollo/client';
 import \{ gql \} from 'graphql-tag';

const SUBSCRIPTION_QUERY = gql`
  subscription \{
    novinky \{
      id
      text
    \}
  \}
`;

 export default \{  
  setup() \{
    const \{ data, loading \} = useSubscription(SUBSCRIPTION_QUERY);
    return \{ data, loading \};
  \},
\};

3. Na serverové straně potřebuješ GraphQL server, co podporuje subscriptions, typicky pomocí knihoven jako Apollo Server nebo jiné.

Pokud používáš Vuex, tak můžeš ve svém Vuex store přijímat data ze subscriptions a aktualizovat stav aplikace. Je to celkem jednoduché – když dostaneš data v komponentě, tak je pošli do Vuex akce.

Pro ladění a optimalizaci výkonu se zaměř na minimalizaci počtu subscription a přemýšlej, co všechno opravdu potřebuješ dostávat v reálném čase. Zkus používat debouncing pro snížení zátěže.

Takže tohle je víceméně základ. Určitě si projdi dokumentaci k Apollo Clientu a GraphQL serverům. Hodně štěstí!

Pokud chceš začít s GraphQL subscriptions ve Vue, tak prvně si musíš nainstalovat Apollo Client a potřebné balíčky. To zahrnuje apollo-client, vue-apollo a apollo-link-ws pro websockety, což je klíčové pro subscriptions.

Na serverové straně budeš potřebovat GraphQL server, který podporuje subscriptions. Nejčastěji se používá Apollo Server nebo nějaký jiný server, co má websockety zapnuté. Když to máš všechno nastavené, tak v Apollo Clientu si nastavíš link na websockety, což ti umožní komunikaci.

Ve Vue komponentách pak můžeš použít Query a Subscription komponenty z vue-apollo. Třeba takhle:

 import \{ Subscription \} from 'vue-apollo';

 export default \{
  apollo: \{
    mySubscription: \{
      query: gql`subscription \{ myData \{ id name \} \}`,
      result(\{ data \}) \{
        // aktualizuj stav
      \}
    \}
  \}
\}

Pokud používáš Vuex, tak můžeš v callbacku subscription aktualizovat state v store. Je dobrý mít nějakou logiku pro správu unsubscribe, aby ti to nespotřebovávalo zbytečně zdroje.

Co se týče optimalizace a ladění, tak sleduj performance network requests a snaž se minimalizovat počet subscriptions. Dobré je mít jen ty nejdůležitější a k tomu používat caching tam, kde je to možné.

Jako osvědčený postup bych doporučil dobře si projít dokumentaci k Apollo Clientu a třeba i jejich příklady. Takže hodně štěstí!

Takže, jestli chceš začít s GraphQL subscriptions ve Vue, tak tady je pár tipů. Nejprv budeš potřebovat Apollo Client, takže ho nainstaluj pomocí npm: npm install @apollo/client graphql a nezapomeň na websocket link, třeba subscriptions-transport-ws. Taky si nainstaluj tohle balíček: npm install subscriptions-transport-ws.

Na serveru bys měl mít GraphQL server, co podporuje subscriptions (pokud používáš Apollo Server, ten to zvládá). Pak si nastav WebSocket link v Apollo Clientu. Můžeš to udělat v souboru, kde inicializuješ Apollo Client:

 import \{ ApolloClient, InMemoryCache \} from '@apollo/client';
 import \{ WebSocketLink \} from 'subscriptions-transport-ws';

const link = new WebSocketLink(\{
  uri: 'wss://tvůj-server/graphql',
  options: \{
    reconnect: true,
  \},
\});

const client = new ApolloClient(\{
  link,
  cache: new InMemoryCache(),
\});

Když máš nastavený client, tak ve svých Vue komponentách můžeš použít useSubscription nebo subscribeToMore, aby ses přihlásil k odběru dat. Třeba:

 import \{ useSubscription \} from '@apollo/client';

const \{ data, loading, error \} = useSubscription(YOUR_SUBSCRIPTION_QUERY);

Pokud používáš Vuex, můžeš v této části spravovat stav. Změny v datech z subscriptions pak můžeš commitnout do store. Je dobrý mít na paměti optimalizaci výkonu, třeba se vyhnout zbytečným re-renderům a snažit se minimalizovat počet subscription requests.

Co se týče ladění, můžeš využít Chrome dev tools na sledování síťových požadavků a zjistit, jak často se tvoje subscriptions aktualizují.

Hlavně nezapomeň mít server správně nastavený pro websockety a testuj vždycky i na reálných datech.