Fix Next router and make default query optional

readme.md

@@ -58,7 +58,7 @@ const parseSearch = (query: Query) => {
 
 export function UserList() {
   const { page, size, query, setQuery, setPage, resetQuery } =
-    useQueryAndPagination({ search: '' }, parseSearch)
+    useQueryAndPagination(parseSearch, { search: '' })
 
   return (
     <div>
@@ -116,10 +116,14 @@ const users = [
 
 export function UserList() {
   const { page, size, query, setQuery, setPage, resetQuery } =
-    useQueryAndPagination({ name: '', age: 0 }, userSchema, {
-      page: 0,
-      size: 4,
-    })
+    useQueryAndPagination:
+      userSchema,
+      { name: '', age: 0 },
+      {
+        page: 0,
+        size: 4,
+      },
+    )
 
   return (
     <div>

src/engine/pagination.ts

@@ -46,11 +46,14 @@ const parsePagination = (query: Query): Partial<PaginationQuery> => {
   }
 }
 
-export const useAbstractQueryAndPagination = <T extends AbstractQuery>(
-  defaultQuery: T,
-  parseQuery: ParseQuery<T>,
+export const useAbstractQueryAndPagination = <
+  TQuery extends AbstractQuery,
+  TDefaultQuery extends Partial<TQuery>,
+>(
   router: Router,
-  defaultPagination?: PaginationQuery,
+  parseQuery: ParseQuery<TQuery>,
+  defaultQuery: TDefaultQuery,
+  defaultPagination?: Partial<PaginationQuery>,
   options?: Partial<AbstractQueryOptions>,
 ) => {
   const mergedDefaultPagination = {
@@ -63,9 +66,9 @@ export const useAbstractQueryAndPagination = <T extends AbstractQuery>(
   }
 
   const { query, setQuery } = useAbstractQuery(
-    mergedDefaultQueryAndPagination,
-    parseQuery,
     router,
+    parseQuery,
+    mergedDefaultQueryAndPagination,
     options,
   )
 
@@ -74,15 +77,18 @@ export const useAbstractQueryAndPagination = <T extends AbstractQuery>(
     setQuery: setPagination,
     resetQuery: resetPagination,
   } = useAbstractQuery(
-    mergedDefaultPagination,
-    parsePagination,
     router,
+    parsePagination,
+    mergedDefaultPagination,
     options,
   )
 
   return {
     query,
-    setQuery: (query: Partial<T>, options?: Partial<ChangeQueryOptions>) => {
+    setQuery: (
+      query: Partial<TQuery>,
+      options?: Partial<ChangeQueryOptions>,
+    ) => {
       const mergedOptions = { ...DEFAULT_CHANGE_QUERY_OPTIONS, ...options }
       setQuery({
         ...query,

src/engine/query.ts

@@ -24,17 +24,17 @@ export type ParseQuery<T> = (query: Query) => Partial<T>
 
 export type Router = {
   /**
-   * @returns The current query.
+   * @returns The current query. If a property is undefined by the current query, the corresponding property of the default query is taken, which might be undefined too.
    */
   getQuery: (defaultQuery: Query) => Query
 
   /**
-   * Updates the query by merging the given query with the current query.
+   * Updates the query by merging the given query with the current query. If a property is undefined by the given query and the current query, the corresponding default query is taken, which might be undefined too.
    */
   setQuery: (query: Partial<Query>, defaultQuery: Query) => void
 }
 
-export const useQuery = <T extends Query>(defaultQuery: T, router: Router) => {
+export const useQuery = <T extends Query>(router: Router, defaultQuery: T) => {
   const resetQuery = useCallback(() => {
     router.setQuery(defaultQuery, defaultQuery)
   }, [router, defaultQuery])
@@ -71,10 +71,13 @@ const DEFAULT_ABSTRACT_QUERY_OPTIONS: AbstractQueryOptions = {
   },
 }
 
-export const useAbstractQuery = <T extends AbstractQuery>(
-  defaultQuery: T,
-  parseQuery: ParseQuery<T>,
+export const useAbstractQuery = <
+  TQuery extends AbstractQuery,
+  TDefaultQuery extends Partial<TQuery>,
+>(
   router: Router,
+  parseQuery: ParseQuery<TQuery>,
+  defaultQuery: TDefaultQuery,
   options?: Partial<AbstractQueryOptions>,
 ) => {
   const mergedOptions = useMemo(
@@ -88,12 +91,12 @@ export const useAbstractQuery = <T extends AbstractQuery>(
   )
 
   const { query, setQuery, resetQuery } = useQuery(
-    convertedDefaultQuery,
     router,
+    convertedDefaultQuery,
   )
 
-  const parsedQuery: T = useMemo(() => {
-    let parsed: Partial<T>
+  const parsedQuery = useMemo(() => {
+    let parsed: Partial<TQuery>
     try {
       parsed = parseQuery(query)
     } catch (e) {
@@ -106,7 +109,7 @@ export const useAbstractQuery = <T extends AbstractQuery>(
   }, [defaultQuery, parseQuery, query])
 
   const setAbstractQuery = useCallback(
-    (query: Partial<T>) => {
+    (query: Partial<TQuery>) => {
       setQuery(mergedOptions.convertToQuery(query))
     },
     [setQuery, mergedOptions],

src/routers/__test__/inMemory.test.ts

@@ -1,6 +1,5 @@
 import { act, renderHook } from '@testing-library/react'
 import { z } from 'zod'
-import { NonNullableRecord } from '../../utils'
 import { useQuery, useQueryAndPagination } from '../../zod/routers/inMemory'
 import { usePagination } from '../inMemory'
 
@@ -10,8 +9,8 @@ describe('InMemory', () => {
   })
 
   const useInMemoryQueryWithSearch = (
-    defaultQuery: NonNullableRecord<z.infer<typeof searchSchema>>,
-  ) => useQuery(defaultQuery, searchSchema)
+    defaultQuery: Partial<z.output<typeof searchSchema>> = {},
+  ) => useQuery(searchSchema, defaultQuery)
 
   test('should set default page and size', () => {
     const page = 0
@@ -53,7 +52,7 @@ describe('InMemory', () => {
     const page = 2
 
     const { result } = renderHook(() =>
-      useQueryAndPagination({ search: '' }, searchSchema),
+      useQueryAndPagination(searchSchema, { search: '' }),
     )
 
     act(() => {
@@ -90,7 +89,7 @@ describe('InMemory', () => {
     const page = 2
 
     const { result } = renderHook(() =>
-      useQueryAndPagination({ search: defaultSearch }, searchSchema),
+      useQueryAndPagination(searchSchema, { search: defaultSearch }),
     )
 
     act(() => {
@@ -125,7 +124,7 @@ describe('InMemory', () => {
     const page = 2
 
     const { result } = renderHook(() =>
-      useQueryAndPagination({ search: defaultSearch }, searchSchema),
+      useQueryAndPagination(searchSchema, { search: defaultSearch }),
     )
 
     act(() => {
@@ -159,7 +158,7 @@ describe('InMemory', () => {
     })
 
     const { result } = renderHook(() =>
-      useQuery({ search: '', department: '' }, schema),
+      useQuery(schema, { search: '', department: '' }),
     )
 
     act(() => {
@@ -178,7 +177,7 @@ describe('InMemory', () => {
     const search = ''
 
     const { result } = renderHook(() =>
-      useQuery({ search: 'Default search' }, searchSchema),
+      useQuery(searchSchema, { search: 'Default search' }),
     )
 
     act(() => {

src/routers/__test__/nextRouter.test.ts

@@ -2,7 +2,6 @@ import { act, renderHook } from '@testing-library/react'
 import router from 'next/router'
 import { z } from 'zod'
 import { vi } from 'vitest'
-import { NonNullableRecord } from '../../utils'
 import { useQuery, useQueryAndPagination } from '../../zod/routers/nextRouter'
 import { usePagination } from '../nextRouter'
 
@@ -19,8 +18,8 @@ describe('NextRouter', () => {
   })
 
   const useNextRouterQueryWithSearch = (
-    defaultQuery: NonNullableRecord<z.infer<typeof searchSchema>>,
-  ) => useQuery(defaultQuery, searchSchema)
+    defaultQuery: Partial<z.infer<typeof searchSchema>> = {},
+  ) => useQuery(searchSchema, defaultQuery)
 
   test('should set default page and size', () => {
     const page = 0
@@ -64,7 +63,7 @@ describe('NextRouter', () => {
     const page = 2
 
     const { result } = renderHook(() =>
-      useQueryAndPagination({ search: '' }, searchSchema),
+      useQueryAndPagination(searchSchema, { search: '' }),
     )
 
     act(() => {
@@ -104,7 +103,7 @@ describe('NextRouter', () => {
     const page = 2
 
     const { result } = renderHook(() =>
-      useQueryAndPagination({ search: defaultSearch }, searchSchema),
+      useQueryAndPagination(searchSchema, { search: defaultSearch }),
     )
 
     act(() => {
@@ -146,7 +145,7 @@ describe('NextRouter', () => {
     const page = 2
 
     const { result } = renderHook(() =>
-      useQueryAndPagination({ search: defaultSearch }, searchSchema),
+      useQueryAndPagination(searchSchema, { search: defaultSearch }),
     )
 
     act(() => {
@@ -194,17 +193,14 @@ describe('NextRouter', () => {
     })
 
     const { result } = renderHook(() =>
-      useQuery(
-        {
-          search: '',
-          department: '',
-          age: defaultAge,
-          birthDate: defaultBirthDate,
-          netWorth: defaultNetWorth,
-          darkMode: defaultDarkMode,
-        },
-        schema,
-      ),
+      useQuery(schema, {
+        search: '',
+        department: '',
+        age: defaultAge,
+        birthDate: defaultBirthDate,
+        netWorth: defaultNetWorth,
+        darkMode: defaultDarkMode,
+      }),
     )
 
     act(() => {
@@ -226,7 +222,7 @@ describe('NextRouter', () => {
     const greeting = 'hello'
     router.query = { greeting }
 
-    const { result } = renderHook(() => useQuery({ search: '' }, searchSchema))
+    const { result } = renderHook(() => useQuery(searchSchema, { search: '' }))
 
     act(() => {
       result.current.setQuery({ search: 'Max' })
@@ -242,7 +238,7 @@ describe('NextRouter', () => {
     router.query = { search: 'Max' }
 
     const { result } = renderHook(() =>
-      useQuery({ search: defaultSearch }, searchSchema),
+      useQuery(searchSchema, { search: defaultSearch }),
     )
 
     act(() => {
@@ -257,7 +253,7 @@ describe('NextRouter', () => {
     const search = ''
 
     const { result } = renderHook(() =>
-      useQuery({ search: 'Default search' }, searchSchema),
+      useQuery(searchSchema, { search: 'Default search' }),
     )
 
     act(() => {
@@ -267,4 +263,25 @@ describe('NextRouter', () => {
     expect(result.current.query.search).toBe(search)
     expect(router.query.search).toBe(search)
   })
+
+  test('passing no default query should return undefined for a property that is not in the query', () => {
+    const { result } = renderHook(() =>
+      useQuery(z.object({ department: z.string() })),
+    )
+
+    expect(result.current.query.department).toBeUndefined()
+  })
+
+  test('the query should be a merge of the default query and the current query', () => {
+    const defaultRole = 'ADMIN'
+
+    const { result } = renderHook(() =>
+      useQuery(z.object({ department: z.string(), role: z.string() }), {
+        role: defaultRole,
+      }),
+    )
+
+    expect(result.current.query.department).toBeUndefined()
+    expect(result.current.query.role).toBe(defaultRole)
+  })
 })