Next.js Tutorial - How to Fetch Posts from WordPress GraphQL API [part 7]

This video is a part of the series where we're building a headless WordPress blog with Next.js. In this video, you'll learn how to query the WordPress GraphQL API to fetch the posts, then display on the frontend using Next.js.
Donations: you can support this channel by buying me a coffee:
ko-fi.com/abhi...
Repo: github.com/iab...
Website: www.coralnodes...
---------------------------------------
Server providers:
Linode: www.coralnodes...
DigitalOcean: www.coralnodes...
-------------------------------------------------------------
Disclaimer:
This video is based on my personal experiences and knowledge. There is no guarantee that the information shared is 100% accurate.
Disclosure:
This video and its description may contain affiliate links, which can earn us commission if someone purchases products using those links.

[@sunjayarmstead]

Thank you so much for this video / series! Very easy to follow and extremely informative.

[@World_ofKnowledge]

beset tutorial so far, please update with news version

[@djortdelladjort]

Wonderful explanation. Easy to follow along

[@davidessien3617]

Hi @CodingReflections This is the most straightforward video on this topic I have seen so far. I have been trying to get this right since last year, but nothing was making sense to me. You just made everything clear. Thank you. Is it possible for you to do this with Typescript and maybe the code gen? That would really be helpful.

[@SherwinAnos]

Awesome bro, thanks for the tutorial :)

[@shinyu140]

Thank You For Tutorial 🥰

Thanks for the videos, helped me alot ♥

[@bielzgyn]

Thanks for the video. How would it be with pagination? 🤔

[@CodingReflections]

Pagination video already in the queue. Scheduled for Feb 6, part 13.

[@n3cro2012]

Thanks for the video update. What window manager do you use?

[@CodingReflections]

It's Ubuntu 22.04. I screen record the second monitor. That's why the top bar and dock panel are not seen in the video.

[@hatempire]

Thank you so mu h for this tutorial, exactly what I was needing to study some specific NextJS stuff alongside with WordPress! 😄 Suggestion: saw the overview video and it didn't include the comment section, using mutation and other stuff needed. Saw very few videos showing it, but solely outside WordPress (with Apollo and other CMS (GraphCMS, for example), which made me a bit confusing about how to apply it using WPGraphQL)... nothing about comments with WPGraphQL at all. Would you consider adding it to the final product, please? Already read the documentation, but had a tough time trying to make it work. :( Thank you so much in advance!

[@CodingReflections]

Sure, I'll try to figure out how to implement WordPress comments in Next.js. As you said, it requires authentication and mutation because we need to write data into the wp database. I plan to keep adding more videos to the playlist, beyond what was shown in the overview video. Thank you!

[@hatempire]

@@CodingReflections thank you so much, it'll be extremely helpful (and kinda unique, since the WPGraphQL implementations I saw on KZbin until now lack this part, what I saw about mutation had more to do with e-commerce, not comment sections... surely, it will be helpful for more people dealing with it).

[@borisbarzotto5785]

Hi @CodingReflections how i can get the featured image in original quality? whats the setting for that, i only get a sourset of bad quality images, you can get a good image in node position [0], i get a random set of images and different sizes, random order too

[@HuxlygerardSingh]

Please update the next video waiting eagerly for it

[@CodingReflections]

Of course, on the way!

[@jyotichabba1487]

Hi @codeReflections graphql is not fetching all posts. Is there anything we can modify?

[@PratikVishwakarma-h8s]

graphl me cursor ke through new next js docs pr kese pagiantion banye

[@LalitKumar-ho4hq]

Hello sir I am getting undefined while fetching the data and also in the postman I am getting a cloud agent error. Is there anything I need to enable in the wordpress. I would massively appreciate it if you could help me with this. Thanks

[@CodingReflections]

Where is the WordPress site hosted? Local or remote? Is the /graphql endpoint visible from the browser? What is the query which returned the undefined error? Can you give more details?

[@matthewaraujo7361]

@@CodingReflections i'm facing the same error, my Wordpress is local, i don't know if the browsers can se my endpoint, and my error says :The requested URL was not found on this server.

[@kavinduliyanaarachchi99]

Can anybody help me with this error "TypeError: Cannot read properties of undefined (reading 'nodes')"

[@МарияТроянова-г1и]

graphics-ide does not load, an error appears in the console. "Uncaught (in promise) GraphQLError: Names must only contain [_a-zA-Z0-9] but "Template_An empty "does not." Please help me solve this error

[@CodingReflections]

Can you mention the video timestamp at which the error occurred? Also, is it the WP backend, or in the Nextjs site?

[@МарияТроянова-г1и]

@@CodingReflections This happened to me when I installed the Wp GraphQL plugin. For some reason, graphiql-ide does not want to work with me, there is an eternal download

[@МарияТроянова-г1и]

@@CodingReflections problem when installing the WPGraphQL plugin. graphics-ide does not load anything, and there is an endless loading

[@CodingReflections]

Looks like currently there is some issue with the WordPress plugins directory. WPGraphQL is not showing up when searched from the Add Plugins page, but can be downloaded directly. Here are a couple of things you might want to check: 1) Try downloading it directly from wordpress.org/plugins/wp-graphql/ ? It is working for me and the GraphiQL IDE is loading without issues. 2) Note that the current WordPress version is 6.1.1 & WPGraphQL is 1.14.0. 3) Also, are you trying it on localhost, or on a remote server? You can check the browser's Networks tab to find out which resource is preventing the download. Maybe, try a different browser. 4) Do you have any other conflicting plugins installed? Try on a fresh WP installation.

[@МарияТроянова-г1и]

@@CodingReflections the problem was solved by installing an older version of the plugin. Although I have wordpress 6.1

[@wheezetv3861]

my solution: stack: wpgraphql 1.14.3, wordpress 6.2 next 13.3 page/blog: const [posts, setPosts] = useState(); useEffect(() => { async function getPosts() { const response = await fetch("localhost/wp-blogwithnext/graphql", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(queryAllPost), }); const data = await response.json(); setPosts(data); } getPosts(); }, []); // This would be the children of the page blog posts.js: export const queryAllPost = { query: ` query getShort { posts { nodes { date slug title excerpt } } } `, };

[@matthewaraujo7361]

how did you make your request, I'm using local too and im getting this error: "The requested URL was not found on this server". I did everything in that video but i keep getting the same error always