反应查询如何处理搜索

Question

我只是在玩 React 查询

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

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

as router param the other with a new search.

我最终得到：

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

这样做对吗？

Answer 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.

最后，我建议首先检查数据可用性，而不是 loading/error:

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，并且您必须优先考虑一个或另一个。

反应查询如何处理搜索

React query how to handle a search

reactjs

react-query