首頁猿問如何在不重復(fù)片段的情況下傳遞道具

如何在不重復(fù)片段的情況下傳遞道具

JavaScript

大話西游666 2023-09-07 10:10:11

我的父組件最終帶有如下所示的嵌套片段：query MyAppQuery( $id $a $b $c) { viewer { ...App_viewer ...ComponentA_viewer @include(if: $a) ...ComponentB_viewer @include(if: $b) ...ComponentC_viewer @include(if: $c) } allEmployees: allUsers(userType: "1") { ...ComponentA_allEmployees @include(if: $a) ...ComponentB_allEmployees @include(if: $b) ...ComponentC_allEmployees @include(if: $c) }};如果我不包含所有這些子片段，則中繼會(huì)失敗，但所有這些子片段的數(shù)據(jù)都是相同的，必須在需要登錄用戶的所有子組件上聲明視圖片段似乎很愚蠢。如何在應(yīng)用程序頂部請(qǐng)求這段數(shù)據(jù)并將其提供給子組件，而不必包含所有這些片段。這開始感覺像是反向螺旋鉆探，我必須在應(yīng)用程序的下端聲明一個(gè)片段并將其傳遞到鏈上。與所有員工相同。這是相同的數(shù)據(jù)，我應(yīng)該只獲取一次并通過上下文傳遞或訪問，但我必須傳遞所有這些愚蠢的片段或中繼抱怨。

查看完整描述

1 回答

largeQ

TA貢獻(xiàn)2039條經(jīng)驗(yàn) 獲得超8個(gè)贊

這是 Relay 的核心模式，盡管很冗長(zhǎng)，但實(shí)際上是高度鼓勵(lì)的。

在 Relay 中，鼓勵(lì)子組件以片段的形式自行指定其數(shù)據(jù)需求。

最終，您將積累大量碎片，這些碎片會(huì)傳播到應(yīng)用程序的其他地方，因此值得指出一些關(guān)鍵的 Relay 功能來說明為什么這是好的：

如果您聲明多個(gè)彼此相鄰的片段請(qǐng)求相同的字段，Relay 不會(huì)向您的 API 發(fā)送重復(fù)的請(qǐng)求。相反，它們將在一次往返中全部獲取一次。您不必?fù)?dān)心引入過度獲取/重復(fù)查詢問題，因?yàn)樗鼈冊(cè)?Relay 中不存在。
graphqlRelay 通過 Relay 編譯器引入了一個(gè)編譯步驟，該步驟可以智能地分析您的 GraphQL 架構(gòu)以及您在代碼中定義的任何模板標(biāo)簽。這會(huì)生成artifacts，它有助于自動(dòng)管理數(shù)據(jù)獲取和更新中繼存儲(chǔ)，因此您不必這樣做。通過聲明大量片段，您可以有效地告訴編譯器和存儲(chǔ)組件的數(shù)據(jù)要求，即使它們是相同/相似的。復(fù)制是 Relay 的偉大之處。
位于樹根部的 QueryRenderer 祖先將處理實(shí)際的獲取，并且您在樹中較低的子組件上定義的片段會(huì)指示 Relay Compiler 和 Store 在獲取數(shù)據(jù)后將數(shù)據(jù)發(fā)送到何處。這是從#2 得出的。

因此，簡(jiǎn)而言之，要充分利用 Relay，請(qǐng)使用片段聲明組件的數(shù)據(jù)需求，并讓 Relay 完成繁重的工作，而不必?fù)?dān)心重復(fù)和缺乏可重用性。這對(duì)你有利。

反對(duì) 回復(fù) 2023-09-07