Blitz: useParam and useParams are missing values on first render

[shaunchurch]

What is the problem?

In a new Blitz app after generating basic CRUD models/pages, when visiting /projects/:projectId projectId value is missing on first render. Subsequent renders contain the correct parameters.

const projectId = useParam("projectId", "number") = NaN.

This leads to a Prisma error, because NaN is passed as the argument for the ID.

Steps to Reproduce

1. Run blitz new app-name
2. Run blitz generate all project name:string
3. Run blitz db migrate
4. Visit http://localhost:3000/project/1

Versions

debug: blitzPkgPath: /usr/local/lib/node_modules/blitz/dist/index.js
debug: cliPkgPath: /usr/local/lib/node_modules/blitz/node_modules/@blitzjs/cli/lib/src/index.js

macOS Catalina | darwin-x64 | Node: v13.12.0

blitz: 0.24.3 (global)

  Package manager: npm
  System:
    OS: macOS 10.15.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 472.78 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.12.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
    Watchman: Not Found
  npmPackages:
    @prisma/cli: Not Found
    @prisma/client: Not Found
    blitz: Not Found
    react: Not Found
    react-dom: Not Found
    typescript: Not Found

Other

export const Project = () => {
  const router = useRouter()
  const projectId = useParam("projectId", "number")
  const [project] = useQuery(getProject, { where: { id: projectId } })
  const [deleteProjectMutation] = useMutation(deleteProject)

09:52:35.926.000     INFO   getProject() Starting with input:
{
  where: {
    id: NaN
  }
}
09:52:35.928.000     ERROR  getProject()
 Error
Invalid `prisma.project.findFirst()` invocation:

{
  where: {
    id: NaN
        ~~~
  }
}

[flybayer]

I'm going to look at this once I get https://github.com/blitz-js/blitz/issues/1282 figured out.

[flybayer]

Update: This comes from Next.js. The reason params are empty on initial render is because react requires first render on the client to be the same as the static html. And since these pages are generated statically at build time without any params, params must be empty on first render on the client. See https://github.com/vercel/next.js/issues/8259 for more context.

Partial Solution

1422 adds a default enabled flag to all useQuery hooks that disables queries on the first render when the params are empty. So this should fix the common use case and issue with useQuery.