【问题标题】:GraphQL Automatic refetch on empty responsesGraphQL 自动重新获取空响应
【发布时间】:2020-04-29 13:40:55
【问题描述】:

我想从 TheMovieDB API 中随机化电影。首先我发送一个访问最新条目ID的请求:

const { loading: loadingLatest, error: errorLatest, data: latestData, refetch: refetchLatest } = useQuery(
        LATEST_MOVIE_QUERY
    );

然后我想从 1 到最新 id 的编号之间的随机选择的 ID 中获取数据。使用依赖于第一个查询的变量似乎会破坏应用程序,所以现在我每次安装组件时都使用相同的电影:

const [
        movieState,
        setMovieState
    ] = useState(120);

    const { loading, error, data, refetch } = useQuery(ONE_MOVIE_BY_ID_QUERY, {
        variables : { movieId: movieState },
        skip      : !latestData
    });

我想按一个按钮来获取一个新的随机电影,但问题是 API 中的许多 ID 会导致条目被删除,然后我收到一个错误消息。我想继续重新获取,直到我得到一个好的回应,但我不知道要实现它。现在我的随机化函数看起来像这样:

const randomizeClick = () => {
        let mostRecentID = latestData.latestMovie.id;
        setMovieState(Math.floor(Math.random() * mostRecentID));
    };

如果有人可以帮助我如何实现这一点,我将不胜感激。

【问题讨论】:

  • 假设您正在查询您也构建的服务器,这种事情最好在后端完成。也就是说,您应该在服务器上不断重试对 TMDb 的调用,直到成功。由于服务器和客户端之间的延迟增加,在客户端重试会慢很多。
  • 也就是说,最好的方法是编写一个脚本来查询他们的 API 并捕获所有有效的 ID。然后,您可以将其转储到文件或数据库中,然后从该组 ID 中选择一个随机 ID。创建一个脚本来执行此操作意味着您可以定期重新运行它以确保您的 ID 列表是最新的。

标签: reactjs graphql apollo


【解决方案1】:

我认为您需要的是 Apollo 的“useLazyQuery”功能。你可以在这里找到更多信息:https://www.apollographql.com/docs/react/data/queries/#executing-queries-manually

使用 useLazyQuery,您可以轻松更改变量,这意味着在某个事件(单击或类似事件)之后触发。 useQuery 功能将在组件挂载时加载。

【讨论】:

    猜你喜欢
    • 2020-01-17
    • 2019-07-26
    • 2016-12-18
    • 2020-08-06
    • 2021-05-28
    • 2019-04-27
    • 2020-12-08
    • 1970-01-01
    • 2020-10-31
    相关资源
    最近更新 更多