外部 API の統合 Next.js: RESTful API または GraphQL

Next.js このセクションでは、 RESTful API またはサービスからデータを取得して、 外部データをアプリケーションに統合するプロセスについて説明します GraphQL。 外部 API を統合することで、リアルタイム データでアプリケーションを強化し、動的なユーザー エクスペリエンスを提供できます。

RESTful APIからのデータの取得

RESTful API は、外部ソースからデータを取得する一般的な方法です。 アプリケーションで RESTful API からデータをフェッチする方法は次のとおりです Next.js。

外部 API に対して HTTP リクエストを行うには、 fetch API またはライブラリを 使用します。 axios

応答を処理し、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);  
    });  
}  

GraphQL サービス からのデータの取得

GraphQL は、必要なデータを正確にリクエストできる API のクエリ言語です。 GraphQL アプリケーションのサービス からデータをフェッチするには Next.js:

サービスにクエリを 送信するに GraphQL は、クライアント ライブラリ を使用します。 apollo-client GraphQL

GraphQL 取得するデータを指定するクエリ を定義します。

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

結論

RESTful か にかかわらず、外部 API を統合すると、さまざまなソースからデータにアクセスし、 最新の動的なコンテンツでアプリケーションを GraphQL 強化できます。 Next.js API 統合をマスターすることで、アプリケーションでより豊かで魅力的なユーザー エクスペリエンスを提供できます。