javascript - what is the difference between keepUnusedDataFor and refetchOnMountOrArgsChange? - Stack Overflow

admin管理员组

文章数量:1325236

I am working with RTK query and I have a project that I am working on, where I want to make an API call every 5 seconds (interval), and I do not know the difference between the keepUnusedDataFor and refetchOnMountOrArgsChange property.

Which one should I use to make the API call every 5 seconds.

I am working with RTK query and I have a project that I am working on, where I want to make an API call every 5 seconds (interval), and I do not know the difference between the keepUnusedDataFor and refetchOnMountOrArgsChange property.

Which one should I use to make the API call every 5 seconds.

• javascript
• reactjs
• redux
• redux-thunk
• redux-toolkit

Share Improve this question Follow asked Jul 29, 2022 at 16:06 neilneil 81133 gold badges1414 silver badges2121 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

RTK Query keeps an internal counter for each endpoint+cacheKey bination. It increases the counter for each ponent that wants to read that data, ie, useGetPokemonQuery("pikachu"). When ponents unmount or change the cache key, it decreases the counter.

When a subscription counter goes to 0, RTK Query sets a timer, and by default that timer is 60s. If no ponents have asked to read that data when the timer expires, it will remove the data from the cache.

keepUnusedDataFor changes the timer delay. If you set it to, say, 60 * 60, it will wait for one hour before checking if the data should be removed. If you did 60 * 60 * 24 * 365 * 10, it would wait for 10 years before checking to remove the data (ie, "basically forever").

refetchOnMountOrArgChange`, on the other hand, can be used to force re-fetching more often than usual.

See these explanations in the docs:

• https://redux-toolkit.js/rtk-query/usage/cache-behavior#reducing-subscription-time-with-keepunuseddatafor
• https://redux-toolkit.js/rtk-query/usage/cache-behavior#encouraging-re-fetching-with-refetchonmountorargchange

We can make use of polling like this

let {
        data: list,
    } = useGetStocksQuery({tickerArray}, {pollingInterval: 5000});

If we want to skip the query call if args don't have data

let {
        data: list,
    } = useGetStocksQuery({tickerArray}, {pollingInterval: 5000, skip: !tickerArray.length});

To anybody from the future, Here is what I came up with, I used refetch which is returned by RTK-query hooks.

// stocks ponent


import { useGetStocksQuery } from '../features/stocksList/stocksListApiSlice';
import { useEffect, useRef } from "react";

const Stocks = () => {

    const tickerArray = [
        "AAPL",
        "TSLA",
        "NKE",
        "MSFT",
        "AMZN",
        "GOOGL",
        "META",
        "SNAP",
        "NFLX"
    ];


    const stockTimerId = useRef();


   let {
        data: list,
        refetch
    } = useGetStocksQuery({tickerArray});


    useEffect(() => {

   stockTimerId.current = await setInterval(() => refetch(), 10000);

  }

        return () => clearInterval(stockTimerId.current)
    })


return (
  <>Your JSX goes here</>
)

}

export default Stocks

本文标签： javascriptwhat is the difference between keepUnusedDataFor and refetchOnMountOrArgsChangeStack Overflow