渲染連線

在 Relay 中，為了顯示由 GraphQL 連線支援的資料列表，首先您需要宣告一個查詢連線的片段

const {graphql} = require('RelayModern');

const userFragment = graphql`
  fragment UserFragment on User {
    name
    friends(after: $cursor, first: $count)
      @connection(key: "UserFragment_friends") {
      edges {
        node {
          ...FriendComponent
        }
      }
    }
  }
`;

• 在上面的範例中，我們正在查詢 friends 欄位，這是一個連線；換句話說，它符合連線規範。具體來說，我們可以查詢連線中的 edges 和 node；edges 通常包含關於實體之間關係的資訊，而 node 則是關係另一端的實際實體；在本例中，node 是類型為 User 的物件，表示使用者的朋友。
• 為了向 Relay 指示我們想要對這個連線執行分頁，我們需要使用 @connection 指令標記該欄位。我們還必須為這個連線提供一個靜態唯一識別符，稱為 key。我們建議使用以下連線金鑰的命名慣例：<fragment_name>_<field_name>。
• 稍後我們將更詳細地說明為什麼需要在我們的更新連線章節中將欄位標記為 @connection 並給予它一個唯一的 key。

為了渲染這個查詢連線的片段，我們可以使用 usePaginationFragment Hook

import type {FriendsListComponent_user$key} from 'FriendsList_user.graphql';

const React = require('React');
const {Suspense} = require('React');

const {graphql, usePaginationFragment} = require('react-relay');

type Props = {
  user: FriendsListComponent_user$key,
};

function FriendsListComponent(props: Props) {
  const {data} = usePaginationFragment(
    graphql`
      fragment FriendsListComponent_user on User
      @refetchable(queryName: "FriendsListPaginationQuery") {
        name
        friends(first: $count, after: $cursor)
        @connection(key: "FriendsList_user_friends") {
          edges {
            node {
              ...FriendComponent
            }
          }
        }
      }
    `,
    props.user,
  );


  return (
    <>
      {data.name != null ? <h1>Friends of {data.name}:</h1> : null}

      <div>
        {/* Extract each friend from the resulting data */}
        {(data.friends?.edges ?? []).map(edge => {
          const node = edge.node;
          return (
            <Suspense fallback={<Glimmer />}>
              <FriendComponent user={node} />
            </Suspense>
          );
        })}
      </div>
    </>
  );
}

module.exports = FriendsListComponent;

• usePaginationFragment 的行為與 useFragment 相同（請參閱片段章節），因此我們的朋友列表可以在 data.friends.edges.node 下使用，如片段所宣告。但是，它也有一些附加功能
  • 它期望一個以 @connection 指令標註的連線欄位片段
  • 它期望一個以 @refetchable 指令標註的片段。請注意，@refetchable 指令只能新增到「可重新提取」的片段，也就是在 Viewer、Query、任何實現 Node 的類型（即具有 id 欄位的類型）或在 @fetchable 類型上的片段。
• 它採用兩個 Flow 類型參數：產生的查詢類型（在我們的案例中為 FriendsListPaginationQuery），以及第二個永遠可以被推斷的類型，因此您只需要傳遞底線 (_)。

---

這個頁面有用嗎？

請透過回答幾個快速問題，幫助我們讓網站更好 回答幾個快速問題.