React-native expo с серверной частью GraphQL NetworkError - PullRequest
0 голосов
/ 19 января 2019

React-native - Expo - Клиент Apollo - GraphQL Server

Я пишу мобильный React-native / expo-клиент для моего веб-приложения .В мобильной версии я также использую Apollo Client для соединения с Backend GraphQL Server , который размещен на Heroku.

Проблема в том, что каждый раз, когда я вызываю запрос или мутацию с мобильного интерфейса, яget Ошибка сети:

[Unhandled promise rejection: Error: Network error: Network request failed]
Stack trace:
    node_modules/apollo-client/bundle.umd.js:85:36 in ApolloError
    node_modules/apollo-client/bundle.umd.js:918:47 in error
    node_modules/zen-observable/lib/Observable.js:134:22 in notifySubscription
    node_modules/zen-observable/lib/Observable.js:165:21 in onNotify
    node_modules/zen-observable/lib/Observable.js:224:15 in error
    node_modules/apollo-link-http/lib/bundle.umd.js:170:35 in <unknown>
    node_modules/promise/setimmediate/core.js:37:14 in tryCallOne
    node_modules/promise/setimmediate/core.js:123:25 in <unknown>
    node_modules/react-native/Libraries/Core/Timers/JSTimers.js:152:14 in _callTimer
    node_modules/react-native/Libraries/Core/Timers/JSTimers.js:200:17 in _callImmediatesPass
    node_modules/react-native/Libraries/Core/Timers/JSTimers.js:464:30 in callImmediates
    node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:320:6 in __callImmediates
    node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:135:6 in <unknown>
    node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:297:10 in __guard
    node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:134:17 in flushedQueue
    ...

Конфигурация клиента Apollo:

const authenticationMiddleware = new ApolloLink((operation, forward) => {
    operation.setContext(({ headers }) => ({
        headers: {
            ...headers,
            'fridgetoken': getToken('fridgetoken')
        }
    }))

    return forward(operation)
})

const httpLink = new HttpLink({ 
    uri: endpoint 
})

const client = new ApolloClient({
    link: concat(authenticationMiddleware, httpLink),
    cache: new InMemoryCache()
})

class App extends Component {
    render() {
        return (
            <ApolloProvider client={client}>
                <Application />    
            </ApolloProvider>
        )
    }
}

Пример мутации:

const SIGNIN_MUTATION = gql`
    mutation SIGNIN_MUTATION (
        $email: String!
        $password: String!
    ) {
        signin (
            email: $email
            password: $password
        ) 
    }
`

Вызов мутации в одном из основных компонентов:

class SignIn extends Component {
    state = {
        email: '',
        password: ''
    }

    handleInput = (field, value) => {
        this.setState({
            [field]: value
        })
    }

    render() {
        return (
            <Mutation 
                mutation={SIGNIN_MUTATION}
                variables={this.state}
            >
                {(signin, { error, loading }) => {                    
                    return (
                        <View style={styles.page}>   
                            <Text style={styles.pageTitle}>Sign In</Text>
                            <TextInput 
                                placeholder='E-mail'
                                style={error ? [styles.input, styles.inputOnError] : styles.input} 
                                type='email'
                                name='email'
                                autoCapitalize = 'none'
                                value={this.state.email}
                                onChangeText={
                                    (input) => this.handleInput('email', input) 
                                }                            
                            />                                 
                            <TextInput 
                                placeholder='Password'
                                style={error ? [styles.input, styles.inputOnError] : styles.input} 
                                type='password'
                                name='password'
                                autoCapitalize = 'none'
                                value={this.state.password}
                                onChangeText={
                                    (input) => this.handleInput('password', input)
                                }
                            /> 
                            <TouchableOpacity 
                                style={styles.button}
                                disabled={loading}
                                onPress={ 
                                    async () => {                       
                                        const signinResponse = await signin()
                                        console.log(signinResponse) 
                                        //THIS ONE NEVER HAPPENS - 
                                        //await signin() produces NetworkError

                                        this.setState({
                                            email: '',
                                            password: ''
                                        })
                                    }
                                }
                            >
                                 <Text style={styles.buttonText}>Sign In</Text>
                            </TouchableOpacity>
                        </View>
                    )
                }}
            </Mutation>
        )
    }
}

Пока все отлично работает на версии веб-приложения (клиент Apollo достигает внутреннего сервера GraphQL и может вызывать запросы и мутации), наМобильная версия с React-native & Expo проваливается.Я разрабатываю приложение, используя приложение Expo, и я думаю, что это источник проблемы (но как с этим справиться ???).

Я прочитал много тем о похожих проблемах и пытался их решить.это, но безуспешно:

  • Я пытался запустить новый локальный сервер GraphQL и настроить ссылку клиента Apollo на URI, сгенерированный с помощью ngrok.Он все еще не работал - та же ошибка: /

  • то же, что и выше, но без ngrok - просто установка URL для URL локального сервера GraphQL - что-то вроде '192.168.xx: PORT' -та же ошибка

Кто-нибудь знает, как с этим справиться или что не так с моей конфигурацией приложения?

...