Gatsby: Is there a way to query a headless CMS in gatsby-config.js ???

[ZeeEssDoubleU]

The title pretty much sums up the question.

In short, I'm looking to query an SVG image residing on DatoCMS and use that as the value for the 'icon' option of gatsby-plugin-manifest. I ask, because I don't want to copy the file into my local filesystem directly. I'd like favicon changes on my CMS to reflect on the manifest.webmanifest. Thanks!

[graysonhicks]

This looks like a duplicate of #13763 #12227 and #12919, which ask for the use of queries for plugin configuration. Reading the lifecycle docs on how plugins are run, I think this could and should be possible to have access to graphql in the onPostBootstrap step, but is not at the moment. Possible non-ideal interim solution is to set the start_url and icon paths to the DatoCMS file, and always naming it icon.svg or something like that.

I think #12227 is the closest existing issue, but for some reason was focused on this in the context of Gatsby Themes. I think it is a reasonable feature to ask for, as described in that ticket, 'in userland'.

[LekoArts]

Thank you for opening this!

We currently don't plan on supporting this: https://github.com/gatsbyjs/gatsby/issues/19644#issuecomment-558073951

You'd need to fetch the image and save the image to disk yourself using npm scripts/Gatsby's APIs. The mentioned issues should also give context.

We're marking this issue as answered and closing it for now but please feel free to comment here if you would like to continue this discussion. We also recommend heading over to our communities if you have questions that are not bug reports or feature requests. We hope we managed to help and thank you for using Gatsby!

[ZeeEssDoubleU]

@graysonhicks Excuse my ignorance, but how would I go about setting the start_url and icon paths to a file living on DatoCMS or any CMS for that matter?

[graysonhicks]

options: {
  start_url: 'http://baseurl.com/'
  icon: 'path/to/icon.svg' // relative to start_url
}

[jrestall]

This is how I query a headless CMS to set dynamic values for gatsby-plugin-manifest:

exports.createPages = async ({ graphql, store }) => {
  const state = store.getState()

  const plugin = state.flattenedPlugins.find(plugin => plugin.name === "gatsby-plugin-manifest")
  if (plugin) {
    const manifestOptions = await resolveManifestOptions(graphql)
    plugin.pluginOptions = {...plugin.pluginOptions, ...manifestOptions}
  }
}

It seems to work but it would be a lot less hacky if gatsby supported async theme configuration loading as suggested at https://github.com/gatsbyjs/gatsby/pull/19652. I think it's worth investigating a proper solution since as documented above by @graysonhicks, this request keeps coming up.

[ZeeEssDoubleU]

I know it's been a while since I posted this, but that looks like the best option at the moment @jrestall. Thanks for your input.

I know it's not the best option, but I had actually implemented an Axios GET call and saved the svg response to a .svg file on the local file system. All of this was implemented in the gatsby-config.js file. You can see the implementation below. Thanks.

// ***GATSBY-CONFIG.JS***

const axios = require("axios");
const fs = require("fs");

if (process.env.NODE_ENV !== "production") {
    require("dotenv/config");
}

// creates favicon.svg and faviconShare.svg file for gatsby-plugin-manifest
const saveIcon = async () => {
    const favicon = await axios.get(
        "https://www.datocms-assets.com/randomgibberish/favicon.svg",
    );
    fs.writeFile(
        "./src/components/Icons/favicon.svg",
        favicon.data,
        err => console.log(err),
        res => console.log("Favicon was saved!"),
    );
};
saveIcon();

module.exports = {
    plugins: [
        {
            resolve: "gatsby-plugin-manifest",
            options: {
                name: "",
                short_name: "",
                start_url: "/",
                background_color: "",
                theme_color: "",
                display: "standalone",
                icon: "./src/components/Icons/favicon.svg", // ***FAVICON.SVG CREATED ABOVE***
            },
        },
    ],
};

[theowenyoung]

I also encountered this problem, I want to set plugin options async, I will use prebuild to handle it, but I hope gatsby can support dynamic config.