How to get WP GraphQL data on React front-end using Axios?

I want to know how to query data from the WP GraphQL plugin using Axios on a React front-end.

I have a headless WordPress installation with the WP GraphQL plugin installed (that part is working great), but I need help understanding how to query the post data on the front-end of the site, which is built in React.

My impression is that I can call Axios inside of a componentDidMount() method, and beyond that idea, I am stuck.

GraphQL endpoint: https://head.mysite.com/graphql

Query:

    {
    toasters {
      edges {
        node {
          title
          toasterMeta {
            color
            brand
          }
        }
      }
    }
  }

toasters is the name of a custom post type, and in my WP GraphiQL explorer it returns the results I am expecting to see -- the query is from there.

For example, this normal WP API request works, but it's not GraphQL

axios.get(https://techcrunch.com/wp-json/wp/v2/posts).then(posts = {
        this.setState({
            posts: posts.data
        });
});

Topic headless Wordpress

Category Web

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.