Redux Toolkit RTK Query remove cache - reactjs

Question

I have an endpoint that generates and return a url for making payment online, it accepts only two arguments amount and currency.
initializeCardDeposit: builder.query({
query: ({ amount, currency }) => ({
url: "/initialize/card/deposit",
method: "POST",
body: {
amount,
currency,
},
}),
transformResponse: ({ data }) => data,
providesTags: ["cardDepositUrl"],
})
I want to get a new url anytime the the query is called with the same amount and currency, instead it returns a cached data.
I have tried dispatching invalidateTags("cardDepositUrl") and it didn't work.

Answer 1

1 -> First of all, you have to provide tagTypes to your service
2 -> You provideTags should have only the values mentioned inside tagTypes
3 -> invalidateTags[], should be called from another endpoint of the same service
Checkout this documentation -> https://redux-toolkit.js.org/rtk-query/usage/automated-refetching
or
Re-fetching on demand with refetch/initiate
In order to achieve complete granular control over re-fetching data, you can use the refetch function returned as a result property from a useQuery or useQuerySubscription hook.
Calling the refetch function will force refetch the associated query.
Alternatively, you can dispatch the initiate thunk action for an endpoint, passing the option forceRefetch: true to the thunk action creator for the same effect.
Force refetch example
import { useDispatch } from 'react-redux'
import { useGetPostsQuery } from './api'
const Component = () => {
const dispatch = useDispatch()
const { data, refetch } = useGetPostsQuery({ count: 5 })
function handleRefetchOne() {
// force re-fetches the data
refetch()
}
function handleRefetchTwo() {
// has the same effect as `refetch` for the associated query
dispatch(
api.endpoints.getPosts.initiate(
{ count: 5 },
{ subscribe: false, forceRefetch: true }
)
)
}
return (
<div>
<button onClick={handleRefetchOne}>Force re-fetch 1</button>
<button onClick={handleRefetchTwo}>Force re-fetch 2</button>
</div>
)
}
reference -> https://redux-toolkit.js.org/rtk-query/usage/cache-behavior#re-fetching-on-demand-with-refetchinitiate

Answer 2

You can use useLazyQuery instead of useQuery in your component and make use of trigger function returned by useLazyQuery hook. Trigger function always initiates a new request, even if cached result is available.
Inside your component
const [trigger,{data}]= useLazyInitializeCardDepositQuery();
When you want to fetch data, initiate request using trigger({amount,currency})
If you want to fetch data on initial render, you can add an useEffect hook
useEffect(()=>{
trigger({amount,currency})
},[])
uselazyquery documentation: https://redux-toolkit.js.org/rtk-query/api/created-api/hooks#uselazyquery