The issue is likely that you’re mutating the array (rather than setting a new array) so React sees the array as the same using shallow equality. Changing your addOrder method to assign a new array should fix this issue: const addToOrder = (idToAdd, quantityToAdd = 1) => setProducts([ …products, { id: idToAdd, quantity: quantityToAdd } … Read more
You can inject external scripts (with no npm modules) to gatsby.js project in many ways. Prefer to use respective gatsby-plugin for “web-analytics” scripts. Using require() : Create a file in your project myScript.js and paste the script content Add const myExtScript = require(‘../pathToMyScript/myScript’) to a statefull component at the Pages folder inside render() and before … Read more
You can get the current url using the location prop from the @reach/router Location component. import PropTypes from ‘prop-types’; import React, { Component } from ‘react’; import { Location } from ‘@reach/router’; class SomeComponent extends Component { static propTypes = { location: PropTypes.object.isRequired } render() { const { location } = this.props; return <div>{JSON.stringify(location)}</div>; } … Read more
This may answer your question: The final code: import React from ‘react’; import { StaticQuery, graphql } from ‘gatsby’; import Img from ‘gatsby-image’; // Note: You can change “images” to whatever you’d like. const Image = props => ( <StaticQuery query={graphql` query { images: allFile { edges { node { relativePath name childImageSharp { fluid(maxWidth: … Read more
The Why While the client-side router knows about this path, there is no corresponding HTML file. When the browser looks at the site it first loads the 404.html file generated by gatsby, which includes the client-side router. Once the router completes its initialization it reads the path and loads the correct page. Meaning you end … Read more
Solution was simply to upgrade to the latest version of eslint
I had to manually remove the folder node_modules/.cache/gh-pages to get the deployment to work. Prior to this I had tried git fetch –prune, which removed remotes/origin/gh-page. I don’t know if pruning the branches was a necessary step or not.
You could use string.replace with a regular expression as below to escape the \n characters again: “private_key”: process.env.GATSBY_GOOGLE_PRIVATE_KEY.replace(/\\n/g, ‘\n’),
I’m not sure it will fix your problem as well, but in my case I had to reorder the imports alphabetically in one of the components
You can also use react-helmet, which is discussed in the gatsby tutorial. Include a google fonts link element within the helmet component. Like this: <Helmet> <link href=”https://fonts.googleapis.com/css?family=Open+Sans” rel=”stylesheet”/> </Helmet> I ended up going down this route because I had already done some styling manually, and when I tried using Typography it made a bunch of … Read more