ストア

Relay ストアは、updater 関数内でクライアントサイドのデータをプログラム的に更新するために使用できます。以下は、Relay ストアインターフェースのリファレンスです。

目次

• RecordSourceSelectorProxy
• RecordProxy
• ConnectionHandler

RecordSourceSelectorProxy

RecordSourceSelectorProxy は、updater 関数が引数として受け取る store の型です。以下は、RecordSourceSelectorProxy のインターフェースです。

interface RecordSourceSelectorProxy {
  create(dataID: string, typeName: string): RecordProxy;
  delete(dataID: string): void;
  get(dataID: string): ?RecordProxy;
  getRoot(): RecordProxy;
  getRootField(fieldName: string): ?RecordProxy;
  getPluralRootField(fieldName: string): ?Array<?RecordProxy>;
  invalidateStore(): void;
}

create(dataID: string, typeName: string): RecordProxy

GraphQL スキーマで定義されているように、dataID と typeName を指定して、ストアに新しいレコードを作成します。RecordProxy を返します。これは、新しく作成されたレコードをミューテートするためのインターフェースとして機能します。

例

const record = store.create(dataID, 'Todo');

delete(dataID: string): void

dataID を指定して、ストアからレコードを削除します。

例

store.delete(dataID);

get(dataID: string): ?RecordProxy

dataID を指定して、ストアからレコードを取得します。RecordProxy を返します。これは、レコードをミューテートするためのインターフェースとして機能します。

例

const record = store.get(dataID);

getRoot(): RecordProxy

GraphQL ドキュメントのルートを表す RecordProxy を返します。

例

GraphQL ドキュメント

viewer {
  id
}

使用法

// Represents root query
const root = store.getRoot();

getRootField(fieldName: string): ?RecordProxy

GraphQL ドキュメントで定義されているように、fieldName を指定して、ストアからルートフィールドを取得します。RecordProxy を返します。これは、レコードをミューテートするためのインターフェースとして機能します。

例

GraphQL ドキュメント

viewer {
  id
}

使用法

const viewer = store.getRootField('viewer');

getPluralRootField(fieldName: string): ?Array<?RecordProxy>

GraphQL ドキュメントで定義されているように、fieldName を指定して、ストアからコレクションを表すルートフィールドを取得します。RecordProxies の配列を返します。

例

GraphQL ドキュメント

nodes(first: 10) {
  # ...
}

使用法

const nodes = store.getPluralRootField('nodes');

invalidateStore(): void

Relay ストアをグローバルに無効化します。これにより、無効化が発生する前にストアに書き込まれたデータはすべて古くなったと見なされ、次回クエリが environment.check() でチェックされる際にリフェッチが必要と見なされます。

例

store.invalidateStore();

グローバルな無効化後、リフェッチ前にチェックされたクエリは古くなったと見なされます

environment.check(query) === 'stale'

RecordProxy

RecordProxy は、レコードをミューテートするためのインターフェースとして機能します

interface RecordProxy {
  copyFieldsFrom(sourceRecord: RecordProxy): void;
  getDataID(): string;
  getLinkedRecord(name: string, arguments?: ?Object): ?RecordProxy;
  getLinkedRecords(name: string, arguments?: ?Object): ?Array<?RecordProxy>;
  getOrCreateLinkedRecord(
    name: string,
    typeName: string,
    arguments?: ?Object,
  ): RecordProxy;
  getType(): string;
  getValue(name: string, arguments?: ?Object): mixed;
  setLinkedRecord(
    record: RecordProxy,
    name: string,
    arguments?: ?Object,
  ): RecordProxy;
  setLinkedRecords(
    records: Array<?RecordProxy>,
    name: string,
    arguments?: ?Object,
  ): RecordProxy;
  setValue(value: mixed, name: string, arguments?: ?Object): RecordProxy;
  invalidateRecord(): void;
}

getDataID(): string

現在のレコードの dataID を返します。

例

const id = record.getDataID();

getType(): string

GraphQL スキーマで定義されているように、現在のレコードの型を取得します。

例

const type = user.getType();  // User

getValue(name: string, arguments?: ?Object): mixed

フィールド名を指定して、現在のレコードのフィールドの値を取得します。

例

GraphQL ドキュメント

viewer {
  id
  name
}

使用法

const name = viewer.getValue('name');

オプションで、フィールドが引数を受け取る場合、variables のバッグを渡すことができます。

例

GraphQL ドキュメント

viewer {
  id
  name(arg: $arg)
}

使用法

const name = viewer.getValue('name', {arg: 'value'});

getLinkedRecord(name: string, arguments?: ?Object): ?RecordProxy

GraphQL ドキュメントで定義されているように、フィールド名を指定して、現在のレコードに関連付けられたレコードを取得します。RecordProxy を返します。

例

GraphQL ドキュメント

rootField {
  viewer {
    id
    name
  }
}

使用法

const rootField = store.getRootField('rootField');
const viewer = rootField.getLinkedRecord('viewer');

オプションで、リンクされたレコードが引数を受け取る場合、variables のバッグも渡すことができます。

例

GraphQL ドキュメント

rootField {
  viewer(arg: $arg) {
    id
  }
}

使用法

const rootField = store.getRootField('rootField');
const viewer = rootField.getLinkedRecord('viewer', {arg: 'value'});

getLinkedRecords(name: string, arguments?: ?Object): ?Array<?RecordProxy>

GraphQL ドキュメントで定義されているように、フィールド名を指定して、現在のレコードに関連付けられたレコードのセットを取得します。RecordProxies の配列を返します。

例

GraphQL ドキュメント

rootField {
  nodes {
    # ...
  }
}

使用法

const rootField = store.getRootField('rootField');
const nodes = rootField.getLinkedRecords('nodes');

オプションで、リンクされたレコードが引数を受け取る場合、variables のバッグも渡すことができます。

例

GraphQL ドキュメント

rootField {
  nodes(first: $count) {
    # ...
  }
}

使用法

const rootField = store.getRootField('rootField');
const nodes = rootField.getLinkedRecords('nodes', {count: 10});

getOrCreateLinkedRecord(name: string, typeName: string, arguments?: ?Object)

GraphQL ドキュメントで定義されているように、フィールド名を指定して、現在のレコードに関連付けられたレコードを取得します。リンクされたレコードが存在しない場合は、型名を指定して作成されます。RecordProxy を返します。

例

GraphQL ドキュメント

rootField {
  viewer {
    id
  }
}

使用法

const rootField = store.getRootField('rootField');
const newViewer = rootField.getOrCreateLinkedRecord('viewer', 'User'); // Will create if it doesn't exist

オプションで、リンクされたレコードが引数を受け取る場合、variables のバッグも渡すことができます。

setValue(value: mixed, name: string, arguments?: ?Object): RecordProxy

指定されたフィールドに新しい値を設定することにより、現在のレコードをミューテートします。ミューテートされたレコードを返します。

GraphQL ドキュメント

viewer {
  id
  name
}

使用法

viewer.setValue('New Name', 'name');

オプションで、フィールドが引数を受け取る場合、variables のバッグを渡すことができます。

viewer.setValue('New Name', 'name', {arg: 'value'});

copyFieldsFrom(sourceRecord: RecordProxy): void

渡されたレコード sourceRecord からフィールドをコピーすることにより、現在のレコードをミューテートします。

例

const record = store.get(id1);
const otherRecord = store.get(id2);
record.copyFieldsFrom(otherRecord); // Mutates `record`

setLinkedRecord(record: RecordProxy, name: string, arguments?: ?Object)

指定されたフィールド名に新しいリンクされたレコードを設定することにより、現在のレコードをミューテートします。

例

GraphQL ドキュメント

rootField {
  viewer {
    id
  }
}

使用法

const rootField = store.getRootField('rootField');
const newViewer = store.create(/* ... */);
rootField.setLinkedRecord(newViewer, 'viewer');

オプションで、リンクされたレコードが引数を受け取る場合、variables のバッグも渡すことができます。

setLinkedRecords(records: Array<RecordProxy>, name: string, variables?: ?Object)

指定されたフィールド名に新しいリンクされたレコードのセットを設定することにより、現在のレコードをミューテートします。

例

GraphQL ドキュメント

rootField {
  nodes {
    # ...
  }
}

使用法

const rootField = store.getRootField('rootField');
const newNode = store.create(/* ... */);
const newNodes = [...rootField.getLinkedRecords('nodes'), newNode];
rootField.setLinkedRecords(newNodes, 'nodes');

オプションで、リンクされたレコードが引数を受け取る場合、variables のバッグも渡すことができます。

invalidateRecord(): void

レコードを無効にします。これにより、このレコードを参照するすべてのクエリは、次回フェッチされるまで古いとみなされ、environment.check()でクエリがチェックされる際には、次回のリフェッチが必要とみなされます。

例

const record = store.get('4');
record.invalidateRecord();

レコードを無効にした後、無効化されたレコードを参照し、リフェッチする前にチェックされたすべてのクエリは古いとみなされます。

environment.check(query) === 'stale'

ConnectionHandler

ConnectionHandlerは、relay-runtimeによって公開されるユーティリティモジュールであり、コネクションの操作を支援します。ConnectionHandlerは以下のインターフェースを公開します。

interface ConnectionHandler {
  getConnection(
    record: RecordProxy,
    key: string,
    filters?: ?Object,
  ): ?RecordProxy,
  createEdge(
    store: RecordSourceProxy,
    connection: RecordProxy,
    node: RecordProxy,
    edgeType: string,
  ): RecordProxy,
  insertEdgeBefore(
    connection: RecordProxy,
    newEdge: RecordProxy,
    cursor?: ?string,
  ): void,
  insertEdgeAfter(
    connection: RecordProxy,
    newEdge: RecordProxy,
    cursor?: ?string,
  ): void,
  deleteNode(connection: RecordProxy, nodeID: string): void
}

getConnection(record: RecordProxy, key: string, filters?: ?Object)

レコード、コネクションキー、およびオプションでフィルターのセットが与えられた場合、getConnectionは、@connectionディレクティブでアノテートされたコネクションを表すRecordProxyを取得します。

まず、プレーンなコネクションを見てみましょう。

fragment FriendsFragment on User {
  friends(first: 10) {
    edges {
      node {
        id
      }
    }
  }
}

このようにプレーンなコネクションフィールドにアクセスすることは、他の通常のフィールドと同じです。

// The `friends` connection record can be accessed with:
const user = store.get(userID);
const friends = user && user.getLinkedRecord('friends');

// Access fields on the connection:
const edges = friends && friends.getLinkedRecords('edges');

usePaginationFragmentを使用する場合、通常、実際のコネクションフィールドに@connectionでアノテートして、Relayにどの部分をページネーションする必要があるかを伝えます。

fragment FriendsFragment on User {
  friends(first: 10, orderby: "firstname") @connection(
    key: "FriendsFragment_friends",
  ) {
    edges {
      node {
        id
      }
    }
  }
}

上記のようなコネクションの場合、ConnectionHandlerはレコードを見つけるのに役立ちます。

import {ConnectionHandler} from 'relay-runtime';

// The `friends` connection record can be accessed with:
const user = store.get(userID);
const friends = ConnectionHandler.getConnection(
 user,                        // parent record
 'FriendsFragment_friends',   // connection key
 {orderby: 'firstname'}       // 'filters' that is used to identify the connection
);
// Access fields on the connection:
const edges = friends.getLinkedRecords('edges');

エッジの作成と挿入

createEdge(store: RecordSourceProxy, connection: RecordProxy, node: RecordProxy, edgeType: string)

store、コネクション、エッジノード、およびエッジタイプを指定して、エッジを作成します。

insertEdgeBefore(connection: RecordProxy, newEdge: RecordProxy, cursor?: ?string)

コネクションが与えられた場合、コネクションの先頭にエッジを挿入するか、指定されたcursorの前に挿入します。

insertEdgeAfter(connection: RecordProxy, newEdge: RecordProxy, cursor?: ?string)

コネクションが与えられた場合、コネクションの末尾にエッジを挿入するか、指定されたcursorの後に挿入します。

例

const user = store.get(userID);
const friends = ConnectionHandler.getConnection(user, 'FriendsFragment_friends');
const newFriend = store.get(newFriendId);
const edge = ConnectionHandler.createEdge(store, friends, newFriend, 'UserEdge');

// No cursor provided, append the edge at the end.
ConnectionHandler.insertEdgeAfter(friends, edge);

// No cursor provided, insert the edge at the front:
ConnectionHandler.insertEdgeBefore(friends, edge);

deleteNode(connection: RecordProxy, nodeID: string): void

コネクションが与えられた場合、ノードIDが与えられたIDと一致するすべてのエッジを削除します。

例

const user = store.get(userID);
const friends = ConnectionHandler.getConnection(user, 'FriendsFragment_friends');
ConnectionHandler.deleteNode(friends, idToDelete);

---

このページは役に立ちましたか？

サイトをさらに改善するために、 いくつかの簡単な質問にお答えください。.