Construire une base de données de super-héros –

Curieux de tout le buzz entourant GraphQL mais vous ne savez pas trop pourquoi vous devriez être excité? Vous êtes au bon endroit! Nous allons vous éclairer sur ce qu'est GraphQL et vous donner l'occasion de faire des expériences pratiques.

Commençons par clarifier les choses et répondre à la question de 20 000 $: qu'est-ce que GraphQL? Non, ce n’est pas une fonction obscure de votre TI-89. Il s'agit d'un langage de requête au cœur – ou plus précisément d'une spécification de requête – qui peut être utilisé pour extraire des données de n'importe quelle source de données.

Mieux encore, il vous permet de récupérer les données exactes dont vous avez besoin – ni plus, ni moins – dans une seule demande de réseau. Bien que cela puisse ne pas sembler être la technologie la plus sexy à sortir de l'usine d'innovation Facebook, vous pouvez simplement vous trouver agréablement surpris de constater à quel point elle peut être utile.

Il suffit d'un serveur Apollo pour agissons comme notre point de terminaison et comme une application React utilisant le client Apollo pour exploiter toutes les données qu’il contient. Nous allons d'abord nous attaquer au serveur.

Mise en route d'Apollo Server

Pour lancer notre serveur Apollo, créez un dossier appelé apollo-server dans votre répertoire de travail favori. Ensuite, entrez ce répertoire et exécutez la commande npm suivante – vous avez npm et Node installés n'est-ce pas? – pour mettre en place le framework Apollo:

 npm install apollo-server apollo-server-express graphql

Maintenant que les différents éléments du serveur Apollo sont en place, il est temps de dire à notre serveur ce qu’il faut servir. Continuez et créez un fichier index.js vide dans le répertoire apollo-server et ajoutez-y les éléments suivants:

 const {ApolloServer, gql} = require ('apollo- serveur');

Cette ligne extrait simplement les objets requis pour démarrer un serveur Apollo et analyser nos chaînes de requête dans des documents de requête pour GraphQL.

Notre premier schéma GraphQL

Ajoutez-y notre premier schéma:

 / / Ce sera notre schéma GraphQL
const typeDefs = gql`
  tapez User {
    J'ai fait!
    nom: chaîne
    superpuissances: [Superpower]!
  }

  type Superpower {
    J'ai fait!
    texte: chaîne
  }

  tapez Query {
    utilisateurs: [User]
    utilisateur (id: ID!): utilisateur
  }
`;

Nous ajoutons ici nos définitions de type. Le premier est de type Utilisateur que nous définissons comme un objet ayant un champ id nom et superpouvoir . La seconde est un simple id et texte pour décrire chaque superpuissance. Enfin, la troisième définit deux requêtes acceptables – utilisateurs et utilisateur – renvoyant respectivement tous les utilisateurs ou un seul utilisateur correspondant à l'argument id fourni. [19659002] Assez facile, non?

Ajout d'un tiret de données

Ensuite, ajoutons quelques données fictives pour donner vie à notre schéma:

 // Ce seront nos données fictives à interroger.
const utilisateurs = [{
  id: '1',
  name: 'Peter Parker',
  superpowers: [{
    id: '1',
    text: 'Web slinging'
  },{
    id: '2',
    text: 'Spidey sense'
  }]
}, {
  id: '2',
  nom: 'Tony Stark',
  superpuissances: [{
    id: '3',
    text: 'Industrial design'
  },{
    id: '4',
    text: 'Robotic fashion'
  }]
}];

Nous ne faisons ici qu’ajouter deux utilisateurs à nos données fictives. Il convient de noter que GraphQL n’est pas obligé d’interroger uniquement des tableaux JavaScript. Cela pourrait être n'importe quelle base de données ou autre construction de données. Ici, nous ne faisons que garder les choses simples pour nous concentrer sur la tâche à accomplir.

n’oubliez pas Resolvers

Ensuite, nous devons indiquer à GraphQL comment interpréter les requêtes que nous avons définies ci-dessus. Ceci est fait avec les résolveurs:

 // Ce sera une carte de fonctions pour renvoyer les données décrites par notre schéma
const résolveurs = {
  Requête: {
    utilisateurs: () => {
      utilisateurs de retour
    },
    utilisateur: (root, {id}) => {
      return users.find (user => user.id === id);
    },
  },
};

Vous remarquerez que la première requête utilisateurs ne nécessite aucun argument et renvoie la liste complète des utilisateurs (au moins en théorie, plus à ce sujet plus tard). La deuxième requête utilisateur accepte l'ID de l'utilisateur à extraire et renvoie ledit utilisateur.

Assembler les éléments

Pour terminer notre serveur Apollo, il suffit d'instancier une nouvelle instance et commencer à écouter les connexions:

 const server = new ApolloServer ({
  typeDefs,
  résolveurs,
});

server.listen (). then (({url}) => {
  console.log (`Le serveur Apollo a démarré à $ {url}`)
});

Nous envoyons ici au constructeur ApolloServer notre schéma et les résolveurs créés ci-dessus. Il suffit ensuite de démarrer le serveur, mais d’abord, voici à quoi devrait ressembler votre index.js :

 const {ApolloServer, gql} = require ('apollo-server');

// Ce sera notre schéma GraphQL
const typeDefs = gql`
  tapez User {
    J'ai fait!
    nom: chaîne
    superpuissances: [Superpower]!
  }

  type Superpower {
    J'ai fait!
    texte: chaîne
  }

  tapez Query {
    utilisateurs: [User]
    utilisateur (id: ID!): utilisateur
  }
`;

// Ce seront nos données factices à interroger
const utilisateurs = [{
  id: '1',
  name: 'Peter Parker',
  superpowers: [{
    id: '1',
    text: 'Web slinging'
  },{
    id: '2',
    text: 'Spidey sense'
  }]
}, {
  id: '2',
  nom: 'Tony Stark',
  superpuissances: [{
    id: '3',
    text: 'Industrial design'
  },{
    id: '4',
    text: 'Robotic fashion'
  }]
}];

// Ce sera une carte de fonctions pour renvoyer les données décrites par notre schéma
const résolveurs = {
  Requête: {
    utilisateurs: () => {
      utilisateurs de retour
    },
    utilisateur: (root, {id}) => {
      return users.find (user => user.id === id);
    },
  },
};

serveur const = new ApolloServer ({
  typeDefs,
  résolveurs,
});

server.listen (). then (({url}) => {
  console.log (`Le serveur Apollo a démarré à $ {url}`)
});

Allez-y et lancez-le avec node index.js et visitez http: // localhost: 4000 / pour voir le fruit de votre travail!

Vous devriez être salué par un terrain de jeu GraphQL qui vous permet d'essayer des requêtes interactives par rapport au schéma que vous avez créé.

Mise au point

Essayons-le en entrant cette requête dans le volet de gauche:

 query {
  utilisateur (id: 1) {
    prénom
  }
}

Nous utilisons ici la requête utilisateur que nous venons de configurer et lui passons la id sur 1. Nous indiquons également à GraphQL que nous souhaitons uniquement renvoyer le nom dudit utilisateur. Le résultat dans le volet de gauche – après avoir cliqué sur le bouton ressemblant à une lecture – devrait ressembler à ceci:

 {
  "Les données": {
    "utilisateur": {
      "nom": "Peter Parker"
    }
  }
}

Disons que vous voulez aussi jeter un coup d’œil à ses superpuissances. Il vous suffit de demander ce champ:

 query {
  utilisateur (id: 1) {
    prénom,
    superpouvoirs {
      texte
    }
  }
}

Nous avons ajouté le champ superpouvoir et, comme nous nous intéressons uniquement au texte et non à l'identifiant de superpuissance, nous en précisons autant. Le résultat devrait maintenant afficher chaque superpuissance pour notre premier utilisateur:

 {
  "Les données": {
    "utilisateur": {
      "nom": "Peter Parker",
      "superpuissances": [
        {
          "text": "Web slinging"
        },
        {
          "text": "Spidey sense"
        }
      ]
    }
  }
}

Disons que nous voulons saisir tous les utilisateurs et leurs super pouvoirs, nous pouvons nous fier à la requête utilisateurs que nous avons définie:

 query {
  utilisateurs {
    identifiant,
    prénom,
    superpouvoirs {
      texte
    }
  }
}

Et le résultat:

 {
  "Les données": {
    "utilisateurs": [
      {
        "id": "1",
        "name": "Peter Parker",
        "superpowers": [
          {
            "text": "Web slinging"
          },
          {
            "text": "Spidey sense"
          }
        ]
      },
      {
        "id": "2",
        "nom": "Tony Stark",
        "superpuissances": [
          {
            "text": "Industrial design"
          },
          {
            "text": "Robotic fashion"
          }
        ]
      }
    ]
  }
}

Vous ne vous souciez que des superpuissances? Nous pouvons le faire aussi:

 query {
  utilisateurs {
    superpouvoirs {
      texte
    }
  }
}

Et vous obtenez:

 {
  "Les données": {
    "utilisateurs": [
      {
        "superpowers": [
          {
            "text": "Web slinging"
          },
          {
            "text": "Spidey sense"
          }
        ]
      },
      {
        "superpuissances": [
          {
            "text": "Industrial design"
          },
          {
            "text": "Robotic fashion"
          }
        ]
      }
    ]
  }
}

À ce stade, vous devriez pouvoir apprécier la flexibilité et l’attrait absolus de GraphQL. Avec une seule requête et connexion, nous pouvons récupérer n'importe quelle tranche des données souhaitées. Tout ce qui est nécessaire est un schéma bien conçu et les résolveurs qui le prennent en charge.

Mieux encore, les développeurs back-end et front-end peuvent faire leur travail de manière presque autonome. Le schéma jouant le rôle d’intermédiaire, les deux groupes peuvent ainsi éviter de se marcher sur les pieds. Et vraiment, c’est GraphQL en un mot. Avant de terminer ce didacticiel, voyons comment intégrer ces requêtes à une application React réelle.

Présentation de React to the Mix

Revenez dans votre répertoire de travail racine et exécutez les commandes suivantes pour configurer une application bootstrap React avec les bibliothèques GraphQL et Apollo requises:

 npm install -g create-react-app
créer-réagir-app my-graphql
cd my-graphql
npm installer apollo-boost react-apollo graphql

Ensuite, remplacez le contenu de src / index.js par le texte suivant:

index.js:

 import Réagissez à partir de 'react'
importer ReactDOM de 'react-dom'
importer {ApolloClient} de 'apollo-client'
importer {HttpLink} de 'apollo-link-http'
importer {InMemoryCache} de 'apollo-cache-inmemory'
importer {ApolloProvider} de 'react-apollo'

importer l'application à partir de './App'

const client = new ApolloClient ({
    link: new HttpLink ({uri: 'http: // localhost: 4000 / graphql'}),
    cache: new InMemoryCache ()
})

ReactDOM.render (
    
    
    
    document.getElementById ('root')
)

Nous n'avons besoin ici que des importations habituelles pour une application React ainsi que pour le client Apollo d'interfacer avec notre nouveau serveur Apollo. Pour créer le client Apollo, nous avons simplement besoin d’un lien vers le serveur http: // localhost: 4000 / graphql et d’un moyen de mettre en cache nos marchandises. Avec cela, nous rendons simplement l'application.

Ensuite, nous devons configurer l'application pour interroger et afficher les données présentées par notre serveur Apollo. Continuez et remplacez la valeur par défaut src / App.js par la suivante:

App.js:

 import Réagissez à partir de 'react'
importer {Query} de 'react-apollo'
importer {gql} de 'apollo-boost'

const TEST_QUERY = gql`
  {
    utilisateur (id: 1) {
      identifiant,
      prénom,
      superpouvoirs {
        texte
      }

  }}
`;

const App = () => (
  
  {({data: {utilisateur}, chargement}) => {
      if (chargement ||! utilisateur) {
        return 
 Chargement en cours ... 
;
      }
      revenir (
    

        {user.name} ({user.id}) a les super pouvoirs suivants:
        

        {user.superpowers.map (superpower => (
            

                {superpower.text}
            
        ))}
        
    

      );
    }}
  
)

exportation par défaut

Vous devriez voir quelques modèles familiers ici. Nous avons d’abord utilisé gql pour créer un document de requête GraphQL qui demande à l’utilisateur ayant l’ID 1 – plus précisément, son identifiant, son nom et le texte des superpuissances. Ensuite, nous transmettons le document à notre serveur avec la balise Query . C’est ici que nous pouvons formater les résultats dans une jolie application React.

Lancez le serveur avec npm start et découvrez les superbes résultats sur http: // localhost: 3000 / .

Et avec cela, notre tutoriel est complet. Vous avez créé un serveur Apollo et lui avez alimenté des structures de données simples. Vous avez découvert comment écrire des schémas et des résolveurs pour définir des interactions avec les données. Vous vous êtes ensuite exercé à interroger des éléments spécifiques de ces données. Enfin, vous avez lié le tout à une application React qui récupère les données du serveur et les présente sous une forme bien formatée.

Cela devrait suffire à vous permettre d’intégrer GraphQL dans vos projets futurs, mais il reste encore beaucoup à faire. apprendre. Des mutations pour l'ajout et la modification de données constituent une excellente étape suivante.

J'espère que vous avez apprécié ce tutoriel – codage heureux!

En grandissant avec un amour pour le codage, j'ai grandement apprécié apprendre de nombreuses formes de programmation. , en particulier le développement Web. Cela m'a conduit à des succès professionnels allant de la création d'applications de santé de pointe, basées sur le Web, à des cadres simples de CMS.