儲存

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 schema 定義的 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 schema 定義的目前紀錄的類型。

範例

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);

---

這個頁面有用嗎？

請協助我們透過 回答幾個快速問題來讓網站變得更好.