बाहरी एपीआई को एकीकृत करना Next.js: रेस्टफुल एपीआई या GraphQL

इस अनुभाग में, हम RESTful API या सेवाओं Next.js से डेटा प्राप्त करके आपके एप्लिकेशन में बाहरी डेटा को एकीकृत करने की प्रक्रिया में आपका मार्गदर्शन करेंगे। GraphQL बाहरी एपीआई को एकीकृत करके, आप अपने एप्लिकेशन को वास्तविक समय डेटा के साथ समृद्ध कर सकते हैं और एक गतिशील उपयोगकर्ता अनुभव प्रदान कर सकते हैं।

रेस्टफुल एपीआई से डेटा प्राप्त किया जा रहा है

RESTful API बाहरी स्रोतों से डेटा पुनर्प्राप्त करने का एक सामान्य तरीका है। Next.js यहां बताया गया है कि आप अपने एप्लिकेशन में RESTful API से डेटा कैसे प्राप्त कर सकते हैं:

बाहरी एपीआई के लिए HTTP अनुरोध करने के लिए fetch एपीआई या लाइब्रेरी का उपयोग करें । axios

प्रतिक्रिया को संभालें और एपीआई से प्राप्त डेटा को संसाधित करें।

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 एपीआई के लिए एक क्वेरी भाषा है जो आपको आपके लिए आवश्यक डेटा का अनुरोध करने में सक्षम बनाती है। 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);  
    });  
}  

निष्कर्ष

बाहरी एपीआई को एकीकृत करना, चाहे रेस्टफुल हो या GraphQL, आपको विभिन्न स्रोतों से डेटा तक पहुंचने और Next.js अप-टू-डेट और गतिशील सामग्री के साथ अपने एप्लिकेशन को बढ़ाने की अनुमति देता है। एपीआई एकीकरण में महारत हासिल करके, आप अपने एप्लिकेशन में समृद्ध और अधिक आकर्षक उपयोगकर्ता अनुभव प्रदान कर सकते हैं।