// import functions from the package | |
import { SitemapStream, streamToPromise } from "sitemap"; | |
// A custom function I use to fetch data from a backend. I will keep the import to make it more clear why "graphlqlFetch" is used in the code | |
import graphlqlFetch from "lib/apollo" | |
export default async (req, res) => { | |
// Fetch data from a source which will be used to render the sitemap. | |
const { posts } = await graphlqlFetch(` | |
query getSitemapData { | |
projects: allWorks { | |
slug { | |
current | |
} | |
publishedAt | |
} | |
} | |
`); | |
// Create the a stream to write to with a hostname which will be used for all links | |
// Your are able to add more settings to the stream. I recommend to look a the npm package for more information. | |
const smStream = new SitemapStream({ | |
hostname: "https://priver.dev", | |
}); | |
// Add frontpage | |
smStream.write({ | |
url: "/", | |
}); | |
// Add a static url to ex: about page | |
smStream.write({ | |
url: "/about", | |
}); | |
// add all dynamic url to the sitemap which is fetched from a source. | |
posts.forEach((element) => { | |
smStream.write({ | |
url: `/${element.slug.current}`, | |
lastmod: element.publishedAt, | |
}); | |
}); | |
// tell sitemap that there is nothing more to add to the sitemap | |
smStream.end(); | |
// generate a sitemap and add the XML feed to a url which will be used later on. | |
const sitemap = await streamToPromise(smStream).then((sm) => sm.toString()); | |
// here is the generation of the sitemap happening | |
// tell the output that we will output XML | |
res.setHeader("Content-Type", "text/xml"); | |
// write the generate sitemap to the output | |
res.write(sitemap); | |
// end and send the data to the user or service. | |
res.end(); | |
}; |
This comment has been minimized.
This comment has been minimized.
Sure :D
Today I would use Apollo/Client instead of normal fetch doe. But this is the code. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Thanks!❤️ I was wondering if you can give an exmaple of how your custom
graphlqlFetch
looks like.Thanks again