How to actually use asynchronous storage

[rylofu]

I have this code in my project

DesktopNav.tsx

type DesktopNavProps = {
    isAuthenticated: boolean;
    authModal: JSX.Element,
    isAuthModalOpen: Accessor<boolean>
    setIsAuthModalOpen: Setter<boolean>
}


export function DesktopNav(props: DesktopNavProps) {
    const toggleOpen = (e: Event) => {
        if (props.isAuthenticated) {
            return true
        }
        e.preventDefault()
        e.stopPropagation()
        props.setIsAuthModalOpen(!props.isAuthModalOpen())
        return false
    }

    return <div class={styles["header-nav-wrapper"]}>
        <Show when={props.isAuthModalOpen()}>
            {props.authModal}
        </Show>
        <nav class={styles["header-nav"]}>
            <A class={styles["header-nav__elem"]} href="/products">каталог</A>
            <A class={styles["header-nav__elem"]} href="#!">избранное</A>
            <A class={styles["header-nav__elem"]} href="/cart">корзина</A>
            <A class={styles["header-nav__elem"]} href="#!"
               onclick={(e) => {
                   return toggleOpen(e)
               }}>
                {props.isAuthenticated? "login" : "my account"}
            </A>
        </nav>
    </div>;
}

AuthStore.ts

const [state, setState, init] = makePersisted(createStore<AuthState>({
    accessToken: undefined,
    exp: undefined,
    get isTokenSetted() {
        return Boolean(this.accessToken)
    },
    get isTimeToRefresh() {
        return Boolean(this.accessToken && ((Date.now() - this.exp * 1000) > REFRESH_GAP_MS))
    }
}), {name: "authStorage", storage: localForage})

export const AuthStore: IAuthStore = [state, {
    setAccessToken(accessToken) {
        const tokenData = parseJwt<AccessTokenData>(accessToken)
        setState(produce(currentState => {
            currentState.accessToken = accessToken
            currentState.exp = tokenData.exp
        }))
    }
}]

but every time I get undefined from the storage, even when token is setted, probably because the data is not await yet. along with this, I don't get a reactive update when undefined already replaced with token.
I tried:

• createSignal on state.accessToken and state.isTokenSetted before put it into props
• don't use getter and calculate isTokenSetted directly , like const isTokenSetted = () => Boolean(state.accessToken)
• create resource in AuthStore as in the documentation createResource(() => init)[0]();
• don't use props and import store directly to DesktopNav
  I realize that I must somehow await for the value from the store, but I don't understand how.

[atk]

We don't yet filter out getters, which is causing errors that lead to errors being thrown after loading so the values remain undefined. However, fixing that is going to increase the code size considerably, so it is not considered a use case that should be supported out of the box. To solve your issue, you should add your own serializer/deserializer that handles the data correctly. You can even fine-tune it to your use-case instead of relying on a bigger generic solution.

[atk]

I just checked, setting on a getter does not throw. Can you try to use a serializer/deserializer with console.log in between to see what is happening?

makePersisted(
  createStore(...), 
  {
    name: "authStorage",
    storage: localForage,
    serialize: (data) => { console.log(data); return JSON.stringify(data); },
    deserialize: (data) => { console.log(data); return JSON.parse(data); },
 });

[rylofu]

serialize and deserialize work correctly. On serialize have Proxy(Object) with correct data, on deserialize have string with correct data also.
Moreover if i write this on login button:

const [state, ] = AuthStore
const toggleOpen = (e: Event) => {
    console.log(state)
    ...
}

then i get correct state in console. But outside this function store returns initial values

[atk]

Thanks for the feedback. I'll need to test this myself.

[atk]

Just for the test, which solid version are you using? Are you using solid start or the classic version?

[rylofu]

Thanks for answer! using classic solidjs 1.8.20 , localforage 1.10.0, solid-primitives/storage 4.2.1