fix(gatsby): Use path prefix when loading slice data

e2e-tests/path-prefix/cypress/integration/asset-prefix.js

@@ -5,11 +5,40 @@ const assetPrefixExpression = new RegExp(`^${assetPrefix}`)
 const assetPrefixMatcher = (chain, attr = `href`) =>
   chain.should(`have.attr`, attr).and(`matches`, assetPrefixExpression)
 
+beforeEach(() => {
+  cy.intercept(/page-data/).as("page-data")
+  cy.intercept(/slice-data/).as("slice-data")
+})
+
 describe(`assetPrefix`, () => {
   beforeEach(() => {
     cy.visit(`/`).waitForRouteChange()
   })
 
+  it(`page-data is prefixed with asset prefix`, () => {
+    cy.wait("@page-data")
+
+    cy.get("@page-data").then((...intercepts) => {
+      expect(intercepts).to.have.length(1)
+
+      for (const intercept of intercepts) {
+        expect(intercept.request.url).to.match(assetPrefixExpression)
+      }
+    })
+  })
+
+  it(`slice-data is prefixed with asset prefix`, () => {
+    cy.wait("@slice-data")
+
+    cy.get("@slice-data").then((...intercepts) => {
+      expect(intercepts).to.have.length(1)
+
+      for (const intercept of intercepts) {
+        expect(intercept.request.url).to.match(assetPrefixExpression)
+      }
+    })
+  })
+
   describe(`runtime`, () => {
     it(`prefixes styles`, () => {
       assetPrefixMatcher(cy.get(`head style[data-href]`), `data-href`)

e2e-tests/path-prefix/gatsby-node.js

@@ -5,3 +5,9 @@
  */
 
 // You can delete this file if you're not using it
+exports.createPages = async ({ actions }) => {
+  actions.createSlice({
+    id: `header`,
+    component: require.resolve(`./src/components/header.js`),
+  })
+}

e2e-tests/path-prefix/src/components/layout.js

@@ -1,8 +1,7 @@
 import * as React from "react"
 import PropTypes from "prop-types"
-import { StaticQuery, graphql } from "gatsby"
+import { StaticQuery, graphql, Slice } from "gatsby"
 
-import Header from "./header"
 import "./layout.css"
 
 const Layout = ({ children }) => (
@@ -18,7 +17,7 @@ const Layout = ({ children }) => (
     `}
     render={data => (
       <React.Fragment>
-        <Header siteTitle={data.site.siteMetadata.title} />
+        <Slice alias="header" siteTitle={data.site.siteMetadata.title} />
         <div
           style={{
             margin: `0 auto`,

packages/gatsby/cache-dir/loader.js

@@ -327,7 +327,7 @@ export class BaseLoader {
       return Promise.resolve({ sliceName, jsonPayload })
     }
 
-    const url = `/slice-data/${sliceName}.json`
+    const url = `${__PATH_PREFIX__}/slice-data/${sliceName}.json`
     return doFetch(url, `GET`).then(res => {
       const jsonPayload = JSON.parse(res.responseText)