Zenn
💡

React Native + Android | TypeError: Network request fail の解決方法

2023/02/19に公開
Android
GraphQL
React Native
React
Android Studio
tech

概要

React Native + Android のプロジェクトで yarn android コマンドを叩いて開発環境を起動して Dockerコンテナ で起動した GraphQL のエンドポイント（http://localhost:4000/graphql）とAPI通信を実施しようとすると networkError TypeError: Network request fail のエラーが出現してAPI通信が出来なかったのですが、このエラーを解決してAPI通信を成功させるまでにかなり時間がかかったので、エラーを解決するまでの手順を備忘録としてまとめます。

つまり、この記事を通して「達成したいこと」は以下です。

達成したいこと

React Native + Android + GraphQL で http通信 が出来るようにしたい

前提条件

  • "react": "18.1.0"
  • "react-native": "0.70.2"
  • "@apollo/client": "^3.6.9"
  • "graphql": "^16.6.0"
  • Android の開発環境が yarn android で起動する状態であること

なぜ、Androidでhttp通信が出来ないのか？

詳しくは、クリアテキスト トラフィックをオプトアウトする | Android Developers を確認してほしいのですが、Android 9（API レベル 28）以上から cleartextTrafficPermitted="false" がデフォルトで設定されるため、暗号化されていないHTTP通信（つまり https の s が付いてない通信）に失敗します。なのでhttp通信を有効にするための設定を実施する必要があるわけです。

では、http通信を有効にするための設定はどうやればいいのか？

http通信を有効にするための具体的な手順

前提条件

android / app / src / main / AndroidManifest.xml にネットワークに接続するためのパーミッションである <uses-permission android:name="android.permission.INTERNET" />が付与されているかどうかを確認してください。もし付与されていない場合は追加してください。

<!-- android / app / src / main / AndroidManifest.xml -->

<uses-permission android:name="android.permission.INTERNET" />

<application>
  ...
</application>

1. android / app / src / debug / AndroidManifest.xml に android:networkSecurityConfig="@xml/network_security_config" 追加

Android の開発環境を起動するときは、Android の Build Type は Debugモード になるため、debugディレクトリ配下の AndroidManifest.xml を編集する必要があります。

android / app / src / debug / AndroidManifest.xml に android:networkSecurityConfig="@xml/network_security_config" を追加します

<!-- android / app / src / debug / AndroidManifest.xml -->

 <application
   android:usesCleartextTraffic="true"
   android:networkSecurityConfig="@xml/network_security_config"
   tools:targetApi="28"
   tools:ignore="GoogleAppIndexingWarning">
   <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" android:exported="false" />
</application>

2. android / app / src / debug / res / xml / network_security_config.xml を新規作成

以下キャプチャのディレクトリ構成でファイルを新規作成します

ディレクトリ構成
network_security_config

3. network_security_config.xml を編集

network_security_config.xml に以下の内容を記載します

<!-- android / app / src / debug / res / xml / network_security_config.xml -->

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">localhost</domain>
        <!-- Wi-FiのIPアドレスをここに追加します -->
        <domain includeSubdomains="true">{Wi-FiのIPアドレス}</domain>
    </domain-config>
</network-security-config>

Wi-FiのIPアドレスは ifconfig | grep broadcast で確認できます。

詳しくは Linux + macOS | 現在接続している Wi-Fi の IPアドレス を ターミナルで確認する方法が超簡単だった | Zenn を確認してください

Wi-FiのIPアドレスを確認できたら
network_security_config.xml に
Wi-FiのIPアドレスを記載します

4. http://localhost:4000/graphql から http://{Wi-FiのIPアドレス}:4000/graphql に変更する

GraphQLエンドポイントのURLドメインを
http://localhost:4000/graphql から
http://{Wi-FiのIPアドレス}:4000/graphql に変更します

5. yarn android で開発環境を起動する

1 から 4 までの手順を実施した上で
yarn android で開発環境を起動します。

もしうまく動かない場合は、キャッシュを削除した上で
再度、開発環境を起動してみると良いです。

# androidディレクトリに移動する
cd android

# ビルド後に生成されたファイルを削除
rm -rf android/app/build

# gradlew を clean する
./gradlew clean

# Android の開発環境を起動する
yarn android

これで自分は開発環境のGraphQLサーバーから
データを取得することができるようになりました。

参考文献

Discussion