TanStackT
TanStack•3y ago
sacred-rose

Slow navigation on Expo app with react-query

I have a screen from my Expo app where I use my own hooks that use react-query's 
useQuery
 and useInfiniteQuery hooks.

Example:

File api.ts

import axios from "axios"

export const myQueryFn = () => axios.get("/endpoint").then((response) => response.data)


File keys.ts

import { QueryKey } from "react-query"

export const createQueryKey = (): QueryKey => ["myQueryKey"]


File module.queries.ts

import { myQueryFn } from "./api.ts"
import { createQueryKey } from "./keys.ts"
import { useQuery } from "react-query"

export const useMyHook = () => {
  return useQuery({
    queryKey: createQueryKey(),
    queryFn: myQueryFn
  })
}


File Screen.tsx

import { useMyHook } from "./module.queries.ts"
import { Flatlist, View } from "react-native"

const Screen = () => {
  const myData = useMyHook()
  // and some others hooks of my own
  
  return(
    <View>
      <Flatlist data={!myData.isFetching ? myData.data : []} />
    </View>
  )
}

export default Screen


To access this screen, I need to press a button first, however, the navigation to this screen is being very slow. In other versions of the application, without react-query, this delay does not occur. Has anyone gone through something similar?
Was this page helpful?