Crash Course: Headless WordPress with WPGraphQL, ACF, and React

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.
*Plugins I used*
- github.com/wp-graphql/wp-graphql
- github.com/wp-graphql/wp-grap...
- wordpress.org/plugins/advance...
- github.com/wp-graphql/wp-grap...
Get WordPress Hosting:
wpcasts.tv/go/kinsta
Sign up for the newsletter to notified about the free 2020 WordPress Development Course: wpcasts.tv
*Don't forget to subscribe!*
*SOCIAL*
Twitter: / alexanderbyoung
Instagram: / the_alex_young

[@WPCasts]

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

[@sai_charan]

WooCommerce :)

[@husainahmmed9025]

Ecommerce project using WordPress and GatsbyJS

[@nospamman4443]

realtime db streaming with kafka or logstash :)

[@denniszenanywhere]

I like your pace and tone, makes everything easy to digest. Question: I finished gatsby blog portfolio using contentful for back end months ago and have been trying to deploy on netlify for months now. I am getting build error 1. I already exhausted all possible solutions online, on GitHub and stack overflow but still getting that netlify build error. I have removed package-lock Json and keep reinstalling node modules as instructed by some but still getting build error. My gatsby blog works on local host. So I am thinking perhaps netlify is the problem and I should just have it hosted somewhere to finally make it work? If you could do a course on a movie review ratings site, that’d be great. I have not seen any ratings site tutorial anywhere on KZbin. Thanks

[@piotrszczesniak685]

Headless is what excites me the most as it combines what is known and widely used i.e. WP with what is new and blazing fast on the frontend e.t. React :) I guess Next.js is better for SEO purposes but I will get there, for now I need to grasp React pretty strong :)

[@SimPwear84]

Simply amazing! You cleared a lot of doubts I had. Thanks so much for such a wonderful tutorial

[@BucurIonNiculae]

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

[@tedspens]

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!

[@ketanvyawahare7407]

You are amzing !! You just emptied my bag of doubts !! I am straight away moving ahead with my development

[@GideonIbemereJr]

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

[@webjaved]

I loved this tutorial, I think I am going to play around with this over the next couple of weeks!

[@WPCasts]

Have fun!

[@rv4tyler]

2024: The WP GraphiQL IDE is part of the WPGraphQL plugin now. This is still appears relevant and informative.

[@nickschmitt8594]

You are such a good teacher.

[@TheCarlosAlfaro]

Awesome video! I learned a lot! I will definitely start playing around with WP, GQL and React. Thank you!

[@shashwathramesh9040]

I have one doubt

[@wewantphil]

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

[@WPCasts]

I'm glad you thought so! I appreciate the feedback!

[@ChrisChristensen143]

Great video. Thanks for sharing.

[@ahmedmusawir]

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!

[@SS4DEUCE]

I’ll need this

[@vladimirputindreadlockrast812]

Very enjoyable.

[@jocelyndesigns]

Hi Alex, I found your channel yesterday and have been watching a few of your videos. All of them are informative. Thank you for doing this. PS: this particular video put me right to sleep, but that's only because I'm not a coder and have no idea what is happening! Lol Hmm wonder if I'm the only non-developer here!

[@jeswinthgabriel8319]

This Crash Course is awesome. There is a graphql query which is used in this course where we get toaster by slug, was deprecated. The below query is working. const GetToasterBySlug = gql` query getToasterBySlug($slug:ID!) { toaster(id: $slug, idType: URI) { title toasterMeta{ price watts } } } `; So please use this.

[@piotrszczesniak685]

This one is a game changer for me!

[@davy5537]

Just solved all my questions and problems in less than 10 mins.... I love you, man!!!

[@WPCasts]

So glad it helped!!

[@darkday2096]

Absolutely same here!

[@luispacheco5692]

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

[@user-iy2ts7re4w]

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!

[@mtuan2086]

learned a lot. thanks so much

[@vstrelianyi]

Great tutorial! thx

[@av3y]

Great man

[@errorerror1337]

Awesome, thank you for this!

[@WPCasts]

You're very welcome!!

[@carlosrgl5355]

dude love your videos. keep going!

[@WPCasts]

Thanks! I plan on it :)

[@samb.4260]

You make awesome and useful videos- these topics are super important. But can you please put these examples on Github, it is really hard to scroll through the videos to look for a bracket I missed.

[@Eskimoz]

C'est super. Bravo

[@Hastishah]

Thank you, I found Video on right time., I was looking for resources on learning Headless WordPress :)

[@WPCasts]

That’s great! I hope this helps :)

[@Hastishah]

@@WPCasts Yes Its really Great.

[@andresposadallano9490]

Thanks a lot!

[@AllanLeonardJr]

Good stuff!

[@AndersonSilvaMMA]

Thanks man for this! 🙏🏻

[@WPCasts]

You're very welcome!

[@khemchay]

Wordpress is very powerful, not just for blogging it can do a lot.

[@zhannavysotskaya8540]

Thank you so much!!

[@chaeclark2974]

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

[@krosenk729]

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

[@tanveermalik5907]

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?

[@paweberth593]

What do you think about Frontity?

[@luisalvarez3274]

it was my first experience with graph ql

[@shaponpal3378]

Great

[@paladinministries8108]

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

[@dandev8514]

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

[@swedo12]

I'm working through this in 2020. The graphql syntax seems to have moved on from what's in the video at time of making. Anyone got a recent version? The one he's using with $slug needs diff syntax now.

[@TheShifu13]

I've tried to look for it without success, but I have a website I made using wordpress. I want to make my wordpress headless, but how do I get the project down on visual studio code, so I can work with it? I remember I could do it with Netbeans a couple a years ago.

[@barnabasch9525]

Great video, it helped me a lot, thanks! What resource you use to figure this out? All by yourself? Amazing stuff anyways.

[@yahilmadakiya1023]

Thank you so much for the Awesome video and explanation, It helps a lot. I have a question that how can we change the site title and meta description and other meta tags based on the single page content. Do you have any ref link where I can check that or in your free time can you create one awesome video like this? Thanks once again

[@qAntBcn]

HI there! Thank you for the tutorial! Is there some new version of this in 2022? Or All this info is still relevant?

[@MrJobocan]

Is there something with newer versions of apollo or something that prevent this from working correctly? Basically if I re-save the page with a new URL for the graphql query (I just change it to an incorrect one then put the correct one back in), I get results, but if I refresh the page or load the page from scratch, the query gets stuck in loading state forever.

[@andreasmou6539]

Hi nice video , what about Frontity ?

[@Ryan770]

Would you be able to revisit this? I'm having issues trying to implement this in the current version of react.

[@francischin9789]

There is an erorr : ./src/App.js Attempted import error: './Toasters/Toaster' does not contain a default export (imported as 'Toaster'). I think is because at Toaster.js file, we did not export as default Toaster...causing this error. So, how to overcome this?

[@michaelclapp1884]

Is this still a working example? Getting this error ... "Attempted import error: 'Toasters' is not exported from './Toasters/Toasters'."

[@aurelianspodarec2629]

Where are hooks? Its July 2019 :/

[@robeeeeen]

Excellent, how to remove tags from Blog posts which are coming from WordPress?

[@ariamustofa]

@WPCasts my menu is not showing, what is the problem?

[@josuebarros-desenvolvedorw2490]

please show us how to do with NuxtJS (Vue)

[@Labyrinthman]

I'm getting No routes matched location "/"

[@zipponvr7043]

So we can create an android or apple app through react native with WPGraphQL! This is quite awesome, isn't it? :)

[@albertovaldes9820]

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

[@WPCasts]

I just made a video on the subject. Here is the video: kzbin.info/www/bejne/kIO0ameGgrN4mck

[@stmaSbg]

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

[@WPCasts]

There are pros and cons to both. But I've been more inclined to use GraphQL recently because I'm not over-fetching data from the server, my data objects can be changed on the frontend, it's performant, and has great tools such as GraphiQL. There are many other reasons too, but those are the first that came to mind. Hope it helps :)

[@MartinSternsberger]

Thank for your comprehensible answer.

[@rust1477]

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

[@WPCasts]

Locally I use Flywheel for simple projects. If I need something more complex, I’ll use a custom Docker image 👍

[@rust1477]

@@WPCasts Gotcha, thanks!

[@denniszenanywhere]

Can you please explain why Wordpress is still relevant when react with node js would be ideal thing to do. Just curious because many are saying Wordpress is slow and less secure.

[@davy5537]

WP is your bestfriend if you have clients who don't know HTML and only needs a website for their small-medium business. To post some news about their business, updates or blogs, promotions and other simple stuff.WP Saves you a lot of time in development. For some serious data processing, NO, don't ever use WP. LOL

[@n4870s]

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?

[@WPCasts]

I haven't actually used Strapi before, so I can't say much in that area. But for the meta_query plugin, yes i've been able to get it up and running. If you need meta queries, it does exactly that.

[@n4870s]

WPCasts I found the plugin versions which worked for me: - Wp-Graphql v0.3.8 - WPGraphql Meta Query v0.04 - WPGraphql for Advanced Custom Fields v0.2.1 On a side note - given react/vue etc are component oriented and given that one can arrange and re-use as many components as they wish on a given page, do you think it's wise to make each component to do its own graphql query request? Isn't it better to somehow combine all the queries in single request? If you have some idea how to do that, it would be most appreciated. Thanks

[@andresconrado]

Maybe this is a stupid question but... Why would you use this graphql thing when you can access the data using the wordpress rest api directly?

[@francischin9789]

Because if you were to use Wordpress Rest API Directly, you will get back lots of Json data that you may not need and also it make complicated query within the wordpress making it slow to return. Therefore, using graphQL, you only send in query string based on exactly what data you want., so is faster.

[@kristopherk1091]

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.

[@gonzoartemis2503]

WordPress itself is hinting about shifting towards JS. Their wordpress.com use React! For their desktop app, they use the same code base wrapped in Electron. As for new Gutenberg editor, it is made of React! React like many other front-end technologies do not slow things. Your PHP is run on the server while React, Vue, etc run on the browser. Basically, GraphQL gets the data as requested and pass it down to React/Vue. Then no more calls to the server unless you refresh the page which most modern apps frown upon. It is slow during the first call but real quick (like native apps) when data is received. GraphQL has a single endpoint and can make nested and batched queries. In contrast, WP REST API has multiple endpoints and usually you are obliged to make few calls to receive a whole set of data. With GraphQl, it is a one-time hit. As for the frameworks, Vue is much more performant than React. All that being said, if you are not planning to have a single code base serving mobile and desktop (probably an electron wrapped app too) then all these JS framework would not be much interesting.

[@przemysawlewtak789]

Hi mate, amazing tutorial!, Unfortunately the error I have is: query GET_TOASTER_BY_SLUG($slug: String) { toaster: toasterBy(uri: $slug) { toasterMeta { price watts } } } and it says 'the field Root.query toasterBy is deprecated and when i press play button from wordpress dashboard i have { "data": { "toaster": null } } did i miss something?

[@skammernet]

``` query getToasterBySlug($slug: ID!) { toaster(id: $slug, idType: URI){ title toastermeta{ price watts } } } ``` There was a change to syntax, I think. docs.wpgraphql.com/getting-started/posts/#idtype-argument

[@BLKMARKET]

@@skammernet THANK YOU!!!!

[@TheClaumigue]

@jeswinthgabriel8319 hace 2 años This Crash Course is awesome. There is a graphql query which is used in this course where we get toaster by slug, was deprecated. The below query is working. const GetToasterBySlug = gql` query getToasterBySlug($slug:ID!) { toaster(id: $slug, idType: URI) { title toasterMeta{ price watts } } } `; So please use this.

[@STMZY]

@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 :)

[@WPCasts]

Most WordPress hosts don't also host Node applications, so when it's time to go live, you will need to find a hosting service for the frontend.

[@STMZY]

@@WPCasts Okay thank you, Do you have any hosting service to recommend? btw I would love to se a tutorial about deploying a react app :)

[@WPCasts]

Digital Ocean is usually my go-to for small projects. For large WordPress sites, I have used Pantheon with some success. React projects have either used Netlify or Now.

[@andresposadallano9490]

I'm using this query: const GetToasterBySlug = gql` query GetToasterBySlug($slug: ID!) { toaster(id: $slug, idType: SLUG) { title toasterMeta { price watts } } } `; I'm getting this error: [GraphQL error]: Message: Variable "$slug" of required type "ID!" was not provided., Location: [object Object], Path: undefined Anyone can help me please? Thanks!

[@disneytim3]

did you get the answer? i'm stucked in the same problem! 😅

[@AndrewSuperR]

​@@disneytim3 Yes. Many things changed since the video release -- install same dependencies; Or if you are trying the same approach with all new packages, check new documentations: React v18 hooks; React-Router v6; Apollo v3; just for this line to work use ( however this won't fix the whole code ): const GET_TOASTER_BY_SLUG = gql` query GET_TOASTER_BY_SLUG($slug: ID!) { toaster: toaster(id: $slug, idType: SLUG) { slug title toasterMeta { price watts } } } `;

[@Frondlock]

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

[@RossWintle]

This was my question too. This is a LOT of added complexity. I get that it improves speed and security. But this seems like a LOT of extra technology and knowledge required to do something very basic.

[@WPCasts]

This is a good question. In my opinion having WordPress decoupled from the frontend allows your data source to stay the same, but have your frontend technology evolve as you choose. So if you want to use Next, CRA, or Gatsby, it would be relatively easy to do so. Also, if you wanted to create a mobile app out of your data, your data is already good to go. :)

[@gonzoartemis2503]

@@RossWintle You are absolutely right. Much complexity, especially using React instead of Vue. However, the gains are enormous for high trafic websites that would like to keep WP at the backend.

[@ravindraverma8413]

hey @WPCasts great tutorial thanks at time : kzbin.info/www/bejne/b3yqpnxmitKjg9k Is it possible to query the toaster by on the basis of price? example find all the toaster which has price equals to 1000

[@WPCasts]

Check out this plugin. This might allow for that. docs.wpgraphql.com/extensions/wpgraphql-meta-query