refactor to use useSearchParams in website playground page (#2821)

* useSearchParams

* a

Author: dimaMachina

packages/plugin/src/index.browser.ts

@@ -15,7 +15,6 @@ const opts: Options = {
     VERSION: packageJson.version,
   },
   format: 'esm',
-  minifySyntax: true,
   outExtension: () => ({ js: '.js' }),
   esbuildOptions(options, _context) {
     options.define!.window = 'undefined';
@@ -82,7 +81,7 @@ export default defineConfig([
   {
     ...opts,
     entry: {
-      'index.browser': 'src/index.browser.ts',
+      'index.browser': 'src/index.ts',
     },
     outDir: 'dist',
     dts: false,
@@ -94,5 +93,18 @@ export default defineConfig([
     esbuildOptions(options, _context) {
       options.define!.window = 'true';
     },
+    esbuildPlugins: [
+      {
+        name: 'remove-processor',
+        setup(build) {
+          build.onLoad({ filter: /processor\.ts$/ }, _args => {
+            return {
+              contents: 'export const processor = {}',
+              loader: 'ts',
+            };
+          });
+        },
+      },
+    ],
   },
 ]);

packages/plugin/tsup.config.ts

@@ -1,8 +1,7 @@
 'use client';
 
-import { FC, ReactNode, useRef } from 'react';
-import debounce from 'lodash.debounce';
-import { StringParam, useQueryParam, withDefault } from 'use-query-params';
+import { FC, ReactNode, useCallback } from 'react';
+import { ReadonlyURLSearchParams, usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { ConfigName, configs, rules } from '@graphql-eslint/eslint-plugin';
 import { asArray } from '@graphql-tools/utils';
 import { GraphQLEditor } from './graphql-editor';
@@ -30,14 +29,28 @@ const operationsRulesOptions = Object.entries(rules)
 const schemaConfigsOptions = schemaConfigs.map(name => ({ key: name, name }));
 const operationsConfigsOptions = operationsConfigs.map(name => ({ key: name, name }));
 
-function useDebouncedQueryParams<TypeToEncode, TypeFromDecode = TypeToEncode>(
-  ...args: Parameters<typeof useQueryParam<TypeToEncode, TypeFromDecode>>
-): ReturnType<typeof useQueryParam<TypeToEncode, TypeFromDecode>> {
-  const [query, setQuery] = useQueryParam(...args);
-  const fn = useRef<typeof setQuery>();
-  fn.current ||= debounce(setQuery, 500);
+// Get a new searchParams string by merging the current
+// searchParams with a provided key/value pair
+const createQueryString = (searchParams: ReadonlyURLSearchParams, name: string, value: string) => {
+  const params = new URLSearchParams(searchParams.toString());
+  params.set(name, value);
 
-  return [query, fn.current];
+  return '?' + params.toString();
+};
+
+function useSetterSearchParams(
+  paramKey: string,
+  defaultValue = '',
+): [string, (value: string) => void] {
+  const pathname = usePathname();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const handleChange = useCallback((value: string) => {
+    router.push(pathname + createQueryString(searchParams, paramKey, value));
+  }, []);
+
+  return [searchParams.get(paramKey) ?? defaultValue, handleChange];
 }
 
 export const ClientPage: FC<{
@@ -46,21 +59,15 @@ export const ClientPage: FC<{
   children: ReactNode;
   headingClass: string;
 }> = ({ defaultSchema, defaultOperation, children, headingClass }) => {
-  const [schemaConfig, setSchemaConfig] = useDebouncedQueryParams(
-    'sc',
-    withDefault(StringParam, 'schema-recommended'),
-  );
-  const [schemaRule, setSchemaRule] = useDebouncedQueryParams<string>('sr');
-  const [operationConfig, setOperationConfig] = useDebouncedQueryParams(
+  const [schemaConfig, setSchemaConfig] = useSetterSearchParams('sc', 'schema-recommended');
+  const [schemaRule, setSchemaRule] = useSetterSearchParams('sr');
+  const [operationConfig, setOperationConfig] = useSetterSearchParams(
     'oc',
-    withDefault(StringParam, 'operations-recommended'),
-  );
-  const [operationRule, setOperationRule] = useDebouncedQueryParams<string>('or');
-  const [schema, setSchema] = useDebouncedQueryParams('s', withDefault(StringParam, defaultSchema));
-  const [operation, setOperation] = useDebouncedQueryParams(
-    'o',
-    withDefault(StringParam, defaultOperation),
+    'operations-recommended',
   );
+  const [operationRule, setOperationRule] = useSetterSearchParams('or');
+  const [schema, setSchema] = useSetterSearchParams('s', defaultSchema);
+  const [operation, setOperation] = useSetterSearchParams('o', defaultOperation);
 
   return (
     <>

pnpm-lock.yaml

@@ -3,7 +3,6 @@ import { clsx } from 'clsx';
 import { Linter } from 'eslint';
 import { parser } from '@graphql-eslint/eslint-plugin';
 import { ClientPage } from './page.client';
-import { QueryParamProvider } from './query-params-provider';
 
 export const metadata = {
   title: 'Playground',
@@ -55,25 +54,23 @@ const PlayPage: FC = () => {
       )}
     >
       <Suspense fallback="Loading...">
-        <QueryParamProvider>
-          <ClientPage
-            defaultOperation={DEFAULT_OPERATION}
-            defaultSchema={DEFAULT_SCHEMA}
-            headingClass={classes.heading}
-          >
-            <div>
-              <h3 className={classes.heading}>VERSIONING</h3>
-              <span className="flex justify-between text-sm">
-                <span>ESLint</span>
-                <span>{Linter.version}</span>
-              </span>
-              <span className="flex justify-between text-sm">
-                <span>GraphQL-ESLint</span>
-                <span>{parser.meta.version}</span>
-              </span>
-            </div>
-          </ClientPage>
-        </QueryParamProvider>
+        <ClientPage
+          defaultOperation={DEFAULT_OPERATION}
+          defaultSchema={DEFAULT_SCHEMA}
+          headingClass={classes.heading}
+        >
+          <div>
+            <h3 className={classes.heading}>VERSIONING</h3>
+            <span className="flex justify-between text-sm">
+              <span>ESLint</span>
+              <span>{Linter.version}</span>
+            </span>
+            <span className="flex justify-between text-sm">
+              <span>GraphQL-ESLint</span>
+              <span>{parser.meta.version}</span>
+            </span>
+          </div>
+        </ClientPage>
       </Suspense>
     </div>
   );

website/app/play/page.client.tsx

@@ -19,19 +19,15 @@
     "@theguild/components": "8.0.0-alpha-20241205144621-2f6170e406a6235f71ab4756e1dd369735420a88",
     "clsx": "^2.0.0",
     "graphql": "^16.9.0",
-    "lodash.debounce": "^4.0.8",
     "lodash.uniqwith": "^4.5.0",
     "next": "15.0.3",
-    "next-query-params": "5.0.1",
     "next-sitemap": "4.2.3",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "use-query-params": "^2.2.1"
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
     "@theguild/tailwind-config": "0.6.1",
-    "@types/lodash.debounce": "4.0.9",
     "@types/lodash.uniqwith": "4.5.9",
     "@types/node": "22.10.1",
     "@types/react": "18.3.13",