El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Subscripcions de GraphQL

Següent ►
►

Les subscripcions de GraphQL permeten que els clients rebin actualitzacions en temps real des del servidor. Això és especialment útil per a aplicacions que necessiten actualitzacions instantànies, com ara aplicacions de xat, notificacions en temps real, o qualsevol altra aplicació que requereixi dades actualitzades contínuament.

Conceptes Clau

  1. Què són les subscripcions?

Les subscripcions són una operació de GraphQL que permet als clients subscriure's a esdeveniments específics al servidor. Quan es produeix un esdeveniment, el servidor envia les dades actualitzades als clients subscrits.

  1. Com funcionen les subscripcions?

Les subscripcions utilitzen WebSockets per mantenir una connexió oberta entre el client i el servidor. Això permet que el servidor enviï dades al client en temps real sense que el client hagi de fer sol·licituds repetides.

  1. Estructura d'una subscripció

Una subscripció de GraphQL té una estructura similar a una consulta o mutació, però utilitza la paraula clau subscription.

Exemple Pràctic

  1. Definició de l'esquema

Primer, definim una subscripció en el nostre esquema de GraphQL. Suposem que tenim una aplicació de xat i volem subscriure'ns a nous missatges.

type Message {
  id: ID!
  content: String!
  author: String!
}

type Subscription {
  messageAdded: Message
}

  1. Implementació del Resolver

A continuació, implementem el resolver per a la subscripció. Utilitzarem una biblioteca com graphql-subscriptions per gestionar les subscripcions.

const { PubSub } = require('graphql-subscriptions');
const pubsub = new PubSub();

const resolvers = {
  Subscription: {
    messageAdded: {
      subscribe: () => pubsub.asyncIterator(['MESSAGE_ADDED'])
    }
  }
};

// Quan s'afegeix un nou missatge, publiquem l'esdeveniment
function addMessage(message) {
  pubsub.publish('MESSAGE_ADDED', { messageAdded: message });
}

  1. Configuració del servidor

Per utilitzar subscripcions, necessitem configurar el nostre servidor per suportar WebSockets. Aquí utilitzem Apollo Server.

const { ApolloServer } = require('apollo-server');
const { makeExecutableSchema } = require('@graphql-tools/schema');
const { createServer } = require('http');
const { execute, subscribe } = require('graphql');
const { SubscriptionServer } = require('subscriptions-transport-ws');

const typeDefs = /* Definicions de tipus */;
const resolvers = /* Resolvers */;

const schema = makeExecutableSchema({ typeDefs, resolvers });

const server = new ApolloServer({ schema });

const httpServer = createServer(server);

server.listen().then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);

  new SubscriptionServer({
    execute,
    subscribe,
    schema
  }, {
    server: httpServer,
    path: '/graphql',
  });
});

  1. Client

Finalment, configurem el client per subscriure's a les actualitzacions. Utilitzarem Apollo Client.

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

const httpLink = /* Enllaç HTTP */;
const wsLink = new WebSocketLink({
  uri: `ws://localhost:4000/graphql`,
  options: {
    reconnect: true
  }
});

const splitLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  },
  wsLink,
  httpLink
);

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

// Subscripció a nous missatges
client.subscribe({
  query: gql`
    subscription {
      messageAdded {
        id
        content
        author
      }
    }
  `
}).subscribe({
  next(data) {
    console.log(data);
  }
});

Exercici Pràctic

Exercici 1: Subscripció a nous usuaris

  1. Definició de l'esquema: Afegeix una subscripció per a nous usuaris.
  2. Implementació del Resolver: Implementa el resolver per a la subscripció.
  3. Configuració del servidor: Assegura't que el servidor estigui configurat per suportar subscripcions.
  4. Client: Configura el client per subscriure's a nous usuaris.

Solució

  1. Definició de l'esquema:
type User {
  id: ID!
  name: String!
  email: String!
}

type Subscription {
  userAdded: User
}
  1. Implementació del Resolver:
const { PubSub } = require('graphql-subscriptions');
const pubsub = new PubSub();

const resolvers = {
  Subscription: {
    userAdded: {
      subscribe: () => pubsub.asyncIterator(['USER_ADDED'])
    }
  }
};

// Quan s'afegeix un nou usuari, publiquem l'esdeveniment
function addUser(user) {
  pubsub.publish('USER_ADDED', { userAdded: user });
}

  1. Configuració del servidor: Igual que en l'exemple anterior.

  2. Client:

client.subscribe({
  query: gql`
    subscription {
      userAdded {
        id
        name
        email
      }
    }
  `
}).subscribe({
  next(data) {
    console.log(data);
  }
});

Conclusió

Les subscripcions de GraphQL són una eina poderosa per a aplicacions que necessiten actualitzacions en temps real. Amb una configuració adequada del servidor i del client, podem implementar subscripcions de manera eficient i efectiva. Aquest mòdul ha cobert els conceptes bàsics, la implementació pràctica i un exercici per reforçar l'aprenentatge. En el següent mòdul, explorarem altres eines i l'ecosistema de GraphQL.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats