React Native，GraphQL，Apollo-突变期间引发的错误

Question

我正在使用Apollo Client和GraphQL作为后端的React Native项目。 我遇到的问题是，当我使用突变注册一个新用户时，我得到一个肯定的响应：该用户已被创建，但是我还抛出一个错误，提示错误已捕获：TypeError：无法读取属性的“变量”未定义

我不确定是什么问题，还是根本不返回错误。 这是代码：

 'use strict' import React, { Component } from 'react'; import { Text, View, StyleSheet, AsyncStorage, Modal, TouchableHighlight } from 'react-native' import { Actions, ActionConst } from 'react-native-router-flux' import { Button } from 'react-native-elements' // Apollo and GraphQL Packages import ApolloClient, { graphql, withApollo } from 'react-apollo' import gql from 'graphql-tag' import { filter } from 'graphql-anywhere' import { connect } from 'react-redux' import Auth0Lock from 'react-native-lock' // Styling Packages import LinearGradient from 'react-native-linear-gradient' import EStyleSheet from 'react-native-extended-stylesheet' // View Packages import ViewContainer from './ViewContainer' // Auth0 Credentials const clientId = "XXXX" const domain = "XXXX" // Props Declaration type Props = { client: ApolloClient, createUser: ({ variables: { idToken: string, name: ?string, email: ?string } }) => { id: string} } class Login extends Component { _lock: Auth0Lock props: Props constructor(props) { super(props) this._lock = new Auth0Lock({ clientId: clientId, domain: domain, useBrowser: true }) } _showLogin() { this._lock.show({ closable: true, connections: ['Username-Password-Authentication'] }, async (err, profile, token) => { if (!err) { AsyncStorage.setItem('token', token.idToken) .then(() => { this.props.client.resetStore() }) this.props.createUser({ variables: { idToken: token.idToken, name: profile.name email: profile.email } }) .then((data) => { console.log("Data received: " + data) Actions.registration({ type: ActionConst.REPLACE }) }) .catch((err) => { console.log("Error caught: " + err) AsyncStorage.removeItem('token') .then(() => this.props.client.resetStore()) // Actions.home({ type: ActionConst.REPLACE }) }) } else { console.log(err) } }) } render() { return( <LinearGradient colors={['#34E89E', '#0F3443']} style={styles.linearGradient}> <ViewContainer style={styles.viewContainer}> <Button small raised buttonStyle= {styles.button} color="#fff" title="Login" onPress={() => this._showLogin()} /> </ViewContainer> </LinearGradient> ) } } const styles = EStyleSheet.create({ viewContainer: { flex: 1, paddingTop: 70, paddingLeft: 20, paddingRight: 20 }, linearGradient: { height: '$height', }, logo: { fontFamily: 'LiberatorHeavy', fontSize: 52, alignSelf: 'center', marginBottom: 400, color: 'white', backgroundColor: 'transparent' }, button: { backgroundColor: '#222222' } }); const createUserMutation = gql` mutation createUser($idToken: String!, $name: String, $email: String) { createUser( authProvider: { auth0: { idToken: $idToken } }, name: $name, email: $email ){ id } }` export default withApollo( graphql(createUserMutation, { name: 'createUser' } )(Login)) 

Answer 1

所以错误是

createUser({variables...})

函数触发两次，一旦清除了变量，就会引发错误。 我将代码更改为：

 _showLogin() { this._lock.show({ closable: true, connections: ['Username-Password-Authentication'] }, async (err, profile, token) => { if (!err) { AsyncStorage.setItem('token', token.idToken) .then(() => { this.props.client.resetStore() // Create user function was put in to AsyncStorage function to stop function from running twice. (Not sure why that was happening) this.props.createUser({ variables: { idToken: token.idToken, name: profile.name, email: profile.email } }) .then((data) => { console.log("Data received: " + data) Actions.registration({ type: ActionConst.REPLACE }) }) .catch((err) => { console.log("Error caught: " + err) AsyncStorage.removeItem('token') .then(() => this.props.client.resetStore()) // Actions.home({ type: ActionConst.REPLACE }) }) }) } else { console.log(err) } 

这解决了问题，并且我得到了正确的响应，尽管我仍然不确定为什么它在Async函数之后运行两次。

如果有人有任何想法，请告诉我！