Question

我有以下示例组件，希望出现随机故障时，我可以单击一个按钮以手动方式（通过一些用户交互）重试查询。这可能是偶然的吗？我也想如果结果查询成功，则页面将填充数据（即，重新呈现排序）。

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>
  }

...

Answer 1

将refetch()用作const {..., refetch} = useQuery(QUERY)

查看文档：{{3}}

Answer 2

您可以使用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钩子重试失败的graphql查询？

2 个答案: