Skip to content

Instantly share code, notes, and snippets.

@emilpriver
Created August 9, 2020 17:22
Show Gist options
  • Save emilpriver/d037fa56ddb3f450132ba6efe7b0c217 to your computer and use it in GitHub Desktop.
Save emilpriver/d037fa56ddb3f450132ba6efe7b0c217 to your computer and use it in GitHub Desktop.
// 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();
};
Copy link

ghost commented Oct 14, 2020

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

Thanks again

@emilpriver
Copy link
Author

emilpriver commented Oct 14, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment