useQuery data cannot be used directly in FlatList

[skam22]

How frequently does the bug occur?

Always

Description

this returns an empty FlatList:

const {useQuery} = realmContext;

const App = () => {
  const tasklists = useQuery(Tasklist)
  return (
    <FlatList
      data={tasklists}
      keyExtractor={item => String(item._id}
      renderItem={({item, index}) => <Text>index is: {index}</Text>}
    />
  )

❌ does not work

memoizing the useQuery response also returns an empty FlatList:

const {useQuery} = realmContext;

const App = () => {
  const tasklists = useQuery(Tasklist)
  const sorted = useMemo(() => tasklists.sorted(),[tasklists])
  return (
    <FlatList
      data={sorted}
      keyExtractor={item => String(item._id}
      renderItem={({item, index}) => <Text>index is: {index}</Text>}
    />
  )

❌ does not work

spreading the useQuery response to a new array correctly displays the items in the list:

const {useQuery} = realmContext;

const App = () => {
  const tasklists = useQuery(Tasklist)
  return (
    <FlatList
      data={[...tasklists]}
      keyExtractor={item => String(item._id}
      renderItem={({item, index}) => <Text>index is: {index}</Text>}
    />

✅ this works

mapping through the useQuery response renders correctly as well (but without the benefit of the virtualized list).

const {useQuery} = realmContext;

const App = () => {
  const tasklists = useQuery(Tasklist)
  return (
    <View>
      {tasklists.map((tasklist, index) => <Text key={String(tasklist._id)}>index is: {index}</Text>)}
    </View>

✅ this works

the same source code works fine if pasted into the template starter (react-native.todo.flex) which installs react-native 0.70.5, @realm/react 0.4.1, realm 11.2.0

Stacktrace & log output

No response

Can you reproduce the bug?

Always

Reproduction Steps

No response

Version

realm 11.4.0, @realm/react 0.4.3, react-native 0.71.2

What services are you using?

Atlas Device Sync

Are you using encryption?

Yes

Platform OS and version(s)

IOS and Android

Build environment

realm 11.4.0, @realm/react 0.4.3, react-native 0.71.2

Cocoapods version

No response

[kneth]

I cannot see what the type of item._id is. If it is UUID or ObjectId, it can be that String(item._id) is not producing a unique string. Please try to use item._id.toHexString() instead.

Using the spread operator (data={[...tasklists]}) is likely to give you poor performance as you are copying the Realm objects to JavaScript objects.

[skam22]

._id is a BSON ObjectId

Using .toHexString() makes no difference.

[lufke]

Same problem. The _id is Unique for every item

[skam22]

I think I found the issue, the react-native FlatList component _getItemCount looks like this:

  _getItemCount = (data: ?Array<ItemT>): number => {
    if (Array.isArray(data)) {
      const numColumns = numColumnsOrDefault(this.props.numColumns);
      return numColumns > 1 ? Math.ceil(data.length / numColumns) : data.length;
    } else {
      return 0;
    }
  };

Array.isArray(tasklists) is returning false.

The object returned from useQuery fails Array.isArray(), so _getItemCount is returning 0.

[lufke]

When i see the typo of the useQuery, ir gives me object

[skam22]

That’s correct, and an array is an object..

But Array.isArray(useQueryResponseObject) is false.

The object looks like an array, but it isn’t passing the isArray test. I believe isArray looks for the existence of a .toString() method on the object but I could be wrong there.