இதில் வெளிப்புற 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);  
    });  
}  

முடிவுரை

வெளிப்புற APIகளை ஒருங்கிணைத்தல், RESTful அல்லது GraphQL, பல்வேறு ஆதாரங்களில் இருந்து தரவை அணுகவும், Next.js புதுப்பித்த மற்றும் மாறும் உள்ளடக்கத்துடன் உங்கள் பயன்பாட்டை மேம்படுத்தவும் உங்களை அனுமதிக்கிறது. API ஒருங்கிணைப்பை மாஸ்டர் செய்வதன் மூலம், உங்கள் பயன்பாட்டில் பணக்கார மற்றும் அதிக ஈடுபாடு கொண்ட பயனர் அனுபவங்களை வழங்கலாம்.