diff --git a/static/app/views/explore/queryParams/context.tsx b/static/app/views/explore/queryParams/context.tsx index 6b09a8bc33f5..077234b0516d 100644 --- a/static/app/views/explore/queryParams/context.tsx +++ b/static/app/views/explore/queryParams/context.tsx @@ -1,14 +1,11 @@ import type {ReactNode} from 'react'; import {useCallback, useEffect, useMemo, useState} from 'react'; -import type {Location} from 'history'; +import {parseAsString, useQueryStates} from 'nuqs'; import {defined} from 'sentry/utils'; import type {Sort} from 'sentry/utils/discover/fields'; import {createDefinedContext} from 'sentry/utils/performance/contexts/utils'; import type {MutableSearch} from 'sentry/utils/tokenizeSearch'; -import {updateNullableLocation} from 'sentry/utils/url/updateNullableLocation'; -import {useLocation} from 'sentry/utils/useLocation'; -import {useNavigate} from 'sentry/utils/useNavigate'; import {TOP_EVENTS_LIMIT} from 'sentry/views/explore/hooks/useTopEvents'; import type { AggregateField, @@ -449,18 +446,16 @@ export function useQueryParamsTitle() { export function useSetQueryParamsSavedQuery() { // This by-passes the context entirely because wrapping the modal in the context - // is not practical. Instead, we directly use `useLocation` and `useNavigate` to - // set the `id` and `title`. - const location = useLocation(); - const navigate = useNavigate(); + // is not practical. Instead, we directly use nuqs to set the `id` and `title`. + const [, setParams] = useQueryStates({ + [ID_KEY]: parseAsString, + [TITLE_KEY]: parseAsString, + }); return useCallback( (id: string, title: string) => { - const target: Location = {...location, query: {...location.query}}; - updateNullableLocation(target, ID_KEY, id); - updateNullableLocation(target, TITLE_KEY, title); - navigate(target); + setParams({[ID_KEY]: id, [TITLE_KEY]: title}); }, - [location, navigate] + [setParams] ); }