Подключение React Native к бэк-энду (с помощью Express)

Question

Я создал пользовательский интерфейс с React Native, а также скребком Cheerio.js (с Cron Job, чтобы активировать его один раз в день), который я буду использовать для получения определенных данных из Интернета, чтобы они могли отображаться в пользовательском интерфейсе. Тем не менее, я понятия не имею, как связать их обоих.

Я почти уверен, что смогу сделать это с помощью Express (что мне больше всего удобно для серверной части), но может ли кто-нибудь сказать мне точно, что мне нужно сделать, чтобы подключить мой интерфейс к серверной части?

На всякий случай, я младший разработчик (лучше на переднем конце, чем на заднем плане), поэтому, пожалуйста, оставьте ваши ответы простыми. Даже если ваши ответы скорее концептуальные, нежели основанные на коде, я был бы очень признателен.

Answer 1

Предполагая, что вы общаетесь с API, созданным с помощью Express, используйте fetch как описано в документации: https://facebook.github.io/react-native/docs/network.html

Answer 2

API

Я вполне доволен GraphQL как альтернативой REST. Тем не менее, есть много способов подключения через API. Вашему клиенту нужна ссылка на то, где работает ваш сервер, и ваш сервер должен это включить.

Учебники

Я думаю, что я не мог объяснить это лучше, чем этот учебник (с примером на Github): https://medium.com/react-native-training/react-native-with-apollo-server-and-client-part-1-efb7d15d2361

https://medium.com/react-native-training/react-native-with-apollo-part-2-apollo-client-8b4ad4915cf5

И следуя руководству Стивена Грайдера по Udemy для более глубокого понимания GraphQL. Он использует React, а не React Native в своем уроке, но синтаксис остается очень близким. https://www.udemy.com/graphql-with-react-course/learn/v4/overview

Важное замечание - в первых руководствах используется "apollo-server", а в руководстве udemy - graphql. Apollo-сервер меняется довольно часто, и GraphQL может быть более понятным.

пример

Вот как выглядит мой мост между двумя. Самой большой трудностью была работа с Cors для внешней версии приложения (Next.js) и выяснение того, что доступ к серверу можно получить по http://10.0.3.2:8080/graphql (может отличаться) вместо localhost:8080.

Мой index.android.js (на стороне клиента):

import React from 'react'
import { AppRegistry } from 'react-native'
import App from './app'

import ApolloClient, { createNetworkInterface } from 'apollo-client';
import { ApolloProvider } from 'react-apollo'

const Client = () => {
  const networkInterface = createNetworkInterface({
   uri: 'http://10.0.3.2:8080/graphql'
  })
  const client = new ApolloClient({
    networkInterface
  });
  return (
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>)
}

AppRegistry.registerComponent('apolloclient', () => Client);

Мой сервер app.js

const express = require('express');
// const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const cors = require('cors');
const chalk = require('chalk');

// New imports
// NEVER FORGET to require the models,
// in which schemas are registered for a certain model
// forgetting it would throw "Schema hasn't been registered for model..."
const models = require('./models');
const expressGraphQL = require('express-graphql');
const schema = require('./schema/schema');

const app = express();

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

// My mongoLab URI
const MONGO_URI = 'mongodb://xxx:[e-mail]:xxx/xxx';

// mongoose's built in promise library is deprecated, replace it with ES2015 Promise
mongoose.Promise = global.Promise;

// Connect to the mongoDB instance and log a message
// on success or failure
mongoose.connect(MONGO_URI);
mongoose.connection.once('open', () => console.log(`${chalk.blue(`  Connected to MongoLab instance `)}`));
mongoose.connection.on('error', error => console.log(`${chalk.yellow(`⚠  Error connecting to MongoLab: ` + error + ` ⚠`)}`));

app.use(cors());

// We pass the schema as an option to our expressGraphQL middleware
app.use('/graphql', expressGraphQL({
  schema,
  graphiql: true
}))

module.exports = app;

мой index.js (на стороне сервера):

const app = require('./app');
const chalk = require('chalk');

const PORT = 8080;

app.listen(PORT, () => {
  console.log(`${chalk.green(`✔  Server started on http://localhost:${PORT} ✔`)}`);
});