Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(gatsby): handle search params in resource loader #33209

Merged
merged 17 commits into from
Oct 4, 2021
Merged
Show file tree
Hide file tree
Changes from 14 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 108 additions & 0 deletions e2e-tests/development-runtime/cypress/integration/ssr.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
const staticPath = `/ssr/static-path/`
const paramPath = `/ssr/param-path/`
const wildcardPath = `/ssr/wildcard-path/`

describe(`Static path ('${staticPath}')`, () => {
it(`Direct visit no query params`, () => {
cy.visit(staticPath).waitForRouteChange()
cy.getTestElement(`query`).contains(`{}`)
cy.getTestElement(`params`).contains(`{}`)
})

it(`Direct visit with query params`, () => {
cy.visit(staticPath + `?foo=bar`).waitForRouteChange()
cy.getTestElement(`query`).contains(`{"foo":"bar"}`)
cy.getTestElement(`params`).contains(`{}`)
})

it(`Client navigation to same path with different query params`, () => {
cy.visit(staticPath).waitForRouteChange()
cy.getTestElement(`query`).contains(`{}`)
cy.getTestElement(`params`).contains(`{}`)
cy.window()
.then(win => win.___navigate(staticPath + `?foo=bar`))
.waitForRouteChange()
cy.getTestElement(`query`).contains(`{"foo":"bar"}`)
cy.getTestElement(`params`).contains(`{}`)
cy.window()
.then(win => win.___navigate(staticPath + `?foo=baz`))
.waitForRouteChange()
cy.getTestElement(`query`).contains(`{"foo":"baz"}`)
cy.getTestElement(`params`).contains(`{}`)
cy.window()
.then(win => win.___navigate(staticPath))
.waitForRouteChange()
cy.getTestElement(`query`).contains(`{}`)
cy.getTestElement(`params`).contains(`{}`)
})
})

describe(`Param path ('${paramPath}:param')`, () => {
it(`Direct visit no query params`, () => {
cy.visit(paramPath + `foo/`).waitForRouteChange()
cy.getTestElement(`query`).contains(`{}`)
cy.getTestElement(`params`).contains(`{"param":"foo"}`)
})

it(`Direct visit with query params`, () => {
cy.visit(paramPath + `foo/` + `?foo=bar`).waitForRouteChange()
cy.getTestElement(`query`).contains(`{"foo":"bar"}`)
cy.getTestElement(`params`).contains(`{"param":"foo"}`)
})

it(`Client navigation to same param path with different query params and url params`, () => {
cy.visit(paramPath + `foo/`).waitForRouteChange()
cy.getTestElement(`query`).contains(`{}`)
cy.getTestElement(`params`).contains(`{"param":"foo"}`)
cy.window()
.then(win => win.___navigate(paramPath + `foo/` + `?foo=bar`))
.waitForRouteChange()
cy.getTestElement(`query`).contains(`{"foo":"bar"}`)
cy.getTestElement(`params`).contains(`{"param":"foo"}`)
cy.window()
.then(win => win.___navigate(paramPath + `baz/` + `?foo=bar`))
.waitForRouteChange()
cy.getTestElement(`query`).contains(`{"foo":"bar"}`)
cy.getTestElement(`params`).contains(`{"param":"baz"}`)
cy.window()
.then(win => win.___navigate(paramPath + `baz/`))
.waitForRouteChange()
cy.getTestElement(`query`).contains(`{}`)
cy.getTestElement(`params`).contains(`{"param":"baz"}`)
})
})

describe.only(`Wildcard path ('${wildcardPath}*')`, () => {
it(`Direct visit no query params`, () => {
cy.visit(wildcardPath + `foo/nested/`).waitForRouteChange()
cy.getTestElement(`query`).contains(`{}`)
cy.getTestElement(`params`).contains(`{"wildcard":"foo/nested"}`)
})

it(`Direct visit with query params`, () => {
cy.visit(wildcardPath + `foo/nested/` + `?foo=bar`).waitForRouteChange()
cy.getTestElement(`query`).contains(`{"foo":"bar"}`)
cy.getTestElement(`params`).contains(`{"wildcard":"foo/nested"}`)
})

it(`Client navigation to same param path with different query params and url params`, () => {
cy.visit(wildcardPath + `foo/`).waitForRouteChange()
cy.getTestElement(`query`).contains(`{}`)
cy.getTestElement(`params`).contains(`{"wildcard":"foo"}`)
cy.window()
.then(win => win.___navigate(wildcardPath + `foo/` + `?foo=bar`))
.waitForRouteChange()
cy.getTestElement(`query`).contains(`{"foo":"bar"}`)
cy.getTestElement(`params`).contains(`{"wildcard":"foo"}`)
cy.window()
.then(win => win.___navigate(wildcardPath + `baz/` + `?foo=bar`))
.waitForRouteChange()
cy.getTestElement(`query`).contains(`{"foo":"bar"}`)
cy.getTestElement(`params`).contains(`{"wildcard":"baz"}`)
cy.window()
.then(win => win.___navigate(wildcardPath + `baz/`))
.waitForRouteChange()
cy.getTestElement(`query`).contains(`{}`)
cy.getTestElement(`params`).contains(`{"wildcard":"baz"}`)
})
})
22 changes: 22 additions & 0 deletions e2e-tests/development-runtime/src/pages/ssr/param-path/[param].js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React from "react"

export default function Params({ serverData }) {
return (
<div>
<h2>Query</h2>
<pre data-testid="query">{JSON.stringify(serverData?.arg?.query)}</pre>
<h2>Params</h2>
<pre data-testid="params">{JSON.stringify(serverData?.arg?.params)}</pre>
<h2>Debug</h2>
<pre>{JSON.stringify({ serverData }, null, 2)}</pre>
</div>
)
}

export function getServerData(arg) {
return {
props: {
arg,
},
}
}
22 changes: 22 additions & 0 deletions e2e-tests/development-runtime/src/pages/ssr/static-path.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React from "react"

export default function StaticPath({ serverData }) {
return (
<div>
<h2>Query</h2>
<pre data-testid="query">{JSON.stringify(serverData?.arg?.query)}</pre>
<h2>Params</h2>
<pre data-testid="params">{JSON.stringify(serverData?.arg?.params)}</pre>
<h2>Debug</h2>
<pre>{JSON.stringify({ serverData }, null, 2)}</pre>
</div>
)
}

export function getServerData(arg) {
return {
props: {
arg,
},
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React from "react"

export default function Wildcard({ serverData }) {
return (
<div>
<h2>Query</h2>
<pre data-testid="query">{JSON.stringify(serverData?.arg?.query)}</pre>
<h2>Params</h2>
<pre data-testid="params">{JSON.stringify(serverData?.arg?.params)}</pre>
<h2>Debug</h2>
<pre>{JSON.stringify({ serverData }, null, 2)}</pre>
</div>
)
}

export function getServerData(arg) {
return {
props: {
arg,
},
}
}
6 changes: 3 additions & 3 deletions e2e-tests/production-runtime/cypress/integration/redirects.js
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ describe(`Redirects`, () => {
failOnStatusCode: false,
}).waitForRouteChange()

cy.location(`pathname`).should(`equal`, `/redirect-search-hash/`)
cy.location(`pathname`).should(`equal`, `/redirect-search-hash`)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Result of https://github.com/gatsbyjs/gatsby/pull/33209/files#r717559851

Please note that with this change it is actually same as we check client navigation in

it(`should support hash parameter with Link component`, () => {
cy.visit(`/`, {
failOnStatusCode: false,
}).waitForRouteChange()
cy.getTestElement(`redirect-two-anchor`).click().waitForRouteChange()
cy.location(`pathname`).should(`equal`, `/redirect-search-hash`)
cy.location(`hash`).should(`equal`, `#anchor`)
cy.location(`search`).should(`equal`, ``)
})

And same for 2 following changes

cy.location(`hash`).should(`equal`, `#anchor`)
cy.location(`search`).should(`equal`, ``)
})
Expand All @@ -96,7 +96,7 @@ describe(`Redirects`, () => {
failOnStatusCode: false,
}).waitForRouteChange()

cy.location(`pathname`).should(`equal`, `/redirect-search-hash/`)
cy.location(`pathname`).should(`equal`, `/redirect-search-hash`)
cy.location(`hash`).should(`equal`, ``)
cy.location(`search`).should(`equal`, `?query_param=hello`)
})
Expand All @@ -117,7 +117,7 @@ describe(`Redirects`, () => {
failOnStatusCode: false,
}).waitForRouteChange()

cy.location(`pathname`).should(`equal`, `/redirect-search-hash/`)
cy.location(`pathname`).should(`equal`, `/redirect-search-hash`)
cy.location(`hash`).should(`equal`, `#anchor`)
cy.location(`search`).should(`equal`, `?query_param=hello`)
})
Expand Down
108 changes: 108 additions & 0 deletions e2e-tests/production-runtime/cypress/integration/ssr.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
const staticPath = `/ssr/static-path/`
const paramPath = `/ssr/param-path/`
const wildcardPath = `/ssr/wildcard-path/`

describe(`Static path ('${staticPath}')`, () => {
it(`Direct visit no query params`, () => {
cy.visit(staticPath).waitForRouteChange()
cy.getTestElement(`query`).contains(`{}`)
cy.getTestElement(`params`).contains(`{}`)
})

it(`Direct visit with query params`, () => {
cy.visit(staticPath + `?foo=bar`).waitForRouteChange()
cy.getTestElement(`query`).contains(`{"foo":"bar"}`)
cy.getTestElement(`params`).contains(`{}`)
})

it(`Client navigation to same path with different query params`, () => {
cy.visit(staticPath).waitForRouteChange()
cy.getTestElement(`query`).contains(`{}`)
cy.getTestElement(`params`).contains(`{}`)
cy.window()
.then(win => win.___navigate(staticPath + `?foo=bar`))
.waitForRouteChange()
cy.getTestElement(`query`).contains(`{"foo":"bar"}`)
cy.getTestElement(`params`).contains(`{}`)
cy.window()
.then(win => win.___navigate(staticPath + `?foo=baz`))
.waitForRouteChange()
cy.getTestElement(`query`).contains(`{"foo":"baz"}`)
cy.getTestElement(`params`).contains(`{}`)
cy.window()
.then(win => win.___navigate(staticPath))
.waitForRouteChange()
cy.getTestElement(`query`).contains(`{}`)
cy.getTestElement(`params`).contains(`{}`)
})
})

describe(`Param path ('${paramPath}:param')`, () => {
it(`Direct visit no query params`, () => {
cy.visit(paramPath + `foo/`).waitForRouteChange()
cy.getTestElement(`query`).contains(`{}`)
cy.getTestElement(`params`).contains(`{"param":"foo"}`)
})

it(`Direct visit with query params`, () => {
cy.visit(paramPath + `foo/` + `?foo=bar`).waitForRouteChange()
cy.getTestElement(`query`).contains(`{"foo":"bar"}`)
cy.getTestElement(`params`).contains(`{"param":"foo"}`)
})

it(`Client navigation to same param path with different query params and url params`, () => {
cy.visit(paramPath + `foo/`).waitForRouteChange()
cy.getTestElement(`query`).contains(`{}`)
cy.getTestElement(`params`).contains(`{"param":"foo"}`)
cy.window()
.then(win => win.___navigate(paramPath + `foo/` + `?foo=bar`))
.waitForRouteChange()
cy.getTestElement(`query`).contains(`{"foo":"bar"}`)
cy.getTestElement(`params`).contains(`{"param":"foo"}`)
cy.window()
.then(win => win.___navigate(paramPath + `baz/` + `?foo=bar`))
.waitForRouteChange()
cy.getTestElement(`query`).contains(`{"foo":"bar"}`)
cy.getTestElement(`params`).contains(`{"param":"baz"}`)
cy.window()
.then(win => win.___navigate(paramPath + `baz/`))
.waitForRouteChange()
cy.getTestElement(`query`).contains(`{}`)
cy.getTestElement(`params`).contains(`{"param":"baz"}`)
})
})

describe.only(`Wildcard path ('${wildcardPath}*')`, () => {
pieh marked this conversation as resolved.
Show resolved Hide resolved
it(`Direct visit no query params`, () => {
cy.visit(wildcardPath + `foo/nested/`).waitForRouteChange()
cy.getTestElement(`query`).contains(`{}`)
cy.getTestElement(`params`).contains(`{"wildcard":"foo/nested"}`)
})

it(`Direct visit with query params`, () => {
cy.visit(wildcardPath + `foo/nested/` + `?foo=bar`).waitForRouteChange()
cy.getTestElement(`query`).contains(`{"foo":"bar"}`)
cy.getTestElement(`params`).contains(`{"wildcard":"foo/nested"}`)
})

it(`Client navigation to same param path with different query params and url params`, () => {
cy.visit(wildcardPath + `foo/`).waitForRouteChange()
cy.getTestElement(`query`).contains(`{}`)
cy.getTestElement(`params`).contains(`{"wildcard":"foo"}`)
cy.window()
.then(win => win.___navigate(wildcardPath + `foo/` + `?foo=bar`))
.waitForRouteChange()
cy.getTestElement(`query`).contains(`{"foo":"bar"}`)
cy.getTestElement(`params`).contains(`{"wildcard":"foo"}`)
cy.window()
.then(win => win.___navigate(wildcardPath + `baz/` + `?foo=bar`))
.waitForRouteChange()
cy.getTestElement(`query`).contains(`{"foo":"bar"}`)
cy.getTestElement(`params`).contains(`{"wildcard":"baz"}`)
cy.window()
.then(win => win.___navigate(wildcardPath + `baz/`))
.waitForRouteChange()
cy.getTestElement(`query`).contains(`{}`)
cy.getTestElement(`params`).contains(`{"wildcard":"baz"}`)
})
})
22 changes: 22 additions & 0 deletions e2e-tests/production-runtime/src/pages/ssr/param-path/[param].js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React from "react"

export default function Params({ serverData }) {
return (
<div>
<h2>Query</h2>
<pre data-testid="query">{JSON.stringify(serverData?.arg?.query)}</pre>
<h2>Params</h2>
<pre data-testid="params">{JSON.stringify(serverData?.arg?.params)}</pre>
<h2>Debug</h2>
<pre>{JSON.stringify({ serverData }, null, 2)}</pre>
</div>
)
}

export function getServerData(arg) {
return {
props: {
arg,
},
}
}
22 changes: 22 additions & 0 deletions e2e-tests/production-runtime/src/pages/ssr/static-path.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React from "react"

export default function StaticPath({ serverData }) {
return (
<div>
<h2>Query</h2>
<pre data-testid="query">{JSON.stringify(serverData?.arg?.query)}</pre>
<h2>Params</h2>
<pre data-testid="params">{JSON.stringify(serverData?.arg?.params)}</pre>
<h2>Debug</h2>
<pre>{JSON.stringify({ serverData }, null, 2)}</pre>
</div>
)
}

export function getServerData(arg) {
return {
props: {
arg,
},
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React from "react"

export default function Wildcard({ serverData }) {
return (
<div>
<h2>Query</h2>
<pre data-testid="query">{JSON.stringify(serverData?.arg?.query)}</pre>
<h2>Params</h2>
<pre data-testid="params">{JSON.stringify(serverData?.arg?.params)}</pre>
<h2>Debug</h2>
<pre>{JSON.stringify({ serverData }, null, 2)}</pre>
</div>
)
}

export function getServerData(arg) {
return {
props: {
arg,
},
}
}
Loading