TanStackT
TanStack•3y ago•
1 reply
specific-silver

How to preserve Error UI while a refetch is in progress?

If i place my refetch button in the Error UI, how do i preserve the error UI, since as soon
as my fetch is in progress, the error state is reset to 
null


Also, is there a way to trigger globalLoaderChange only once, when the user first comes on the page, thereafter only the error ui provides the loading state. I tried playing around with failureCount, but was not successful.

The query is in with reference to react-query v4.
const Component=()=>{
const query=useMainResource()

const someotherquery =useSomeOtherResource()

React.useEffect(()=>{
dispatch(globalLoaderChange(query.isInitialLoading))
},[query.isInitialLoading])

return (
    <>
    <Header />
    <Secondaryloader loading={query.isRefetching || someotherquery.isRefetching}>
    <Row>
    <Col>
    <Paper>
    {query.data?<>
    <SomeDataComponent prop={query.data.somekey}/>
    <SomeOtherDataComponent prop={query.data.someotherkey}/>
    </>
    :null}
    {query.error?
    <MyErrorUI refetch={query.refetch} loading={query.loading} />
    }
    </>
<Col>

<Col>
 {someotherquery.data?<>
    <SomeOtherDataComponent prop={someotherquery.data.somekey}/>
    <SomeOtherDataComponent prop={someotherquery.data.someotherkey}/>
    :null}
    {someotherquery.error?
    <SomeOtherErrorUI refetch={someotherquery.refetch} loading={someotherquery.loading} />
    }
</Col>

)
}
Was this page helpful?