React-query -在组件挂载时重新获取数据

Question

是否有一种方法可以在组件挂载时重新获取数据？目前，使用react-router时，如果我在应用程序中导航，它会获取一次数据，然后如果我导航离开并返回，数据仍然是旧的，而不是新的请求？

我还没有将fetch调用包装在useEffect中。

const fetchInfo = async () => {
        const res = await fetch(`/api/${id}`);
        return res.json();
    };

    const { data, status } = useQuery('tableInfo', fetchInfo, {
        staleTime: 5000,
    });

使用as：

{status === 'error' && (
                <div className="mt-5">Error fetching data!</div>
            )}
            {status === 'loading' && (
                <div className="mt-5">Loading data ...
                   
                </div>
            )}
            {status === 'success' && (
                <div className="mt-5">
                    <p>Result will be here</p>
                </div>
            )}

Answer 1

使用您的设置，如果您获取数据，移动到另一个视图并返回(至少5秒后)，它将重新获取-如果您导航并在这5秒之前返回-它应该不会。

如果您认为数据不会随着时间的推移而变得陈旧(或不会很快)，则将staleTime设置为大于5秒(最高可达Infinity)，从而防止重新获取数据。

如果您想在每次导航到视图时重新获取数据-根本不要设置staleTime