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

Posted 2023-03-08

【中文标题】用反应钩子重试失败的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 只是一个普通函数。

是的，你是对的。不知道在发表评论之前那天我喝了什么。