T
TanStack•3y ago
itchy-amethyst

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>

)
}
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>

)
}
1 Reply
vicious-gold
vicious-gold•3y ago
the idea is that as soon as the user acknowledges the error, you'll see the loading state again. This is also how e.g. react error boundaries work

Did you find this page helpful?