Search code examples
androidreact-nativenetwork-programminggraphqlfaunadb

React-Native Connect FaunaDB, TypeError: Network request failed on Android

I want to connect to faunadb through the application I developed with React native.

For this, I installed faunadb's node.js package and prepared the necessary queries.

The processes I did worked on IOS without any problems. But I am getting the following error on android:

Possible Unhandled Promise Rejection (id: 0):
TypeError: Network request failed
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.
...

I have the same issue on android both emulator and real device.

I tried the following to solve the problem:

  • Due to Android restrictions, a network_security_config configuration must be added to the application. It is an xml file that can be added by following these steps:
  • Edit the android/app/src/main/AndroidManifest.xml
  • Add the android:networkSecurityConfig="@xml/network_security_config" to the tag
  • Create the folder android/app/src/main/res/xml and inside a file called network_security_config.xml
  • If you don't want to install the CA in the Android certificates, add the folder android/app/src/main/res/raw

But nothing changed.

Here are my connection settings to FaunaDB:

import faunadb from 'faunadb';
const client = new faunadb.Client({
  secret: process.env.FAUNA_KEY,
  domain: 'db.fauna.com',
});
const q = faunadb.query;
export {client, q};

The reason why I am specifically mentioned here as faunaDB is that when I want to connect to another api and pull data, I don't have any problems.

For example, in the fetch example below, the movie list returns successfully.

fetch('http://facebook.github.io/react-native/movies.json')
.then(response => response.json())
.then(responseJson => {
  console.log(responseJson.movies);
})
.catch(error => {
  console.error(error);
});

What am I missing here? Thanks in advance for your ideas and help.

Solution

  • I found the solution to the problem, I wanted to report it here.

    For the solution, I defined the header setting to the faunaDB client and it was enough to send 'Content-Type': 'application/json' in the header.

    The final version of my FaunaDB client code is as follows:

    import faunadb from 'faunadb';
const client = new faunadb.Client({
  secret: process.env.FAUNA_KEY,
  domain: 'db.fauna.com',
  scheme: 'https',
  headers: {
     'Content-Type': 'application/json',
  },
});
const q = faunadb.query;
export {client, q};