Any examples with router.push?

[cpotey]

Is there an example of how this can be used together with router.push?

I have multiple useQueryState instances, and want to be able to push the route when I click buttons/type in an input.

I have a lot of code, but am unsure if it's the correct way of doing things:

const searchParams = useSearchParams();
const router = useRouter();
const pathname = usePathname();
  
const [selectedFormats, setSelectedFormats] = useQueryState(
    'format',
    parseAsArrayOf(parseAsString).withDefault([])
);
  
const handleToggle = (format: string[]) => {
    setSelectedFormats(format.length > 0 ? format : null);
    let updatedSearchParams = new URLSearchParams(searchParams.toString());

    if (format.length > 0) {
       updatedSearchParams.set('format', format.join(','));
    } else {
       updatedSearchParams.delete('format');
    }

    router.push(`${pathname}?${updatedSearchParams.toString().replace(/%2C/g, ',')}`);
};

It feels a bit much, is there a neater way of doing things?

[franky47]

There are a couple of ways nuqs can help you here.

First is the history option, that can tell nuqs to push a new entry in the History. Combine it with shallow: false to use the Next.js router to send an update to the server, and you get the same behaviour as your example:

const [selectedFormats, setSelectedFormats] = useQueryState(
    'format',
    parseAsArrayOf(parseAsString)
      .withDefault([])
      .withOptions({ 
        shallow: false, // Send updates to the server
        history: 'push' // And push a new entry in the History API while doing so
      })
);
  
const handleToggle = (format: string[]) => {
    setSelectedFormats(format.length > 0 ? format : null);
};

This might work fine for one low-frequency state, but you mention multiple states, potentially high-frequency (text input), for which I wouldn't recommend this approach (the Back button would undo a bunch of characters at a time, horrible UX). I might need to know more about your use-case to help you further on this point.

[cpotey]

Thanks for the response @franky47 - this does help a lot, thanks.

So in terms of the multiple states, I've got about three of them.
A format state using some toggle buttons, a q (search) state using an input, and a list of checkboxes which will feed into a filter state

const ALL_FORMATS = [
  { name: 'Briefings', value: 'briefing' },
  { name: 'Factsheets', value: 'factsheet' },
  { name: 'Scenarios', value: 'scenario' },
  { name: 'eLearning', value: 'elearning' },
];

const ToggleButtons = () => {
  const [selectedFormats, setSelectedFormats] = useQueryState(
    'format',
    parseAsArrayOf(parseAsString).withDefault([]).withOptions({
      shallow: false, 
      history: 'push', 
    })
  );

  const handleFormatToggle = (format: string[]) => {
    setSelectedFormats(format.length > 0 ? format : null);
  };

  const handleFormatClear = () => {
    setSelectedFormats(null);
  };

  return (
    <div>
      <ToggleGroup
        type="multiple"
        value={selectedFormats}
        onValueChange={handleToggle}
      >
        {ALL_FORMATS.map((format) => (
          <ToggleGroupItem key={format.value} value={format.value}>
            {format.name}
          </ToggleGroupItem>
        ))}
      </ToggleGroup>

      {selectedFormats && selectedFormats.length > 0 && (
        <Button onClick={handleClear}>
          Clear
        </Button>
      )}
    </div>
  );
};

Search component is below, I was trying to work out how to handle this to push the new queryState after debouncing the input, but didn't manage to get far at this point.
I might have to change things entirely so that this page changes on a within a form instead of when typing in just an input by itself, if I can't get the debounce working

const Search = () => {
  const [searchQuery, setSearchQuery] = useQueryState('q', {
    defaultValue: '',
  });
  const [query] = useDebounce(input, 350); // currently unused, but would like to route using this if possible, rather than every single typing into the input

  const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchQuery(e.target.value || null);
  };

  return (
    <Input
      id="search-resources"
      type="text"
      name="q"
      placeholder="Search resources"
      value={searchQuery || ''}
      onChange={handleInput}
    />
  );
};

I haven't included the checkboxes, as I'm still discovering them, as I should be able to work it out from understanding how to route using the <ToggleButtons /> and <Search />

If you are able to give any support with the input especially, or can pick faults with my implementation so far, it'd be appreciated

[franky47]

If you want to batch these controls together in one update (like using a form submission to update the search params), then a useQueryState per "field" is probably not the right approach.

For the input, you could try reversing the roles: use a React.useState for the live controlled <input> state, then debounce this into useQueryState:

const Search = () => {
  const [searchQuery, setSearchQuery] = useQueryState('q', {
    defaultValue: ''
  });  
  const [searchState, setSearchState] = React.useState(searchQuery);
  // Using https://github.com/streamich/react-use/blob/master/docs/useDebounce.md
  useDebounce(
    () => setSearchQuery(searchState || null),
    350,
    [searchState]
  );
  
  const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchState(e.target.value);
  };

  return (
    <Input
      id="search-resources"
      type="text"
      name="q"
      placeholder="Search resources"
      value={searchState}
      onChange={handleInput}
    />
  );
};