Hi Colby, thanks for the video. ACF is by far my favorite WP plugin. I've done so much with it over the years that I can't think of much it couldn't be utilized for.
no problem, glad to hear that! i have a few other WPGraphQL related videos too if you need help with other things like Yoast SEO ua-cam.com/play/PLFsfg2xP7cbJY2Cg4F_tWUSDrtfvLVCAu.html
Hi There Aaron! As far as guidance, an example would be a query for the page post type and including its title and a flexible content field with content sections. That field would have sub fields that correspond to the various content types that can be added to the flexible layout like a text block or a Image block. Here is an example query of it that I reference: { page(id: "123") { id title flexibleContent { contentSections { __typename ... on TextBlock { textContent } ... on ImageBlock { image { sourceUrl } } } } } } Now, I am unsure if you have to use __typename field with the "on" keyword to specify the sub fields. I can find out. And I have only messed with flexible content a few times so my understanding of it is intermediate. Also Jason Bahl who is the creator and maintainer of WPGraphQL is releasing a new version of ACF for WPGraphQL next week that is gonna be epic and may make things a little easier. I am on the DevRel team at WP Engine and we are doing a live webinar on May 11th if you are interested on ACF for WPGraphQL and we would be using Next.js for a front end to demo if you are interested. If you need a little more guidance than the example I provided or have more questions with Flexible content /ACF/WPGraphQL and Next.js, there is a slack channel for WPGraphQL if you are not in there already and the community can assist more there. Hope this was helpful and let me know if you need anything else! join.slack.com/t/wp-graphql/shared_invite/zt-1txslf31i-B_jL1sT_BdMdSda9Uw5LIA
ACF (not PRO) doesn't allow you to create loops (repeated fields), so that's why I use Carbon fields, but found only one plugin that makes GraphQl see those fields and it has only experimental version yet :-)
Hello Colby, thanks so much for your contributions towards integrating WordPress and Nextjs. It's for this reason the some of us who are not a fan of WordPress would like to use it for the best of both worlds. I'm using the Next-WordPress starter and trying to query data from my graphql endpoints. However, I keep getting this error: { "errors": { "message": "Unexpected token '
great point, its on my list! i started poking at it a bit, but it looks like there is a _ton_ of stuff to look into with WooCommerce so want to make sure i totally get how everything works before trying to teach it. for instance displaying products is relatively simple, but then how checkout works and such
@@colbyfayock When I clicked on a post to edit, I scrolled down and see "custom fields". Then I clicked on the "custom field" and it expands, I saw a lot of entered fields there, including "Post views count" field. The post views count shows stats. Now I am asking, did I need to trust the "post view counter" stats? If you don't still understand, I can send you a screenshot on Instagram.
@@GadgetGists i got it - did someone else configure the plugin on your WordPress instance? those fields shouldn't be included by default that im aware of, so my thinking is someone created those fields at some point in time, so you'd need to confirm with them as to whether they're being used. it would only work if there is code that would be updadting it with each view like this: support.advancedcustomfields.com/forums/topic/post-views-counter/
@@GadgetGists oh okay, maybe the theme added it then, if the theme has documentation it may be worth looking into that as well as it may already handle that for you
Hello Colby, Great tutorial! Thank you so much for putting this together. Any thoughts on how you would handle different WordPress templates with different sets of ACF fields? I know I can get the template name within the graphql page query but not sure what is the best approach is within the pages directory for handling WP templates. Ideally, it would be great if multiple pages could share the same template. I was thinking of running some type of switch to grab different components based upon template but the [[...slugChild]].js file would get kind of code heavy and would have to pull in all the graphQL queries for each set of ACF fields. Any recommendation on how to handle different WordPress templates w/ different ACF fields within your next-wordpress-starter would be greatly appreciated. Thank you again for all the great content.
might be worth checking this out, could help: ua-cam.com/video/fOJdwCZWNvE/v-deo.html I create templates inside of the templates directory that are basically react components that i pass the data into from the page file. you could use this approach, similar to your switch idea example: github.com/colbyfayock/next-wordpress-starter/blob/main/src/pages/posts.js#L18
@@colbyfayock Thanks for the insights! I looked at your TemplateArchive and just created a switch statement based upon template name to fetch different components based upon template name.
im not sure about that one :( not sure if you can to be honest - it might be worth digging in the docs here: github.com/wp-graphql/wp-graphql-acf or asking in a discussion there
The only downside i felt is with the combo of ACF + WPGRAPHQL we can't perform mutations only queries . Can you make a tutorial on JWT auth plugin as well ?
@@colbyfayock thanks for the tutorial and repo btw. Im building my nextjs + threejs portfolio with it cause my brother has a non-nodejs host, so only php and static pages work for the backend 😅
@@colbyfayock Maybe one! In normal WP & ACF, you can setup a "Theme Options" field group, which uses the "options page" location rule inside of ACF. Which is good for setting like global fields (header logo, footer elements, etc). and I have not been able to find anything online about setting this up with WPGraphAL/Nextjs. I just started a little test project to work on in my free time, and I'm using your GitHub repo and followed your video above, to get started and everything is working great so far. I gotta watch some more videos and read some documentations.
I'm confused at the very beginning you said that on the Post WP doesn't give you fields for the video... but doesn't it give you a Block for embedding the video... just not understanding and or curious why you can't or didn't use that UA-cam video block..??
really the goal of using it separately as a field is so that you have more control over what happens with the video. sometimes you may want to use it outside of the typical content flow
I have an options page made with ACF code in functions. But after making the custom fields I cannot see them in the graphql. I cannot find the right graphql group types like we do when we are making a field to appear in a page or post. If i put them (the acf field made in the options page) in the page node, it will return me null in the query. Any ideas?
Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course
Hi Colby, thanks for the video. ACF is by far my favorite WP plugin. I've done so much with it over the years that I can't think of much it couldn't be utilized for.
No problem. It's super handy!
Thank you so much for this. Struggled for a while to get this right but this video was all I needed.
No problem glad it helped!
A lot better that other tutorials thanks.
you're welcome!
Very nice tutorial.
It matches the case I am currently holding and I will try it out as soon as possible.
Thank you!
no problem, glad to hear that! i have a few other WPGraphQL related videos too if you need help with other things like Yoast SEO ua-cam.com/play/PLFsfg2xP7cbJY2Cg4F_tWUSDrtfvLVCAu.html
Thank you Colby.
you're welcome!
@Colby one like is not enough !!! Love you !
thank you 🤗
great video, really informative, thank you!
thank you :)
very clear video. good job!
Thank you!!
Thanks, broh 😁👍
you got it!
Hey Colby,
Do you have any guidance on querying flexible content field data from Next?
Hi There Aaron!
As far as guidance, an example would be a query for the page post type and including its title and a flexible content field with content sections. That field would have sub fields that correspond to the various content types that can be added to the flexible layout like a text block or a Image block.
Here is an example query of it that I reference:
{
page(id: "123") {
id
title
flexibleContent {
contentSections {
__typename
... on TextBlock {
textContent
}
... on ImageBlock {
image {
sourceUrl
}
}
}
}
}
}
Now, I am unsure if you have to use __typename field with the "on" keyword to specify the sub fields. I can find out. And I have only messed with flexible content a few times so my understanding of it is intermediate.
Also Jason Bahl who is the creator and maintainer of WPGraphQL is releasing a new version of ACF for WPGraphQL next week that is gonna be epic and may make things a little easier.
I am on the DevRel team at WP Engine and we are doing a live webinar on May 11th if you are interested on ACF for WPGraphQL and we would be using Next.js for a front end to demo if you are interested.
If you need a little more guidance than the example I provided or have more questions with Flexible content /ACF/WPGraphQL and Next.js, there is a slack channel for WPGraphQL if you are not in there already and the community can assist more there. Hope this was helpful and let me know if you need anything else!
join.slack.com/t/wp-graphql/shared_invite/zt-1txslf31i-B_jL1sT_BdMdSda9Uw5LIA
ACF (not PRO) doesn't allow you to create loops (repeated fields), so that's why I use Carbon fields, but found only one plugin that makes GraphQl see those fields and it has only experimental version yet :-)
Ah interesting. Never used carbon before. Will have to check it out
Hello Colby, thanks so much for your contributions towards integrating WordPress and Nextjs. It's for this reason the some of us who are not a fan of WordPress would like to use it for the best of both worlds. I'm using the Next-WordPress starter and trying to query data from my graphql endpoints. However, I keep getting this error:
{
"errors": {
"message": "Unexpected token '
Your great brother 👍
thank you! 🙌
Thank you.
you're welcome!
great colby thanks. woocommerce example with next js would be nice btw :)
great point, its on my list! i started poking at it a bit, but it looks like there is a _ton_ of stuff to look into with WooCommerce so want to make sure i totally get how everything works before trying to teach it. for instance displaying products is relatively simple, but then how checkout works and such
Hi, I saw post views count in my default custom field. Should I rely on the post views count of custom field?
hey im not totally following the question, can you elaborate a little more?
@@colbyfayock When I clicked on a post to edit, I scrolled down and see "custom fields". Then I clicked on the "custom field" and it expands, I saw a lot of entered fields there, including "Post views count" field. The post views count shows stats. Now I am asking, did I need to trust the "post view counter" stats? If you don't still understand, I can send you a screenshot on Instagram.
@@GadgetGists i got it - did someone else configure the plugin on your WordPress instance? those fields shouldn't be included by default that im aware of, so my thinking is someone created those fields at some point in time, so you'd need to confirm with them as to whether they're being used. it would only work if there is code that would be updadting it with each view like this: support.advancedcustomfields.com/forums/topic/post-views-counter/
@@colbyfayock No, I just installed a new theme and found it. Thanks, I will check out the link you sent.
@@GadgetGists oh okay, maybe the theme added it then, if the theme has documentation it may be worth looking into that as well as it may already handle that for you
Hello Colby,
Great tutorial! Thank you so much for putting this together. Any thoughts on how you would handle different WordPress templates with different sets of ACF fields?
I know I can get the template name within the graphql page query but not sure what is the best approach is within the pages directory for handling WP templates. Ideally, it would be great if multiple pages could share the same template. I was thinking of running some type of switch to grab different components based upon template but the [[...slugChild]].js file would get kind of code heavy and would have to pull in all the graphQL queries for each set of ACF fields. Any recommendation on how to handle different WordPress templates w/ different ACF fields within your next-wordpress-starter would be greatly appreciated.
Thank you again for all the great content.
might be worth checking this out, could help: ua-cam.com/video/fOJdwCZWNvE/v-deo.html
I create templates inside of the templates directory that are basically react components that i pass the data into from the page file. you could use this approach, similar to your switch idea
example: github.com/colbyfayock/next-wordpress-starter/blob/main/src/pages/posts.js#L18
@@colbyfayock Thanks for the insights! I looked at your TemplateArchive and just created a switch statement based upon template name to fetch different components based upon template name.
@@JoeStanton-ew6kg Any chance you have that up on github? I have struggling with the best way to do that as well.
Thank you for this but how do filter by an ACF field? e.g. video source = youtube?
im not sure about that one :( not sure if you can to be honest - it might be worth digging in the docs here: github.com/wp-graphql/wp-graphql-acf or asking in a discussion there
The only downside i felt is with the combo of ACF + WPGRAPHQL we can't perform mutations only queries
. Can you make a tutorial on JWT auth plugin as well ?
just to make sure, are you referring to this one? github.com/wp-graphql/wp-graphql-jwt-authentication - i'll add it to my list :)
@@colbyfayock yes its the pluin that i mentioned. Thanks in Advance
Well you can make mutation you just have to register them before using it
Can we use the starter from your previous Next.js /WP, graphql video for this?
yup absolutely!
Hi, it is possible to connect woocommerce (with woo payment processing) with next.js .. Did you try that connection ever?
hey never tried it but i would check ou tthe wpgraphql extension for it: github.com/wp-graphql/wp-graphql-woocommerce
thx @@colbyfayock
WPGraphQL for ACF is now in the wordpress plugin store since Nov 2023
🙌
@@colbyfayock thanks for the tutorial and repo btw. Im building my nextjs + threejs portfolio with it cause my brother has a non-nodejs host, so only php and static pages work for the backend 😅
@@benedictlang7431 no problem! good solution then haha
Is possible to use an ACF form on a Wordpress headless installation ?
I haven't ever attempted to do that, if you give it a shot id love to hear how it goes
Do you have any more videos that go into more detail using ACF?
not right now, but i plan on putting one together soon! are there any particular topics you're interested in?
@@colbyfayock Maybe one! In normal WP & ACF, you can setup a "Theme Options" field group, which uses the "options page" location rule inside of ACF. Which is good for setting like global fields (header logo, footer elements, etc). and I have not been able to find anything online about setting this up with WPGraphAL/Nextjs. I just started a little test project to work on in my free time, and I'm using your GitHub repo and followed your video above, to get started and everything is working great so far. I gotta watch some more videos and read some documentations.
I lied, I found how to get theme options working, but ACF repeater would be a good one to cover, repeater with links/images!
@@robbiecrenshaw8393 both are great ideas thanks
I'm confused at the very beginning you said that on the Post WP doesn't give you fields for the video... but doesn't it give you a Block for embedding the video... just not understanding and or curious why you can't or didn't use that UA-cam video block..??
really the goal of using it separately as a field is so that you have more control over what happens with the video. sometimes you may want to use it outside of the typical content flow
@@colbyfayock Ok yep that does make total sense; thank you for answering :) !
@colbyfayovk Can I used ACF for mutation?
looks like it's not supported via WPGraphQL per their FAQ at the bottom of this: www.wpgraphql.com/acf
I have an options page made with ACF code in functions. But after making the custom fields I cannot see them in the graphql. I cannot find the right graphql group types like we do when we are making a field to appear in a page or post. If i put them (the acf field made in the options page) in the page node, it will return me null in the query. Any ideas?
not too sure about that one :/ i haven't dealt with the admin pages before
Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news