Challenges with Implementing Derived/Computed State in React Native Using Async Persistence with Legend State

[DKertson16]

I'm trying to implement a derived/computed state in a React component that involves asynchronous data persistence, and I'm struggling to find relevant examples or documentation. My application uses a Supabase backend to manage a 'food' table, from which I want to fetch rows and then group them by similarity into an array.

Here’s how I’ve set up my Legend State and Observable configurations:

configureSyncedSupabase({ generateId })

configureObservableSync({
  persist: {
    plugin: ObservablePersistAsyncStorage,
    asyncStorage: { AsyncStorage },
  },
})

export const food$ = observable(
  syncedSupabase({
    supabase,
    collection: 'food',
    persist: { name: 'food' },
  }),
)

Transitioning from a TanStack Query setup, where a query function fetched the data and computed the array directly, I attempted to create a similar computed observable with Legend State:

export const foodNamesByGroup$ = observable(async () => {
  const status$ = syncState(food$)
  await when(status$.isLoaded)
  const data = food$.get()

  // Placeholder for computation logic
  // compute new results object
  return grouped
})

In the component:

const Index = observer(function Index() {
  const data = foodNamesByGroup$.get()
  return (
     <OtherComponent data={data} />
  )
})

I’ve experimented with await when(food$) and useEffect with useState, but these approaches lead to issues like undefined states, unfulfilled promises, or infinite re-renders.

Questions:

1. Is there a recommended pattern for managing asynchronous derived states in Legend State similar to what I could do with TanStack Query?

2. How can I ensure that the computed states update properly when the underlying data changes, considering the asynchronous nature of AsyncStorage?

Any insights or examples would be greatly appreciated, especially from those familiar with Legend State and asynchronous data handling in React.

[jmeistrich]

I think you don't want the computed to be async. That will end up waiting a tick every time food$ changes (await always waits even if the Promise is resolved).

The food$ observable should sync itself so foodNamesByGroup$ shouldn't need to care about its loaded state. I think if you just simplify it to just use food$ with a fallback if it's undefined, it should work well. Then it will use [] until it's loaded and then the correct data once it comes in.

Also a little note, isLoaded is for the remote loaded state, so that would make the computed basically ignore the persistence.

export const foodNamesByGroup$ = observable(() => {
  const data = food$.get() || []

  // Placeholder for computation logic
  // compute new results object
  return grouped
})

Does it work better that way? If not can you share more of your code so I can see what's going on?

[DKertson16]

So here's what I eventually got working before your answer (using async observable).

export const foodNamesByGroup$ = observable(async () => {
  const data = await when(food$.get())
  const grouped: Record<FoodGroup, FoodItem[]> = {
    DAIRY: [],
    FRUIT: [],
    GRAIN: [],
    PROTEIN: [],
    NUTS: [],
    VEGETABLE: [],
    OTHER: [], // Keep the initialization here for now
  }
  for (const item of Object.values(data)) {
    const { id, food_group, name } = item
    grouped[food_group as FoodGroup].push({ id, name })
  }
  // Post-processing: Combine everything except the listed groups into 'OTHER'
  const preserveGroups: FoodGroup[] = ['FRUIT', 'VEGETABLE', 'GRAIN', 'PROTEIN']
  for (const group of Object.keys(grouped) as FoodGroup[]) {
    if (!preserveGroups.includes(group) && group !== 'OTHER') {
      grouped['OTHER'] = [...grouped['OTHER'], ...grouped[group]]
      delete grouped[group]
    }
  }

  // Sorting based on names
  for (const group of Object.keys(grouped) as FoodGroup[]) {
    grouped[group].sort((a, b) => a.name.localeCompare(b.name))
  }
  return grouped
})

const Index = observer(function Index() {
  const data = foodNamesByGroup$.get()
  //rest of frontend code to show display data with loading states, etc
}

I went ahead and switched it out for your way and it does indeed work. Can't tell if it works "better" as the data its handling isn't very large so there isn't any noticeable performance improvement.

My only question would be that in some cases I need to check the session to get something like the user id:

const { data, error: sessionError } = await supabase.auth.getSession()
if (sessionError) throw new Error('could not get session')
const user_id = data.session?.user.id
if (!user_id) {
  throw new Error('User is not authenticated')
}

Would I need to move this logic elsewhere? There are many times when I will need to user id when inserting into a Supabase table.

[jmeistrich]

I'd suggest that you just save the user_id somewhere that you can access asynchronously. What we do is store it in an observable like this:

const auth$ = observable({
    user_id: ''
})

Then update the user_id whenever you detect login/logout.