Package apiFetch Response Headers

[fishstix81]

Using fetch I can see the response headers from the given api call. Is there a way to do that using apiFetch?

[youknowriad]

Just pass { parse: false } you'll get the whole response object instead of just the parsed body.

[fishstix81]

Thanks @youknowriad I do see the full response object. Unfortunately the headers are an empty object. I'm attempting to paginate a collection. Does apiFetch give me some indication of how many pages I might have without needing to get a 400 error back saying rest_post_invalid_page_number

[youknowriad]

apiFetch is unopinionated in that regard, if you have headers, you'll have them, if you don't, you won't see them. So likely a rest point issue and not an apiFetch one.

[kadamwhite]

@squibbleFish Depending on how you're trying to inspect the headers, it may appear to be an empty object when it is not. This tripped me up today, and I found a solution which works for me: headers is an Iterable, which means it will console.log as an empty object but you can actually iterate over it and see all the responses. This middleware method should demonstrate how this works:

apiFetch.use( ( options, next ) => {
	return next( {
		...options,
		parse: false,
	} ).then( ( response ) => {
		// response.headers is an iterable! This works:
		response.headers.forEach( console.log );
		return response;
	} );
} );

[kadamwhite]

Putting it another way, @squibbleFish , you can get the total pages through this:

	const totalPages = response.headers && response.headers.get( 'X-WP-TotalPages' );

[mediacs]

I hope I'm in the right place here, the previous posts were helpful to me:
I'm trying to get the total number of pages in the latest posts block and added a apiFetch to the withSelect component in the registerBlockType:

edit: withSelect( function( select ) {
        return {
                posts: select( 'core' ).getEntityRecords( 'postType', 'post', { per_page: 1, page: 1 }),
                numberOfPages: wp.apiFetch({
                    path: wp.url.addQueryArgs( 'wp/v2/posts', {per_page: 1, page: 1} ),
                    parse: false,
                }).then( response => { return response; } ),
            };
        } )( myComponent )

This almost does the trick. When I access the numberOfPages prop in myComponent, I get a promise. I feel this is not the way to do it. I'm having a hard time figuring out the differences, what to use where, use gentEntityrecords or apiFetch. Am I making any sense?

[kadamwhite]

@mediacs I think the right place for your question is the support forums; this thread is dedicated towards discussion about how to create and improve the Gutenberg editor code itself, and unfortunately it's not a place we can provide support. I do think you're using withSelect correctly, for what it's worth, but apiFetch isn't designed to be used directly within that method. Hope you're able to get some guidance in the forums!