All apollo query errors throw a network 400 error - react-native

Question

How do I globally handle my query and mutation errors? When I use a malformed graphql query, in a mutation or query, my react-native app always throws the following error.
Unhandled (in react-apollo:Apollo(MyScreen)) Error: Network error:
Response not successful: Received status code 400
Running the same queries on the graphiql endpoint, provide relevant errors however. While the goal is globally handled errors, local query errors also do not work for me. Printing them shows nothing.
//MyComponent.js
class MyComponent extends React.Component {
render () {
/*
outputs
{
error: undefined
loading: true
networkStatus: 1
}
*/
console.log(this.props.data);
//outputs undefined
console.log('error', this.props.error);
//outputs undefined
console.log('errors', this.props.errors);
return (
<Container>
{this.props.myData}
<Button block onPress={this.props.onPress}>
<Text>Button</Text>
</Button>
</Container>
)
}
}
const mapDispatchToProps = (dispatch, {navigation: {navigate}}) => ({
onPress: async rest => {
//do stuff
}
});
export default connect(null, mapDispatchToProps)(MyDataService.getMyDataInjector(MyComponent));
//MyDataService.js
import { graphql } from 'react-apollo';
import getApolloClient from '../../../apolloClient';
import { dataFragment } from './dataFragments';
import gql from 'graphql-tag';
export default MyDataService = {
getMyDataInjector: graphql(gql`
query {
myData {
...dataFragment
}
}
${dataFragment}
`,
{
props: ({ data, errors, error }) => ({
data,
loading: data.loading,
myData: data.myData,
errors,
error,
})
}),
addData: async (data) => {
const res = await apolloClient.mutate({
mutation: gql`
mutation addData($data: String!) {
addData(data: $data) {
...dataFragment
}
}
${dataFragment}
`,
variables: {
data,
}
});
return res.data.addData;
},
};
//apolloClient.js
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { setContext } from 'apollo-link-context';
import { onError } from 'apollo-link-error';
import { InMemoryCache, defaultDataIdFromObject } from 'apollo-cache-inmemory';
let apolloClient;
const initApolloClient = store => {
const httpLink = new HttpLink({uri: 'http://192.168.0.11:3000/graphql'})
// const errorLink = onError(({ response, graphQLErrors, networkError }) => {
// console.log('graphql error in link', graphQLErrors);
// console.log('networkError error in link', networkError);
// console.log('response error in link', response);
// if (graphQLErrors)
// graphQLErrors.map(({ message, locations, path }) =>
// console.log(
// `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
// ),
// );
// if (networkError) console.log(`[Network error]: ${networkError}`);
// });
const authLink = setContext((_, { headers }) => {
const {accessToken: {type, token}} = store.getState().signedInUser;
return {
headers: {
...headers,
authorization: type && token ? type + ' ' + token : null
}
}
});
apolloClient = new ApolloClient({
// using error link throws - Error: Network error: forward is not a function
// link: authLink.concat(errorLink, httpLink),
link: authLink.concat(httpLink),
// doesn't console log
// onError: (e) => { console.log('IN ON ERROR', e.graphQLErrors) },
cache: new InMemoryCache({
dataIdFromObject: o => (o._id ? `${o.__typename}:${o._id}`: null),
}),
// turning these on do nothing
// defaultOptions: {
// query: {
// // fetchPolicy: 'network-only',
// errorPolicy: 'all',
// },
// mutate: {
// errorPolicy: 'all'
// }
// }
});
return apolloClient;
}
export default getApolloClient = () => apolloClient;
export { initApolloClient };

Answer 1

was able to get it working by using apollo-link with onError.
import { ApolloClient } from 'apollo-client';
import { ApolloLink } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';
import { setContext } from 'apollo-link-context';
import { onError } from 'apollo-link-error';
import { InMemoryCache, defaultDataIdFromObject } from 'apollo-cache-inmemory';
let apolloClient;
const initApolloClient = store => {
const httpLink = new HttpLink({uri: 'http://192.168.0.11:3000/graphql'})
const errorLink = onError(({ graphQLErrors, networkError }) => {
if (graphQLErrors) {
graphQLErrors.map(({ message, locations, path }) =>
console.error(
`[GraphQL error]: Message: ${message}, Location: ${JSON.stringify(locations)}, Path: ${path}`,
),
);
}
if (networkError) console.error(`[Network error]: ${networkError}`);
});
const authLink = setContext((_, { headers }) => {
const {accessToken: {type, token}} = store.getState().signedInUser;
return {
headers: {
...headers,
authorization: type && token ? type + ' ' + token : null
}
}
});
const link = ApolloLink.from([
authLink,
errorLink,
httpLink,
]);
apolloClient = new ApolloClient({
link,
cache: new InMemoryCache({
//why? see https://stackoverflow.com/questions/48840223/apollo-duplicates-first-result-to-every-node-in-array-of-edges/49249163#49249163
dataIdFromObject: o => (o._id ? `${o.__typename}:${o._id}`: null),
}),
});
return apolloClient;
}