question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. ItĀ collects links to all the places you might be looking at while hunting down a tough bug.

And, if youā€™re still stuck at the end, weā€™re happy to hop on a call to see how we can help out.

Query with errorPolicy "all" cannot use onError, onCompleted effectively

See original GitHub issue

Hi šŸ‘‹ ! A team of us are working on transitioning a production application to Apollo with use of hooks in React. We have the following use case:

  • use a query with errorPolicy set to ā€œallā€ (so that error and data may both have value)
  • use onError, onCompleted attributes to perform some side effects

Intended outcome:

Iā€™d expect to be able to perform ā€œcompletedā€ and ā€œerroredā€ functionality if the errorPolicy=ā€œallā€, since this would be a congruent outcome of the data, error, loading pattern commonly used when both data and error may be populated with this error policy.

Actual outcome:

If there is a partial error from one of the fields, only onError called (since Iā€™ve defined both). I think issue can be found in this either/or method (here in react-apollo, or here in apollographql/apollo-client).

I wonder: could onError receive data as a 2nd ordinal argument in the event that there is both an error and data?

How to reproduce the issue:

Iā€™ve reproduced here: https://codesandbox.io/s/inspiring-surf-pcrgj?file=/src/App.js

Hereā€™s an inline example:

import {useQuery} from '@apollo/react-hooks`
import gql from 'graphql-tag'

const someSideEffect = (error, data) => {
if (!data) console.error(error)
 else if (data && error) {
  console.info(error)
  alert(`some of the data is shiny: ${data.isShiny}`)
 } else {
   console.log('no error šŸ™Œ')
 }
}

const QUERY = gql `
query get_stuff {
 stuff {
  isShiny
  someFinnickyFieldThatErrorsOutSometimes
 }
}
`

function Stuff() {
 const {data, loading} = useQuery(QUERY, {
  errorPolicy: 'all',
  onCompleted: (data) => someSideEffect(null, data),
  onError: (error) => someSideEffect(error),
 });

 if (loading) return 'loading...'
 if (!loading && data) return <div>{JSON.stringify(data, null, 4)}</div>;
}

Solution Proposal

Possible solution 1: provide data as a 2nd ordinal argument to onError

const {data, loading} = useQuery(QUERY, {
 errorPolicy: 'all',
 onCompleted: (data) => someSideEffect(null, data),
 // Perhaps It'd be SO nice if onError had access to data ā¤, but it does not šŸ’”
 onError: (error, data) => someSideEffect(error, data),
});

One might also argue additionally (or alternatively) that error in the onCompleted callback should be made available. Hence, in the case of errorPolicy=ā€œallā€ this dichotomy between ā€œcompletedā€ and ā€œerroredā€ is somewhat difficult to discern. Hence:

Possible Solution 2: Perhaps if developer does not define onError and errorPolicy is ā€œallā€, then onCompleted is always called with both data and error?

Possible Solution 3: Alternatively, and more generally it should just always call ā€œonCompletedā€ with access to both error and data when both are defined (errorPolicy=ā€œallā€). And we remove the notion of onError entirely?**

In summary, there are many solutions to this perceived bug, and the API seems unclear for this use case. These three solution proposals above are ranked in order from least to most invasive.

Version

@apollo/react-components@3.1.5

System:
OS: macOS Mojave 10.14.6
Binaries:
Node: 12.16.1 - ~/.volta/tools/image/node/12.16.1/6.13.4/bin/node
npm: 6.13.4 - ~/.volta/tools/image/node/12.16.1/6.13.4/bin/npm
Browsers:
Chrome: 83.0.4103.116
Edge: 83.0.478.61
Firefox: 76.0
Safari: 13.0.4

(FYI originally reported here, moving) https://github.com/apollographql/react-apollo/issues/403

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:11
  • Comments:5

github_iconTop GitHub Comments

4reactions
zorjicommented, Jul 30, 2021

I am testing with apollo/client@3.4.1, I got a completely different result. When errorPolicy=all, it does not trigger onError on partial failure.

I canā€™t find the official explanation on the website, when errorPolicy=all and when there is a partial error, should it trigger onError?

I found this PR https://github.com/apollographql/apollo-client/issues/6492 and it looks like it was not expected on trigger onError.

Relevant issue for me in vue-apollo https://github.com/vuejs/vue-apollo/pull/1225/files#r679619257

2reactions
llamadeuscommented, Nov 20, 2020

Iā€™m currently having some troubles when setting errorPolicy: 'all' because the onCompleted callback is being called even if data is null. This will result in null being passed for the data argument but the function signature does not reflect this circumstance.

Iā€™m using "@apollo/client": "^3.2.7".

Read more comments on GitHub >

github_iconTop Results From Across the Web

Handling operation errors - Apollo GraphQL Docs
These are errors related to the server-side execution of a GraphQL operation. They include: Syntax errors (e.g., a query was malformed); Validation errors...
Read more >
onCompleted of useMutation get executed even on error
When I'm using the useMutation hook and getting an error on the response the onCompleted method gets triggered. Is that normal behavior?
Read more >
open-source-community/apollographql-react-apollo
This change aligns all parts of the React Apollo query cycle so that data is ... errors can be handled properly when using...
Read more >
React Query Error Handling | TkDodo's blog
React Query needs a rejected Promise in order to handle errors ... if you have to do this in every component that wants...
Read more >
https://raw.githubusercontent.com/apollostack/reac...
This change aligns all parts of the React Apollo query cycle so that `data` ... errors can be handled properly when using the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found