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