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:
-
Reload the page, notice that there is ‘completed’ word in browser developer console
-
wait for 10 seconds according to the pollInterval
-
notice that there is a new network request, but no console output
-
click ‘Refetch’ button to explicitly call refetch function
-
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)
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.
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
thoughyou need to set
notifyOnNetworkStatusChange: true,
on your options for useQuery, then theonComplete
andonError
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.