使用 ReactQuery 收集数据创建一个简单的项目列表和项目详细信息应用程序
Using ReactQuery gathered data to create a simple Item List and Item Details application
我正在尝试了解 React Query 如何与 GraphQL 一起工作 API 并且目前已经构建了一个小型应用程序来执行此操作。我将解释我目前正在做的事情以及我想要实现的目标。
当前情景：
- 我在 App 组件上对 GraphQL API 执行请求。
- ItemList 组件，它列出了我从 API
中获得的项目
我想达到的目标：
- 不再请求 API，只使用我已经得到的数据
- 向 ItemList 组件添加导航
- 创建一个 ItemDetails 组件，您可以通过单击 ItemList 上的项目导航到该组件，其中包含每个项目的更多详细信息（我已经从第一个请求中获得了这些额外的详细信息）
- 在 ItemDetails 组件上，我有一个 Next 和一个 Previous 按钮来导航到另一个项目。
概念上，我不确定如何实现我想要的结果。
提前致谢
这里唯一 react-query 相关的点是：
No more requests to the API, just use the data I already got
为此，您可以在查询中设置 staleTime: Infinity。它将确保一旦数据被获取，它总是被认为是新鲜的，这意味着没有后台更新。
从那以后，useQuery 会给你一个项目数组。您可以呈现您的列表，当单击一个项目时，您呈现详细信息组件并将该项目传递给它。 Next 和 Previous 父组件上的按钮控制状态，其中包含要显示的当前选定项。这与 ItemList 数据是客户端状态的方法 100% 相同。
或者，您 可以 在详细信息页面上生成一个单独的 useQuery，它使用列表查询 + select 选项来选择正确的列表中的项目，但这种方法的最大优点是一旦陈旧的查询挂载，您将获得后台重新获取 - 正如您在问题中所述，这是您 不 想要的。
我正在尝试了解 React Query 如何与 GraphQL 一起工作 API 并且目前已经构建了一个小型应用程序来执行此操作。我将解释我目前正在做的事情以及我想要实现的目标。
当前情景：
- 我在 App 组件上对 GraphQL API 执行请求。
- ItemList 组件，它列出了我从 API 中获得的项目
我想达到的目标：
- 不再请求 API，只使用我已经得到的数据
- 向 ItemList 组件添加导航
- 创建一个 ItemDetails 组件，您可以通过单击 ItemList 上的项目导航到该组件，其中包含每个项目的更多详细信息（我已经从第一个请求中获得了这些额外的详细信息）
- 在 ItemDetails 组件上，我有一个 Next 和一个 Previous 按钮来导航到另一个项目。
概念上，我不确定如何实现我想要的结果。
提前致谢
这里唯一 react-query 相关的点是：
No more requests to the API, just use the data I already got
为此，您可以在查询中设置 staleTime: Infinity。它将确保一旦数据被获取，它总是被认为是新鲜的，这意味着没有后台更新。
从那以后，useQuery 会给你一个项目数组。您可以呈现您的列表，当单击一个项目时，您呈现详细信息组件并将该项目传递给它。 Next 和 Previous 父组件上的按钮控制状态，其中包含要显示的当前选定项。这与 ItemList 数据是客户端状态的方法 100% 相同。
或者，您 可以 在详细信息页面上生成一个单独的 useQuery，它使用列表查询 + select 选项来选择正确的列表中的项目，但这种方法的最大优点是一旦陈旧的查询挂载，您将获得后台重新获取 - 正如您在问题中所述，这是您 不 想要的。