Question

我正在使用Apollo Client和GraphQL作为后端的React Native项目。我遇到的问题是当我使用突变注册一个新用户时，我得到了一个用户已被创建的肯定响应，但我也会收到一条错误，说明错误捕获：TypeError：无法读取财产变量＆＃39;未定义的

我不确定问题是什么，或者为什么要返回错误。这是代码：

＆＃13;

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

＆＃13;

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函数之后运行了两次。

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

React Native，GraphQL，Apollo - 在变异期间抛出错误

1 个答案: