4

我使用 React Native 和 Cheerio.js 刮板（每天使用 Cron Job 激活一次）制作了一个 UI，我将使用它从 Web 中获取某些数据，以便它可以在 UI 中呈现。但是，我不知道如何将两者联系起来。

我很确定我可以使用 Express 来做到这一点（我对后端最满意），但是有人可以准确地告诉我我需要做什么才能将前端连接到后端吗？

以防万一，我是一名初级开发人员（前端比后端更好）所以请保持你的答案简单。即使您的答案更具概念性，而不是基于代码，我也会非常感激。

4

2 回答 2

3

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

并按照 Stephen Grider 的 Udemy 教程深入了解 GraphQL。他在他的教程中使用的是 React 而不是 React Native，但语法仍然非常接近。 https://www.udemy.com/graphql-with-react-course/learn/v4/overview

重要通知 - 第一个教程使用“apollo-server”，而 udemy 的教程使用 graphql。apollo-server 经常变化，graphql 可能更清晰。

例子

这就是我在两者之间的桥梁的样子。最大的困难是为应用程序的前端版本（Next.js）处理 Cors，并发现可以在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: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} ✔`)}`);
});
于 2017-07-08T22:10:23.677 回答
1

假设您正在与使用 Express 构建的 API 进行通信，然后fetch按照文档中的说明使用：https ://facebook.github.io/react-native/docs/network.html

于 2017-07-08T21:15:19.420 回答