Option to discard existing data for newly mounted components

[Jokero]

I work on stock chart widgets where I use two kinds of requests:

• request for initial data (for example, to get 500 latest points)
• periodical requests for new point/points

To fetch data and display charts I use 3 useQuery instances:

• query for initial data // initialQuery
• query for periodical updates (with refetchInterval option) // updatesQuery
• dummy query without queryFn to store full stock data initialized by initialQuery data and appended by periodical updates from updatesQuery // fullQuery (btw, latest documentation says queryFn is required (if no default query function has been defined), but it seems adding enabled: false also makes it optional)

When a new component is mounted, fullQuery data is used to display initial graph. When new updates are coming (updatesQuery), I add them to existing graph (without re-rendering the initial points).

If I add more components for the same stock, they don't need data from updatesQuery as fullQuery already contains all points. So for new components I need to discard the existing updates (updatesQuery.data).

Currently I do this by checking time of component first render and updatesQuery.dataUpdatedAt:

export function useStockData(symbol: string, timeframe: string) {
    const firstRenderTimeRef = useRef(Date.now());

    // ...

    // new component needs to receive only new updates
    if (firstRenderTimeRef.current > updatesQuery.dataUpdatedAt) {
        return [initialQuery.data, fullQuery.data, undefined] as const;
    }

    return [initialQuery.data, fullQuery.data, updatesQuery.data] as const;
}

Ideally, it would be nice to have an option like discardDataOnMount that would allow to do the same without manual checks:

const updatesQuery = useQuery({
    queryKey,
    queryFn,
    discardDataOnMount: true, // <--- here
    staleTime: 10_000,
    refetchInterval: 10_000,
    refetchIntervalInBackground: true,
    gcTime: 0,
    enabled: fullQuery.isSuccess
});

It could be useful for scenarios with multiple components displaying data from same source (stock data, chats with new messages, something else) and periodical polling.

What do you think?

[kajweb]

+1