feat: ✨ remove empty query parameters by default from the query parameters

Author: abhishekbhardwaj

src/query-parameter-store.test.tsx

@@ -787,4 +787,88 @@ describe('createQueryParamStore', () => {
       })
     })
   })
+
+  it('removes empty parameters by default', async () => {
+    // Arrange
+    const { useQueryParams } = createQueryParamStore(schema)
+    const { result } = renderHook(() => useQueryParams(), {
+      wrapper: MemoryRouterProvider,
+    })
+
+    // Act
+    act(() => {
+      result.current[1]({
+        search: '',
+        filters: [],
+        page: undefined,
+      })
+    })
+
+    // Assert
+    await waitFor(() => {
+      expect(mockRouter.query).toEqual({})
+      expect(result.current[0]).toEqual({})
+    })
+  })
+
+  it('keeps empty parameters when keepEmptyParams is true', async () => {
+    // Arrange
+    const { useQueryParams } = createQueryParamStore(schema)
+    const { result } = renderHook(() => useQueryParams(), {
+      wrapper: MemoryRouterProvider,
+    })
+
+    // Act
+    act(() => {
+      result.current[1](
+        {
+          search: '',
+          filters: [],
+          page: undefined,
+        },
+        { keepEmptyParameters: true },
+      )
+    })
+
+    // Assert
+    await waitFor(() => {
+      expect(mockRouter.query).toEqual({
+        search: '',
+        filters: [],
+      })
+      expect(result.current[0]).toEqual({
+        search: '',
+        filters: [],
+      })
+    })
+  })
+
+  it('preserves non-empty parameters while removing empty ones', async () => {
+    // Arrange
+    const { useQueryParams } = createQueryParamStore(schema)
+    const { result } = renderHook(() => useQueryParams(), {
+      wrapper: MemoryRouterProvider,
+    })
+
+    // Act
+    act(() => {
+      result.current[1]({
+        search: 'test',
+        filters: [],
+        page: 1,
+      })
+    })
+
+    // Assert
+    await waitFor(() => {
+      expect(mockRouter.query).toEqual({
+        search: 'test',
+        page: 1,
+      })
+      expect(result.current[0]).toEqual({
+        search: 'test',
+        page: 1,
+      })
+    })
+  })
 })

src/query-parameter-store.ts

@@ -13,6 +13,7 @@ export interface SetRouterQueryParamsOptions {
   scroll?: boolean
   replace?: boolean
   logErrorsToConsole?: boolean
+  keepEmptyParameters?: boolean
 }
 
 export type SetQueryParamOptions = SetRouterQueryParamsOptions & {
@@ -29,6 +30,21 @@ interface QueryParamStore<P> {
   resetInitialization: () => void
 }
 
+const filterEmptyValues = (obj: Record<string, any>): Record<string, any> => {
+  return Object.entries(obj).reduce(
+    (acc, [key, value]) => {
+      const isEmpty =
+        value === undefined || value === null || value === '' || (Array.isArray(value) && value.length === 0)
+
+      if (!isEmpty) {
+        acc[key] = value
+      }
+      return acc
+    },
+    {} as Record<string, any>,
+  )
+}
+
 const createStore = <P extends z.ZodType>(
   schema: P,
   routerOptions: SetRouterQueryParamsOptions = {},
@@ -146,10 +162,15 @@ const createStore = <P extends z.ZodType>(
           ...dynamicParams,
         } as z.infer<P>
 
+        const finalParams =
+          options.keepEmptyParameters || routerOptions.keepEmptyParameters
+            ? mergedParams
+            : filterEmptyValues(mergedParams)
+
         pushOrReplace(
           {
             pathname: options.pathname || Router.pathname,
-            query: mergedParams,
+            query: finalParams,
           },
           undefined,
           pick(