I am creating a React Native application and am using basic email/password auth supplied by Graphcool. I trigger the mutation when pressing the 'Log in' button. On the first press of the button the code within the then callback never is executed; On the second press of the button the then callback is executed twice immediately and I am sent to my 'app' screen.
Could there be something wrong with my configuration? Am I doing something incorrectly? Any help or guidance would be greatly appreciated! Thanks!
I attempted to reduce code to only which is applicable for this issue.
Code:
export type ILoginFormProps = LoginFormComponentProps & QueryProps & LoginFormApolloProps;
interface LoginFormComponentProps {
err: object,
saveUser(id: string, email: string, token: string);
loginFailed(err: object);
}
interface LoginFormApolloProps {
client: ApolloClient,
signInUser(email: string, password: string): Promise<any>;
}
export interface ILoginFormState {
email: string,
password: string,
isRegister: boolean;
loading: boolean;
}
class LoginForm extends Component<ILoginFormProps, ILoginFormState> {
constructor(props) {
super(props);
this.state = {
email: '',
password: '',
isRegister: false,
loading: false
}
}
onLoginSuccess({ data }): void {
console.log(data);
const { token } = data.signinUser;
AsyncStorage.setItem('token', token).then(() => client.resetStore());
Actions.app();
}
onLogin() {
this.setState({ loading: true });
this.props.signInUser(
this.state.email,
this.state.password
).then(({ data }) => {
console.log(data);
const { token } = data.signinUser;
AsyncStorage.setItem('token', token).then(() => client.resetStore());
Actions.app();
})
.catch((err) => {
this.props.loginFailed(err);
});
}
render() {
return (
<Container style={{ backgroundColor: 'rgba(239,204,143,0.5)' }}>
<Content style={{ opacity: 1 }}>
<Form style={{ marginBottom: 25 }}>
<Item>
<Input
placeholder='Email'
value={this.state.email}
onChangeText={(text: string) => {
this.setState({ email: text });
}}
/>
</Item>
<Item last>
<Input
placeholder='Password'
value={this.state.password}
onChangeText={(text: string) => {
this.setState({ password: text });
}}
secureTextEntry
/>
</Item>
</Form>
<Button
onPress={this.onLogin.bind(this)}
style={{ marginLeft: 10, marginRight: 10 }}
block
>
<Text>Log In</Text>
</Button>
</Content>
</Container >
);
}
}
const SignInUserMutation = gql`
mutation signInUser($email: String!, $password: String!) {
signinUser(
email: {
email: $email,
password: $password
}
){
token,
}
}`
const withSignIn = withApollo(graphql<LoginFormApolloProps, LoginFormComponentProps, ILoginFormProps>(
SignInUserMutation, {
props: ({ mutate }) => ({
signInUser: (email, password) => mutate({ variables: { email, password } })
})
})(withUserCreated));
const mapStateToProps = ({ auth }) => {
const { err } = auth;
return { err };
}
export default connect(mapStateToProps, {
saveUser,
loginFailed,
})(withSignIn);
Using this code. If I press 'Log In', nothing occurs and nothing prints to the debugger console. When I press 'Log In' a second time, I get two console.log's printing out the proper response from Apollo.
