sitemap.js

// 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();
};

Thanks! ❤️ I was wondering if you can give an exmaple of how your custom graphlqlFetch looks like.

Thanks again

Thanks! ❤️ I was wondering if you can give an exmaple of how your custom graphlqlFetch looks like.

Thanks again

Sure :D

import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import withApollo from 'next-with-apollo';
import { createHttpLink } from 'apollo-link-http';
import { GraphQLClient  } from 'graphql-request' 

const GRAPHQL_URL = '';

const graphql_client = new GraphQLClient(GRAPHQL_URL, { headers: {} })

const link = createHttpLink({
  fetch,
  uri: GRAPHQL_URL,
  headers: {
    'Content-Type': 'application/graphql',
    'Accept': 'application/json',
  }
});

export default withApollo(
  ({ initialState }) =>
    new ApolloClient({
      link: link,
      cache: new InMemoryCache()
        .restore(initialState || {})
    })
);

export const graphlqlFetch = (query, variabels = {}) => graphql_client.request(query, variabels); 

Today I would use Apollo/Client instead of normal fetch doe. But this is the code.