GraphQL est désormais le choix dominant pour le développement d'API. Il permet aux clients de demander exactement les données dont ils ont besoin - ni plus, ni moins. Cela change la donne par rapport aux API précédentes.
Avant GraphQL, SOAP et REST dominaient le développement d'API à différentes époques. SOAP était trop complexe et lourd, tandis que REST a résolu ces problèmes mais avait encore des problèmes de données non concordantes. GraphQL a été créé spécifiquement pour résoudre ces points douloureux.
Avec la popularité croissante de GraphQL, les développeurs avaient besoin de meilleurs outils pour faciliter le développement. Apollo est apparu pour fournir des solutions GraphQL complètes, notamment le client, le serveur et le support d'outils. Cela rend GraphQL beaucoup plus facile à apprendre et à adopter.
En simplifiant la courbe d'apprentissage de GraphQL, Apollo a alimenté sa prolifération. Apollo joue un rôle important dans l'écosystème GraphQL, permettant aux développeurs de créer des API plus efficacement.
Qu'est-ce qu'Apollo GraphQL
Apollo est une boîte à outils conçue spécialement pour GraphQL. Il offre un moyen d'extraire des données de différentes sources et de les rassembler de manière unifiée. Avec Apollo GraphQL, les développeurs peuvent créer des applications efficaces et rationalisées. Ses outils gèrent des tâches complexes et simples, garantissant que travailler avec GraphQL est une expérience fluide du début à la fin.
Architecture d'Apollo GraphQL
Apollo est un ensemble complet d'outils et de bibliothèques conçus pour aider les développeurs à créer, gérer et faire évoluer des applications avec GraphQL. En fournissant des solutions client et serveur, Apollo rationalise l'interrogation et la mutation des données, rendant le développement d'applications GraphQL efficace et convivial pour les développeurs. L'architecture d'Apollo comprend Client, Serveur et Fédération
Client Apollo GraphQL
Apollo Client est une bibliothèque de gestion d'état pour JavaScript qui vous permet de gérer les données locales et distantes avec GraphQL. Il s'intègre de manière transparente à toute bibliothèque frontale JavaScript, telle que React ou Vue, et permet la mise en cache, les mises à jour optimistes de l'interface utilisateur et les données en temps réel via des abonnements.
Exemple:
import { ApolloClient, InMemoryCache } from '@apollo/client';
// This sets up the connection to your server.
const client = new ApolloClient({
uri: 'http://localhost:4000/',
cache: new InMemoryCache()
});
Serveur Apollo GraphQL
Apollo Server est un intermédiaire entre votre schéma GraphQL et les sources de données (telles que les bases de données ou les API REST). Il offre une configuration facile, ce qui permet de connecter facilement les API, de définir le schéma et d'écrire des fonctions de résolution.
Exemple:
const { ApolloServer } = require('apollo-server');
const typeDefs = `
type Query {
hello: String
}
`;
const resolvers = {
Query: {
hello: () => "Hello, world!"
}
};
const server = new ApolloServer({ typeDefs, resolvers });
server.listen(); // This starts our server.
Fédération Apollo GraphQL
La fédération est une fonctionnalité d'Apollo GraphQL Server qui permet à plusieurs services d'implémentation de composer un seul graphe de données. Elle vous permet de diviser votre API GraphQL monolithique en services plus petits et plus faciles à gérer sans perdre la commodité de tout interroger via un seul point de terminaison.
Avantages de la fédération GraphQL Apollo
- Évolutivité : Divisez votre couche GraphQL en plusieurs services. Au fur et à mesure que votre équipe ou votre projet se développe, vous pouvez diviser votre graphe sans surcharger un seul point.
- Vitesse de développement : Les équipes peuvent travailler sur des services individuels sans en affecter d'autres, ce qui permet des itérations plus rapides.
- Réutilisabilité : Les services communs peuvent être réutilisés dans différentes parties d'une organisation, réduisant ainsi la redondance.
- Accès unifié : Pour le client, il s'agit toujours d'un seul point de terminaison. Ils ne remarqueront pas la différence entre l'interrogation d'un service ou de cinq.
Exemple:
const { ApolloServer, gql } = require('apollo-server');
const { buildFederatedSchema } = require('@apollo/federation');
const typeDefs = gql`
type Query {
hello: String
}
`;
const resolvers = {
Query: {
hello: () => "Hello from federated server!"
}
};
const server = new ApolloServer({
schema: buildFederatedSchema([{ typeDefs, resolvers }])
});
server.listen(); // This starts our federated server.
Plongée en profondeur dans Apollo GraphQL Client
Apollo Client est un outil puissant qui aide les applications à communiquer avec les serveurs GraphQL, rendant la récupération de données efficace et simple. Il offre des solutions aux problèmes courants, comme la mise en cache et la gestion d'état. Approfondissons.
Comment Apollo GraphQL Client facilite la récupération de données
Avec les requêtes HTTP régulières, la récupération de données peut être fastidieuse, impliquant la configuration des points de terminaison et l'analyse des réponses. Apollo Client simplifie cela.
Étapes de base pour récupérer des données avec Apollo Client :
Configuration : Tout d'abord, vous devez configurer Apollo Client en le pointant vers votre serveur.
import { ApolloClient, InMemoryCache } from '@apollo/client';
const client = new ApolloClient({
uri: 'http://localhost:4000/graphql',
cache: new InMemoryCache()
});
Écrire une requête : Utilisez le langage de requête de GraphQL pour spécifier les données dont vous avez besoin.
import { gql } from '@apollo/client';
const GET_DATA = gql`
{
myData {
name
age
}
}
`;
Récupérer : Utilisez la requête pour demander des données au serveur.
client.query({ query: GET_DATA }).then(response => {
console.log(response.data.myData);
});
La réponse contiendra précisément le nom et l'âge, ni plus ni moins, assurant un transfert de données efficace.
Gestion de l'état local avec Apollo Client
Apollo GraphQL Client n'est pas seulement destiné aux données du serveur ; il peut également gérer les données locales, ce qui en fait une source unique de vérité pour toutes les données de votre application.
Champs locaux : Ajoutez des champs côté client uniquement aux données de votre serveur.
const GET_DATA_WITH_LOCAL_FIELD = gql`
{
myData {
name
age
isFavorite @client
}
}
`;
La directive @client indique à Apollo Client que isFavorite est un champ local.
Résolveurs locaux : Gérer les actions sur les données côté client.
const resolvers = {
Mutation: {
toggle: (_, { id }, { cache }) => {
const data = cache.readFragment({
fragment: gql`fragment favorite on Data { isFavorite }`,
id
});
data.isFavorite = !data.isFavorite;
cache.writeData({ id, data });
return data;
},
},
};
En utilisant des résolveurs, vous pouvez manipuler l'état local comme vous le feriez avec les données du serveur.
Stratégies de mise en cache pour les performances
La récupération de données à partir d'un serveur prend du temps, mais la mise en cache d'Apollo Client permet d'accélérer les choses. Voici comment :
- Mise en cache automatique : Chaque réponse de votre serveur GraphQL est automatiquement stockée. Ainsi, si vous demandez à nouveau les mêmes données, Apollo Client peut les obtenir à partir du cache au lieu du serveur.
- Cache normalisé : Apollo Client ne se contente pas de stocker aveuglément les données. Il décompose vos réponses en objets individuels et les stocke par type et ID. Cette approche évite la redondance et maintient le cache synchronisé.
- Stratégies de cache : Apollo Client vous permet de décider comment récupérer les données du cache, du serveur ou des deux.
Avec des stratégies comme cache-first, network-only et cache-and-network, vous pouvez affiner les performances de votre application.
Maîtriser Apollo GraphQL Server
Apollo Server fournit un environnement robuste pour aider les développeurs à implémenter un serveur GraphQL. De la configuration des bases à la plongée en profondeur dans les fonctionnalités avancées, la maîtrise d'Apollo Server est essentielle pour des implémentations GraphQL efficaces.
Principes de base de la configuration d'Apollo Server
La base de tout projet Apollo Server commence par sa configuration.
Installation : Commencez par installer les packages requis :
npm install apollo-server graphql
Initialiser Apollo GraphQL Server :
const { ApolloServer } = require('apollo-server');
const typeDefs = /*...*/; // your schema definition
const resolvers = /*...*/; // your resolver functions
const server = new ApolloServer({ typeDefs, resolvers });
server.listen().then(({ url }) => {
console.log(`Server ready at ${url}`);
});
Définition des schémas et des résolveurs GraphQL
Chaque serveur GraphQL a besoin d'un schéma pour définir la forme de son API et de résolveurs pour gérer les requêtes de données.
Schéma GraphQL : Décrivez la structure de vos données.
const { gql } = require('apollo-server');
const typeDefs = gql`
type Query {
hello: String
}
`;
Résolveurs : Définissez comment les données sont récupérées ou modifiées.
const resolvers = {
Query: {
hello: () => 'Hello, world!',
},
};
Lorsqu'un client envoie une requête pour récupérer hello, le serveur répondra par "Hello, world!".
L'écosystème avancé d'Apollo GraphQL
Apollo a dépassé les limites d'un simple outil d'implémentation GraphQL. Il offre désormais un écosystème étendu qui couvre non seulement la récupération de données et la gestion d'état, mais également l'architecture de microservices et les outils de collaboration pour les développeurs. Examinons de plus près certains des éléments essentiels de cet écosystème.
Qu'est-ce qu'Apollo GraphQL Studio ?
Apollo Studio (anciennement connu sous le nom d'Apollo Engine) est une plateforme fournie par l'équipe Apollo qui propose une suite de services et d'outils cloud pour le développement, le déploiement et la surveillance des opérations GraphQL. Apollo Studio est conçu pour fonctionner main dans la main avec Apollo Client et Apollo Server, mais peut également être utilisé avec n'importe quel schéma GraphQL et moteur d'exécution.
Voici une présentation rapide et quelques pointeurs à prendre en compte :
Configuration et exécution de la requête :
- L'éditeur d'opérations est la zone principale où vous rédigez des requêtes, des mutations ou des abonnements GraphQL.
- Dans la section "Variables", entrez les détails nécessaires, comme {"code": "AF"}, en les ajustant selon les besoins pour des requêtes spécifiques.
- Si votre requête nécessite des en-têtes HTTP (par exemple, pour l'authentification), renseignez-les dans la section "En-têtes", puis lancez votre requête à l'aide du bouton de lecture ou d'une commande exécutable similaire.
Interprétation de la réponse :
- Après l'exécution, la réponse se remplira dans le volet de droite, affichant les retours de données réussis et les erreurs.
- Examinez attentivement les réponses ; les erreurs fournissent souvent des indices sur les problèmes. Par exemple, les incompatibilités de type dans les variables produiront des erreurs.
- Les requêtes correctement formatées et réussies renverront des données en fonction de la structure du schéma.
Exploration du schéma :
- Familiarisez-vous avec le schéma GraphQL à l'aide de l'onglet "Documentation" sur la gauche ; il répertorie les requêtes, les mutations et les types disponibles.
- Cette documentation offre des informations sur les champs, les arguments attendus et les types de retour.
- Bénéficiez de la fonction de saisie semi-automatique de l'éditeur, qui fournit des suggestions basées sur le schéma, ce qui rend la formulation des requêtes plus rapide.
Fonctionnalités supplémentaires :
- La fonctionnalité "Historique" d'Apollo Studio vous permet de revisiter et de réexécuter les requêtes passées, ce qui vous aide dans les tests itératifs.
- Bien que vous puissiez rédiger et enregistrer plusieurs requêtes/mutations dans un même onglet, n'oubliez pas de les exécuter une par une, ce qui est particulièrement utile lorsque les requêtes sont interdépendantes ou dépendantes.
Intégration avec Apidog
Apidog améliore l'expérience GraphQL en s'intégrant de manière transparente à sa fonction de débogage. Cette intégration garantit que les développeurs peuvent identifier et résoudre efficacement les problèmes au sein de leurs implémentations GraphQL.
Nous encourageons les développeurs et les équipes à explorer et à expérimenter la suite de fonctionnalités d'Apidog. En essayant Apidog, les utilisateurs peuvent exploiter une couche supplémentaire d'outils et d'informations, optimisant ainsi davantage leurs efforts de développement et de test GraphQL.
Conclusion
En conclusion, cet article vous a présenté les fonctionnalités révolutionnaires de GraphQL et les puissantes capacités d'Apidog. Que vous soyez un développeur expérimenté ou un nouveau venu dans les tests d'API, les outils et les informations offerts par GraphQL et Apidog peuvent vous aider à créer des applications plus robustes et fiables. Essayez Apidog dès aujourd'hui !
