用反应钩子重试失败的graphql查询?

Posted

技术标签:

【中文标题】用反应钩子重试失败的graphql查询?【英文标题】:Retrying failed graphql query with react hooks? 【发布时间】:2020-04-27 13:27:31 【问题描述】:

我有以下示例组件,我希望当出现随机故障时,我可以单击按钮手动重试查询(通过一些用户交互)。这可能是偶然的吗?我还想如果结果查询成功,那么页面会填充数据(即重新呈现排序)。

export default () => 
  let  loading, error, data  = useQuery(myGqlQuery)

  if (loading) 
    return <LoadingComponent />
  

  const reassign = () => 
    // I want this function to somehow retry the query to see if error has subsided
  

  if (error) 
    return <button onClick=reassign>Retry Query</button>
  

...

【问题讨论】:

【参考方案1】:

refetch() 用作const ..., refetch = useQuery(QUERY)

参见文档:https://www.apollographql.com/docs/react/data/queries/

【讨论】:

【参考方案2】:

你可以使用refetch:

export default () => 
  const  loading, error, data, refetch  = useQuery(myGqlQuery)

  if (loading) 
    return <LoadingComponent />
  

  const reassign = () => 
    refetch()
  

  if (error) 
    return <button onClick=reassign>Retry Query</button>
  
  
  return (
    <div>
      // render your data here
    </div>
  )

【讨论】:

【参考方案3】:

您可以使用useLazyQuery 代替useQuery

https://www.apollographql.com/docs/react/data/queries/#executing-queries-manually

通过这种方式,您还必须在 useEffect 挂钩内的第一次渲染时手动调用,但这很容易。

export default () => 
  let [fnToCallQuery,  loading, error, data ] = useLazyQuery(myGqlQuery)

  React.useEffect(() => fnToCallQuery(), []);

  if (loading) 
    return <LoadingComponent />
  

  if (error) 
    return <button onClick=_ => fnToCallQuery()>Retry Query</button>
  

  // return your jsx with fetched data

编码愉快:)

【讨论】:

这将抛出错误消息React Hook "React.useEffect" is called conditionally,因为您正在 React.useEffect() 块中运行 fnToCallQuery() 函数 @lomse 确定吗?从 useEffect() 启动查询和突变是很常见的。也许你把它与在 useEffect() 中调用另一个 hook 混淆了? fnToCallQuery 只是一个普通函数。 是的,你是对的。不知道在发表评论之前那天我喝了什么。

以上是关于用反应钩子重试失败的graphql查询?的主要内容,如果未能解决你的问题,请参考以下文章

Apollo 客户端使用 GET 请求的查询反应钩子

重试失败的 sqlalchemy 查询

H2 查询失败,“节点没有数据类型:org.hibernate.hql.internal.ast.tree.MethodNode”

即使在 HQL 查询中使用 Join Fetch,休眠延迟初始化异常

hibernate怎么用查询

hibernate用HQL查询集合属性