資訊專欄INFORMATION COLUMN
摘要：分鐘學(xué)是一個系列，簡單暴力，包學(xué)包會。一旦你丟失了，可能會導(dǎo)致寫入失敗，或者盡管寫入了，但本該攜帶的那一層的數(shù)據(jù)沒有寫入。
大坑 - 寫入數(shù)據(jù)失敗21 分鐘學(xué) apollo-client 是一個系列，簡單暴力，包學(xué)包會。
搭建 Apollo client 端，集成 redux
使用 apollo-client 來獲取數(shù)據(jù)
修改本地的 apollo store 數(shù)據(jù)
提供定制方案請求攔截
封裝修改 client 的 api
apollo store 存儲細(xì)節(jié)寫入 store 的失敗原因分析和解決方案
同志們注意啦！整個 apollo 的坑都集中在這里啦！
一旦返回的數(shù)據(jù)寫入 apollo store 失敗，會 靜默失敗 ，最終你發(fā)現(xiàn)怎么數(shù)據(jù)沒有發(fā)生任何變化？ （坑爹?。。?/p>
一個簡單的辦法是，你去 node_modules 下，把報(bào)錯信息暴露出來。是的，經(jīng)過閱讀源碼，我發(fā)現(xiàn)這已經(jīng)是最簡單的辦法了...
具體代碼在 node_modulesapollo-clientdatawriteToStore.js
如果這解決了你的問題，請給我打賞，謝謝。
寫入失敗的原因那什么時候會寫入失敗呢？
1. 寫入的數(shù)據(jù)，其結(jié)構(gòu)不符合 query schema
這意味著你不能基于 query schema 添加一些你本地需要的數(shù)據(jù)，比如 isSelected 什么的
2. 丟失 __typename 信息
不能丟失任何層級上的 __typename！
當(dāng)你 log fetchMoreResult 你會發(fā)現(xiàn)，它在很多層級上附帶了 __typename ，這個數(shù)據(jù)用于檢查寫入數(shù)據(jù)是否匹配 query schema。
一旦你丟失了 __typename ，可能會導(dǎo)致寫入失敗，或者盡管寫入了，但本該攜帶 __typename 的那一層的數(shù)據(jù)沒有寫入。
你可能說，那我當(dāng)心一點(diǎn)，總是使用 Object.assign 或者 { ...obj, a: 1 } 這種 spread 賦值的方式吧。
年輕人，你還是太天真啊！
如果你得到一組數(shù)據(jù)，嵌套的某一個值為 null ，那么它本來就不攜帶 __typename！
如果這個值為 null 的數(shù)據(jù)在你的 query schema 中確實(shí)需要 __typename，那即使你對這個數(shù)據(jù)重新賦值，也無法被寫入到 apollo store 中，因?yàn)槿鄙?__typename 信息。
上面這段話比較繞，給你看個例子。
假設(shè)你有這樣一個 query
query {
user { # typename 為 User
id
nickname
statistic { # typename 為 UserStatistic
upvoted
}
}
}
然后，得到一組數(shù)據(jù)
const prev = {
user: {
__typename: "User",
id: 1,
nickname: "apollo 真是坑爹啊",
statistic: null
}
}
為了 ui 顯示正常，你會給 statistic 設(shè)置一些默認(rèn)值
const next = {
...prev,
user: {
...prev.user,
statistic: {
upvoted: false,
}
}
}
如果你將 next 數(shù)據(jù) writeToStore 你就會就發(fā)現(xiàn) statistic 還是為 null，這些數(shù)據(jù)還是沒有被寫入 apollo store。
這是因?yàn)椋?b>user.statistic 在 schema 中定義的 type 是 UserStatistic，而原始數(shù)據(jù)由于為 null，所以本該自動附加的 __typename 屬性也不存在。這導(dǎo)致你在寫入 store 的時候，缺少了必要的 __typename 信息，apollo 將拒絕接受。
很扯吧。
要讓上面的代碼 work 起來，你需要
const next = {
...prev,
user: {
...prev.user,
statistic: {
upvoted: false,
+ __typename: "UserStatistic",
}
}
}
總結(jié)
如果沒有報(bào)錯消息的話，上面這種情況是極其難以排查的，尤其是我們特別容易遇到缺少 __typename 的場景。
為了減少此類事故的發(fā)生，你可以
和后端協(xié)商，不要返回 null 值
不論何時何地，何種層級，永遠(yuǎn)給數(shù)據(jù)手動添加 __typename
不用 apollo
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91919.html
摘要：分鐘學(xué)是一個系列，簡單暴力，包學(xué)包會。一旦組件掛載后，會自動進(jìn)行數(shù)據(jù)請求，前提是客戶端提供的和后端的相符。如果回調(diào)返回直接不作請求。在組件內(nèi)進(jìn)行分頁請求之前提到了，這個裝飾器為添加了對象，其中有個函數(shù)為。 21 分鐘學(xué) apollo-client 是一個系列，簡單暴力，包學(xué)包會。 搭建 Apollo client 端，集成 redux使用 apollo-client 來獲取數(shù)據(jù)修改本...
摘要：分鐘學(xué)是一個系列，簡單暴力，包學(xué)包會。搭建端，集成使用來獲取數(shù)據(jù)修改本地的數(shù)據(jù)提供定制方案請求攔截封裝修改的存儲細(xì)節(jié)寫入的失敗原因分析和解決方案修改本地?cái)?shù)據(jù)之前我們已經(jīng)知道，我們可以在請求結(jié)束之后，通過自動執(zhí)行的回調(diào)，修改。 21 分鐘學(xué) apollo-client 是一個系列，簡單暴力，包學(xué)包會。 搭建 Apollo client 端，集成 redux使用 apollo-clien...
摘要：分鐘學(xué)是一個系列，簡單暴力，包學(xué)包會。那怎么辦呢本章就教你非常簡單地實(shí)現(xiàn)擴(kuò)展的。我們可以借鑒的的寫法，為的實(shí)例添加一些自己的方法。更重要的是，也會有的效果，上一個的輸出會成為下一個的輸入，便于組合。 21 分鐘學(xué) apollo-client 是一個系列，簡單暴力，包學(xué)包會。 搭建 Apollo client 端，集成 redux使用 apollo-client 來獲取數(shù)據(jù)修改本地的 ...
摘要：分鐘學(xué)是一個系列，簡單暴力，包學(xué)包會。內(nèi)部通過自己的私有沒有暴露給開發(fā)者來更新這個。相當(dāng)于這個就是自己維護(hù)的，它將所有通過得到的數(shù)據(jù)保存在這里。的生成規(guī)則根據(jù)官方文檔的說法，在創(chuàng)建時，可選設(shè)置。如果不存在，則可能出現(xiàn)。 21 分鐘學(xué) apollo-client 是一個系列，簡單暴力，包學(xué)包會。 搭建 Apollo client 端，集成 redux使用 apollo-client 來...
摘要：分鐘學(xué)是一個系列，簡單暴力，包學(xué)包會。其中提到了等需要后端配合的東西，徒增了配置的復(fù)雜性。如果不行，再跟隨我的簡單步驟試試。環(huán)境要求請確保你已經(jīng)搭建了自己的環(huán)境下文在行號前添加表示刪除的原代碼，表示新增的代碼。 21 分鐘學(xué) apollo-client 是一個系列，簡單暴力，包學(xué)包會。 搭建 Apollo client 端，集成 redux使用 apollo-client 來獲取數(shù)據(jù)...
閱讀 1830·2023-04-26 01:55
閱讀 1090·2021-09-30 09:47
閱讀 1685·2019-08-30 15:54
閱讀 750·2019-08-30 15:53
閱讀 705·2019-08-30 15:52
閱讀 1145·2019-08-30 15:44
閱讀 2421·2019-08-30 14:06
閱讀 1070·2019-08-29 16:39
