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' -та же ошибка
Кто-нибудь знает, как с этим справиться или что не так с моей конфигурацией приложения?