[legacy-framework] Add useParams and useRouterQuery hooks

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

@@ -1,14 +1,14 @@
-import {Suspense} from 'react'
-import {Link, useRouter, useQuery} from 'blitz'
-import getProduct from 'app/products/queries/getProduct'
-import ProductForm from 'app/products/components/ProductForm'
+import { Suspense } from "react"
+import { Link, useRouter, useQuery, useRouterParams } from "blitz"
+import getProduct from "app/products/queries/getProduct"
+import ProductForm from "app/products/components/ProductForm"
 
 function Product() {
   const router = useRouter()
-  const id = parseInt(router?.query.id as string)
-  const [product] = useQuery(getProduct, {where: {id}})
+  const { id } = useRouterParams()
+  const [product] = useQuery(getProduct, { where: { id: Number(id) } })
 
-  return <ProductForm product={product} onSuccess={() => router.push('/admin/products')} />
+  return <ProductForm product={product} onSuccess={() => router.push("/admin/products")} />
 }
 
 function EditProductPage() {

examples/store/app/admin/pages/admin/products/index.tsx

@@ -1,9 +1,15 @@
 import { Suspense } from "react"
-import { useQuery, Link } from "blitz"
+import { useQuery, Link, useRouterQuery } from "blitz"
 import getProducts from "app/products/queries/getProducts"
 
 function ProductsList() {
-  const [products] = useQuery(getProducts, { orderBy: { id: "desc" } })
+  const { orderby = "id", order = "desc" } = useRouterQuery()
+
+  const [products] = useQuery(getProducts, {
+    orderBy: {
+      [Array.isArray(orderby) ? orderby[0] : orderby]: order,
+    },
+  })
 
   return (
     <ul>

examples/store/cypress/integration/admin/products/index.test.ts

@@ -1,28 +1,39 @@
-import {insert} from './helper'
+import { insert } from "./helper"
 
-describe('admin/products page', () => {
+describe("admin/products page", () => {
   beforeEach(() => {
-    cy.visit('/admin/products')
+    cy.visit("/admin/products")
   })
 
-  it('Has H1', () => {
-    cy.contains('h1', 'Products')
+  it("Has H1", () => {
+    cy.contains("h1", "Products")
   })
 
-  it('goes to new product page', () => {
-    cy.get('p > a').first().contains('Create Product').click()
-    cy.location('pathname').should('equal', '/admin/products/new')
+  it("goes to new product page", () => {
+    cy.get("p > a").first().contains("Create Product").click()
+    cy.location("pathname").should("equal", "/admin/products/new")
   })
 
-  it('goes to bas product page', () => {
-    cy.get('p > a').last().contains('Admin').click()
-    cy.location('pathname').should('equal', '/admin')
+  it("goes to bas product page", () => {
+    cy.get("p > a").last().contains("Admin").click()
+    cy.location("pathname").should("equal", "/admin")
+  })
+
+  it("shows ascending order", () => {
+    cy.get("ul > li")
+      .first()
+      .then(($li) => {
+        const title = $li.find("> a").text()
+
+        cy.visit("/admin/products?order=asc")
+        cy.get("ul > li").last().contains("a", title)
+      })
   })
 
   // This is kind of redundant because this logic is handled in insert()
-  it('shows latest created product', () => {
+  it("shows latest created product", () => {
     const name = insert()
-    cy.get('ul > li').contains(name)
+    cy.get("ul > li").contains(name)
   })
 })
 

packages/core/package.json

@@ -46,7 +46,8 @@
   "dependencies": {
     "pretty-ms": "6.0.1",
     "react-query": "1.3.3",
-    "serialize-error": "6.0.0"
+    "serialize-error": "6.0.0",
+    "url": "^0.11.0"
   },
   "devDependencies": {
     "@rollup/pluginutils": "3.0.8",

packages/core/src/index.ts

@@ -1,5 +1,7 @@
 export * from './use-query'
 export * from './use-paginated-query'
+export * from './use-router-params'
+export * from './use-router-query'
 export * from './ssr-query'
 export * from './rpc'
 

packages/core/src/use-router-params.ts

@@ -0,0 +1,13 @@
+import {useRouter} from 'next/router'
+import {useRouterQuery} from './use-router-query'
+
+export function useRouterParams() {
+  const router = useRouter()
+  const query = useRouterQuery()
+
+  return Object.fromEntries(
+    Object.entries(router.query).filter(
+      ([key, value]) => typeof query[key] === 'undefined' || query[key] !== value,
+    ),
+  )
+}

packages/core/src/use-router-query.ts

@@ -0,0 +1,8 @@
+import {useRouter} from 'next/router'
+import {parse} from 'url'
+
+export function useRouterQuery() {
+  const router = useRouter()
+  const {query} = parse(router.asPath, true)
+  return query
+}