JAVASCRIPT
Navigate Paginated APIs Using HATEOAS Link Headers
Learn to programmatically navigate paginated API responses by parsing and utilizing HTTP `Link` headers, adhering to HATEOAS principles for flexible data fetching.
async function fetchAllPaginatedData(initialUrl, config = {}) {
let allData = [];
let nextUrl = initialUrl;
while (nextUrl) {
try {
const response = await fetch(nextUrl, config);
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const data = await response.json();
allData = allData.concat(data.items || data); // Adjust based on your API's response structure
const linkHeader = response.headers.get('Link');
nextUrl = getNextLink(linkHeader);
} catch (error) {
console.error('Error fetching paginated data:', error);
break;
}
}
return allData;
}
function getNextLink(linkHeader) {
if (!linkHeader) return null;
// Regex to find a link with rel="next"
const nextLinkMatch = linkHeader.match(/<([^>]+)>;\s*rel="next"/);
return nextLinkMatch ? nextLinkMatch[1] : null;
}
// Example usage:
fetchAllPaginatedData('https://api.example.com/products?page=1&per_page=10') // Replace with your API endpoint
.then(products => {
console.log(`Fetched ${products.length} products in total.`);
console.log('All products:', products);
})
.catch(error => console.error('Failed to fetch all paginated products:', error));
How it works: This JavaScript snippet shows how to consume data from a paginated API that uses HTTP `Link` headers (HATEOAS) for navigation. It iteratively fetches pages by extracting the 'next' link from the `Link` header of each response until no more 'next' links are found. This approach makes the client resilient to changes in pagination query parameters, relying on the API to guide the client to the next resource.