Getting NetworkError when setup apollo-client headers - react-native

Question

I'm setting up token authentication in apollo-client with react-native, but my app shows NetworkError. It works fine if I remove all authentication settings.
Error screenshot
This is for a local demo app with react-navigation, apollo-client, formik and yup.
App.js
const httpLink = new createHttpLink({
uri: 'http://192.168.0.2/api/graphql'
});
const authLink = setContext((_, { headers }) => {
const authToken = localStorage.getItem('authToken');
return {
headers: {
...headers,
authorization: authToken ? `JWT ${authToken}` : '',
}
}
});
const APIClient = new ApolloClient({
link: authLink.concat(httpLink),
cache: new InMemoryCache()
});
class App extends Component {
render(){
return (
<ApolloProvider client={APIClient}>
<SafeAreaView style={styles.container}>
<AppContainer />
</SafeAreaView>
</ApolloProvider>
);
}
};
SignInScreen.js
const TOKENAUTH_MUTATION = gql`
mutation SignIn($username: String!, $password: String!){
tokenAuth(username: $username, password: $password){
token
}
}
`;
class SignInForm extends Component{
constructor(props){
super(props);
}
render(){
return(
<View style={styles.container}>
<Text style={styles.label}>Username:</Text>
<TextInput
autoCapitalize='none'
autoFocus={true}
onBlur={this.props.handleBlur('username')}
onChangeText={this.props.handleChange('username')}
style={styles.textInput}
value={this.props.values.username}
/>
<Text style={styles.helpTextInput}>{this.props.errors.username}</Text>
<Text style={styles.label}>Password:</Text>
<TextInput
onBlur={this.props.handleBlur('password')}
onChangeText={this.props.handleChange('password')}
secureTextEntry={true}
style={styles.textInput}
value={this.props.values.password}
/>
<Text style={styles.helpTextInput}>{this.props.errors.password}</Text>
{this.props.isSubmitting ? (
<ActivityIndicator />
) : (
<Button title="Sign In" onPress={this.props.handleSubmit} />
)}
</View>
);
}
}
class SignInScreen extends Component{
static navigationOptions = {
title: "Sign In"
};
_submit(values, actions, mutateFunc){
mutateFunc({
variables: values
});
}
async _onSuccess(dataResult){
await AsyncStorage.setItem('authToken', dataResult.tokenAuth.token);
this.props.navigation.navigate('Questions');
}
_onError(error){
alert("ERROR: " + JSON.stringify(error));
}
render(){
const formValidationSchema = yup.object().shape({
username: yup.string().required().label("Username"),
password: yup.string().required().label("Password")
});
return(
<Mutation
mutation={TOKENAUTH_MUTATION}
onCompleted={dataResult => this._onSuccess(dataResult)}
onError={error => this._onError(error)}>
{(signInMutationFunc, {loading, error, data}) => {
return (
<Formik
initialValues={{
username: '',
password: ''
}}
onSubmit={(values, actions) => this._submit(values, actions, signInMutationFunc)}
validationSchema={formValidationSchema}>
{formProps => {
return(<SignInForm {...formProps} />);
}}
</Formik>
);
}}
</Mutation>
);
}
}
I expected the token was stored and used in header every request (like Apollo docs says).
If I use a basic ApolloClient it works but doesn't use the header
const APIClient = new ApolloClient({
uri: 'http://192.168.0.2/api/graphql'
});
I'm getting same error in Android and IOS devices :'(

Answer 1

Ok
In my example I was working with Apollo Boost. When I use Apollo Client it works.