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]

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

[atk]

After a lot of trial and error, I found the issue: the setting action after the initial update from the asynchronous storage is not run within the context of the reactive owner, so subscribed entities do not get notified. I will push a fix soon.

[atk]

This doesn't seem to be the issue. Even stranger, if I add the current persisted.ts source to a playground, it works flawlessly.

[atk]

I have debugged a bit further and found that since DEV is not set in the version of solid-primitives that the playground includes, we do not get to see the TypeError: Cannot set property d of #<Object> which has only a getter. If I define a setter, the behavior is the same; there is some very strange behavior of reconcile going on here. Strangely enough, it does not occur if we add persisted.ts locally to the playground.