How to read Response Header with pagination metadata.

[shyammaggo]

Hi,
I am returning Pagination Metadata (Total records, page number, total pages) etc. from my API in a X-Pagination response header.
My Vue.Js code is making a GET call to the API to get records and pagination metadata in the header.

I am trying to read the response header to implement the pagination but I am not able to do it.
Is there a working code sample to refer, I am new to Vue.JS development and kind of out of ideas.
Please share the sample code or any tips to move forward.

Thanks in Advance

[sindresorhus]

ky returns standard Response objects, so you can access headers directly:

const response = await ky.get('https://api.example.com/items');

// read the X-Pagination header
const paginationHeader = response.headers.get('X-Pagination');
const pagination = JSON.parse(paginationHeader);

console.log(pagination.totalRecords);
console.log(pagination.pageNumber);
console.log(pagination.totalPages);

// get the body
const data = await response.json();

or combine it in one call:

async function fetchWithPagination(url) {
	const response = await ky.get(url);
	
	return {
		data: await response.json(),
		pagination: JSON.parse(response.headers.get('X-Pagination'))
	};
}

// usage
const {data, pagination} = await fetchWithPagination('https://api.example.com/items');

note: if you use .json() shortcut directly (like await ky.get(url).json()), you lose access to headers. use the two-step approach above to read both headers and body.