Field Lists

Lists of fields cannot be access by themselves. To mark a field as a list, the parent needs to be accessed with .array('fieldName').

Iterators

export function Users() {
  const [p, q, { isLoading }] = usePq(handler)

  const users = p.listOf('users')

  return (
    <div>
      {isLoading ? (
        <span>loading...</span>
      ) : (
        users.map(({ name }) => <span>{name}</span>)
      )}
    </div>
  )
}

Index Access

export function Users() {
  const [p, q, { isLoading }] = usePq(handler)

  const users = p.listOf('users')

  return <div>{isLoading ? <span>loading...</span> : users[3]?.name}</div>
}

How it works

On the first render, p will capture the values used by the component by returning a single proxy entry of [VirtualProperty]. During the render, most common operations such as map and filter will catch the fields accessed in the nested property. It is very likely that there are ways to break out of the working path by accidentally skipping pieces of code where a property that is not rendered is not captured.