反应查询如何处理搜索答案

【问题标题】：React query how to handle a search反应查询如何处理搜索
【发布时间】：2021-01-06 08:39:38
【问题描述】：

我只是在玩 react 查询

我正在构建一个简单的 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);

这是正确的方法吗？

【问题讨论】：

标签： reactjs react-query

【解决方案1】：

重要的部分可能是在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，您必须优先考虑其中一个。 p>

【讨论】：