2017-05-24 18 views
0

私は、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))

+0

このコンポーネントから特にエラーが発生していますか?私が試してみようとしているのは、 "this"が間違ったスコープで危険なものになる可能性があり、その値が実行時に決定されるので、 "this"を "if"文の中に出力することです。 – mstorkson

+0

ええ、それはエラーを投げています - 具体的には次の行: '.catch((err)=> {console.log("エラーが検出されました: "+ err)}' また、デベロッパーコンソールを見て、なぜなら、エラーはサーバからの成功応答を受け取った後にエラーを投げているからです。 – Kaidao

+1

エラーは、何かが 'x.variables'を検索し、xがnullであることを意味します。あなたが間違って2回発砲しているかどうかを確認して、2回目に渡された変数がないかどうか確認できますか? – mstorkson

答えて

0

ので、エラーが

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

:私はに私のコードを変更しました。

誰かがアイディアを持っている場合は、私に教えてください!

関連する問題