Parameter undefined (dynamic page)

[levu304]

What is the problem?

Hi, i'm new in Blitz, when i'm trying dynamic page and using useParam to get parameter from URL, it's return undefined. Is it a bug? See attach image below

Paste all your error logs here:

PASTE_HERE (leave the ``` marks)

Paste all relevant code snippets here:

import getLandingPage from "app/queries/getLandingPage"
import { BlitzPage, useQuery, useParam } from "blitz"

const IndexJobPage: BlitzPage = () => {
  const slug = useParam("slug")
  console.log("slug", slug)

  // const [pageData] = useQuery(getLandingPage, { where: {host: "", pageUrl: ""}})
  return null
}

IndexJobPage.suppressFirstRenderFlicker = true

export default IndexJobPage

What are detailed steps to reproduce this?

1. Create new project
2. Create [slug] folder inside pages folder
3. Create index.tsx file inside [slug] folder
4. Start dev
5. Access http://localhost:3000/test
6. Console log slug parameter return undefined

Run blitz -v and paste the output here:

Windows 10 | win32-x64 | Node: v14.18.0

blitz: 0.43.0 (local)

  Package manager: yarn
  System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
    Memory: 1.33 GB / 7.88 GB
  Binaries:
    Node: 14.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.15 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  npmPackages:
    @prisma/client: 3.5.0 => 3.5.0
    blitz: 0.43.0 => 0.43.0
    prisma: 3.5.0 => 3.5.0
    react: 18.0.0-alpha-5ca4b0433-20211020 => 18.0.0-alpha-5ca4b0433-20211020
    react-dom: 18.0.0-alpha-5ca4b0433-20211020 => 18.0.0-alpha-5ca4b0433-20211020
    typescript: ~4.4 => 4.4.4

Please include below any other applicable logs and screenshots that show your problem:

[beerose]

Hi @levu304! Thanks for reporting it — it looks like, for dynamic pages, the param comes undefined as it's not resolved in the router state. It changes to the proper value after it's resolved.

[beerose]

Ok, so turns out it's actually a React limitation — the page is statically rendered and when you see undefined for the first time, it's the pre-rendered version without the information about the URL. Then once it comes online it changes the value to the proper one. You can add an if statement in your code to handle that. I'm going to close this issue, feel free to reach out if you have any questions.