代码之家 › 专栏 › 技术社区 › Andres Felipe

登录表单React Native和Apollo

react-apollo graphql react-native

0

Andres Felipe · 技术社区 · 7 年前

我正在学习Graphql,同时开发一个真实的项目,这太棒了,我已经构建了服务器,Apollo服务器很棒,现在的问题是react客户端,它有和标签,我不知道如何在点击表单按钮时运行变异。提前谢谢。

突变

const LOGIN\u CUSTOMER=gql`

mutation LoginCustomers($email: String!, $password: String!) {
    loginCustomers(input: { email: $email, secretop: $password }) {
      sign
      email
      id
    }
  }
`;

突变函数

const { email, password } = this.state;
    return (
      <Mutation
        mutation={LOGIN_CUSTOMER}
        variables={{ email, password }}
        onCompleted={data => {
          console.log("MUTATION_DATA", data);
          AsyncStorage.setItem("token", data.token);
          AsyncStorage.setItem("email", data.email);
          AsyncStorage.setItem("_id", data._id);
          this.props.navigation.navigate("App");
        }}
      >
        {(loginCustomers, { data }) => (
          <Container>
            <Content>
              <Image
                source={require("../../assets/images/log-header.jpg")}
                style={{ height: 300, width: null, flex: 1 }}
              />

              <Form style={{ paddingLeft: 15, paddingRight: 15 }}>
                <Item>
                  <Input
                    keyboardType="email-address"
                    autoCapitalize="none"
                    onChangeText={value => {
                      this.changeStateValues("email", value);
                    }}
                    placeholder="Email"
                  />
                </Item>
                <Item last>
                  <Input
                    secureTextEntry={true}
                    onChangeText={value => {
                      this.changeStateValues("password", value);
                    }}
                    placeholder="ContraseÃ±a"
                  />
                </Item>

                <Button
                  style={{ marginTop: 20 }}
                  full
                  warning
                  onPress={() => this.signIn()}
                >
                  <RobotoText style={styles.ingreso}>Ingresar</RobotoText>
                </Button>

                <Button
                  onPress={() => this.props.navigation.navigate("Forgot")}
                  transparent
                  full
                >
                  <RobotoText style={{ color: "#E3A80D" }}>
                    PerdÃ mi contraseÃ±a
                  </RobotoText>
                </Button>
              </Form>
            </Content>

            <Footer>
              <Button onPress={() => this.setType()} transparent>
                <RobotoText>Registrarse</RobotoText>
              </Button>
            </Footer>
          </Container>
        )}
      </Mutation>
    );

1 回复 | 直到 7 年前

1

0

Chris Geirman 7 年前

您的表单可能看起来像这样。。。

<Form method="POST" onSubmit={async event => {
  event.preventDefault()
  await loginCustomer()
}}>

2

0

Andres Felipe 7 年前

毕竟,这就是我所做的,传递一个带有突变名称的回调,然后按下按钮触发它 {(登录,{data})=>(

                  <Form
                    style={{
                      paddingLeft: 15,
                      paddingRight: 15
                    }}
                  >
                    <Item>
                      <Input
                        keyboardType="email-address"
                        autoCapitalize="none"
                        onChangeText={value => {
                          this.changeStateValues("email", value);
                        }}
                        placeholder="Email"
                        value={this.state.email}
                      />
                    </Item>
                    <Item last>
                      <Input
                        secureTextEntry={true}
                        onChangeText={value => {
                          this.changeStateValues("password", value);
                        }}
                        placeholder="ContraseÃ±a"
                        value={this.state.password}
                      />
                    </Item>

                    <Button
                      style={{ marginTop: 20 }}
                      full
                      warning
                      onPress={() => {
                        login({
                          variables: {
                            email: this.state.email,
                            password: this.state.password
                          }
                        })
                          .then((res: any) => {
                            signIn(res.data.login.token);
                            this.props.navigation.navigate("App");
                          })
                          .catch(err => (
                            <RobotoText style={styles.ingreso}>
                              {err}
                            </RobotoText>
                          ));
                      }}
                    >
                      <RobotoText style={styles.ingreso}>Ingresar</RobotoText>
                    </Button>

                    <Button
                      onPress={() => this.props.navigation.navigate("Forgot")}
                      transparent
                      full
                    >
                      <RobotoText style={{ color: "#E3A80D" }}>
                        PerdÃ mi contraseÃ±a
                      </RobotoText>
                    </Button>
                  </Form>
                </Content>

                <Footer>
                  <Button
                    onPress={() => this.props.navigation.navigate("Signup")}
                    transparent
                  >
                    <RobotoText style={{}}>Registrarse</RobotoText>
                  </Button>
                </Footer>
              </Container>
            )}
          </Mutation>