Is there a way to use jotai synced with NextJs router?

At first let me thank you for your awsome store management, There is a point, storing some data (state) on the query field of the URL is necessary some times, But I don’t like to handle this directly, I think syncing store with the URL will be a good idea. In this situation we will have for example a NextRouterAtom which is connected to the URL and changing query or state will cause changing the other one. What is your idea about that?

[erandow]

Sure I will work on that, Just let me to read the existing packages which are for connecting router to the Redux and other store managements to see how they work exactly, I will inform you soon.

[neckaros]

Well i put together a version that work for get and set. But i know Jotai since yesterday so i took some shortcut and my implementation might be very very bad 😦

I pass the router as an argument to avoid adding a dependency to utils

some shortcuts: I assume value is string but could be a string array. Need to check the type and act accordingly (in get and set) => strongly types to either String or String[] Not sure why my value was not initialized without route change so i added a callback() in the const subscribe That’s what delayInit is for! removed the option and set it to true has Router is delayed

import { PrimitiveAtom } from "jotai"
import { atomWithStorage } from "jotai/utils"
import type { UrlObject } from 'url';

type Unsubscribe = () => void
type AtomWithRouterQueryValue = string | string[];
type SyncStorage = {
    getItem: (key: string) => AtomWithRouterQueryValue
    setItem: (key: string, newValue: AtomWithRouterQueryValue) => void
    delayInit?: boolean
    subscribe?: (key: string, callback: (value: AtomWithRouterQueryValue) => void) => Unsubscribe
  }
type Url = UrlObject | string;
interface TransitionOptions {
  shallow?: boolean;
  locale?: string | false;
  scroll?: boolean;
}

interface NextJSRouter {
  events: {
    on(type: 'routeChangeComplete', handler: (...evts: any[]) => void): void
  },
  pathname: string,
  query: {[key: string]: string | string[]}
  push:(url: Url, as?: Url, options?: TransitionOptions) => void
}
export function atomWithRouterQuery(
    key: string,
    initialValue: AtomWithRouterQueryValue,
    router: NextJSRouter,
    options?: {
      shallow?: boolean, //see NextJS router documentation: https://nextjs.org/docs/routing/shallow-routing
      subscribe?: (callback: () => void) => () => void,
    }
  ): PrimitiveAtom<AtomWithRouterQueryValue> {
    const subscribe =
      options?.subscribe ||
      ((callback) => {
        router.events.on('routeChangeComplete', callback)
        return () => {
          window.removeEventListener('routeChangeComplete', callback)
        }
      })
    const routerStorage: SyncStorage = {
      getItem: (key) => {
        const storedValue = router.query[key];
        if (storedValue === null) {
          throw new Error('no value stored')
        }
        return storedValue
      },
      setItem: (key, newValue) => {
        router.push({pathname: router.pathname, query: {...router.query, [key]: newValue}}, undefined, {shallow: options?.shallow})
      },
      delayInit: true,
      subscribe: (key, setValue) => {
        const callback = () => {
            const storedValue = router.query[key];
          if (storedValue !== null) {
            setValue(storedValue)
          } else {
            setValue(initialValue)
          }
        }
        return subscribe(callback)
      },
    }
    return atomWithStorage(key, initialValue, routerStorage)
  }