CODEWITHSUNDEEP
reactjsreduxredux-toolkitrtk-query
nadiTime
nadiTime

Reputation: 173

RTK Query reset

I have a MUI dialog component that triggers a useLazyQuery action on save to fetch data.
Then on success dispatches another action
My problem is, that after success, I want to reset the state of the useLazyQuery hook in the dialog component, because after success/fail the state is "stuck" like this in the component.
I am confused how should I approach this...
Dismount and mount the dialog component works but it removes the fadeout animation and also unsubscribe the query endpoint.
Is there a best practice here that I am missing?
https://redux-toolkit.js.org/rtk-query/api/created-api/hooks

Upvotes: 1

Views: 5876

Answers (2)

nadiTime
nadiTime

Reputation: 173

So I ended up using RTKQuery without hooks. I created a custom hook and inside used initiate and select with useSelector and dispatch, than I can reset someId when isSuccess is true.

dispatch(api.endpoints.getData.initiate(someId));
const {data, isError, isLoading} = useSelector(state => api.endpoints.getData.select(someId)(state))

Upvotes: 1

phry
phry

Reputation: 44354

Hmm, instead of a lazyQuery I'd probably just use a normal query hook with a setState. That way you can just skip it.

const [arg, setArg] = useState(null)
const result = useMyQuery(arg, { skip: arg == null })

And then setArg(null) to "reset" the thing.

Upvotes: 2

Related Questions