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

Question

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

我没有在 useEffect 中封装我的 fetch 调用。

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

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

用作：

{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