How to access/pass data field of Store that was initialized Asynchronously

[R2rho]

Follow up to #142 I'm having an issue where I'd like for my store to initialize with data from an asynchronous request, and suspend the application until this data is available. I created this sandbox to demonstrate the error. It could be I'm missing something obvious, or I'm not understanding the suspense/asynchronous behavior.

Please Use Proxy Object Error Example

Two main issues (I think are probably the same issue):

1. For some reason putting my store in its own file and importing it with the asynchronous call fails immediately. Putting it in the component at least gets the component to mount, and then fail. Console shows the 'Please use proxy object' and how the promise from the async call doesn't resolve and stays as a Promise object (although it seems to resolve once I take a snapshot).

2. I have two main components, Requirements1, and Requirements2. My intended goal is to make Requirements1 work by passing only the item it needs down as a prop. This fails with a 'Please use proxy object' error. It seems to be caused by the fact that the store is a Promise object, not a resolved value from the promise.

Requirements 2 works if I pass the entire store as a prop, and then index in to the 'requirements' object. It's responsive and reacts, but I'm passing more data down than I want. It then fails when trying to create a child component using its data as a prop.

Your help is appreciated!

[dai-shi]

Okay, so if you put a promise in a proxy state, it's just a promise. Even if the promise is resolved, what you get is the promise, not the resolved value.

const state = proxy({ promise: Promise.resolve({ name: 'hello' }) })
state.promise // is a promise
state.promise.name // is thus `undefined`

When you use useSnapshot (or snapshot), you get the resolved value (or thrown if it's not ready).

const state = proxy({ promise: Promise.resolve({ name: 'hello' }) })
  const snap = useSnapshot(state)
  snap.promise // is *not* a promise
  snap.promise.name // is 'hello'

[R2rho]

Hmm, so what would be the appropriate way to set the return from the promise as mutable state? If I create a separate variable, say userInput, that will be initialized from the snapshot of the requirements (effectively a copy of requirements), then I get the object rather than the promise. But this doesn't seem to suspend.

let initialState = {
  userInput: null,
  requirements: queryWebSocket("requirements").then((val) => store.userInput = val?.requirements)
};
export let store = proxy(initialState);

Because I would then need to check if userInput was null when rendering the component. This works, but I'm not getting the suspense I'd really like to leverage from valtio.

{store.userInput && <Requirements1 requirements={store.userInput} />}

or manually put in the "suspense" myself with:

{store.userInput ? (<Requirements1 requirements={store.userInput} />) : (<div>loading....</div>)}

The good news, this actually does solve my problem, albeit a bit more manual.

[R2rho]

Although this seemed to work, to solve issue 2) (above) I'm still getting an error when putting the store in its own file and trying to import. Do you know why this is happening?

Updated Codesandbox Example

EDIT: Forgot I had fixed this, it was just a bug in how I was importing the valtio store (importing and default export instead of destructuring). So this was on my end, not a valtio issue!

[dai-shi]

so what would be the appropriate way to set the return from the promise as mutable state?

If you want to use React Suspense, putting a promise in the proxy state is appropriate. You just need to read value from the promise (unless using useSnapshot).

const state = proxy({ promise: fetchData() })

// to read the resolved value,
state.promise.then((data) => {
  ...
})

[R2rho]

Okay, so if you put a promise in a proxy state, it's just a promise. Even if the promise is resolved, what you get is the promise, not the resolved value.

const state = proxy({ promise: Promise.resolve({ name: 'hello' }) })
state.promise // is a promise
state.promise.name // is thus `undefined`

When you use useSnapshot (or snapshot), you get the resolved value (or thrown if it's not ready).

const state = proxy({ promise: Promise.resolve({ name: 'hello' }) })
  const snap = useSnapshot(state)
  snap.promise // is *not* a promise
  snap.promise.name // is 'hello'

Now that I've spent a bit more time with Valtio, this makes much more sense to me now. I was able to resolve my issue and get suspense working again.