apollo-client: onError and onCompleted callbacks do not work in useQuery hook

Intended outcome: onCompleted or onErorr callbacks should be called on refetch or polling in useQuery hook, according to the documentation https://www.apollographql.com/docs/react/api/react/hooks/

Actual outcome: onCompleted called only once at initial render, onErorr not called

How to reproduce the issue:

  1. Reload the page, notice that there is ‘completed’ word in browser developer console

  2. wait for 10 seconds according to the pollInterval

  3. notice that there is a new network request, but no console output

  4. click ‘Refetch’ button to explicitly call refetch function

  5. set network to offline mode in browser developer tools, wait for 10 seconds or click refetch button and see that no onError callback fired.

import ReactDOM from 'react-dom';

import { ApolloClient, ApolloProvider, gql, InMemoryCache, useQuery } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://48p1r2roz4.sse.codesandbox.io',
  cache: new InMemoryCache()
});

const QUERY = gql`
query GetRates {
  rates(currency: "USD") {
    currency
    rate
  }
}
`

function App() {
  const [count, setCount] = useState(0);

  const { refetch, data } = useQuery(QUERY, {
    fetchPolicy:'network-only',
    pollInterval: 10 * 1000,
    onCompleted: () => {
      setCount(count+1);
      console.log('completed')
    },
    onError: () => {
      setCount(count+1);
      console.log('error')
    },
  })
  
  const clickCallback = useCallback(()=>{
    refetch();
  }, [refetch]);

  return (
    <div className="App">
      Apollo callbacks count  {count}

      <button onClick={clickCallback}>Refetch</button>
      <div>{JSON.stringify(data)}</div>
    </div>
  );
}


ReactDOM.render(
  <React.StrictMode>
   <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  </React.StrictMode>,
  document.getElementById('root')
);

Versions

“dependencies”: { “@apollo/client”: “^3.3.19”, “@testing-library/jest-dom”: “^5.11.4”, “@testing-library/react”: “^11.1.0”, “@testing-library/user-event”: “^12.1.10”, “@types/jest”: “^26.0.15”, “@types/node”: “^12.0.0”, “@types/react”: “^17.0.0”, “@types/react-dom”: “^17.0.0”, “graphql”: “^15.5.0”, “react”: “^17.0.2”, “react-dom”: “^17.0.2”, “react-scripts”: “4.0.3”, “typescript”: “^4.1.2”, “web-vitals”: “^1.0.1” },

About this issue

  • Original URL
  • State: open
  • Created 3 years ago
  • Reactions: 5
  • Comments: 19 (3 by maintainers)

Most upvoted comments

I thought i was the only one with this problem!,

the “onError” callback only shows this {"graphQLErrors":[],"networkError":{},"message":"Failed to fetch"}

and it wont let me know if it’s a networkError or graphQLErrors because both Object and Array are Empty!

Confirming that https://github.com/apollographql/react-apollo/issues/3709#issuecomment-592786578 solved my issue. This should be more clear in the docs. Might open a PR later.

@brainkim @jokerosky I have a runnable reproduction over in https://github.com/apollographql/apollo-client/issues/5531#issuecomment-820637939 showing that onCompleted isn’t being called when the results of a polling query are different. It’s still on v3.3, I haven’t checked v3.4 yet.

for me it didn’t work even when result of query was different (but i’m not sure, have to recheck this). Surprise was in that the code written year ago stopped work, althoug that section was written even before (2 years ago). or maybe I miss something from the documentation.

I thought i was the only one with this problem!,

the “onError” callback only shows this {"graphQLErrors":[],"networkError":{},"message":"Failed to fetch"}

and it wont let me know if it’s a networkError or graphQLErrors because both Object and Array are Empty!

I suppose it is normal behavior, the problem for me is that onError or onCompleted have not called after first rendering.

How is it supposed to be a normal behavior sending you empty arrays and o bjects when in the documentation says it coule throw either of those?

possible duplicate of #5531. That issue doesn’t mention onError though

you need to set notifyOnNetworkStatusChange: true, on your options for useQuery, then the onComplete and onError will get called for each update not just the first.

POC: https://codesandbox.io/s/keen-browser-7n1oem?file=/src/index.tsx

related docs: https://www.apollographql.com/docs/react/data/queries/#inspecting-loading-states relavant code: https://github.com/apollographql/apollo-client/blob/d54cf70456e704c5315723a226b478acec6af125/src/react/hooks/useQuery.ts#L505

Same here.

Polling is not triggering onCompleted anymore. Tested on apollo-client 3.4.1 with React 17

Same here. onError doesn’t fire on error. It keeps sending retrying requests to the server indefinitely.