Utilisation d'Apollo GraphQL dans Next.js

Next.js est un framework React qui permet aux programmeurs de créer des sites web rapides et statiques. Il nous permet de créer des applications hybrides avec à la fois des pages rendues par le serveur et des pages statiques. Il y a aussi des intégrations intégrées telles que ESLint et TypeScript. Son succès croissant l'a rendu très populaire dans le Développement d'Applications Web. À ThoughtLabs Belgium, nous utilisons également ce framework pour un client et nous sommes tombés amoureux de celui-ci, et nous recommandons vraiment ce Next.js framework à nos clients.

Qu'est-ce que GraphQL ?

GraphQL est un langage de requête d'API introduit par Facebook en 2012 qui permet de consommer une API d'une manière différente par rapport à l'API REST habituelle. Il a été conçu pour rendre les API plus flexibles et rapides. Au lieu d'envoyer une requête GET, nous récupérons les données avec GraphQL. Le point de terminaison GraphQL accepte une 'requête' qui contient les données que vous souhaitez récupérer.

country {
  "name": "Belgium",
  "capital": "Brussels",
  "currency": "EUR",
  "population": "200000"  
}

vous pouvez soumettre une requête uniquement pour le nom et la devise.

Qu'est-ce que Apollo GraphQL et comment fonctionne-t-il ?

Apollo GraphQL est une implémentation de GraphQL qui vous permet d'indiquer vos requêtes au sein des composants UI qui en ont besoin, et ensuite de faire en sorte que ces composants soient automatiquement mis à jour lorsqu'arrivent ou changent les résultats des requêtes. Le useQuery Hook encapsule toute autre fonctionnalité pour obtenir des données, suivre les états de chargement et d'erreur, et changer votre interface utilisateur lors de l'utilisation du client Apollo. Cette encapsulation rend simple l'intégration des résultats de requête dans vos composants.

Démarrage

Nous allons créer une application web Next.js qui affiche une liste de pays et leurs données dans ce tutoriel. Nous avons plusieurs choix pour obtenir des données dans Next.js, mais nous choisirons l'approche de génération statique (SSG). La méthode getStaticProps de Next.js nous permet de collecter des données à différentes étapes du cycle de vie, permettant ainsi de créer une application complètement statique qui sert des données déjà affichées à la page au navigateur.

Dans ce tutoriel, nous utiliserons l'API GraphQL pour créer une application web Next.js qui affiche une liste de pays et leurs données.

Pour l'application, nous installerons les packages nécessaires.

npx create-next-app country-list-with-graphql

npm install graphql

npm install @apollo/client

Démarrez votre serveur de développement une fois que les packages ont été installés.

cd country-list-with-graphql

npm run dev

Ajout du client Apollo à l'application web Next.js

Nettoyez le code dans votre répertoire 'pages/index.js', qui devrait maintenant ressembler à ceci.

export default function Home() {
    return(
        <div></div>
    )
}

Puis importez le client Apollo qui a été précédemment installé et définissez une nouvelle fonction sous notre composant.

import { ApolloClient, InMemoryCache, gql } from "@apollo/client";
export default function Home() {
  return <div></div>;
}
export async function getStaticProps() {}

Nous obtiendrons des props pour utiliser dans notre composant avec la méthode getStaticProps. Nous sommes maintenant prêts à utiliser l'API GraphQl pour obtenir des données.

Ici, nous utiliserons le client Apollo pour interagir avec le serveur GraphQL des pays. Nous utiliserons la méthode getStaticProps de Next.js pour faire notre requête API, ce qui nous permettra de construire dynamiquement des props pour notre page.

Apollo peut utiliser InMemoryCache pour sauvegarder les résultats des requêtes GraphQl dans un cache. Pour transmettre des requêtes au client Apollo, gql est la méthode recommandée. Nous devons maintenant créer une nouvelle instance du client Apollo dans getStaticProps comme suit :

const client = new ApolloClient({
  uri: "https://countries.trevorblades.com",
  cache: new InMemoryCache(),
});

Puis nous pouvons faire une requête

const { data } = await client.query({
    query: gql`
      query {
        countries {
          name
          native
          capital
          currency
          continent {
            name
          }
          phone
          languages {
            name
          }
        }
      }
    `,
  });

Cela produit une nouvelle requête GraphQl dans l'attribut gql, puis utilise client.query pour faire une nouvelle requête, et enfin, les données sont déstructurées à partir des résultats, ce qui est là où les informations que nous recherchons sont sauvegardées.

Nous décrivons ce que nous voulons de l'API dans la requête, qui est les pays, qui retourne une liste de tous les pays, et ensuite nous pouvons définir ce que nous voulons de chaque pays.

Nous devons maintenant retourner les données depuis getStaticProps et logger dans la console de notre composant afin de voir ce que les données ressemblent dans la console. Cela est nécessaire car getStaticProps s'exécute durant le processus de construction.

return {
    props: {
      data: data.countries,
    },
  };

Pour voir ce que nos données ressemblent, nous pouvons maintenant logger les résultats dans le composant.

export default function Home(results) {
  console.log(results)
  return <div></div>;
}

C'est ainsi que votre console devrait apparaître

Ajout des données des pays

Nous avons les données des pays, obtenues en utilisant le client Apollo pour faire une requête vers le serveur GraphQL des pays. Créez un dossier appelé components et un fichier appelé countries.js au niveau racine de notre projet, et configurez-le comme suit :

export default function Countries () {
  return(
    <div></div>
  )
}

Retournez dans le dossier pages/index.js, importez le composant Countries, et affichez-le en utilisant les résultats passés en props.

 <section>
      <div>
        <div>
          <h1>Countries Data</h1>
        </div>
        <Countries countries={results} />
      </div>
    </section>

Retournez dans le dossier components/countries.js et ajoutez le code ci-dessous.

export default function Countries({ countries }) {
  return (
    <section>
      <div>
        {countries.data.map((country, index) => (
          <div key={index}>
            <h3>{country.name}</h3>
            <h5>
              Capital: <span> {country.capital} </span>{" "}
            </h5>
            <p>
              Continent: <span> {country.continent.name} </span>{" "}
            </p>
            <p>
              Languages:
              {country.languages.map((item, index) => (
                <span key={index}>{item.name},</span>
              ))}
            </p>
            <p>
              Currency:
              <span>{country.currency}</span>
            </p>
            <p>
              Phone:
              <span>+{country.phone}</span>
            </p>
          </div>
        ))}
      </div>
    </section>
  );
}

La liste des pays est maintenant complète, et nous pouvons voir toutes les données que nous avons demandées. Des données supplémentaires peuvent être ajoutées à la requête GraphQL. Consultez la documentation, puis allez dans le playground pour poser quelques questions.