Reactネイティブからバックエンドへのフックアップ

Question

React NativeとCheerio.jsスクレーパー（Cron Jobを使用して毎日1回有効にする）でUIを作成しました。特定のデータを取得するために使用しますウェブからは、UIでレンダリングできるようになります。しかし、私はそれらの2つをどのようにリンクさせるのか分かりません。

私はExpress（これは私がバックエンドにとって最も快適です）でこれを行うことができますが、誰かが私のフロントエンドをバックエンドに接続するために必要なことを正確に教えてくれますか？ ？

私はジュニアデベロッパーです（バックエンドよりもフロントエンドで優れています）ので、簡単に回答してください。たとえあなたの答えがコードベースではなく概念的であっても、本当に感謝しています。ドキュメントに記載されfetchを使用し、あなたはエクスプレスで構築されたAPIと通信していると仮定すると、

Answer 1

：https://facebook.github.io/react-native/docs/network.html

Answer 2

API

私はRESTの代替としてGraphQLとはかなり満足しています。しかし、APIを介して接続するには多くの方法があります。あなたのクライアントは、あなたのサーバが稼働している場所へのリンクを必要としており、あなたのサーバはそれを有効にする必要があります。 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

そしてGraphQLをより深く理解するためにUdemyのスティーブン・グライダーのチュートリアルを以下：私はこのチュートリアル（GitHubの上の例で）よりも良いそれを説明することができなかったと思います

チュートリアル

。彼はチュートリアルでReactとReact Nativeを使用していますが、構文は非常に近いです。 https://www.udemy.com/graphql-with-react-course/learn/v4/overview

重要なお知らせ - 最初のチュートリアルでは「apollo-server」を使用していますが、udemyのチュートリアルではgraphqlを使用しています。 apollo-serverの変更が頻繁に起こり、graphqlがより明確になる可能性があります。

例

この2つの間の私の橋の様子は次のとおりです。最大の問題は、アプリケーションのフロントエンド版（Next.js）のCorsを扱い、localhost：8080の代わりにhttp://10.0.3.2:8080/graphql（変化する可能性があります）でサーバーにアクセスできることを確認することでした。

マイ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:xxx@xxx.mlab.com: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} ✔`)}`); 
});