Integracja zewnętrznych interfejsów API w Next.js: RESTful API lub GraphQL

W tej sekcji przeprowadzimy Cię przez proces integracji danych zewnętrznych z Next.js aplikacją poprzez pobranie danych z interfejsów API lub GraphQL usług RESTful. Integrując zewnętrzne API, możesz wzbogacić swoją aplikację o dane w czasie rzeczywistym i zapewnić dynamiczną obsługę użytkownika.

Pobieranie danych z RESTful API

Interfejsy API RESTful to powszechny sposób pobierania danych ze źródeł zewnętrznych. Oto jak możesz pobrać dane z RESTful API w swojej Next.js aplikacji:

Użyj fetch interfejsu API lub biblioteki, axios aby wysyłać żądania HTTP do zewnętrznego interfejsu API.

Obsłuż odpowiedź i przetwórz dane pobrane z API.

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

Pobieranie danych z GraphQL usługi

GraphQL to język zapytań dla interfejsów API, który umożliwia żądanie dokładnie takich danych, jakich potrzebujesz. Aby pobrać dane z GraphQL usługi w Next.js aplikacji:

Użyj GraphQL biblioteki klienta, na przykład apollo-client do wysyłania GraphQL zapytań do usługi.

Zdefiniuj GraphQL zapytanie, aby określić dane, które chcesz pobrać.

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

Wniosek

Integracja zewnętrznych interfejsów API, zarówno RESTful, jak i GraphQL, umożliwia dostęp do danych z różnych źródeł i wzbogacanie Next.js aplikacji o aktualne i dynamiczne treści. Opanowując integrację API, możesz zapewnić bogatsze i bardziej angażujące doświadczenia użytkowników w swojej aplikacji.