close

将外部 API 集成到 Next.js ：RESTful API 或 GraphQL

Next.js 在本节中，我们将指导您通过从 RESTful API 或服务获取数据来 将外部数据集成到您的应用程序中 GraphQL。 通过集成外部 API，您可以使用实时数据丰富您的应用程序并提供动态的用户体验。

从 RESTful API 获取数据

RESTful API 是从外部源检索数据的常见方法。 以下是从应用程序中的 RESTful API 获取数据的方法 Next.js：

使用 fetch API 或类似库 axios 向外部 API 发出 HTTP 请求。

处理响应并处理从 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);  
    });  
}

结论

集成外部 API（无论是 RESTful 还是 .NET）都 GraphQL 允许您访问来自各种来源的数据，并 Next.js 使用最新的动态内容增强您的应用程序。 通过掌握 API 集成，您可以在应用程序中提供更丰富、更具吸引力的用户体验。