Error within Apollo Client is not catched and creates an infinite loop

[ChiefORZ]

When a error within the apollo-client or the react-apollo-hooks library occurs it does not get returned as an error. React Suspend waits for the Promise, and tries to render it in an infinite loop.

https://codesandbox.io/s/zx2n727o33

even though a Network Error from apollo-client is written to the console every 50ms, the error does not get forwarded as an response to useQuery, nor does it get catched by componentDidCatch

[atoy40]

True, it loops over and over and let the "suspense" component in place instead of recalling the "query" component with "errors" populated.

[trojanowski]

I've got an idea how to fix it, and I'll try to implement it in the next few days. I'm going to add a helper class responsible for managing queries and store instances of it in a WeakMap, outside of React context (with Apollo client instances as keys).

[danwetherald]

Same here, completely ignoring apollo-link-retry.

[trojanowski]

It's fixed in version 0.2.0. Right now error is returned as a part of the useQuery result, but I'm thinking about rethrowing them and using error boundaries instead. What do you think? Could you comment in #28 ?

[atoy40]

I've just tested this 0.2 release, the infintite loop is gone, but I don't get the error with useQuery. I just have data and errors keys "undefined", while on-the-wire, I can see (partial) data and errors inside the server response. Any ideas ?

Anthony.

[atoy40]

@trojanowski It seems the reason of my previous message is due to typescript types. ApolloQueryResult has a key "errors" (an array of gql errors), but the object returned by useQuery contains only an "error" key.

[trojanowski]

@atoy40 Could you provide more details (maybe better in the #29 issue )? I I guess you use the suspend: false option (because there is a test case for errors with suspense:

react-apollo-hooks/src/__tests__/useQuery-test.js

Line 308 in e1a9b6f

it('should forward apollo errors', async () => {

). Do you have 200 response from server?

It seems the reason of my previous message is due to typescript types. ApolloQueryResult has a key "errors" (an array of gql errors), but the object returned by useQuery contains only an "error" key.

I going to rewrite this library to typescript in the future, so it should lower the chance of similar errors. Anyway I just forward the response from apollo client (

react-apollo-hooks/src/index.js

Line 70 in e1a9b6f

return { ...helpers, ...currentResult };

and

react-apollo-hooks/src/index.js

Line 73 in e1a9b6f

return { ...helpers, ...result };

).

[atoy40]

@trojanowski yes I get a 200 response, with the "errors" key defined. But if i do :

const result = useQuery<MyQuery>(QUERY);

result contain only an "error" key, but not an "errors" key.