はじめに

自分が携わるプロジェクトでは、数100kB程度の軽い画像ファイルを通信する際に、 GraphQL multipart request で直接ファイルを転送しています。

ionic + cordova で動作している既存処理を React Native に移行する際に色々と試行錯誤しました。

かなりニッチなシチュエーションですが、同じ状況に悩む人の救いになれば、と備忘も兼ねて記事に残します。

ニッチなシチュエーション
- 動作環境：React Native
- react-native-signature-pad で生成した署名データ
- 手動で作成した HTTP Header / Body
- content-type: 'multipart/form-data'
- 仕様：GraphQL multipart request

既存のロジック（ionic）

現在動いているシステムでは、http header / body を自前で構成してサーバサイドにポストする処理が実装されていました。

参考までに、下記のような感じです。（ボディ部の定義のみ記載しています。）
file: null は意図的です。詳細はコチラをご覧ください。

const body = new FormData();
body.append(
  'operations',
  JSON.stringify({
    operationName: 'UploadFileMutation',
    variables: { file: null },
    query: `mutation UploadFileMutation($file: Upload!) {
      uploadFile(file: $file) {
        success
      }
    }`,
  }),
);
body.append('map', JSON.stringify({ file: ['variables.file'] }));
body.append('file', this._fileBlob);

ハマったこと（その１）

結論を先に言うと、今回 axios の利用は断念しました。
その理由は、こちらの issue にあります。

生成したデータを axios でサーバ側に post していましたが、リクエストを見ても content-type がセットされていませんでした。
ボディ部のデータが悪いのかな？と思い、色々とトライしてみてもうまくいかず…。

上述の issue では、似たような状況に陥っている人が見受けられました。（React Native 特有の問題のよう）
結局、解決策は見つけられなかったのであるコメントを参考にして、XMLHttpRequest で通信することにしました。

その結果、正しく content-type: 'multipart/form-data' がセットされるようになりました。

ハマったこと（その２）

その１で、content-type は正しくセットされるようになりましたが、ファイルのアップロードはまだうまく処理されていませんでした。

今回のケースでは、既存の処理に倣い、ファイルは Blob で通信を試みていました。

試行錯誤する中で、気になるコメントを見つけました。

true gets stringified when sent to the server, which is interesting.

Boolean で処理したはずの true という値がサーバ側では String の 'true' になっている、という内容でした。

このコメントは axios のケースですが、axios は xhr adapter を利用しているようなので、もしかしたら xhr にも当てはまるのでは？と仮定し、 Blob での処理を断念しました。

代わりに、apollo-upload-client にある、 ReactNativeFile クラスを利用しました。

const file = new ReactNativeFile({
  uri: values.signatureDataUrl,
  type: mimeType,
  name: 'blob',
});

Wiresharkを使ったリクエストの確認やサーバ側の受信データの確認をサボってしまったので、推測が入ってますが、ともあれこれでバックエンドに正しくファイルをアップロードできました。

おわりに

その２で導入している、apollo-upload-client を使えばもっと簡単じゃないの？って思った方もいるかもしれません。

おっしゃる通りです。
いきなり apollo-upload-client を導入しようとして色々とエラーが発生したので、ステップバイステップで既存処理のコピーをやろうとしてまたハマるというお間抜けな展開でした。

とりあえず React Native 上で既存処理と同等の処理は動作したので、apollo-upload-client の導入・リファクタリングはそのうち取り掛かります。