Apollo GraphQL: Comment créer une application Full-stack avec React et Node Js

Apollo Client est une bibliothèque complète de gestion d'état pour les applications JavaScript. C'est un outil puissant car il peut être utilisé à la fois sur le côté arrière et sur le côté frontal.

Dans ce tutoriel, nous l'utiliserons sur le front end et le back end en construisant un Apollo GraphQL Server avec Node JS. Ensuite, nous consommerons les données côté client en utilisant React JS.

Si vous êtes nouveau dans GraphQl, ce tutoriel peut vous aider. Sinon, commençons.

  • Construire le serveur avec Apollo, Node et GraphQl
  • Schéma GraphQl
  • Résolveurs GraphQl
  • Création du serveur Apollo
  • Construire le côté client avec React
  • Connecter React à Apollo
  • Récupérer les données
  • Affichage des données

Construire le serveur avec Apollo, Node et GraphQl

Dans ce guide, j'utiliserai l'API Github pour afficher des données, et cette opération sera effectuée par le serveur GraphQl construit avec Apollo et Node JS.

Pour y parvenir, nous devons exécuter la commande suivante sur le terminal pour configurer un nouveau projet Node JS:

 yarn init 

Une fois la configuration terminée, nous pouvons maintenant installer les packages nécessaires en exécutant cette commande:

 yarn add apollo-server graphql axios 

Génial, nous avons maintenant tout ce dont nous avons besoin pour créer un serveur. Alors commençons par créer un nouveau fichier app.jsà la racine qui sera le point d'entrée de notre serveur.

Ensuite, nous devons définir un schéma Graphql qui reflète l'apparence de nos données.

Schéma GraphQl

Un schéma décrit la forme de votre graphique de données. Il définit un ensemble de types avec des champs qui sont remplis à partir de vos magasins de données principaux. Alors, ajoutons un nouveau schéma dans le app.jsfichier.

  • app.js
const { ApolloServer, gql } = require("apollo-server") const axios = require("axios") const typeDefs = gql` type User { id: ID login: String avatar_url: String } type Query { users: [User] } ` 

Comme vous pouvez le voir, nous n'utilisons pas toutes les données fournies par l'API Github. Nous avons juste besoin de l'identifiant qui sera utilisé comme clé de référence sur l'application React, le login et l'avatar_url. Nous avons également une requête usersqui renvoie un tableau d'utilisateurs.

Maintenant que nous avons un schéma GraphQL, il est temps de créer les résolveurs correspondants pour terminer l'opération de requête.

Résolveurs GraphQl

Un résolveur est un ensemble de fonctions qui permet de générer une réponse à partir d'une requête GraphQL. Alors, ajoutons un nouveau résolveur dans le app.jsfichier.

  • app.js
const resolvers = { Query: { users: async () => { try { const users = await axios.get("//api.github.com/users") return users.data.map(({ id, login, avatar_url }) => ({ id, login, avatar_url, })) } catch (error) { throw error } }, }, } 

Un résolveur doit correspondre au schéma approprié par son nom. Par conséquent, ici usersfait référence à la usersrequête définie dans notre schéma. C'est une fonction qui récupère les données de l'API à l'aide de axioset renvoie comme prévu l'id, le login et l'avatar_url.

Et cette opération peut prendre du temps. C'est pourquoi async / await est utilisé ici pour le gérer.

Avec cela, nous pouvons maintenant créer le serveur Apollo dans la section suivante.

Création du serveur Apollo

Si vous vous souvenez, dans le app.jsfichier, nous avions importé ApolloServerdu apollo-serverpackage. C'est un constructeur qui reçoit un objet comme argument. Et cet objet doit contenir le schéma et le résolveur pour pouvoir créer le serveur.

Alors, modifions app.jsun peu avec ApolloServer.

  • app.js
const server = new ApolloServer({ typeDefs, resolvers, }) // typeDefs: typeDefs, // resolvers: resolvers server.listen().then(({ url }) => console.log(`Server ready at ${url}`)) 

Ici, on passe en paramètre un objet qui contient le schéma et le résolveur ApolloServerpour créer le serveur puis l'écouter. Avec cela en place, nous avons maintenant un serveur fonctionnel avec lequel travailler.

Vous pouvez déjà jouer avec et envoyer des requêtes à l'aide de GraphQL Playground en exécutant cette commande:

 yarn start 

Vous pouvez maintenant le prévisualiser sur //localhost:400

  • Le app.jsdossier complet
const { ApolloServer, gql } = require("apollo-server") const axios = require("axios") const typeDefs = gql` type User { id: ID login: String avatar_url: String } type Query { users: [User] } ` const resolvers = { Query: { users: async () => { try { const users = await axios.get("//api.github.com/users") return users.data.map(({ id, login, avatar_url }) => ({ id, login, avatar_url, })) } catch (error) { throw error } }, }, } const server = new ApolloServer({ typeDefs, resolvers, }) server.listen().then(({ url }) => console.log(`Server ready at ${url}`)) 

Un serveur seul ne fait pas grand-chose. Nous devons ajouter un script de démarrage dans le package.jsonfichier pour, comme vous l'avez deviné, démarrer le serveur.

  • package.json
 // first add nodemon: yarn add nodemon --dev "scripts": { "start": "nodemon src/index.js" } 

Avec cela, nous avons un serveur pour récupérer les données de l'API Github. Il est donc temps maintenant de passer du côté client et de consommer les données.

Faisons le.

oui

Construire le côté client avec React

La première chose que nous devons faire est de créer une nouvelle application React en exécutant la commande suivante dans le terminal:

npx create-react-app client-react-apollo 

Ensuite, nous devons installer les packages Apollo et GraphQl:

 yarn add apollo-boost @apollo/react-hooks graphql 

Maintenant, nous pouvons connecter Apollo à notre application React en mettant à jour le index.jsfichier.

Connecter React à Apollo

  • index.js
import React from 'react'; import ReactDOM from 'react-dom'; import ApolloClient from 'apollo-boost' import { ApolloProvider } from '@apollo/react-hooks'; import App from './App'; import './index.css'; import * as serviceWorker from './serviceWorker'; const client = new ApolloClient({ uri: '//7sgx4.sse.codesandbox.io' }) ReactDOM.render(     , document.getElementById('root') ); serviceWorker.unregister(); 

As you can see, we start by importing ApolloClient and ApolloProvider. The first helps us inform Apollo about which URL to use when fetching data. And if no uri is passed to ApolloClient, it will take the current domain name plus /graphql.

The second is the Provider which expects to receive the client object to be able to connect Apollo to React.

That said, we can now create a component that shows the data.

Fetching the data

  • App.js
import React from "react" import { useQuery } from "@apollo/react-hooks" import gql from "graphql-tag" import "./App.css" const GET_USERS = gql` { users { id login avatar_url } } ` 

Here, we have a simple GraphQL query that fetches the data. That query will be passed later to useQuery to tell Apollo which data to fetch.

  • App.js
const User = ({ user: { login, avatar_url } }) => ( 

{login}

See profile )

This presentational component will be used to display a user. It receives the data from the App component and displays it.

Showing the data

  • App.js
function App() { const { loading, error, data } = useQuery(GET_USERS) if (error) return 

Something went wrong!

if (loading) return

Loading...

return (

Github | Users

{data.users.map(user => ( ))} ) } export default App

Le useQueryhook fourni par Apollo reçoit la requête GraphQL et renvoie trois états: le chargement, l'erreur et les données.

Si les données sont récupérées avec succès, nous les transmettons au composant User. Sinon, nous lançons une erreur.

  • Le App.jsdossier complet
import React from "react" import { useQuery } from "@apollo/react-hooks" import gql from "graphql-tag" import "./App.css" const GET_USERS = gql` { users { id login avatar_url } } ` const User = ({ user: { login, avatar_url } }) => ( 

{login}

See profile ) function App() { const { loading, error, data } = useQuery(GET_USERS) if (error) return

Something went wrong!

if (loading) return

Loading...

return (

Github | Users

{data.users.map(user => ( ))} ) } export default App

Génial! Avec cela, nous avons maintenant terminé de créer une application Apollo GraphQL complète à l'aide de React et Node JS.

Aperçu du serveur Apollo GraphQL ici

Aperçu de l'application React ici

Trouvez le code source ici

Vous pouvez trouver d'autres contenus intéressants comme celui-ci sur mon blog

Merci d'avoir lu!

félicitations