直到再次调用才解决突变

Question

我正在创建一个 React Native 应用程序并使用 Graphcool 提供的基本 email/password 身份验证。我在按下 'Log in' 按钮时触发了突变。第一次按下按钮时，then 回调中的代码永远不会执行；第二次按下按钮时，then 回调立即执行两次，我被发送到我的 'app' 屏幕。

会不会是我的配置有问题？我做错了什么吗？任何帮助或指导将不胜感激！谢谢！

我试图将代码减少到仅适用于此问题的代码。

代码：

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);

使用此代码。如果我按 'Log In'，什么也不会发生，也不会向调试器控制台打印任何内容。当我第二次按 'Log In' 时，我得到两个 console.log 打印出 Apollo 的正确响应。

Answer 1

这最终成为我使用的 React Native 版本的问题，并已从 v0.47 开始解决。可以在 GitHub.

上的 React Native 存储库的 this issue 中找到该问题的详细版本

直到再次调用才解决突变

Mutation not resolving until called again

promise

typescript

react-native

react-apollo

graphcool