为什么 Apollo useQuery 的轮询不调用 onCompleted？

Question

我正在玩代码：https://codesandbox.io/s/restless-framework-uldf4q?file=/src/App.js

import React, { Fragment } from "react";
import { gql } from "apollo-boost";
import { useQuery } from "@apollo/react-hooks";

const GET_DOG_PHOTO = gql`
  query Dog($breed: String!) {
    dog(breed: $breed) {
      id
      displayImage
    }
  }
`;

const breed = "dingo";

const App = () => {
  const [count, setCount] = React.useState(0);
  const { loading, error, data, startPolling, stopPolling } = useQuery(
    GET_DOG_PHOTO,
    {
      variables: { breed },
      onCompleted: () => {
        setCount((count) => count + 1);
      }
    }
  );

  if (loading) {
    return <h2>loading</h2>;
  }
  if (error) {
    return <h2>Whoops</h2>;
  }

  return (
    <div>
      <h1> {count}</h1>
      <Fragment>
        <img
          alt="Cute Doggo"
          src={data.dog.displayImage}
          style={{ height: 500, width: 500 }}
        />
        <button onClick={() =>startPolling(500)}>Start</button>
        <button onClick={stopPolling}>Stop</button>
      </Fragment>
    </div>
  );
};

export default App;

在我的代码中，我在 onCompleted 回调中使用 React.useState 将Count设置为count+1？为什么投票时就停止计数？

那么这里的机制是什么？

Answer 1

我还可以观察到，

onCompleted

回调在您提供的再现器中没有按预期被调用。

在您的 CodeSandbox 中，您使用的是 3 年前已弃用的

useQuery

挂钩版本。您可以迁移到最新的

@apollo/client

软件包，这将解决该问题。

查看此迁移的 CodeSandbox：https://codesandbox.io/s/apollo-on-completed-n9wzge

Answer 2

您还可以使用

notifyOnNetworkStatusChange

选项作为

true

。每次它也会改变加载状态。

调用 api 为

const { loading, error, data, startPolling, stopPolling } = useQuery(
    GET_DOG_PHOTO,
    {
      variables: { breed },
      notifyOnNetworkStatusChange: true,
      onCompleted: () => {
        setCount((count) => count + 1);
      }
    }
  );

Answer 3

从 Apollo 3.8+ 开始，仅当

onCompleted

设置为

notifyOnNetworkStatusChange

时才会调用

true

。 但是，这并不理想，因为无论您设置的

onCompleted

是什么，它每秒都会调用

pollInterval

几次。您最好将

onCompleted

的内容放在

useEffect()

中，并以

data

作为依赖项。

const { loading, error, data, startPolling, stopPolling } = useQuery(
  GET_DOG_PHOTO,
  {
    variables: { breed }
  }
);

useEffect(() => {
  setCount((count) => count + 1);
}, [data]);