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

แชร์
ฝัง
  • เผยแพร่เมื่อ 5 ก.ย. 2024
  • 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-...
    - github.com/wp-...
    - wordpress.org/...
    - github.com/wp-...
    Get WordPress Hosting:
    wpcasts.tv/go/k...
    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

ความคิดเห็น • 114

  • @WPCasts
    @WPCasts  5 ปีที่แล้ว +19

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

    • @sai_charan
      @sai_charan 5 ปีที่แล้ว +1

      WooCommerce :)

    • @husainahmmed9025
      @husainahmmed9025 5 ปีที่แล้ว +1

      Ecommerce project using WordPress and GatsbyJS

    • @nospamman4443
      @nospamman4443 5 ปีที่แล้ว

      realtime db streaming with kafka or logstash :)

    • @denniszenanywhere
      @denniszenanywhere 4 ปีที่แล้ว

      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

    • @piotrszczesniak685
      @piotrszczesniak685 2 ปีที่แล้ว

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

  • @ahmedmusawir
    @ahmedmusawir 5 ปีที่แล้ว +23

    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
      @SS4DEUCE 3 ปีที่แล้ว

      I’ll need this

  • @rv4tyler
    @rv4tyler 7 หลายเดือนก่อน +1

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

  • @jeswinthgabriel8319
    @jeswinthgabriel8319 3 ปีที่แล้ว +1

    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.

  • @GideonIbemereJr
    @GideonIbemereJr 5 ปีที่แล้ว +6

    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

  • @ketanvyawahare7407
    @ketanvyawahare7407 3 ปีที่แล้ว

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

  • @BucurIonNiculae
    @BucurIonNiculae 4 ปีที่แล้ว +1

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

  • @user-iy2ts7re4w
    @user-iy2ts7re4w 4 ปีที่แล้ว +1

    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!

  • @tedspens
    @tedspens 4 ปีที่แล้ว +1

    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!

  • @davy5537
    @davy5537 4 ปีที่แล้ว

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

    • @WPCasts
      @WPCasts  4 ปีที่แล้ว

      So glad it helped!!

    • @darkday2096
      @darkday2096 4 ปีที่แล้ว

      Absolutely same here!

  • @TheCarlosAlfaro
    @TheCarlosAlfaro 4 ปีที่แล้ว +1

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

  • @webjaved
    @webjaved 3 ปีที่แล้ว

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

    • @WPCasts
      @WPCasts  3 ปีที่แล้ว +1

      Have fun!

  • @jocelyndesigns
    @jocelyndesigns 3 ปีที่แล้ว

    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!

  • @khemchay
    @khemchay 4 ปีที่แล้ว

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

  • @samb.4260
    @samb.4260 4 ปีที่แล้ว +1

    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.

  • @piotrszczesniak685
    @piotrszczesniak685 2 ปีที่แล้ว

    This one is a game changer for me!

  • @vladimirputindreadlockrast812
    @vladimirputindreadlockrast812 ปีที่แล้ว

    Very enjoyable.

  • @nickschmitt8594
    @nickschmitt8594 5 ปีที่แล้ว

    You are such a good teacher.

  • @qAntBcn
    @qAntBcn ปีที่แล้ว +2

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

  • @SimPwear84
    @SimPwear84 4 ปีที่แล้ว

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

  • @luisalvarez3274
    @luisalvarez3274 4 ปีที่แล้ว

    it was my first experience with graph ql

  • @wewantphil
    @wewantphil 5 ปีที่แล้ว

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

    • @WPCasts
      @WPCasts  5 ปีที่แล้ว

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

  • @andresposadallano9490
    @andresposadallano9490 2 ปีที่แล้ว

    Thanks a lot!

  • @Hastishah
    @Hastishah 5 ปีที่แล้ว

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

    • @WPCasts
      @WPCasts  5 ปีที่แล้ว +1

      That’s great! I hope this helps :)

    • @Hastishah
      @Hastishah 5 ปีที่แล้ว

      @@WPCasts Yes Its really Great.

  • @TheShifu13
    @TheShifu13 3 ปีที่แล้ว +1

    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.

  • @ChrisChristensen143
    @ChrisChristensen143 5 ปีที่แล้ว

    Great video. Thanks for sharing.

  • @mtuan2086
    @mtuan2086 4 ปีที่แล้ว

    learned a lot. thanks so
    much

  • @przemysawlewtak789
    @przemysawlewtak789 4 ปีที่แล้ว +5

    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
      @skammernet 3 ปีที่แล้ว +2

      ```
      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
      @BLKMARKET 3 ปีที่แล้ว

      @@skammernet THANK YOU!!!!

    • @TheClaumigue
      @TheClaumigue 6 หลายเดือนก่อน

      @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.

  • @barnabasch9525
    @barnabasch9525 3 ปีที่แล้ว

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

  • @vstrelianyi
    @vstrelianyi 4 ปีที่แล้ว

    Great tutorial! thx

  • @chaeclark2974
    @chaeclark2974 5 ปีที่แล้ว

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

  • @paladinministries8108
    @paladinministries8108 4 ปีที่แล้ว +2

    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

  • @Eskimoz
    @Eskimoz 4 ปีที่แล้ว

    C'est super. Bravo

  • @errorerror1337
    @errorerror1337 5 ปีที่แล้ว

    Awesome, thank you for this!

    • @WPCasts
      @WPCasts  5 ปีที่แล้ว

      You're very welcome!!

  • @luispacheco5692
    @luispacheco5692 5 ปีที่แล้ว

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

  • @zhannavysotskaya8540
    @zhannavysotskaya8540 3 ปีที่แล้ว

    Thank you so much!!

  • @paweberth593
    @paweberth593 5 ปีที่แล้ว +2

    What do you think about Frontity?

  • @Ryan770
    @Ryan770 ปีที่แล้ว

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

  • @carlosrgl5355
    @carlosrgl5355 5 ปีที่แล้ว

    dude love your videos. keep going!

    • @WPCasts
      @WPCasts  5 ปีที่แล้ว

      Thanks! I plan on it :)

  • @tanveermalik5907
    @tanveermalik5907 5 ปีที่แล้ว +1

    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?

  • @shaponpal3378
    @shaponpal3378 3 ปีที่แล้ว

    Great

  • @AndersonSilvaMMA
    @AndersonSilvaMMA 5 ปีที่แล้ว

    Thanks man for this! 🙏🏻

    • @WPCasts
      @WPCasts  5 ปีที่แล้ว

      You're very welcome!

  • @robeeeeen
    @robeeeeen 3 ปีที่แล้ว

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

  • @zipponvr7043
    @zipponvr7043 4 ปีที่แล้ว

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

  • @av3y
    @av3y 3 ปีที่แล้ว

    Great man

  • @aurelianspodarec2629
    @aurelianspodarec2629 4 ปีที่แล้ว +1

    Where are hooks? Its July 2019 :/

  • @AllanLeonardJr
    @AllanLeonardJr 4 ปีที่แล้ว

    Good stuff!

  • @michaelclapp1884
    @michaelclapp1884 3 ปีที่แล้ว

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

  • @MrJobocan
    @MrJobocan 2 ปีที่แล้ว

    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
    @andreasmou6539 4 ปีที่แล้ว

    Hi nice video , what about Frontity ?

  • @stmaSbg
    @stmaSbg 5 ปีที่แล้ว

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

    • @WPCasts
      @WPCasts  5 ปีที่แล้ว +1

      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
      @MartinSternsberger 5 ปีที่แล้ว

      Thank for your comprehensible answer.

  • @yahilmadakiya1023
    @yahilmadakiya1023 4 ปีที่แล้ว

    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

  • @Labyrinthman
    @Labyrinthman 4 หลายเดือนก่อน

    I'm getting No routes matched location "/"

  • @dandev8514
    @dandev8514 4 ปีที่แล้ว

    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
    @swedo12 3 ปีที่แล้ว

    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.

  • @josuebarros-desenvolvedorw2490
    @josuebarros-desenvolvedorw2490 3 ปีที่แล้ว

    please show us how to do with NuxtJS (Vue)

  • @rust1477
    @rust1477 5 ปีที่แล้ว

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

    • @WPCasts
      @WPCasts  5 ปีที่แล้ว

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

    • @rust1477
      @rust1477 5 ปีที่แล้ว

      @@WPCasts Gotcha, thanks!

  • @francischin9789
    @francischin9789 4 ปีที่แล้ว

    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?

  • @krosenk729
    @krosenk729 5 ปีที่แล้ว

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

  • @ariamustofa
    @ariamustofa 4 ปีที่แล้ว

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

  • @andresconrado
    @andresconrado 4 ปีที่แล้ว

    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
      @francischin9789 4 ปีที่แล้ว +1

      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.

  • @denniszenanywhere
    @denniszenanywhere 4 ปีที่แล้ว

    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
      @davy5537 4 ปีที่แล้ว

      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

  • @albertovaldes9820
    @albertovaldes9820 4 ปีที่แล้ว

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

    • @WPCasts
      @WPCasts  4 ปีที่แล้ว

      I just made a video on the subject. Here is the video: th-cam.com/video/ZRQ94PMNEcg/w-d-xo.html

  • @kristopherk1091
    @kristopherk1091 5 ปีที่แล้ว

    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
      @gonzoartemis2503 5 ปีที่แล้ว

      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.

  • @n4870s
    @n4870s 4 ปีที่แล้ว

    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
      @WPCasts  4 ปีที่แล้ว

      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
      @n4870s 4 ปีที่แล้ว

      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

  • @STMZY
    @STMZY 4 ปีที่แล้ว

    @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
      @WPCasts  4 ปีที่แล้ว

      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
      @STMZY 4 ปีที่แล้ว

      @@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
      @WPCasts  4 ปีที่แล้ว

      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
    @andresposadallano9490 2 ปีที่แล้ว

    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
      @disneytim3 2 ปีที่แล้ว

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

    • @AndrewSuperR
      @AndrewSuperR 2 ปีที่แล้ว

      ​@@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
    @Frondlock 5 ปีที่แล้ว

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

    • @RossWintle
      @RossWintle 5 ปีที่แล้ว

      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
      @WPCasts  5 ปีที่แล้ว +2

      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
      @gonzoartemis2503 5 ปีที่แล้ว

      @@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
    @ravindraverma8413 5 ปีที่แล้ว

    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

    • @WPCasts
      @WPCasts  5 ปีที่แล้ว

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