FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

React Native SDK ver.2系の使い方【リレーションの使い方】

f:id:mbaasdevrel:20180306160753p:plain

React NativeでmBaaSを使いやすくするReact Native SDKを非公式に開発しています。

NCMBMania/ncmb-react-native: NCMB SDK for React Native

これまでJavaScript SDKに似せる形で開発してきましたが、TypeScriptに沿った形で書くのに限界があったこと、React Native for Webでも使える形にしたかったので、バージョンアップすることにしました。これまでとは互換性はありませんが、より使いやすくなったはずです。

今回はデータストアをより使いこなすために重要なリレーションの使い方について解説します。

インストール

SDKのインストールはnpmで行います。

npm i ncmb-react-native

読み込み

import NCMB, { NCMBRelation } from 'ncmb-react-native';

読み込めるライブラリはほかにも下記があります。

  • NCMBUser(会員管理)
  • NCMBObject(データストア。保存、更新、削除)
  • NCMBQuery(データストア。検索、取得)
  • NCMBFile(ファイルストア)
  • NCMBAcl(権限管理)
  • NCMBRole(ロール、ユーザやロールのグルーピング)
  • NCMBRequest(NCMBへのリクエスト用。通常は利用しません)
  • NCMBRelation(データストアのリレーション)
  • NCMBGeoPoint(位置情報�)
  • NCMBInstallation(デバイストークン)
  • NCMBPush(プッシュ通知)

初期化

SDKの初期化はアプリケーションキーとクライアントキーで行います。

const applicationKey = 'YOUR_APPLICATION_KEY';
const clientKey = 'YOUR_CLIENT_KEY';
new NCMB(applicationKey, clientKey);

新しいリレーションの作成

新しいリレーションを作成する際には、関連させるデータストアオブジェクトが必要です。以下の場合、Mainクラスのオブジェクトの中に、Testクラスのオブジェクトが関連付きます。

// 2つのオブジェクトを作成
const item1 = new NCMBObject('Test');
await item1.set('message', 'Hello, world from item1').save();
const item2 = new NCMBObject('Test');
await item2.set('message', 'Hello, world from item2').save();

// リレーションで関連づけ
const relation = new NCMBRelation('Test');
relation
  .add(item1)
  .add(item2);

// 関連づけを保存するデータストアオブジェクト
const mainObj = new NCMBObject('Main');
// リレーションを保存
await mainObj
  .set('relation', relation)
  .save();

紐付いたデータの取得

データを取得する場合、Mainクラスからではなく、Testクラスから行うのがコツです。そして relatedTo メソッドの中で、Mainクラスを指定します。

const query = new NCMBQuery('Test');
const ary = await query
  .relatedTo(mainObj, 'relation')
  .fetchAll();

リレーションからデータを削除

既存のリレーションからデータを削除する場合は、removeを使います。そして、そのリレーションデータを改めて保存してください。

const relation = new NCMBRelation('Test');
relation.remove(item1);
await mainObj.set('relation', relation).save();

リレーションにデータを追加

追加する場合は、初回時と同じく add を使います。

const relation = new NCMBRelation('Test');
relation.add(item1);
await mainObj.set('relation', relation).save();

注意点

既存のリレーションに対する add と remove は同時にはできません。

まとめ

React Native SDKはネイティブに依存する機能を除いて、すべての実装が完了しています。React Native(Webを含む)でサーバ機能が必要になりましたら、ぜひ使ってみてください。

リレーションはデータの関連づけを管理する上で便利な機能です。一対多となるデータを管理する際に役立ててください。

NCMBMania/ncmb-react-native: NCMB SDK for React Native

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。