Uploaded image for project: 'Realm JavaScript SDK'
  1. Realm JavaScript SDK
  2. RJS-2170

useQuery data cannot be used directly in FlatList

      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

            Assignee:
            andrew.meyer@mongodb.com Andrew Meyer
            Reporter:
            unitosyncbot Unito Sync Bot
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Created:
              Updated:
              Resolved: