about react-native

[TomWq]

Are there any examples of use in React-native? For example, how to load more of the React-native FlatList component?

[devpolo]

Hi @wq13718048209 👋

I'll try to share with you my little experience using react-query with a react-native Flatlist

// useQueryTracks.ts

import { useInfiniteQuery } from 'react-query'
import { IQueryTracksParams, ITrack, IQueryTracksResultType } from '../../types'

export const useQueryTracks = (params: IQueryTracksParams = {}): IQueryTracksResultType => {
  const response = useInfiniteQuery<ITrack[]>(['/tracks', params], {
    getNextPageParam: (_, allPages: any) => (allPages || []).flat().length,
  })

  let tracks: ITrack[] | [] = []

  if (!response.isLoading && Array.isArray(response?.data?.pages)) {

    // I concat every pages to transform an array of arrays to a single array of tracks
    tracks = [...new Array().concat(...(response?.data?.pages || []))]
  }

  return { tracks, ...response }
}

// TracksList.tsx

const TracksList = () => {
  const { tracks, isLoading, fetchNextPage } = useQueryTracks()
  
  if(isLoading) return null // whatever you want

  return (
     <FlatList
        data={tracks}
        renderItem={({ item: track }) => <TrackCard track={track} />}
        keyExtractor={(_, index) => index.toString()}
        onEndReached={fetchNextPage}
        onEndReachedThreshold={0.1}
        ListEmptyComponent={EmptyFlatList}
      />
  )

Hope it will help 🙂

[TomWq]

Thank you very much for your help @devpolo