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 TH-cam. Thanks
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 :)
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
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!
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.
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!
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!
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.
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!
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
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.
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?
``` 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
@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.
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?
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.
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 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 } } } `;
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
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.
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?
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.
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
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 :)
@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 :)
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.
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?
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.
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.
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.
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
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.
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.
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. :)
@@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.
hey @WPCasts great tutorial thanks at time : th-cam.com/video/9KGuI0UmpMw/w-d-xo.html Is it possible to query the toaster by on the basis of price? example find all the toaster which has price equals to 1000
![ประสบการณ์ จ้าง Developer ที่ผมจะไม่มีวันลืม [ภาค2]](http://i.ytimg.com/vi/pZbsSDRrmXA/mqdefault.jpg)
I hope you learned as much as I did. Let me know what other topics you'd like me to cover!
WooCommerce :)
Ecommerce project using WordPress and GatsbyJS
realtime db streaming with kafka or logstash :)
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 TH-cam. Thanks
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 :)
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
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!
I’ll need this
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.
You are amzing !! You just emptied my bag of doubts !! I am straight away moving ahead with my development
one of the best videos seen in the last months on youtube, good job.
Just solved all my questions and problems in less than 10 mins.... I love you, man!!!
So glad it helped!!
Absolutely same here!
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!
2024: The WP GraphiQL IDE is part of the WPGraphQL plugin now. This is still appears relevant and informative.
I loved this tutorial, I think I am going to play around with this over the next couple of weeks!
Have fun!
HI there! Thank you for the tutorial!
Is there some new version of this in 2022? Or All this info is still relevant?
Awesome video! I learned a lot! I will definitely start playing around with WP, GQL and React. Thank you!
I have one doubt
I'll go and get myself a toast right now!
This one is a game changer for me!
Wordpress is very powerful, not just for blogging it can do a lot.
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!
You are such a good teacher.
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.
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!
Simply amazing! You cleared a lot of doubts I had. Thanks so much for such a wonderful tutorial
very informative and well done presentation. thanks for simply staying on topic!
I'm glad you thought so! I appreciate the feedback!
Would you be able to revisit this? I'm having issues trying to implement this in the current version of react.
Thank you, I found Video on right time., I was looking for resources on learning Headless WordPress :)
That’s great! I hope this helps :)
@@WPCasts Yes Its really Great.
Very enjoyable.
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
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.
Great video. Thanks for sharing.
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?
```
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
@@skammernet THANK YOU!!!!
@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.
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?
Great video, it helped me a lot, thanks! What resource you use to figure this out? All by yourself? Amazing stuff anyways.
Hi nice video , what about Frontity ?
What do you think about Frontity?
thanks so much! great info! is there a git repo of the react app to look at the actual code? thanks again!
learned a lot. thanks so
much
Excellent, how to remove tags from Blog posts which are coming from WordPress?
Awesome, thank you for this!
You're very welcome!!
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.
dude love your videos. keep going!
Thanks! I plan on it :)
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!
did you get the answer? i'm stucked in the same problem! 😅
@@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
}
}
}
`;
Just one thing to say, Thanks.
PD: Two, SUBSCRIBED.
C'est super. Bravo
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
it was my first experience with graph ql
Awesome tutorial! This is something I've been wanting to spin up for a while. Random question: What microphone do you use?
Thanks man for this! 🙏🏻
You're very welcome!
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.
Great explanation. Quick question, what's your preferred way of getting a new WP project up and running these days?
Locally I use Flywheel for simple projects. If I need something more complex, I’ll use a custom Docker image 👍
@@WPCasts Gotcha, thanks!
Is this still a working example? Getting this error ...
"Attempted import error: 'Toasters' is not exported from './Toasters/Toasters'."
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
Great man
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?
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.
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
Very interesting video. Learned a lot. Thank you.
Question: Why not just using built in RestAPI instead of GraphQL?
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 :)
Thank for your comprehensible answer.
Where are hooks? Its July 2019 :/
@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 :)
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.
@@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 :)
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.
@WPCasts my menu is not showing, what is the problem?
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?
Thanks a lot!
So we can create an android or apple app through react native with WPGraphQL! This is quite awesome, isn't it? :)
please show us how to do with NuxtJS (Vue)
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.
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.
Thank you so much!!
I'm getting No routes matched location "/"
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.
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
very good video I am trying to make a post request with WP + WPGql + React, some example that I can consult
I just made a video on the subject. Here is the video: th-cam.com/video/ZRQ94PMNEcg/w-d-xo.html
Good stuff!
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?
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.
Great
What are the pros of doing this way instead of Php?
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.
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. :)
@@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.
hey @WPCasts great tutorial thanks
at time : th-cam.com/video/9KGuI0UmpMw/w-d-xo.html
Is it possible to query the toaster by on the basis of price? example find all the toaster which has price equals to 1000
Check out this plugin. This might allow for that. docs.wpgraphql.com/extensions/wpgraphql-meta-query