Comment construire une application en temps réel avec des abonnements GraphQL sur Postgres

All Things GraphQL

19659007] Savez-vous tout ce que vous devez savoir sur GraphQL? Si vous avez des doutes, Eric Baer vous propose un guide détaillé sur ses origines, ses inconvénients et les bases de la manipulation. Lire l'article →

Avant de poursuivre la lecture de cet article, j'aimerais mentionner qu'une connaissance pratique des technologies (ou substituts) suivantes est bénéfique:

• ReactJS
  Cela peut être remplacé par n'importe quelle Frontend Framework, Android ou IOS en suivant la documentation de la bibliothèque cliente.
• Postgres
  Vous pouvez travailler avec d’autres bases de données, mais avec des outils différents, les principes exposés dans cet article s’appliqueront toujours.

Vous pouvez également adapter ce tutoriel. contexte pour les autres applications en temps réel très facilement.

Comme illustré par la charge graphique GraphQL en bas, trois fonctionnalités principales doivent être implémentées:

1. Récupérer la question du sondage et une liste d'options (en haut à gauche ).
2. Permettre à un utilisateur de voter pour une question de sondage donnée (bouton "Voter").
3. Récupérer les résultats du sondage en temps réel et les afficher dans un graphique à barres (en haut à droite; on peut masquer fonctionnalité permettant de récupérer une liste d’utilisateurs actuellement en ligne car c’est une réplique exacte de ce cas d’utilisation).

Création d'applications en temps réel

La création d'applications en temps réel (en particulier en tant que développeur frontend ou pour les personnes récemment transformées pour devenir des développeurs fullstack) est un problème technique difficile à résoudre.

C’est généralement ainsi que fonctionnent les applications en temps réel contemporaines (dans le contexte de notre exemple d’application):

1. L’interface met à jour une base de données avec certaines informations; Le vote d'un utilisateur est envoyé au serveur, c'est-à-dire un poll / option et des informations sur l'utilisateur ( user_id option_id ).
2. La première mise à jour déclenche un autre service qui agrège les données d'interrogation pour les rendre. une sortie qui est renvoyée à l'application en temps réel (à chaque fois qu'un nouveau vote est émis; si cela est fait efficacement, seules les données du sondage mis à jour sont traitées et seuls les clients abonnés à ce sondage sont mis à jour):
   • Les données de vote sont d'abord traitées par un service register_vote (supposons qu'une validation survienne ici) qui déclenche un service poll_results .
   • Les données de sondage agrégées en temps réel sont relayées par le service poll_results pour l'interface d'affichage des statistiques globales

Ce modèle est dérivé d'une approche traditionnelle de construction d'API et présente par conséquent des problèmes similaires:

1. L'une des étapes séquentielles pourrait mal tourner, laissant l'UX suspendue et affectant d'autres opérations indépendantes.
2. Nécessite beaucoup de choses. effort sur la couche API en tant que point de contact unique pour l’application frontale, qui interagit avec plusieurs services. Elle doit également implémenter une API en temps réel basée sur les websockets – il n'existe pas de norme universelle pour cela et ne supporte donc que l'automatisation des outils.
3. L'application frontend est requise pour ajouter la plomberie nécessaire à la consommation en temps réel. L’API et peuvent également devoir résoudre le problème de cohérence des données généralement rencontré dans les applications en temps réel (moins important dans notre exemple choisi, mais essentiel pour la commande des messages dans une application de discussion en temps réel).
4. De nombreuses implémentations recourent davantage bases de données relationnelles côté serveur (Firebase, etc.) pour une prise en charge facile des API en temps réel.

Voyons comment GraphQL et les outils associés répondent à ces défis.

Qu'est-ce que GraphQL?

GraphQL est une spécification pour un langage de requête pour les API et un environnement d'exécution côté serveur pour l'exécution de requêtes. Cette spécification a été développée par Facebook pour accélérer le développement d'applications et fournir un format d'accès aux données normalisé et indépendant de la base de données. Tout serveur GraphQL conforme aux spécifications doit prendre en charge les éléments suivants:

1. Requêtes pour les lectures
   Un type de requête permettant de demander des données imbriquées à une source de données (pouvant être une ou une combinaison d'une base de données, une API REST ou un autre schéma / serveur GraphQL).
2. Mutations pour les écritures
   Un type de demande pour l’écriture / le transfert de données dans les sources de données susmentionnées.
3. Abonnements pour les requêtes en temps réel
   Un type de demande auquel les clients peuvent s’abonner. mises à jour en temps réel.

GraphQL utilise également un schéma typé. L’écosystème contient de nombreux outils qui vous aident à identifier les erreurs au moment de la compilation / développement, ce qui réduit le nombre de bogues d’exécution.

Voici pourquoi GraphQL est idéal pour les applications en temps réel:

• Les requêtes en temps réel (souscriptions) sont une partie implicite de la spécification GraphQL. Tout système GraphQL doit disposer de fonctionnalités natives d'API en temps réel.
• Une spécification standard pour les requêtes en temps réel a consolidé les efforts de la communauté autour des outils côté client, offrant ainsi un moyen très intuitif d'intégration avec les API GraphQL.

GraphQL et une combinaison d'outils open source pour les événements de base de données et de fonctions cloud / sans serveur constituent un excellent substrat pour la création d'applications cloud natives avec une logique métier asynchrone et des fonctionnalités temps réel faciles à créer et à gérer. Ce nouveau paradigme se traduit également par une grande expérience des utilisateurs et des développeurs.

Dans la suite de cet article, je vais utiliser des outils open source pour créer une application basée sur ce diagramme d'architecture:

Création d'une application de vote / vote en temps réel

Avec cette introduction à GraphQL, revenons à la création de l'application de vote telle que décrite dans la première section

Les trois fonctionnalités (ou récits mis en évidence) ont été choisis.

1. Requête
   Récupère la question du sondage et ses options.
2. Mutation
   Permet à un utilisateur de voter.
3. Abonnement
4. 19659010] Afficher un tableau de bord en temps réel pour les résultats du sondage.

Prérequis

• Un compte Heroku (utilisez le niveau gratuit, aucune carte de crédit requise)
  Pour déployer un serveur GraphQL (voir le point ci-dessous) et une instance de Postgres
• Hasura GraphQL Engine . ] (gratuit, open-source) /> Serveur GraphQL prêt à l’emploi sur Postgres
• Apollo Client (SDK gratuit et à code source ouvert)
  Permet d’intégrer facilement les applications des clients à un serveur GraphQL.
• npm (gestionnaire de paquets libre et open-source)
  Pour exécuter notre application React

Déploiement de la base de données et d'un backend GraphQL

Nous déploierons une instance de Postgres et de GraphQL Engine chacun. Le niveau gratuit de Heroku. Vous pouvez utiliser un bouton astucieux Heroku pour le faire d'un simple clic.

Note: Vous pouvez également suivre ce lien ou rechercher pour la documentation Déploiement de Hasura GraphQL pour Heroku (ou d’autres plates-formes).

Vous n'aurez besoin d'aucune configuration supplémentaire et vous pouvez simplement cliquer sur le bouton “Déployer l'application”. Une fois le déploiement terminé, notez l'URL de l'application:

 .herokuapp.com

Par exemple, dans la capture d'écran ci-dessus, il s'agirait de:

 hge-realtime-app-tutorial.herokuapp.com

Nous avons jusqu’à présent déployé une instance de Postgres (en tant qu’add-on dans le langage de Heroku) et une instance de GraphQL Engine configurée pour utiliser cette instance de Postgres. De ce fait, nous avons maintenant une API GraphQL prête à l’emploi, mais comme nous n’avons pas de tables ni de données dans notre base de données, cela n’est pas encore utile. Nous allons donc aborder cela immédiatement.

Modélisation du schéma de base de données

Le diagramme de schéma suivant capture un schéma de base de données relationnelle simple pour notre application de sondage:

Comme vous pouvez le constater, le schéma est simple, normalisé et exploite les contraintes de clé étrangère. Ce sont ces contraintes qui sont interprétées par le moteur GraphQL comme des relations 1: 1 ou 1: plusieurs (par exemple, poll: options: est une relation 1: plusieurs puisque chaque interrogation aura plus d'une option liée par la contrainte de clé étrangère entre la colonne id de la table poll et la colonne poll_id dans la table option ). Les données associées peuvent être modélisées sous forme de graphique et peuvent donc alimenter une API GraphQL. C'est précisément ce que fait le moteur GraphQL.

Sur la base de ce qui précède, nous devrons créer les tables et contraintes suivantes pour modéliser notre schéma:

1. Poll
   Un tableau permettant de saisir la question du sondage. .
2. Option
   Options pour chaque vote.
3. Vote
   Pour enregistrer le vote d'un utilisateur.
4. Contrainte de clé étrangère entre les champs suivants (]: colonne ):
   • option: poll_id → poll: id
   • vote: poll_id → sondage: id
   • vote: created_by_user_id → utilisateur: id

   ]

Maintenant que nous avons notre conception de schéma, implémentons-la dans notre base de données Postgres. Pour apporter instantanément ce schéma, voici ce que nous allons faire:

1. Téléchargez l'interface de ligne de commande GraphQL Engine.
2. Clonez ce repo:

    $ git clone clone https://github.com / hasura / graphql-engine
   
   $ cd graphql-engine / communauté / exemples / realtime-poll  

3. Allez à hasura / et modifiez config.yaml :

    critère: https: //  .herokuapp.com  

4. Appliquez les migrations à l'aide de la CLI, à partir du répertoire du projet (que vous venez de télécharger par clonage):

    $ hasura migrate apply  

C’est tout pour le backend. Vous pouvez maintenant ouvrir la console GraphQL Engine et vérifier que toutes les tables sont présentes (la console est disponible à l'adresse suivante: https: // .herokuapp.com / console ).

Note : Vous auriez également pu utiliser la console pour implémenter le schéma en créant des tables individuelles, puis en ajoutant des contraintes à l'aide d'une interface utilisateur. L'utilisation de la prise en charge intégrée pour les migrations dans GraphQL Engine n'est qu'une option pratique, car notre exemple de référentiel permet des migrations permettant d'afficher les tables requises et de configurer les relations / contraintes (ceci est également vivement recommandé, que vous créiez un passe-temps ou non. projet ou une application prête à la production).

Intégration de l’application Frontend React dans le backend GraphQL

L’intérieur de ce didacticiel est une application simple qui affiche une question de sondage, une option de vote et les résultats globaux du sondage. dans un endroit. Comme je l'ai mentionné plus tôt, nous allons d'abord nous concentrer sur l'exécution de cette application afin que vous obteniez la gratification immédiate de l'utilisation de notre API GraphQL récemment déployée. Découvrez comment les concepts de GraphQL que nous avons examinés plus haut dans cet article permettent d'alimenter les différents cas d'utilisation d'une telle application. , puis explorez comment l’intégration de GraphQL fonctionne sous le capot.

REMARQUE: Si vous êtes nouveau dans ReactJS, vous pouvez vouloir vérifier certains de ces articles . Nous n'entrerons pas dans les détails de la partie React de l'application, mais nous nous concentrerons davantage sur les aspects GraphQL de l'application. Vous pouvez vous reporter au code source dans le référentiel pour plus de détails sur la manière dont l'application React a été construite .

Configuration de l'application Frontend

1. Dans le référentiel cloné dans la section précédente, modifiez le modèle . dans le fichier src / apollo.js (dans le dossier / community / examples / realtime-poll ) et définissez-le sur l'URL de l'application Heroku depuis le haut:

   . Export const HASURA_GRAPHQL_ENGINE_HOSTNAME = 'chaîne- aléatoire-123.herokuapp.com';  

2. Accédez à la racine du dossier repository / app ( / realtime-poll / ) et utilisez npm pour installer les modules requis, puis exécutez l'application:

    $ npm install
   
   $ npm start
   

Vous devriez pouvoir jouer avec l'application maintenant. Allez-y et votez autant de fois que vous le souhaitez, vous remarquerez que les résultats changent en temps réel. En fait, si vous configurez une autre instance de cette interface utilisateur et la dirigez vers le même backend, vous pourrez voir les résultats agrégés sur toutes les instances.

Comment cette application utilise-t-elle GraphQL?

Dans les coulisses: GraphQL

Dans cette section, nous allons explorer les fonctionnalités de GraphQL qui sous-tendent l’application, puis une démonstration de la facilité d’intégration dans la prochaine.

Graphique de résultats agrégés

Composant de sondage situé en haut à gauche qui récupère un sondage avec toutes ses options et capture le vote d'un utilisateur dans la base de données. Ces deux opérations sont effectuées à l'aide de l'API GraphQL. Pour récupérer les détails d’un sondage, nous effectuons une requête (rappelez-vous de l’introduction de GraphQL?):

 query {
  sondage {
    identifiant
    question
    options {
      identifiant
      texte
    }
  }
}

En utilisant le composant Mutation de react-apollo nous pouvons câbler la mutation à un formulaire HTML tel que la mutation soit exécutée à l'aide de variables optionId et userId ] lorsque le formulaire est soumis:

 vote de mutation ($ optionId: uuid !, $ userId: uuid!) {
  insert_vote (objets: [{option_id: $optionId, created_by_user_id: $userId}]) {
    retournant {
      identifiant
    }
  }
}

Pour afficher les résultats du sondage, nous devons dériver le nombre de votes par option à partir des données du tableau des votes. Nous pouvons créer une vue Postgres et la suivre à l'aide de GraphQL Engine pour rendre ces données dérivées disponibles via GraphQL.

 CREATE VIEW poll_results AS
 SELECT poll.id AS poll_id, o.option_id, count (*) AS votes
 FROM ((SELECT vote.option_id, option.poll_id, option.text
   DE (vote
          JOINT GAUCHE
      public.option ON ((option.id = vote.option_id)))) o
 
           LEFT JOIN RELEVE SUR ON ((poll.id = o.poll_id)))
 GROUP BY poll.question, o.option_id, poll.id;

La ​​vue poll_results associe les données des tableaux vote et poll afin de fournir un décompte global du nombre de votes pour chaque option.

Utilisation des abonnements GraphQL Sur cette vue, réagit-google-charts et le composant d'abonnement de réagit-apollo nous pouvons câbler un diagramme réactif mis à jour en temps réel lorsqu'un nouveau vote se produit, quel que soit le client.

 subscription getResult ($ pollId: uuid!) {
  poll_results (où: {poll_id: {_eq: $ pollId}}) {
    option {
      identifiant
      texte
    }
    votes
  }
}

Intégration de l'API GraphQL

Comme je l'ai mentionné précédemment, j'ai utilisé Apollo Client, un SDK à code source ouvert permettant d'intégrer une application ReactJS au backend de GraphQL. Apollo Client est analogue à n'importe quelle bibliothèque client HTTP telle que les demandes de python le module standard http pour JavaScript etc. Il encapsule les détails de la création d'une requête HTTP (dans ce cas, les requêtes POST). Il utilise la configuration (spécifiée dans src / apollo.js ) pour effectuer des demandes de requête / mutation / abonnement (spécifiées dans src / GraphQL.jsx avec la possibilité d'utiliser des variables pouvant être substitué dynamiquement dans le code JavaScript de votre application REACT) à un noeud final GraphQL. Il utilise également le schéma typé derrière le noeud final GraphQL pour fournir une validation de compilation / dev pour les demandes susmentionnées. Voyons à quel point il est facile pour une application cliente de faire une requête de requête en direct (souscription) à l'API GraphQL.

Configuration du SDK

Le SDK Apollo Client doit être dirigé vers un serveur GraphQL. peut automatiquement gérer le code standard généralement requis pour une telle intégration. C’est donc exactement ce que nous avons fait lorsque nous avons modifié src / apollo.js lors de la configuration de l’application frontale

Création d’une demande d’abonnement GraphQL (Live-Query)

Définir l’abonnement recherché. Dans la section précédente du fichier src / GraphQL.jsx :

 const SUBSCRIPTION_RESULT = `
abonnement getResult ($ pollId: uuid!) {
  poll_results (
    order_by: option_id_desc,
    où: {poll_id: {_eq: $ pollId}}
  ) {
    option_id
    option {id text}
    votes
  }
} `;

Nous utiliserons cette définition pour câbler notre composant React:

 export const Result = (pollId) => (
  
    {({chargement, erreur, données}) => {
       if (chargement) return 
 Chargement ... 
;
       if (error) return 
 Erreur: 
;
       revenir (
         

           

              {renderChart (data)}
           
         
       );
    }}
  
)
 

Une chose à noter ici est que l'abonnement ci-dessus aurait également pu être une requête. Le simple fait de remplacer un mot-clé par un autre nous donne une «requête en direct», ce qui suffit pour que le SDK Apollo Client connecte cette API en temps réel à votre application. Chaque fois qu’un nouveau jeu de données provient de notre requête en temps réel, le SDK déclenche un re-rendu de notre graphique avec ces données mises à jour (à l’aide de l’appel renderChart (data) ). C'est tout. C’est aussi simple que cela!

Final Thoughts

En trois étapes simples (création d’un backend GraphQL, modélisation du schéma de l’application et intégration de l’interface frontale avec l’API GraphQL), vous pouvez connecter rapidement un réel entièrement fonctionnel. -time application, sans se perdre dans des détails inutiles tels que la configuration d'une connexion websocket. C’est vrai que les outils communautaires permettent de créer une abstraction telle que GraphQL.

Si vous avez trouvé cela intéressant et que vous souhaitez explorer GraphQL plus avant pour votre prochain projet ou application de production, voici quelques facteurs que vous voudrez peut-être utiliser pour: Création de votre chaîne d’outils GraphQL:

• Performances et évolutivité
  GraphQL est destiné à être consommé directement par les applications frontales (ce n’est pas mieux qu’un ORM en arrière-plan; de ce fait, elle apporte de réels avantages en termes de productivité). Par conséquent, vos outils doivent être intelligents pour utiliser efficacement les connexions de base de données et pouvoir évoluer sans effort.
• Sécurité
  Il découle de ce qui précède qu’un système de contrôle d’accès évolué, basé sur des rôles, est nécessaire pour autoriser l’accès aux données. [19659011] Automatisation
  Si vous débutez dans l'écosystème GraphQL, l'écriture manuscrite d'un schéma GraphQL et la mise en œuvre d'un serveur GraphQL peuvent sembler une tâche ardue. Maximisez l'automatisation de vos outils afin de pouvoir vous concentrer sur des tâches importantes telles que la création de fonctionnalités frontales centrées sur l'utilisateur.
• Architecture /> Aussi triviales que puissent paraître les efforts ci-dessus, une architecture dorsale d'application de niveau production peut impliquer des fonctionnalités avancées. Les concepts GraphQL tels que l'agencement de schéma, etc. De plus, la possibilité de générer / consommer facilement des API en temps réel ouvre la possibilité de créer des applications réactives asynchrones, résilientes et évolutives. Par conséquent, il est essentiel d’évaluer la manière dont les outils GraphQL peuvent rationaliser votre architecture.

Ressources liées

• Vous pouvez consulter une version en direct de l'application sur ici .
• Le code source complet est disponible sur GitHub .
• Si vous souhaitez explorer le schéma de base de données et exécuter des requêtes de test GraphQL, vous pouvez le faire sur ici .