[legacy-framework] Add useParam hook

examples/store/app/admin/pages/admin/products/[id].tsx

@@ -1,12 +1,12 @@
 import { Suspense } from "react"
-import { Link, useRouter, useQuery, useParams } from "blitz"
+import { Link, useRouter, useQuery, useParam } from "blitz"
 import getProduct from "app/products/queries/getProduct"
 import ProductForm from "app/products/components/ProductForm"
 
 function Product() {
   const router = useRouter()
-  const { id } = useParams()
-  const [product, { mutate }] = useQuery(getProduct, { where: { id: Number(id) } })
+  const id = useParam("id", "number")
+  const [product, { mutate }] = useQuery(getProduct, { where: { id } })
 
   return (
     <ProductForm

packages/core/src/use-params.ts

@@ -44,3 +44,41 @@ export function useParams() {
 
   return extractRouterParams(router.query, query)
 }
+
+export function useParam(key: string): undefined | string | string[]
+export function useParam(key: string, returnType: 'string'): string
+export function useParam(key: string, returnType: 'number'): number
+export function useParam(key: string, returnType: 'array'): string[]
+export function useParam(
+  key: string,
+  returnType?: 'string' | 'number' | 'array',
+): undefined | number | string | string[] {
+  const params = useParams()
+  const rawValue = params[key]
+
+  if (returnType === 'number') {
+    return Number(rawValue)
+  }
+
+  if (returnType === 'string') {
+    if (typeof rawValue === 'undefined') {
+      return ''
+    }
+
+    return rawValue
+  }
+
+  if (returnType === 'array') {
+    if (typeof rawValue === 'undefined') {
+      return []
+    }
+
+    if (typeof rawValue === 'string') {
+      return [rawValue]
+    }
+
+    return rawValue
+  }
+
+  return rawValue
+}

packages/generator/templates/page/__modelIdParam__.tsx

@@ -1,13 +1,13 @@
 import React, {Suspense} from 'react'
-import {Head, Link, useRouter, useQuery} from 'blitz'
+import {Head, Link, useRouter, useQuery, useParam} from 'blitz'
 import get__ModelName__ from 'app/__modelNames__/queries/get__ModelName__'
 import delete__ModelName__ from 'app/__modelNames__/mutations/delete__ModelName__'
 
 export const __ModelName__: React.FC = () => {
   const router = useRouter()
-  const __modelId__ = parseInt(router?.query.__modelId__ as string)
+  const __modelId__ = useParam('__modelId__', 'number')
   if (process.env.parentModel) {
-    const __parentModelId__ = parseInt(router?.query.__parentModelId__ as string)
+    const __parentModelId__ = useParam('__parentModelId__', 'number')
   }
   const [__modelName__] = useQuery(get__ModelName__, {where: {id: __modelId__}})
 
@@ -51,8 +51,7 @@ export const __ModelName__: React.FC = () => {
 
 const Show__ModelName__Page: React.FC = () => {
   if (process.env.parentModel) {
-    const router = useRouter()
-    const __parentModelId__ = parseInt(router?.query.__parentModelId__ as string)
+    const __parentModelId__ = useParam('__parentModelId__', 'number')
   }
 
   return (

packages/generator/templates/page/__modelIdParam__/edit.tsx

@@ -6,9 +6,9 @@ import __ModelName__Form from 'app/__modelNames__/components/__ModelName__Form'
 
 export const Edit__ModelName__: React.FC = () => {
   const router = useRouter()
-  const __modelId__ = parseInt(router?.query.__modelId__ as string)
+  const __modelId__ = useParam('__modelId__', 'number')
   if (process.env.parentModel) {
-    const __parentModelId__ = parseInt(router?.query.__parentModelId__ as string)
+    const __parentModelId__ = useParam('__parentModelId__', 'number')
   }
   const [__modelName__, {mutate}] = useQuery(get__ModelName__, {where: {id: __modelId__}})
 
@@ -47,8 +47,7 @@ export const Edit__ModelName__: React.FC = () => {
 
 const Edit__ModelName__Page: React.FC = () => {
   if (process.env.parentModel) {
-    const router = useRouter()
-    const __parentModelId__ = parseInt(router?.query.__parentModelId__ as string)
+    const __parentModelId__ = useParam('__parentModelId__', 'number')
   }
 
   return (

packages/generator/templates/page/index.tsx

@@ -1,15 +1,14 @@
 import React, {Suspense} from 'react'
 if (process.env.parentModel) {
-  import {Head, Link, useRouter, useQuery} from 'blitz'
+  import {Head, Link, useQuery, useParam} from 'blitz'
 } else {
   import {Head, Link, useQuery} from 'blitz'
 }
 import get__ModelNames__ from 'app/__modelNames__/queries/get__ModelNames__'
 
 export const __ModelNames__List: React.FC = () => {
   if (process.env.parentModel) {
-    const router = useRouter()
-    const __parentModelId__ = parseInt(router?.query.__parentModelId__ as string)
+    const __parentModelId__ = useParam('__parentModelId__', 'number')
     const [__modelNames__] = useQuery(get__ModelNames__, {
       where: {__parentModel__: {id: __parentModelId__}},
       orderBy: {id: 'desc'},
@@ -47,8 +46,7 @@ export const __ModelNames__List: React.FC = () => {
 
 const __ModelNames__Page: React.FC = () => {
   if (process.env.parentModel) {
-    const router = useRouter()
-    const __parentModelId__ = parseInt(router?.query.__parentModelId__ as string)
+    const __parentModelId__ = useParam('__parentModelId__', 'number')
   }
 
   return (

packages/generator/templates/page/new.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
-import {Head, Link, useRouter} from 'blitz'
+import {Head, Link, useRouter, useParam} from 'blitz'
 import create__ModelName__ from 'app/__modelNames__/mutations/create__ModelName__'
 import __ModelName__Form from 'app/__modelNames__/components/__ModelName__Form'
 
 const New__ModelName__Page: React.FC = () => {
   const router = useRouter()
   if (process.env.parentModel) {
-    const __parentModelId__ = parseInt(router?.query.__parentModelId__ as string)
+    const __parentModelId__ = useParam('__parentModelId__', 'number')
   }
 
   return (