0

我只是在玩反应查询

我正在构建一个简单的 github 克隆

我必须为当前用户使用两次 useQuery 一次

作为路由器参数，另一个具有新的搜索。

我最终得到：

const history = useHistory();
  const currentUser: string = useRouterPathname();
  const [user, setUser] = useState(currentUser);
  const handleFormSubmit = (data: SearchFormInputs) => {
    history.push(`/${data.search}`);
    setUser(data.search);
  };
  const { isLoading, error, data } = useGetUserData(user);
  if (isLoading) return <p>Loading...</p>;

  if (error) return <p>An error has occurred: " + {error}</p>;
  console.log(user, data);

这是正确的方法吗？

4

1 回答 1

0

重要的部分可能是在中useGetUserData，您将user 放入react-query 的 queryKey 中，例如：

const useGetUserData = (user) => useQuery(['users', user], () => fetchUserData(user))

这样当用户更改并且用户未在他们之间共享缓存条目时，您始终会重新获取数据。

与 react-query 无关的东西：react-router 的好处是您也可以将其用作状态管理器 - 它们的钩子还订阅您的更改，因此没有真正需要使用本地状态复制它：

const history = useHistory();
const currentUser: string = useRouterPathname();
const handleFormSubmit = (data: SearchFormInputs) => {
  history.push(`/${data.search}`);
};
const { isLoading, error, data } = useGetUserData(currentUser);

一旦您推送到历史记录，所有订阅者（通过useParams或useLocation）也将重新渲染，从而为您提供一个新的currentUser.

最后，我建议首先检查数据可用性而不是加载/错误：

const { error, data } = useGetUserData(user);
if (data) return renderTheData
if (error) return <p>An error has occurred: " + {error}</p>;
return <p>Loading...</p>

这显然取决于您的用例，但通常，如果发生后台重新获取并且出错，我们仍然data可以向用户显示（尽管是陈旧的数据）。如果您在屏幕上看到数据，这几乎是出乎意料的，重新关注您的浏览器选项卡（react-query 将尝试在后台更新数据，然后默认情况下），然后数据消失并显示错误。在某些情况下它可能是相关的，但大多数人并不知道您可以同时拥有，data 并且 error您必须优先考虑其中一个。

于 2021-01-07T21:23:38.170 回答