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

【问题标题】：Retrying failed graphql query with react hooks?用反应钩子重试失败的graphql查询？
【发布时间】：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>
  }

...

【问题讨论】：

标签： reactjs graphql apollo react-apollo

【解决方案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 只是一个普通函数。
是的，你是对的。不知道在发表评论之前那天我喝了什么。