Next.js a fost în continuă creștere ca instrument indispensabil pentru dezvoltatorii care creează aplicații React. O parte din ceea ce o face grozavă este API-urile de preluare a datelor care solicită date pentru fiecare pagină. Dar cum putem folosi acel API pentru a face interogări GraphQL pentru aplicația noastră?

  • Ce este GraphQL?
  • Ce este Apollo GraphQL?
  • Preluarea datelor în Next.js
  • Ce vom construi?
  • Pasul 0: crearea unei noi aplicații Next.js
  • Pasul 1: Adăugarea Apollo GraphQL la o aplicație Next.js
  • Pasul 2: Adăugarea de date la o pagină Next.js cu getStaticProps
  • Pasul 3: Preluarea datelor cu o interogare GraphQL în Next.js folosind Apollo Client
  • Pasul 4: Adăugarea datelor de lansare SpaceX pe pagină

Ce este GraphQL?

GraphQL este un limbaj de interogare și un timp de rulare care oferă un mod diferit de interacțiune cu un API decât ceea ce v-ați aștepta cu un API REST tradițional.

Când preluați date, în loc să creați un OBȚINE solicitați unei adrese URL să obțineți aceste date, punctele finale GraphQL acceptă o „interogare”. Această interogare constă în ce date doriți să obțineți, indiferent dacă este vorba despre un set de date întreg sau o porțiune limitată a acestuia.

Dacă datele dvs. arată cam așa:

Movie {
  "title": "Sunshine",
  "releaseYear": "2007",
  "actors": [...],
  "writers": [...]
}

Și doriți doar să obțineți titlul și anul în care a fost lansat, puteți trimite o interogare de genul acesta:

ad-banner
Movie {
  title
  releaseYear
} 

Preluând doar datele de care aveți nevoie.

Interesant este că puteți oferi, de asemenea, relații complexe între date. Cu o singură interogare, puteți solicita suplimentar acele date din diferite părți ale bazei de date, care ar accepta în mod tradițional mai multe solicitări cu un API REST.

Ce este Apollo GraphQL?

Apollo GraphQL esențial este o implementare GraphQL care îi ajută pe oameni să își reunească datele sub formă de grafic.

Apollo furnizează și menține și un client GraphQL, ceea ce vom folosi, care permite oamenilor să interacționeze programatic cu un API GraphQL.

Folosind clientul GraphQL al lui Apollo, vom putea face cereri către un API GraphQL similar cu ceea ce ne-am aștepta cu un client de cerere bazat pe REST.

Preluarea datelor în Next.js

Când preluați date cu Next.js, aveți câteva opțiuni pentru modul în care doriți să preluați aceste date.

În primul rând, puteți merge pe ruta laterală a clientului și faceți cererea odată cu încărcarea paginii. Problema cu acest lucru este că puneți sarcina pe client să își ia timpul pentru a face aceste cereri.

API-urilor Next.js le place getStaticProps și getServerSideProps vă permit să colectați date în diferite părți ale ciclului de viață, oferindu-ne posibilitatea creați o aplicație complet statică sau unul care este redat pe partea de server. Aceasta va furniza datele deja redate paginii direct în browser.

Folosind una dintre aceste metode, putem solicita date împreună cu paginile noastre și le putem injecta drept recuzită direct în aplicația noastră.

Ce vom construi?

Vom crea o aplicație Next.js care prezintă cele mai recente lansări de la SpaceX.

Cum se preia datele GraphQL in Nextjs cu Apollo GraphQL
SpaceX lansează o demonstrație

Vom folosi API-ul menținut de SpaceX Land pentru a efectua o interogare GraphQL care apucă ultimele 10 zboruri. Folosind getStaticProps, vom face această solicitare la momentul construirii, ceea ce înseamnă că pagina noastră va fi redată static cu datele noastre.

Pasul 0: crearea unei noi aplicații Next.js

Folosind Creați aplicația următoare, putem face rapid o nouă aplicație Next.js pe care o putem folosi pentru a începe imediat să vă scufundați în cod.

În interiorul terminalului, executați comanda:

npx create-next-app my-spacex-launches

Notă: nu trebuie să utilizați my-spacex-app, nu ezitați să înlocuiți acest lucru cu orice nume doriți să dați proiectului.

După rularea acelui script, Next.js va configura un nou proiect și va instala dependențele.

Odată terminat, puteți porni serverul de dezvoltare:

cd my-spacex-launches
npm run dev

Aceasta va porni un nou server la http: // localhost: 3000 unde puteți vizita acum noua aplicație!

1611277747 632 Cum se preia datele GraphQL in Nextjs cu Apollo GraphQL
Noua aplicație Next.js

Pasul 1: Adăugarea Apollo GraphQL la o aplicație Next.js

Pentru a începe să realizăm o interogare GraphQL, vom avea nevoie de un client GraphQL. Vom folosi clientul Apollo GraphQL pentru a ne adresa interogările către serverul SpaceX GraphQL.

Înapoi în interiorul terminalului, rulați următoarea comandă pentru a instala noile noastre dependențe:

npm install @apollo/client graphql

Aceasta va adăuga Clientul Apollo, precum și GraphQL, pe care va trebui să le formăm pentru interogarea GraphQL.

Și după finalizarea instalării, vom fi gata să începem să folosim Apollo Client.

Urmați împreună cu comiterea!

Pasul 2: Adăugarea de date la o pagină Next.js cu getStaticProps

Înainte de a prelua orice date cu Apollo, vom configura pagina noastră pentru a putea solicita date, apoi să le transmitem aceste date drept accesorii paginii noastre la momentul construirii.

Să definim o nouă funcție în partea de jos a paginii de sub a noastră Home componentă numită getStaticProps:

export async function getStaticProps() {
  // Code will go here
}

Când Next.js construiește aplicația noastră, știe să caute această funcție. Deci, atunci când îl exportăm, anunțăm Next.js că vrem să rulăm cod în funcția respectivă.

În interiorul nostru getStaticProps funcție, vom reveni în cele din urmă accesoriile noastre la pagină. Pentru a testa acest lucru, să adăugăm următoarele la funcția noastră:

export async function getStaticProps() {
  return {
    props: {
      launches: []
    }
  }
}

Aici, trecem un nou prop launches și setarea la o matrice goală.

Acum, înapoi în interiorul nostru Home componentă, să adăugăm un nou argument destructurat care ne va servi drept suport împreună cu un console.log declarație pentru a testa noul nostru accesoriu:

export default function Home({ launches }) {
  console.log('launches', launches);

Dacă reîncarcăm pagina, putem vedea că ne deconectăm acum de la noul nostru prop launches care include o matrice goală exact așa cum am definit.

1611277748 606 Cum se preia datele GraphQL in Nextjs cu Apollo GraphQL
Exploatarea forestieră lansează prop

Marele lucru legat de acest lucru este că, având în vedere că getStaticProps funcția pe care o creăm este asincronă, putem face orice solicitare dorită (inclusiv o interogare GraphQL) și o putem returna ca recuzită pe pagina noastră, ceea ce vom face în continuare.

Urmați împreună cu comiterea!

Pasul 3: Preluarea datelor cu o interogare GraphQL în Next.js folosind Apollo Client

Acum, când aplicația noastră este pregătită pentru a adăuga elemente de recuzită la pagină și avem instalat Apollo, putem în cele din urmă să facem o cerere pentru a ne prelua datele SpaceX.

Aici vom folosi clientul Apollo, care ne va permite să interacționăm cu serverul SpaceX GraphQL. Vom trimite solicitarea către API folosind metoda Next.js getStaticProps, permițându-ne să creăm în mod dinamic recuzită pentru pagina noastră atunci când se construiește.

Mai întâi, să importăm dependențele noastre Apollo în proiect. În partea de sus a paginii adăugați:

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

Aceasta va include însuși Clientul Apollo, InMemoryCache care permite Apollo să optimizeze citind din cache și gql pe care îl vom folosi pentru a forma interogarea noastră GraphQL.

Apoi, pentru a utiliza clientul Apollo, trebuie să configurăm o nouă instanță a acestuia.

În interiorul vârfului getStaticProps funcție, adăugați:

const client = new ApolloClient({
  uri: 'https://api.spacex.land/graphql/',
  cache: new InMemoryCache()
});

Acest lucru creează o nouă instanță Apollo Client folosind punctul final SpaceX API pe care îl vom folosi pentru a interoga.

Cu clientul nostru, putem face în cele din urmă o interogare. Adăugați următorul cod sub client:

const { data } = await client.query({
  query: gql`
    query GetLaunches {
      launchesPast(limit: 10) {
        id
        mission_name
        launch_date_local
        launch_site {
          site_name_long
        }
        links {
          article_link
          video_link
          mission_patch
        }
        rocket {
          rocket_name
        }
      }
    }
  `
});

Aceasta face câteva lucruri:

  • Creează o nouă interogare GraphQL în interiorul gql etichetă
  • Creează o nouă cerere de interogare folosind client.query
  • Folosește await pentru a vă asigura că finalizează solicitarea înainte de a continua
  • Și în cele din urmă destructuri data din rezultate, unde sunt stocate informațiile de care avem nevoie

În interiorul interogării GraphQL, îi spunem API-ului SpaceX pe care vrem să îl obținem launchesPast, care sunt lansările anterioare de la SpaceX și dorim să obținem ultimele 10 dintre ele (limită). În interiorul acestuia, definim datele pe care am dori să le interogăm.

Dacă luăm o secundă pentru a adăuga o nouă declarație jurnal consolă după aceea, putem vedea ce data se pare ca.

Odată ce actualizați pagina, veți observa că nu vedeți nimic în consola browserului.

getStaticProps rulează în timpul procesului de construire, adică rulează în nod. Din acest motiv, putem privi în interiorul terminalului nostru și putem vedea jurnalele noastre acolo:

1611277748 189 Cum se preia datele GraphQL in Nextjs cu Apollo GraphQL
Înregistrarea datelor la terminal

După ce am văzut asta, știm că în interiorul data obiect, avem o proprietate numită launchesPast, care include o serie de detalii de lansare.

Acum, putem actualiza declarația noastră de returnare pentru a o utiliza launchesPast:

return {
  props: {
    launches: data.launchesPast
  }
}

Și dacă adăugăm al nostru console.log declarație înapoi în partea de sus a paginii pentru a vedea ce este launches prop arată, putem vedea că datele noastre de lansare sunt acum disponibile ca accesorii pentru pagina noastră:

1611277749 61 Cum se preia datele GraphQL in Nextjs cu Apollo GraphQL
Accesorii de conectare la consola web

Urmați împreună cu comiterea!

Pasul 4: Adăugarea datelor de lansare SpaceX pe pagină

Acum, pentru partea interesantă!

Avem datele noastre de lansare pe care le-am putut folosi Apollo Client pentru a solicita de la serverul SpaceX GraphQL. Am făcut această solicitare în getStaticProps astfel încât să ne putem pune la dispoziție datele ca launches prop care conține datele noastre de lansare.

Căutând în pagină, vom profita de ceea ce există deja. De exemplu, putem începe prin actualizarea fișierului h1 eticheta și paragraful de mai jos pentru a descrie ceva mai bine pagina noastră.

1611277749 201 Cum se preia datele GraphQL in Nextjs cu Apollo GraphQL
Titlul paginii actualizat

În continuare, putem folosi cardurile de linkuri deja existente pentru a include toate informațiile noastre de lansare.

Pentru a face acest lucru, să adăugăm mai întâi un Hartă declarație în interiorul grilei paginii, unde componenta pe care o returnăm este una dintre cărți, cu detalii de lansare completate:

<div className={styles.grid}>
  {launches.map(launch => {
    return (
      <a key={launch.id} href={launch.links.video_link} className={styles.card}>
        <h3>{ launch.mission_name }</h3>
        <p><strong>Launch Date:</strong> { new Date(launch.launch_date_local).toLocaleDateString("en-US") }</p>
      </a>
    );
  })}

De asemenea, putem scăpa de restul cardurilor implicite Next.js, inclusiv Documentație și Aflați.

1611277750 414 Cum se preia datele GraphQL in Nextjs cu Apollo GraphQL
Lansează pagina cu SpaceX

Pagina noastră include acum ultimele 10 lansări de la SpaceX împreună cu data lansării!

Putem chiar să facem clic pe oricare dintre aceste carduri și, deoarece ne-am conectat la linkul video, putem vedea acum videoclipul de lansare.

Urmați împreună cu comiterea!

Ce urmeaza?

De aici, putem include orice date suplimentare din interiorul nostru launches matrice pe pagina noastră. API-ul include chiar și imagini de patch-uri de misiune, pe care le putem folosi pentru a afișa grafică frumoasă pentru fiecare lansare.

Puteți adăuga chiar și date suplimentare la interogarea GraphQL. Fiecare lansare are o mulțime de informații disponibile, inclusiv echipajul de lansare și mai multe detalii despre rachetă.

https://api.spacex.land/graphql/