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

Rename query to searchParams for getServerSideProps in new Router #38654

Merged
merged 5 commits into from Jul 15, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
21 changes: 17 additions & 4 deletions packages/next/server/app-render.tsx
Expand Up @@ -651,7 +651,18 @@ export async function renderToHTML(
}

type getServerSidePropsContextPage = GetServerSidePropsContext & {
query: URLSearchParams
searchParams: URLSearchParams
pathname: string
}

type GetStaticPropsContext = {
layoutSegments: FlightSegmentPath
params?: { [key: string]: string | string[] }
preview?: boolean
previewData?: string | object | undefined
}

type GetStaticPropContextPage = GetStaticPropsContext & {
pathname: string
}

Expand All @@ -668,7 +679,7 @@ export async function renderToHTML(
cookies,
layoutSegments: segmentPath,
// TODO-APP: change pathname to actual pathname, it holds the dynamic parameter currently
...(isPage ? { query, pathname } : {}),
...(isPage ? { searchParams: query, pathname } : {}),
...(pageIsDynamic ? { params: currentParams } : undefined),
...(isPreview
? { preview: true, previewData: previewData }
Expand All @@ -681,7 +692,9 @@ export async function renderToHTML(
}
// TODO-APP: implement layout specific caching for getStaticProps
if (layoutOrPageMod.getStaticProps) {
const getStaticPropsContext = {
const getStaticPropsContext:
| GetStaticPropsContext
| GetStaticPropContextPage = {
layoutSegments: segmentPath,
...(isPage ? { pathname } : {}),
...(pageIsDynamic ? { params: currentParams } : undefined),
Expand Down Expand Up @@ -729,7 +742,7 @@ export async function renderToHTML(
// If you have a `/dashboard/[team]/layout.js` it will provide `team` as a param but not anything further down.
params={currentParams}
// Query is only provided to page
{...(isPage ? { query } : {})}
{...(isPage ? { searchParams: query } : {})}
/>
)
},
Expand Down
10 changes: 7 additions & 3 deletions test/e2e/app-dir/app/app/param-and-query/[slug]/page.client.js
@@ -1,7 +1,11 @@
export default function Page({ params, query }) {
export default function Page({ params, searchParams }) {
return (
<h1 id="params-and-query" data-params={params.slug} data-query={query.slug}>
hello from /param-and-query/{params.slug}?slug={query.slug}
<h1
id="params-and-query"
data-params={params.slug}
data-query={searchParams.slug}
>
hello from /param-and-query/{params.slug}?slug={searchParams.slug}
</h1>
)
}
62 changes: 39 additions & 23 deletions test/e2e/app-dir/index.test.ts
Expand Up @@ -6,6 +6,8 @@ import cheerio from 'cheerio'
import webdriver from 'next-webdriver'

describe('app dir', () => {
const isDev = (global as any).isNextDev

if ((global as any).isNextDeploy) {
it('should skip next deploy for now', () => {})
return
Expand Down Expand Up @@ -211,33 +213,38 @@ describe('app dir', () => {
expect(html).toContain('hello from app/dashboard')
})

it('should not rerender layout when navigating between routes in the same layout', async () => {
const browser = await webdriver(next.url, '/same-layout/first')
// TODO-APP: Enable in development
;(isDev ? it.skip : it)(
'should not rerender layout when navigating between routes in the same layout',
async () => {
const browser = await webdriver(next.url, '/same-layout/first')

try {
// Get the render id from the dom and click the first link.
const firstRenderID = await browser.elementById('render-id').text()
await browser.elementById('link').click()
await browser.waitForElementByCss('#second-page')
try {
// Get the render id from the dom and click the first link.
const firstRenderID = await browser.elementById('render-id').text()
await browser.elementById('link').click()
await browser.waitForElementByCss('#second-page')

// Get the render id from the dom again, it should be the same!
const secondRenderID = await browser.elementById('render-id').text()
expect(secondRenderID).toBe(firstRenderID)
// Get the render id from the dom again, it should be the same!
const secondRenderID = await browser.elementById('render-id').text()
expect(secondRenderID).toBe(firstRenderID)

// Navigate back to the first page again by clicking the link.
await browser.elementById('link').click()
await browser.waitForElementByCss('#first-page')
// Navigate back to the first page again by clicking the link.
await browser.elementById('link').click()
await browser.waitForElementByCss('#first-page')

// Get the render id from the dom again, it should be the same!
const thirdRenderID = await browser.elementById('render-id').text()
expect(thirdRenderID).toBe(firstRenderID)
} finally {
await browser.close()
// Get the render id from the dom again, it should be the same!
const thirdRenderID = await browser.elementById('render-id').text()
expect(thirdRenderID).toBe(firstRenderID)
} finally {
await browser.close()
}
}
})
)

describe('<Link />', () => {
it('should hard push', async () => {
// TODO-APP: fix development test
it.skip('should hard push', async () => {
const browser = await webdriver(next.url, '/link-hard-push')

try {
Expand All @@ -264,7 +271,8 @@ describe('app dir', () => {
}
})

it('should hard replace', async () => {
// TODO-APP: fix development test
it.skip('should hard replace', async () => {
const browser = await webdriver(next.url, '/link-hard-replace')

try {
Expand Down Expand Up @@ -954,7 +962,11 @@ describe('app dir', () => {
'/client-with-errors/get-static-props'
)
expect(res.status).toBe(500)
expect(await res.text()).toContain('Internal Server Error')
expect(await res.text()).toContain(
isDev
? 'getStaticProps is not supported on Client Components'
: 'Internal Server Error'
)
})

it('should throw an error when getServerSideProps is used', async () => {
Expand All @@ -963,7 +975,11 @@ describe('app dir', () => {
'/client-with-errors/get-server-side-props'
)
expect(res.status).toBe(500)
expect(await res.text()).toContain('Internal Server Error')
expect(await res.text()).toContain(
isDev
? 'getServerSideProps is not supported on Client Components'
: 'Internal Server Error'
)
})
})

Expand Down
2 changes: 1 addition & 1 deletion test/e2e/app-dir/rendering.test.ts
Expand Up @@ -15,7 +15,7 @@ describe('app dir rendering', () => {
return
}

const isDev = (global as any).isDev
const isDev = (global as any).isNextDev
let next: NextInstance

beforeAll(async () => {
Expand Down
4 changes: 2 additions & 2 deletions test/e2e/app-dir/rsc-basic/app/next-api/link/page.server.js
Expand Up @@ -18,10 +18,10 @@ export default function LinkPage({ queryId }) {

export function getServerSideProps(ctx) {
// FIXME: query is missing
const { query } = ctx
const { searchParams } = ctx
return {
props: {
queryId: query.id || '0',
queryId: searchParams.id || '0',
},
}
}