isLoading is always true.

[VikaramjitSinghGorraya]

Once the query is run, data should be stored in the cache. But on navigating to another page and coming back causes isLoading to be true, which leads to skeleton being displayed on screen rather than showing data instantaneously, which should not be the case.

Here is the code.

import React from 'react'
import {HStack, VStack, Skeleton, Box,Center, Heading, Text} from '@chakra-ui/react'
import {useQuery} from 'react-query'
import ProductCard from '../layout/ProductCard'
import {getProductsList} from '../helpers/Queries'
import Header from '../layout/Header'

const Home = () => {

const bestSellers = useQuery(['getProducts', 'sold'],()=> getProductsList('sold') ,  {refetchOnMount:false, staleTime:100000000000, refetchOnWindowFocus: false})
const newArrivals = useQuery(['getProducts', 'createdAt'],()=> getProductsList('createdAt') , {refetchOnMount:false, staleTime :100000000000, refetchOnWindowFocus: false})

const displayHeader = () =>{
    return(
        <Header heading = 'Market Place' description = 'Discover More'/>
    )
}

const homePageContent = () =>{
    return(
        <VStack w = '100%' spacing = {5} p = '5'>
            <VStack w = '100%' alignItems = 'flex-start'>
                <Text fontSize = 'xl' fontWeight = '600'>Best Sellers</Text>
                <HStack className = 'productContainerScrollBar' maxW = '98%' mx = 'auto' overflowX = 'scroll' style = {{scrollbarWidth: '0.5px'}}>
                    {bestSellers?.data?.productsRetrieved.map((product, index)=>(
                        <ProductCard key = {index} productId = {product._id} productName = {product.name} productsSold = {product.sold} productsQuantity = {product.quantity} productCategory = {product.category} productDescription = {product.description} />                
                    ))}
                </HStack> 
            </VStack>
            <VStack w = '100%' alignItems = 'flex-start'>
                <Text fontSize = 'xl' fontWeight = '600'>New Arrivals</Text>
                <HStack className = 'productContainerScrollBar' maxW = '98%' mx = 'auto' overflowX = 'scroll' style = {{scrollbarWidth: '0.5px'}}>
                    {newArrivals?.data?.productsRetrieved.map((product, index)=>(
                        <ProductCard key = {index} productId = {product._id} productName = {product.name} productsSold = {product.sold} productsQuantity = {product.quantity} productCategory = {product.category} productDescription = {product.description} />                
                    ))}
                </HStack> 
            </VStack>
        </VStack>
    )
}
return bestSellers.isLoading || newArrivals.isLoading ? (
    <Center minH = '100vh' w = '100%' background = '#1a1c1f' textAlign = 'center'>
    <i className="fa fa-spinner fa-pulse" style={{fontSize:"48px", color: "white"}}/>
    </Center>
) 
:
(
    <VStack spacing = {10}>
        {displayHeader()}
        {homePageContent()}
    </VStack>
)

}

export default Home

[TkDodo]

impossibility to say without a reproduction, please create one. Some ideas:

• you come back after cacheTime, which means the query has already been garbage collected.
• you re-create the QueryClient somewhere in your app and thus throw away the cache.