Redux Toolkit RTK Query remove cache

user_8146157 0
Viewed 405

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.

react-redux react-native reactjs
2 Answers
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

user_139372860

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

user_195166530
Related