fix: make sure the state-change effect runs for multi parsers (47ng#1163)

Author: TkDodo

packages/e2e/shared/specs/native-array.cy.ts

@@ -17,4 +17,20 @@ export const testNativeArray = createTest('parseAsNativeArray', ({ path }) => {
     cy.get('#add-button').click()
     cy.location('search').should('eq', '?test=1&test=2')
   })
+  it('works with the browser back button', () => {
+    cy.visit(path)
+    cy.contains('#hydration-marker', 'hydrated').should('be.hidden')
+    cy.get('#client-name').should('be.empty')
+    cy.get('#add-button').click()
+    cy.get('#add-button').click()
+    cy.get('#add-button').click()
+    cy.location('search').should('eq', '?test=1&test=2&test=3')
+    cy.get('#client-name').should('have.text', '1 - 2 - 3')
+    cy.go('back')
+    cy.location('search').should('eq', '?test=1&test=2')
+    cy.get('#client-name').should('have.text', '1 - 2')
+    cy.go('forward')
+    cy.location('search').should('eq', '?test=1&test=2&test=3')
+    cy.get('#client-name').should('have.text', '1 - 2 - 3')
+  })
 })

packages/e2e/shared/specs/native-array.tsx

@@ -3,7 +3,9 @@
 import { parseAsInteger, parseAsNativeArrayOf, useQueryState } from 'nuqs'
 import { Display } from '../components/display'
 
-export const parser = parseAsNativeArrayOf(parseAsInteger)
+export const parser = parseAsNativeArrayOf(parseAsInteger).withOptions({
+  history: 'push'
+})
 
 export function NativeArray() {
   const [state, setState] = useQueryState('test', parser)

packages/nuqs/src/useQueryStates.ts

@@ -153,10 +153,15 @@ export function useQueryStates<KeyMap extends UseQueryStatesKeysMap>(
       setInternalState(state)
     }
     queryRef.current = Object.fromEntries(
-      Object.values(resolvedUrlKeys).map(urlKey => [
-        urlKey,
-        initialSearchParams?.get(urlKey) ?? null
-      ])
+      Object.entries(resolvedUrlKeys).map(([key, urlKey]) => {
+        const parser = keyMap[key]
+        return [
+          urlKey,
+          parser?.type === 'multi'
+            ? initialSearchParams?.getAll(urlKey)
+            : (initialSearchParams?.get(urlKey) ?? null)
+        ]
+      })
     )
   }
 
@@ -182,7 +187,7 @@ export function useQueryStates<KeyMap extends UseQueryStatesKeysMap>(
     }
   }, [
     Object.values(resolvedUrlKeys)
-      .map(key => `${key}=${initialSearchParams?.get(key)}`)
+      .map(key => `${key}=${initialSearchParams?.getAll(key)}`)
       .join('&'),
     JSON.stringify(queuedQueries)
   ])