API

I am quite happy with GraphQL as a REST alternative. However, there are many ways to connect via api. Your client needs a link to your server and your server needs to enable that.

Tutorials

I think I couldn't explain it better than this tutorial (with an example on 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

And follow Stephen Grider's Udemy tutorial for a deeper understanding of GraphQL. In his tutorial, he uses React, not React Native, but the syntax remains very similar. https://www.udemy.com/graphql-with-react-course/learn/v4/overview

Important note. The first lessons use "apollo-server" while the udemy tutorial uses graphql. apollo-server changes quite often and graphql might be clearer.

Example

This is what my bridge between the two looks like. The biggest challenge was working with Cors for the front-end version of the application (Next.js) and figuring out that the server can be accessed at http://10.0.3.2:8080/graphql (may differ) instead of localhost: 8080.

My index.android.js (client side):

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);

      

        
        
        
      

    

My app.js server side

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 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;

      

        
        
        
      

    

my index.js (server side):

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

const PORT = 8080;

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