Add a v2 in helmet dato cms favicon

🆘 Support
1

How would I go about forcing a metatags favicon update, the new favicon is showing up in new browsers but ones that already have it cached show my old favicon. Is there a way to add a v2 at the end of each favicon.

2

If you are using this: https://github.com/datocms/gatsby-source-datocms/blob/ff20542cdc53e3c9cc2cdbf1624cc11bba0e20e4/README.md#favicon-meta-tags

you can probably attach a “v2” query parameter to the favicon HREF before sending it to HelmetDatoCms? Have you tried that already?

3

I haven’t tried that yet, where are you suggesting I would do that. I am a little confused. The favicon is coming from DatoCMS graphQL query so at which point do I add the v2?

This is my current helmet code

    <HelmetDatoCms
            favicon={data.datoCmsSite.faviconMetaTags}
            seo={data.datoCmsHome.seoMetaTags}
          >
4

I was thinking to something like this:

faviconWithVersion(data, version) {
    let newFavicon = data.site.faviconMetaTags;
    newFavicon.tags.map( tag => {
      let newTag = tag;
      newTag.attributes.href += `&version=${version}`
      return newTag;
    });
    return newFavicon;
  }

You might probably do it better, but to get the idea :slight_smile:

5

It’s probably something that would be useful to add directly inside our source plugin. We’ll check that internally!

6

ok I’ll give it a try, thanks

7

Hi Matteo, perhaps you can help me out with globalSEO. I’ve put it into my layout component (and tried a page too, but that didn’t change anything), however, I always get an error Cannot read property 'datoCmsSite' of undefined. The GraphQL puts out everything just fine. I have removed all unnecessary components, but it still doesn’t work. Any help is much appreciated, thanks a lot!

Here’s my code:

import * as React from "react"
import { graphql } from "gatsby"
import { HelmetDatoCms } from 'gatsby-source-datocms'

const SEO = ({ data }) => {
	<HelmetDatoCms seo={data.datoCmsSite.globalSeo} favicon={data.datoCmsSite.faviconMetaTags}>
		<meta name="keywords" content="graphic design, art, designer" />
	</HelmetDatoCms>
}

const Layout = props => {
  return (
	<SEO />
  )
}

export default Layout

export const query = graphql`
  {
	datoCmsSite {
	  globalSeo {
		siteName
		titleSuffix
		fallbackSeo {
		  description
		  image {
			fixed {
			  src
			}
		  }
		  title
		  twitterCard
		}
	  }
	  faviconMetaTags {
		tags
	  }
	}
  }
`
8

Hello @max.inzn I’m not sure you can query as you are doing right now.

Maybe you can consider using the StaticQuery approach that you can see here: https://www.gatsbyjs.com/docs/how-to/querying-data/static-query/ ?

If that doesn’t work, can you maybe share access to your repository so that I can have a better picture of what’s going on?

9

With StaticQuery it works, thanks for that!! However, <HelmetDatoCms seo={data.datoCmsSite.globalSeo}> returns Cannot read property 'concat' of undefined. The page I’m querying for is not a model in my CMS, I just want it to use all fallback information from Dato. I’m guessing the globalSeo structure is somewhat different from seoMetaTags, right? Is there a way to tell the layout component always use the fallbackSeo and then on the pages some have SEO settings themselves so the fallback gets overwritten?

10

Okay, so it seems that adding the page to Dato with a SEO module that’s empty and then querying for the (empty, thereby fallback) seoMetaTags does what I want!

1 Like