How to get response headers from WP REST API in Next.js?

Question

I am fetching some data from WP REST API in Next.js with Isomorphic unfetch, how can I get response headers?

import fetch from 'isomorphic-unfetch';

class Blog extends React.Component {
    static async getInitialProps() {
        const res = await fetch('https://wordpress.org/news/wp-json/wp/v2/posts');
        const data = await res.json();
        return { 
            res: res,
            data: data
        };
    }

    render() {
        console.log(this.props.res)
        console.log(this.props.data)
        return (
            <h1>Blog</h1>
        )
    }
}

I don't see anything available in the console

but headers are there when I just open url in browser

fkrsc · Accepted Answer · 2020-01-18 20:42:13Z

2

res.headers will returns all headers according to this. You can use res.headers.get('x-wp-total') to get value, then return it inside getInialProps function.

import fetch from 'isomorphic-unfetch';

class Blog extends React.Component {
    static async getInitialProps() {
        const res = await fetch('https://wordpress.org/news/wp-json/wp/v2/posts');
        const data = await res.json();
        return { 
            res: res,
            data: data,
            wpTotal: res.headers.get('x-wp-total')
        };
    }

    render() {
        console.log(this.props.wpTotal)
        console.log(this.props.data)
        return (
            <h1>Blog</h1>
        )
    }
}

edited Jan 18, 2020 at 20:42

answered Jan 18, 2020 at 19:33

fkrsc

1512 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Marko Over a year ago

Unfortunately I get undefined, I can only access size and timeout inside this.props.res

Marko Over a year ago

I didn't see your edited post until now. Thank you, this way I do get the values!

Deep Kakkar Over a year ago

I am getting error as response.headers.get is not a function. In my case, I need to get the response before deleting, and GET response headers contains the tag value.

Deep Kakkar Over a year ago

@Marko getting a related issue, I have to pass headers in further API call. Can you please look in to it here stackoverflow.com/questions/69678380/…

Collectives™ on Stack Overflow

How to get response headers from WP REST API in Next.js?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related