example: Fetching data using Apollo client (pages router)

[moonmeister]

Description

Create a tutorial to give a step-by-step guidance on setting up a WordPress powered blog section in Next.js app. Tutorial will teach how to fetch data using Apollo Client and present it with Next.js pages router in the context of a common, real-world use case.

Key Topics to Cover

• Fetching list of blog posts using Apollo Client
• Composing queries with GraphiQL IDE
• Implementing pagination
• Fetching and displaying single posts using Next.js pages router dynamic routes

Target Audience

• Next.js web app owners who want to add blog section and use WordPress to support it
• Frontend developers who want to get started with headless WordPress

Document Type

This should be a tutorial-style document, teaching basic concepts with tangible results to get started fast. Tutorial will give a working example of blog section in Next.js app, at the same time teaching how to recreate it independently.

[ahuseyn]

PR for tutorial: #69

[ahuseyn]

@moonmeister what was the original thought behind this ticket? Should we go with a real-world use-case and create an example for that or you have a different approach in your mind. For example the tutorial takes headless blog section use-case and explains data fetching with Apollo Client in that context. Could it be a useful example, what do you think?

[moonmeister]

I don't think the document would be wholly unuseful, but as our conversation with Jason demonstrated, our focus needs to be on the code. The examples were meant as experiments as much as documentation. Let's focus on just getting the example done and we can always do the tutorial later.

[ahuseyn]

@moonmeister absolutely agree that code examples should be priority. I was trying to ask what kind of code example was in your mind? Something like fetch post list, fetch single post, apply pagination (the blog use case) or other kind of use case. Or maybe little bit of everything (posts, settings, menu, etc.)? Just trying to get a sense of scope for the code example that I'll create.

[moonmeister]

Ah, thanks for clarifying. That's a good question. So, the point of this example is to show the functionality of Apollo. So think of it in terms of a client-side only query, ssr/static query, hybrid query, paginated query, etc. Probably show with GET requests and APQ by default but show how to override for un-cached queries or mutations for a form. That help?