isLoading is true

[VikaramjitSinghGorraya]

Please don't close the issue before the person posting the issue has replied to your comment.

In the following code when the data has been fetched and I redirect to another page and come back, isLaoding is set to true, which should not be the case as data is being taken from a cache.

import React from 'react'
import { useLocation } from 'react-router'
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 {pathname} = useLocation()
const bestSellers = useQuery(['getProducts', 'sold' , pathname],()=> getProductsList('sold') ,  {refetchOnWindowFocus: false})
const newArrivals = useQuery(['getProducts', 'createdAt', pathname],()=> getProductsList('createdAt') , {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

I have ketp the queryClient in index as follows :
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {QueryClient, QueryClientProvider} from 'react-query'
import { ReactQueryDevtools } from 'react-query/devtools'
import {BrowserRouter} from 'react-router-dom'
import { ChakraProvider, CSSReset } from "@chakra-ui/react"

const queryClient = new QueryClient()
ReactDOM.render(
<React.StrictMode>








</React.StrictMode>,
document.getElementById('root')
);

Also, I am redirecting to the page before the cache time expires

[TkDodo]

Sorry, I didn’t close the issue - I moved it to discussions. It’s here: #2471

and there’s also a pointer in the issue to the discussion. Unless we have a confirmed issue with a reproduction, let’s keep things in discussions please.