Avoir de la réactivité avec une API traditionnelle
Lorsque votre application autorise des interactions entre plusieurs utilisateurs (directement ou indirectement), il peut être envisagé d'avoir des mises à jour de la donnée en temps réel.
Cas avancé et plus complexe
J'ai une application bancaire et j'aimerais voir en temps réel dans mon application mon solde se mettre à jour si une transaction se produit. Il faut pour cela que votre backend notifie votre frontend des données à mettre à jour, ou tout simplement en envoyant un ordre similaire à "rejoue tes requêtes".
2 solutions s'offrent à vous :
- Qu'à son lancement le frontend se manifeste auprès du serveur pour maintenir un canal "de souscriptions en temps réel" (que ce soit une WebSocket ou du long-polling). Cela peut se faire directement avec la librairie tRPC que nous conseillons ;
- Il est aussi envisageable d'utiliser les Push notifications qui sont maintenant un standard mobile et web. À noter qu'elles font surtout sens pour permettre de notifier un utilisateur même lorsque l'application numérique n'est pas ouverte. Par exemple, si vous recevez un message dans votre applicatif, vous aurez une notification de votre navigateur web même si vous n'avez pas l'application ouverte. Pour cette solution précisément, il est recommandé d'utiliser un service connu pour la distribution des Push notifications afin de vous simplifier la gestion des envois (bien que cela rajoute un acteur tiers).
Cas standard et simple
Vous pouvez aussi apporter de la réactivité frontend sans avoir de notification de la part du backend. Techniquement cela paraît très "sommaire" mais c'est terriblement ingénieux. Quelques exemples :
- Je soumets un formulaire, les requêtes (queries) sont automatiquement rejouées et la page met à jour ses données sans rechargement visible. Si vous utilisez une base de données atomique, les données soumises apparaissent directement sans devoir mettre en place des patchs manuels de l'interface. Cela est possible car c'est le même client qui gère les queries et les mutations ;
- Je vais sur un autre onglet pendant X minutes, je reviens, et tous les getters sont rejoués ;
- L'application peut aussi explicitement forcer le rafraîchissement des données sans rechargement.
Cela est possible suivant le client HTTP que vous utilisez. Nous avons fait le choix de react-query qui est directement compatible avec tRPC. Sans configuration explicite on bénéficie des exemples cités.
Si vous n'avez pas d'API tRPC mais un format standard type OpenAPI, vous pouvez générer un client react-query grâce à des librairies comme openapi-codegen ou encore orval.