Explorez GraphQL avec Apollo & React: Créez une base de données de super-héros

plongez dans le monde de GraphQL et découvrez pourquoi cela génère autant d'excitation! Ce tutoriel fournit une explication claire de GraphQL et offre une expérience pratique.

Tout d'abord, répondons à la question principale: qu'est-ce que est graphQL? Ce n'est pas une fonction de calculatrice obscure; Au lieu de cela, c'est un langage de requête puissant (ou plus précisément, une spécification de requête) pour récupérer les données provenant de diverses sources. Son avantage clé? Il récupère uniquement les données nécessaires dans une seule demande de réseau, éliminant les inefficacités des API REST traditionnelles.

Ce tutoriel utilise un serveur Apollo comme point de terminaison et une application React avec le client Apollo pour accéder aux données. Nous commencerons par le serveur.

Concepts clés:

• GraphQL est un langage de requête offrant une récupération précise de données dans une seule demande de toute source de données, dépassant les API REST en efficacité et flexibilité.
• Un serveur Apollo (point de terminaison) et une application React utilisant le client Apollo sont essentielles pour l'utilisation des données GraphQL.
• Le tutoriel illustre la création de schéma, l'ajout de données, la définition du résolveur et l'intégration, en utilisant un exemple de base de données de super-héros.
• Il présente comment le développement frontal et back-end peut se dérouler largement indépendamment, le schéma agissant comme l'interface.

Configuration du serveur Apollo:

1. Créer un répertoire apollo-server.
2. Accédez à lui et installez les packages nécessaires:

<code class="language-bash">npm install apollo-server apollo-server-express graphql</code>

3. Créer index.js et ajouter:

<code class="language-javascript">const { ApolloServer, gql } = require('apollo-server');</code>

Cela importe les composants essentiels pour le serveur Apollo et l'analyse de requête GraphQL.

Création du schéma GraphQL:

Ensuite, définissez le schéma dans index.js:

<code class="language-javascript">const typeDefs = gql`
  type User {
    id: ID!
    name: String
    superpowers: [Superpower]!
  }

  type Superpower {
    id: ID!
    text: String
  }

  type Query {
    users: [User]
    user(id: ID!): User
  }
`;</code>

Cela définit les types User et Superpower et deux requêtes: users (renvoie tous les utilisateurs) et user (renvoie un utilisateur par id).

Ajout d'échantillons de données:

Ajouter des données simulées à index.js:

<code class="language-javascript">const users = [
  { id: '1', name: 'Peter Parker', superpowers: [{ id: '1', text: 'Web slinging' }, { id: '2', text: 'Spidey sense' }] },
  { id: '2', name: 'Tony Stark', superpowers: [{ id: '3', text: 'Industrial design' }, { id: '4', text: 'Robotic fashion' }] }
];</code>

Cela fournit des exemples de données pour la requête. N'oubliez pas que GraphQL ne se limite pas aux tableaux JavaScript; il peut se connecter à n'importe quelle source de données.

Définition des résolveurs:

résolveurs interpréter les requêtes. Ajoutez-les à index.js:

<code class="language-javascript">const resolvers = {
  Query: {
    users: () => users,
    user: (root, { id }) => users.find(user => user.id === id),
  },
};</code>

le users Resolver renvoie tous les utilisateurs, tandis que user trouve un utilisateur par id.

Démarrage du serveur:

Compléter index.js en instanciant et en démarrant le serveur:

<code class="language-javascript">const server = new ApolloServer({ typeDefs, resolvers });
server.listen().then(({ url }) => console.log(`Apollo server started at ${url}`));</code>

Run node index.js et accédez au terrain de jeu GraphQL à http://localhost:4000/.

requêtes interactives:

Essayez ces requêtes dans le terrain de jeu:

• Répondez le nom de Peter Parker:

<code class="language-bash">npm install apollo-server apollo-server-express graphql</code>

• Répondez le nom et les superpuissances de Peter Parker:

<code class="language-javascript">const { ApolloServer, gql } = require('apollo-server');</code>

• Reprendre tous les utilisateurs et leurs superpuissances:

<code class="language-javascript">const typeDefs = gql`
  type User {
    id: ID!
    name: String
    superpowers: [Superpower]!
  }

  type Superpower {
    id: ID!
    text: String
  }

  type Query {
    users: [User]
    user(id: ID!): User
  }
`;</code>

INTÉGRATION À REACT:

1. Créer une application React:

<code class="language-javascript">const users = [
  { id: '1', name: 'Peter Parker', superpowers: [{ id: '1', text: 'Web slinging' }, { id: '2', text: 'Spidey sense' }] },
  { id: '2', name: 'Tony Stark', superpowers: [{ id: '3', text: 'Industrial design' }, { id: '4', text: 'Robotic fashion' }] }
];</code>

2. Modifier src/index.js:

<code class="language-javascript">const resolvers = {
  Query: {
    users: () => users,
    user: (root, { id }) => users.find(user => user.id === id),
  },
};</code>

3. Remplacer src/App.js:

<code class="language-javascript">const server = new ApolloServer({ typeDefs, resolvers });
server.listen().then(({ url }) => console.log(`Apollo server started at ${url}`));</code>

Run npm start dans le répertoire my-graphql pour voir les résultats à http://localhost:3000/.

Ce tutoriel fournit une base pour l'utilisation de GraphQL. Explorez les mutations (pour la modification des données) et d'autres fonctionnalités avancées pour améliorer encore vos compétences. Codage heureux!

FAQ GraphQL:

• Qu'est-ce que GraphQL? Un langage de requête pour les API et un runtime pour exécuter ces requêtes par rapport à vos données. C'est une alternative plus efficace et flexible au repos.

• GraphQL vs Rest: REST utilise plusieurs points de terminaison, tandis que GraphQL permet aux clients de demander uniquement les données nécessaires dans une seule requête, empêchant la surclassement et la sous-forme.

• Clé des caractéristiques GraphQL: Structure de requête hiérarchique, dactylographie forte, données en temps réel avec abonnements et introspection (interroger le schéma lui-même).

• Schéma GraphQL: définit les types de données et les relations, agissant comme un contrat entre le client et le serveur.

• Structure de requête: Hiérarchique, reflétant la structure des données de réponse. Les clients demandent des champs spécifiques et les nichent pour une récupération de données complexe.

• Resolvers: Fonctions qui définissent comment récupérer ou muter les données pour des champs de schéma spécifiques. Ils relient les requêtes à la source de données.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!