Gebruik van Apollo GraphQL in Next.js

Next.js is een React framework dat programmeurs toevoeging geeft om snelle, statische websites te maken. Het laat ons toe om hybride apps te maken met zowel server-renderde als statisch gemaakte pagina's. Er zijn ook ingebouwde integraties zoals ESLint en TypeScript. Zijn groeiende populariteit heeft het gemaakt tot een veelgebruikte optie in Web Application Development. Bij ThoughtLabs België gebruiken we ook dit framework voor één van de klanten en zijn we dol op het en raden het Next.js framework sterk aan aan onze klanten.

Wat is GraphQL?

GraphQL is een API-querytaal die in 2012 is geïntroduceerd door Facebook en laat ons toe om een API op een andere manier te gebruiken dan de gebruikelijke REST API. Het is gemaakt om APIs meer flexibel en sneller te maken. In plaats van een GET-aanroep te sturen, verzamelen we gegevens met GraphQL. De GraphQL endpoint accepteert een 'query', die de gegevens bevat die je wilt ophalen.

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

Je kunt een aanvraag indienen voor alleen de naam en de valuta.

Wat is Apollo GraphQL en Hoe Werkt Het?

Apollo GraphQL is een GraphQL-uitvoering die je toelaat om query's te declareren binnen de UI-componenten die ze nodig hebben, en dan worden deze componenten automatisch bijgewerkt wanneer de resultaten van de query of veranderingen in de resultaten binnenkomen. De useQuery Hook encapsuleert elke andere functionaliteit voor het ophalen van gegevens, het volgen van laden- en foutcondities, en het veranderen van je UI bij het gebruik van Apollo Client. Deze encapsulatie maakt het eenvoudig om queryresultaten in je componenten te integreren.

Beginnen

We maken in deze tutorial een Next.js webtoepassing die een lijst van landen en hun gegevens toont. We hebben een paar keuzes voor het verkrijgen van gegevens in Next.js, maar we kiezen voor de statische generatie methode (SSG). De getStaticProps methode in Next.js laat ons toe om gegevens te verzamelen op verschillende momenten van het levenscyclus, waardoor we een volledig statische app kunnen maken die gegevens aan de browser toont die al zijn weergegeven op de pagina.

In deze tutorial gebruiken we de GraphQL API om een Next.js webtoepassing te maken die een lijst van landen en hun gegevens toont.

Voor de app installeren we de benodigde packages.

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

npm install graphql

npm install @apollo/client

Start je ontwikkelserver wanneer de packages zijn geïnstalleerd.

cd country-list-with-graphql

npm run dev

Apollo Client toevoegen aan Next.js Webtoepassing

Verzamel de code in je ‘pages/index.js’ directory, die nu zo moet uit zien.

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

Vervolgens importeer je de apollo client die eerder is geïnstalleerd en definieer je een nieuwe functie onder onze component.

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

We krijgen props om te gebruiken in onze component via de getStaticProps methode. We zijn nu klaar om de GraphQl API te gebruiken om gegevens op te halen.

Hier gebruiken we de Apollo Client om te communiceren met de Countries GraphQL server. We gebruiken de Next.js getStaticProps methode om onze API-aanvraag te maken, wat ons toelaat om dynamisch props te bouwen voor onze pagina.

Apollo kan InMemoryCache gebruiken om de resultaten van GraphQl queries op te slaan in een cache. Voor het doorgeven van queries aan Apollo Client is gql de aanbevolen methode. Nu moeten we een nieuwe Apollo Client instantie aanmaken binnen getStaticProps zoals hieronder:

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

Vervolgens kunnen we een query uitvoeren

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

Dit produceert een nieuwe GraphQl query binnen de gql tag, gebruikt daarna client.query om een nieuwe query aan te vragen en eindigt met het destructuren van data uit de resultaten, waarin de informatie die we nodig hebben wordt opgeslagen.

We beschrijven wat we willen van de API binnen de query, namelijk landen, die een lijst van alle landen retourneert, en daarna kunnen we definiëren wat we willen van elk land.

We moeten nu data retourneren van getStaticProps en console loggen in onze component om te zien wat de data eruit ziet in de console. Dit is omdat getStaticProps tijdens de bouwprocess wordt uitgevoerd.

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

Om te zien wat onze data eruit ziet, kunnen we nu de resultaten console loggen in de component.

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

Dit is hoe je console eruit moet zien

Landen Data Toevoegen

We hebben de data van de landen, die we verkregen hebben via de Apollo Client om een aanvraag te doen aan de GraphQL server van de landen. Maak een map aan genaamd components en een bestand genaamd countries.js op de wortel van ons project, en stel het op als volgt in:

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

Ga terug naar de directory pages/index.js, importeer de Countries component en render hem met de resultaten die als props worden doorgegeven.

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

Ga terug naar de directory components/countries.js en voeg de code hieronder toe.

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>
  );
}

De lijst met landen is nu volledig, en we kunnen alle data bekijken die we hebben aangevraagd. Extra data kan worden toegevoegd aan de GraphQl query. Bekijk de documentatie, en ga vervolgens naar het playground om enkele vragen te testen.