juliencrn / gatsby-material-typescript-starter

A simple starter using Typescript & Material-ui
https://gatsby-material-typescript-starter.netlify.app/
MIT License
7 stars 3 forks source link

path prefix compatibility #2

Open alansegar opened 4 years ago

alansegar commented 4 years ago

For applications hosted at something other than the root (/) of their domain, there are instructions at https://www.gatsbyjs.org/docs/path-prefix/ which describe how to set up Gatsby for this.

Have you managed to get that to work with this starter / do you have any plans to add support for it?

After following https://www.gatsbyjs.org/docs/path-prefix/#add-to-gatsby-configjs and https://www.gatsbyjs.org/docs/path-prefix/#add-to-gatsby-configjs, when serving the contents of the public folder on a webserver at something other than the root of the domain, I get this error:

Error: The result of this StaticQuery could not be fetched.

This is likely a bug in Gatsby and if refreshing the page does not fix it, please open an issue in https://github.com/gatsbyjs/gatsby/issues
    at h (gatsby-browser-entry.js:77)
    at t.a (useSiteMetadata.ts:14)
    at Ki (react-dom.production.min.js:153)
    at vo (react-dom.production.min.js:261)
    at cu (react-dom.production.min.js:246)
    at ou (react-dom.production.min.js:246)
    at Zo (react-dom.production.min.js:239)
    at qo (react-dom.production.min.js:230)
    at Du (react-dom.production.min.js:281)
    at react-dom.production.min.js:284

which seems to indicate it's something to do with useSiteMetadata.ts in this starter but I've not yet managed to figure out what changes would be required to get it to work or whether it is actually a bug in Gatsby as suggested in the error message. I've searched online for the error text and can see several issues mentioning it but none seem to be exactly the same as this.

I've followed the same process successfully with a different starter which doesn't have any custom hooks so I'm reasonably confident that the process I've followed does work and the error isn't related to that. The only changes I've made to the starter are what I've described here plus the removal of the graphQL dependency as described in https://github.com/Junscuzzy/gatsby-material-typescript-starter/issues/1

To narrow down the cause, I've since temporarily changed src/layout/index.tsx to use a hard-coded title rather than getting it from useSiteMetadata(). I also deleted useSiteMetadata.ts and with those changes in place, the site works normally with path prefix.

juliencrn commented 4 years ago

Hi,

The useSiteMetadata.ts react hooks gets data from gatsby-config.js. I saw in this link (https://www.gatsbyjs.com/docs/path-prefix/#add-to-gatsby-configjs), it says to add the following code :

module.exports = {
  pathPrefix: `/blog`,
}

But, if you remove this following

module.exports = {
  siteMetadata: {
    title: `Gatsby Typescript blog Starter`,
    description: `A simple blog starter using Typescript in front & back side with eslint & prettier.`,
    author: {
      name: 'Julien CARON',
      content: 'I like build some things using Javascript',
    },
    social: {
      github: 'https://github.com/Junscuzzy',
    },
  },
}

So the hook GraphQL query fails.

You can either add the pathPrefix afterwards, or remove or update the hook.

I haven't planned any specific support for the pathPrefix yet.