Example: create a custom sitemap from WordPress (pages/apollo)

[colinmurphy]

User Story

As a developer I want an example of how to build a sitemap with the toolkit using a custom GraphQL endpoint that leverages built in sitemap functionality, to improve website SEO.

Acceptance Criteria

• A custom WordPress plugin that exposes WordPress sitemap data in WPGraphQL.

Notes

As per RFC #17 we need to supply examples and documentation on how to create your own custom sitemap from a data API endpoint in a headless application.

We will use WP GraphQ:L to query data and create the custom sitemap. We will also consider best approaches in terms of caching the sitemap as well.

[moonmeister]

@ahuseyn We have lots of working examples for this in wpgraphql.com and faustjs.org btw if you need inspiration

[ahuseyn]

Thanks @moonmeister, I've added the draft PR for this: #121

Created a plugin to extend WPGraphQL with native WordPress sitemap functionality. Also added image field to the sitemap entries.

[moonmeister]

I'm really confused. You don't need to extend WPGraphQL to do this. The RFC never recommended that kind of approach that if I recall correctly.

I'm interested to see what you did and what benefits it might have but it seems out of scope of this issue and the RFC.

[ahuseyn]

@moonmeister Here's how I came up with this solution:

• WPGraphQL returns max 100 node per page. So, for the 1000 URL sitemap you need to send 10 query and merge paginated data. But a sitemap can hold as much as 50 000 urls in one page.
• You can extend WPGraphQL to return more data, but it's kind of a hacky workaround that affects other queries as well. Also requires PHP code.
• WPGraphQL also recommends to extend it with a new field to get sitemap data: https://www.wpgraphql.com/recipes/add-field-to-output-urls-for-sitemap

So I came up with a solution to get sitemap data by extending the WPGraphQL with the native WP sitemap methods and hooks. It'll be helpful for the community as it's feature-complete and customizable too.

Why it’s within the scope of this issue and RFC:

• It fetches data with WPGraphQL and Apollo Client
• It generates a custom sitemap with that data
• It uses custom XSLT styles
• It supports Image Sitemaps, an addition to the native WP sitemap.