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,
    });

使用方法：

{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>
            )}

- Sole

---

类似的问题已经在 https://stackoverflow.com/questions/62587993/how-to-render-usequery-both-on-first-render-and-onclick-reactjs-graphql 得到了解答。 - Ram Rana

Answer 1

使用您的设置，如果您获取数据，转到另一个视图并返回（至少5秒钟后），它将重新获取 - 如果您在5秒钟之前导航并返回 - 则不应该重新获取。

如果您希望在考虑数据不会随时间变得陈旧（或者不那么快）时防止重新获取，请将staleTime设置为超过5秒钟（最多Infinity）。

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

- Emzaw

---

所以我想在组件挂载时调用获取数据并刷新组件？ - Sole

在 react-query 中，默认情况下，数据在组件挂载后重新获取（也就是说，在获取后立即变为“陈旧”）。如果要更改这种行为，并告诉 react-query 您的数据不会那么快变得陈旧（这样它就不会在每次组件渲染/视图更改时重新获取），您应该定义 staleTime。 - Emzaw

如果我指定了staletime，应该设置到哪个数字？ - Sole

实际上这取决于你的数据 - 如果你不希望它在用户会话期间发生变化，甚至可以选择 Infinity（然后你将不得不手动改变/重新获取数据）。否则，将其设置为能够防止过度获取数据的量（再次强调，这取决于数据 - 可能是1分钟也可能是15分钟）。 - Emzaw

虽然我认为这与React-Router有关，而不是React-Query。 - Sole

当我导航到视图时，请求正在进行，但是视图没有刷新。 - Sole