refactor: Update to nuqs 2.8 and apply refactors

packages/app/.storybook/preview.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { NextAdapter } from 'next-query-params';
 import { initialize, mswLoader } from 'msw-storybook-addon';
-import { QueryParamProvider } from 'use-query-params';
+import { NuqsAdapter } from 'nuqs/adapters/next/pages';
 import type { Preview } from '@storybook/nextjs';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
@@ -88,16 +87,16 @@ const preview: Preview = {
 
       return (
         <div className={font.className}>
-          <QueryClientProvider client={queryClient}>
-            <QueryParamProvider adapter={NextAdapter}>
+          <NuqsAdapter>
+            <QueryClientProvider client={queryClient}>
               <ThemeWrapper
                 colorScheme={context.globals.theme || 'light'}
                 fontFamily={fontFamily}
               >
                 <Story />
               </ThemeWrapper>
-            </QueryParamProvider>
-          </QueryClientProvider>
+            </QueryClientProvider>
+          </NuqsAdapter>
         </div>
       );
     },

packages/app/jest.config.js

@@ -14,7 +14,7 @@ module.exports = {
   globalSetup: '<rootDir>/global-setup.js',
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$',
-  transformIgnorePatterns: ['/node_modules/'],
+  transformIgnorePatterns: ['/node_modules/(?!(nuqs)/)'],
   moduleNameMapper: {
     '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
     '^@/(.*)$': '<rootDir>/src/$1',

packages/app/package.json

@@ -68,11 +68,10 @@
     "lodash": "^4.17.21",
     "ms": "^2.1.3",
     "next": "^16.1.5",
-    "next-query-params": "^4.3.1",
     "next-runtime-env": "1",
     "next-seo": "^4.28.1",
     "numbro": "^2.4.0",
-    "nuqs": "1.17.0",
+    "nuqs": "^2.8.8",
     "object-hash": "^3.0.0",
     "react": "^19.2.3",
     "react-copy-to-clipboard": "^5.1.0",
@@ -91,22 +90,19 @@
     "recharts": "^2.12.7",
     "rrweb": "2.0.0-alpha.8",
     "sass": "^1.54.8",
-    "serialize-query-params": "^2.0.2",
     "sql-formatter": "^15.4.0",
     "sqlstring": "^2.3.3",
     "store2": "^2.14.3",
     "strip-ansi": "^6.0.1",
     "timestamp-nano": "^1.0.1",
     "uplot": "^1.6.31",
     "uplot-react": "^1.2.2",
-    "use-query-params": "^2.1.2",
     "zod": "3.25"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.3",
     "@eslint/compat": "^2.0.0",
     "@hookform/devtools": "^4.3.1",
-    "@jedmao/location": "^3.0.0",
     "@playwright/test": "^1.57.0",
     "@storybook/addon-docs": "^10.1.4",
     "@storybook/addon-links": "^10.1.4",

packages/app/pages/_app.tsx

@@ -2,10 +2,9 @@ import React, { useEffect } from 'react';
 import type { NextPage } from 'next';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
-import { NextAdapter } from 'next-query-params';
 import randomUUID from 'crypto-randomuuid';
 import { enableMapSet } from 'immer';
-import { QueryParamProvider } from 'use-query-params';
+import { NuqsAdapter } from 'nuqs/adapters/next/pages';
 import HyperDX from '@hyperdx/browser';
 import {
   MutationCache,
@@ -27,7 +26,6 @@ import { AppThemeProvider, useAppTheme } from '@/theme/ThemeProvider';
 import { ThemeWrapper } from '@/ThemeWrapper';
 import { NextApiConfigResponseData } from '@/types';
 import { ConfirmProvider } from '@/useConfirm';
-import { QueryParamProvider as HDXQueryParamProvider } from '@/useQueryParam';
 import {
   SystemColorSchemeScript,
   useResolvedColorScheme,
@@ -175,14 +173,12 @@ export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
       <AppThemeProvider>
         <AppHeadContent />
         <DynamicFavicon />
-        <HDXQueryParamProvider>
-          <QueryParamProvider adapter={NextAdapter}>
-            <QueryClientProvider client={queryClient}>
-              <AppContent Component={Component} pageProps={pageProps} />
-              <ReactQueryDevtools initialIsOpen={true} />
-            </QueryClientProvider>
-          </QueryParamProvider>
-        </HDXQueryParamProvider>
+        <NuqsAdapter>
+          <QueryClientProvider client={queryClient}>
+            <AppContent Component={Component} pageProps={pageProps} />
+            <ReactQueryDevtools initialIsOpen={true} />
+          </QueryClientProvider>
+        </NuqsAdapter>
       </AppThemeProvider>
     </React.Fragment>
   );

packages/app/src/BenchmarkPage.tsx

@@ -147,13 +147,13 @@ function useIndexes(
 }
 
 function BenchmarkPage() {
-  const [queries, setQueries] = useQueryState<string[]>(
+  const [queries, setQueries] = useQueryState(
     'queries',
-    parseAsJson(),
+    parseAsJson<string[]>(v => v as string[]),
   );
-  const [connections, setConnections] = useQueryState<string[]>(
+  const [connections, setConnections] = useQueryState(
     'connections',
-    parseAsJson(),
+    parseAsJson<string[]>(v => v as string[]),
   );
   const [iterations, setIterations] = useQueryState<number>(
     'iterations',

packages/app/src/DBChartPage.tsx

@@ -223,7 +223,7 @@ function DBChartExplorerPage() {
 
   const [chartConfig, setChartConfig] = useQueryState(
     'config',
-    parseAsJson<SavedChartConfig>().withDefault({
+    parseAsJson<SavedChartConfig>(v => v as SavedChartConfig).withDefault({
       ...DEFAULT_CHART_CONFIG,
       source: sources?.[0]?.id ?? '',
     }),

packages/app/src/DBDashboardImportPage.tsx

@@ -3,8 +3,8 @@ import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { filter } from 'lodash';
+import { useQueryState } from 'nuqs';
 import { Controller, useForm, useWatch } from 'react-hook-form';
-import { StringParam, useQueryParam } from 'use-query-params';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { convertToDashboardDocument } from '@hyperdx/common-utils/dist/core/utils';
@@ -190,7 +190,7 @@ type SourceResolutionFormValues = z.infer<typeof SourceResolutionForm>;
 function Mapping({ input }: { input: Input }) {
   const router = useRouter();
   const { data: sources } = useSources();
-  const [dashboardId] = useQueryParam('dashboardId', StringParam);
+  const [dashboardId] = useQueryState('dashboardId');
 
   const { handleSubmit, getFieldState, control, setValue } =
     useForm<SourceResolutionFormValues>({

packages/app/src/DBSearchPage.tsx

@@ -801,7 +801,7 @@ const queryStateMap = {
   where: parseAsStringWithNewLines,
   select: parseAsStringWithNewLines,
   whereLanguage: parseAsStringEnum<'sql' | 'lucene'>(['sql', 'lucene']),
-  filters: parseAsJson<Filter[]>(),
+  filters: parseAsJson<Filter[]>(v => v as Filter[]),
   orderBy: parseAsStringWithNewLines,
 };
 

packages/app/src/NamespaceDetailsSidePanel.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StringParam, useQueryParam, withDefault } from 'use-query-params';
+import { parseAsString, useQueryState } from 'nuqs';
 import { tcFromSource } from '@hyperdx/common-utils/dist/core/metadata';
 import { convertDateRangeToGranularityString } from '@hyperdx/common-utils/dist/core/utils';
 import { TSource } from '@hyperdx/common-utils/dist/types';
@@ -229,12 +229,9 @@ export default function NamespaceDetailsSidePanel({
   metricSource: TSource;
   logSource: TSource;
 }) {
-  const [namespaceName, setNamespaceName] = useQueryParam(
+  const [namespaceName, setNamespaceName] = useQueryState(
     'namespaceName',
-    withDefault(StringParam, ''),
-    {
-      updateType: 'replaceIn',
-    },
+    parseAsString.withDefault(''),
   );
 
   const contextZIndex = useZIndex();
@@ -320,7 +317,7 @@ export default function NamespaceDetailsSidePanel({
   ]);
 
   const handleClose = React.useCallback(() => {
-    setNamespaceName(undefined);
+    setNamespaceName(null);
   }, [setNamespaceName]);
 
   if (!namespaceName) {

packages/app/src/NodeDetailsSidePanel.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StringParam, useQueryParam, withDefault } from 'use-query-params';
+import { parseAsString, useQueryState } from 'nuqs';
 import { tcFromSource } from '@hyperdx/common-utils/dist/core/metadata';
 import { convertDateRangeToGranularityString } from '@hyperdx/common-utils/dist/core/utils';
 import { TSource } from '@hyperdx/common-utils/dist/types';
@@ -242,12 +242,9 @@ export default function NodeDetailsSidePanel({
   metricSource: TSource;
   logSource: TSource;
 }) {
-  const [nodeName, setNodeName] = useQueryParam(
+  const [nodeName, setNodeName] = useQueryState(
     'nodeName',
-    withDefault(StringParam, ''),
-    {
-      updateType: 'replaceIn',
-    },
+    parseAsString.withDefault(''),
   );
 
   const contextZIndex = useZIndex();
@@ -333,7 +330,7 @@ export default function NodeDetailsSidePanel({
   ]);
 
   const handleClose = React.useCallback(() => {
-    setNodeName(undefined);
+    setNodeName(null);
   }, [setNodeName]);
 
   if (!nodeName) {

packages/app/src/PodDetailsSidePanel.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StringParam, useQueryParam, withDefault } from 'use-query-params';
+import { parseAsString, useQueryState } from 'nuqs';
 import { tcFromSource } from '@hyperdx/common-utils/dist/core/metadata';
 import { convertDateRangeToGranularityString } from '@hyperdx/common-utils/dist/core/utils';
 import { TSource } from '@hyperdx/common-utils/dist/types';
@@ -223,12 +223,9 @@ export default function PodDetailsSidePanel({
   logSource: TSource;
   metricSource: TSource;
 }) {
-  const [podName, setPodName] = useQueryParam(
+  const [podName, setPodName] = useQueryState(
     'podName',
-    withDefault(StringParam, ''),
-    {
-      updateType: 'replaceIn',
-    },
+    parseAsString.withDefault(''),
   );
 
   const [rowId, setRowId] = React.useState<string | null>(null);
@@ -243,8 +240,8 @@ export default function PodDetailsSidePanel({
 
   // If we're in a nested side panel, we need to use a higher z-index
   // TODO: This is a hack
-  const [nodeName] = useQueryParam('nodeName', StringParam);
-  const [namespaceName] = useQueryParam('namespaceName', StringParam);
+  const [nodeName] = useQueryState('nodeName');
+  const [namespaceName] = useQueryState('namespaceName');
   const isNested = !!nodeName || !!namespaceName;
   const contextZIndex = useZIndex();
   const drawerZIndex = contextZIndex + 10 + (isNested ? 100 : 0);
@@ -333,7 +330,7 @@ export default function PodDetailsSidePanel({
       // If we're in a nested side panel, don't close the drawer
       return;
     }
-    setPodName(undefined);
+    setPodName(null);
   }, [rowId, setPodName]);
 
   if (!podName) {

packages/app/src/SessionsPage.tsx

@@ -1,10 +1,13 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import Head from 'next/head';
 import { sub } from 'date-fns';
-import { parseAsString, parseAsStringEnum, useQueryStates } from 'nuqs';
+import {
+  parseAsInteger,
+  parseAsString,
+  parseAsStringEnum,
+  useQueryStates,
+} from 'nuqs';
 import { useForm, useWatch } from 'react-hook-form';
-import { NumberParam } from 'serialize-query-params';
-import { StringParam, useQueryParams, withDefault } from 'use-query-params';
 import { tcFromSource } from '@hyperdx/common-utils/dist/core/metadata';
 import {
   SearchCondition,
@@ -329,16 +332,9 @@ export default function SessionsPage() {
     [],
   );
 
-  const [selectedSessionQuery, setSelectedSessionQuery] = useQueryParams(
-    {
-      sid: withDefault(StringParam, undefined),
-      sfrom: withDefault(NumberParam, undefined),
-      sto: withDefault(NumberParam, undefined),
-    },
-    {
-      updateType: 'pushIn',
-      enableBatching: true,
-    },
+  const [selectedSessionQuery, setSelectedSessionQuery] = useQueryStates(
+    { sid: parseAsString, sfrom: parseAsInteger, sto: parseAsInteger },
+    { history: 'push' },
   );
 
   const selectedSession = useMemo(() => {
@@ -357,9 +353,9 @@ export default function SessionsPage() {
     (session: Session | undefined) => {
       if (session == null) {
         setSelectedSessionQuery({
-          sid: undefined,
-          sfrom: undefined,
-          sto: undefined,
+          sid: null,
+          sfrom: null,
+          sto: null,
         });
       } else {
         setSelectedSessionQuery({