Külső API-k integrálása Next.js: RESTful API-kba vagy GraphQL

Ebben a részben végigvezetjük Önt a külső adatok alkalmazásba történő integrálásának folyamatán, az adatok RESTful API-kból vagy szolgáltatásokból Next.js való lekérésével. GraphQL A külső API-k integrálásával valós idejű adatokkal gazdagíthatja alkalmazásait, és dinamikus felhasználói élményt biztosíthat.

Adatok lekérése egy RESTful API-ból

A RESTful API-k gyakori módja a külső forrásokból származó adatok lekérésének. A következőképpen kérhet le adatokat a RESTful API-ból az alkalmazásban Next.js:

Használja az fetch API-t vagy egy könyvtárat, például axios HTTP-kéréseket küldjön a külső API-nak.

Kezelje a választ, és dolgozza fel az API-ból lekért adatokat.

import axios from 'axios';  
  
function fetchData() {  
  axios.get('https://api.example.com/data')  
    .then(response => {  
      const data = response.data;  
      // Process the data  
    })  
    .catch(error => {  
      console.error(error);  
    });  
}  

Adatok lekérése GraphQL szolgáltatásból

GraphQL egy API-k lekérdezési nyelve, amely lehetővé teszi, hogy pontosan a szükséges adatokat kérje le. Adatok lekérése egy GraphQL szolgáltatásból az alkalmazásban Next.js:

Használjon GraphQL ügyfélkönyvtárat, például lekérdezéseket apollo-client küldjön GraphQL a szolgáltatásnak.

Határozza meg a GraphQL lekérdezést a lekérni kívánt adatok megadásához.

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';  
  
const client = new ApolloClient({  
  uri: 'https://graphql.example.com',  
  cache: new InMemoryCache(),  
});  
  
function fetchGraphQLData() {  
  client.query({  
    query: gql`  
      query {  
        posts {  
          title  
          content  
        }  
      }  
    `,  
  })  
    .then(result => {  
      const data = result.data;  
      // Process the data  
    })  
    .catch(error => {  
      console.error(error);  
    });  
}  

Következtetés

A külső API-k integrálása, legyen az RESTful vagy GraphQL, lehetővé teszi a különböző forrásokból származó adatok elérését, és az Next.js alkalmazás frissítését naprakész és dinamikus tartalommal. Az API-integráció elsajátításával gazdagabb és vonzóbb felhasználói élményt biztosíthat az alkalmazásban.