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
});
});