React Native，GraphQL，Apollo - 突变过程中抛出的错误
问题描述：
我正在使用Apollo Client和GraphQL作为后端的React Native项目。我遇到的问题是当我注册一个使用突变的新用户时，我得到了一个肯定的回复，表示用户已经创建，但我也会抛出一个错误，说错误被捕获：TypeError：无法读取属性“变量”的未定义React Native，GraphQL，Apollo - 突变过程中抛出的错误
我不确定问题是什么，或者为什么错误被返回。下面的代码：
'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))
答
所以错误是，
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)
}这解决了这个问题，我居然也得到了应有的反应，虽然我仍然不知道为什么它的异步函数运行后的两倍。
如果有人有任何想法，请让我知道！
你确定错误是特别来自这个组件吗？我想尝试的一件事是在你的if语句中打印出“this.props”，因为“this”在错误的范围内可能是危险的，因为它的值是在运行时确定的 – mstorkson
是的，我确定这是组件这是抛出错误 - 具体是这条线： '.catch（（err）=> {console.log（“Error caught：”+ err）}' 另外，通过dev控制台，我可以看到正确的变量正在通过，所以它成功了。我弄不清楚为什么在我从服务器获得成功响应后抛出一个错误。 – Kaidao
这个错误意味着某些内容正在搜索'x.variables'，x为null。只有时间变量似乎被调用是在变异中，你能否检查并查看查询是否错误地发生了两次，第二次没有通过变量？ – mstorkson