यस खण्डमा, हामी तपाईंलाई RESTful API वा सेवाहरूबाट Next.js डाटा ल्याएर तपाईंको अनुप्रयोगमा बाह्य डाटा एकीकृत गर्ने प्रक्रियामा मार्गदर्शन गर्नेछौं । 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 अप-टु-डेट र गतिशील सामग्रीको साथ तपाईंको अनुप्रयोग बढाउन अनुमति दिन्छ। एपीआई एकीकरणमा निपुणता हासिल गरेर, तपाइँ तपाइँको एप्लिकेसनमा थप धनी र थप आकर्षक प्रयोगकर्ता अनुभवहरू प्रदान गर्न सक्नुहुन्छ।