Register Now

Login

Lost Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

Login

Register Now

Thank you for registering with WPTricks

Crash Course: Headless WordPress with WPGraphQL, ACF, and React – Video Tutorial

In this crash course, we go over the basics of how to get a simple headless #WordPress setup with #WPGraphQL and #React. Using this method of WordPress development vs a traditional setup has many benefits. I go over how to get a simple setup of using Create React App and using GraphQL and WordPress to feed data to that app.

 

About WPTricks

Comments ( 32 )

  1. I hope you learned as much as I did. Let me know what other topics you'd like me to cover!

  2. one of the best videos seen in the last months on youtube, good job.

  3. will wpgraphql work with woocommerce?

  4. awesome lesson, short and clear! Many thanks!!
    one thing about wordpress' edit theme: you should never do it directly, but use child theme instead! otherwise all theme changes will be lost with theme update
    But the lesson is really great, thanks again!

  5. Hi. Thanks for the tutorial! What do you think about wpgraphql + ACF + wp VS strapi + wp? Also, there is this plugin wpgraphql meta query – have you managed to make it working with WP + wpgrahql + acf?

  6. Hello,
    It would be possible to get a repo for your tutorial because I have undefined variable problems
    I can't find the problem.
    Thank you to you

  7. @WPCast Hello, Im a wordpress developer and recently wanted to expand my knowledge and start learning react. I want to start out by using wordpress as a headless cms. I just wanted to ask you how dose it work with deploying a web app with wordpress and react? at the moment i got a shared hosting plan on siteground. Is it possible to deploy the site to that shared hosting plan? Do the server need to have node installed? Thanks in forehand. Btw great tutorial as always 🙂

  8. very good video I am trying to make a post request with WP + WPGql + React, some example that I can consult

  9. I've been struggling with graphql and wordpress, especially with custom post types, but you explained everything perfectly. This is exactly what I need. Thanks!

  10. Installing this one lets you expose Post Types via plugin to grapql https://github.com/wp-graphql/wp-graphql-custom-post-type-ui you also need Custom Post types UI so this plugin can work.

  11. Did you do some deep development in plugins? Great video

  12. Sent you an email on this, but are there benefits to using this without react in a parent theme? Is it more performant than using `get_field()` and such? Thanks

  13. Just one thing to say, Thanks.
    PD: Two, SUBSCRIBED.

  14. hey @WPCasts great tutorial thanks
    at time : https://youtu.be/9KGuI0UmpMw?t=1402
    Is it possible to query the toaster by on the basis of price? example find all the toaster which has price equals to 1000

  15. hello, need some help
    query getRavkliksBySlug($slug: String) {

    ravlik: ravlikBy(uri: $slug){

    title

    ravlikMeta{

    price

    amount

    }

    }

    }
    this code give me mistake http://prntscr.com/p88fih

    [GraphQL error]: Message: No Ravlik exists with this id: , Location: [object Object], Path: ravlik

  16. For some reason my routes isn't rendering a new page with the toaster, instead it is just rendering below the link on the Toasters page

  17. This is incredible !! Could you plz push this a bit further and show us how to build a CRUD app with this toolset (WP + WPGql + React) … nothing like this out there … so pretty pleeeease … thanx in advance!

  18. I haven't even watched the full tutorial and I've learned a lot more than others trying to teach this concept. Thanks man! Can't wait to complete my project now

  19. thanks so much! great info! is there a git repo of the react app to look at the actual code? thanks again!

  20. Awesome tutorial! This is something I've been wanting to spin up for a while. Random question: What microphone do you use?

  21. Very good tutorial, thank you for sharing! For those wanting more, try https://github.com/postlight/headless-wp-starter

  22. Thank you for the tutorial. I'm still grappling with the need for this on a wordpress site. I understand if you're an app developer, but is there a practical reason for using react and graphQL for frontend wordpress development? I've been using PHP to place data exactly where i want it. It looks like using react to place data in divs is a slow process other than for apps as I mentioned.

  23. It would have been really great if the completed code for this was also made available somewhere. Secondly, I feel that we need to configure react separately for each Website, is this correct?

  24. Very interesting video. Learned a lot. Thank you.
    Question: Why not just using built in RestAPI instead of GraphQL?

  25. What are the pros of doing this way instead of Php?

  26. very informative and well done presentation. thanks for simply staying on topic!

  27. Great explanation. Quick question, what's your preferred way of getting a new WP project up and running these days?

Leave a reply