21 分鐘學 apollo-client 系列：寫入失敗的原因和解決方案

Baoyuan 發(fā)布于2019-08-22 11:10 / 1445人閱讀

摘要：分鐘學是一個系列，簡單暴力，包學包會。一旦你丟失了，可能會導致寫入失敗，或者盡管寫入了，但本該攜帶的那一層的數(shù)據(jù)沒有寫入。

21 分鐘學 apollo-client 是一個系列，簡單暴力，包學包會。
搭建 Apollo client 端，集成 redux
使用 apollo-client 來獲取數(shù)據(jù)
修改本地的 apollo store 數(shù)據(jù)
提供定制方案

請求攔截

封裝修改 client 的 api
apollo store 存儲細節(jié)


寫入 store 的失敗原因分析和解決方案

大坑 - 寫入數(shù)據(jù)失敗

同志們注意啦！整個 apollo 的坑都集中在這里啦！

一旦返回的數(shù)據(jù)寫入 apollo store 失敗，會 靜默失敗 ，最終你發(fā)現(xiàn)怎么數(shù)據(jù)沒有發(fā)生任何變化？（坑爹啊！）

一個簡單的辦法是，你去 node_modules 下，把報錯信息暴露出來。是的，經(jīng)過閱讀源碼，我發(fā)現(xiàn)這已經(jīng)是最簡單的辦法了...

具體代碼在 node_modulesapollo-clientdatawriteToStore.js

如果這解決了你的問題，請給我打賞，謝謝。

寫入失敗的原因

那什么時候會寫入失敗呢？

1. 寫入的數(shù)據(jù)，其結構不符合 query schema
這意味著你不能基于 query schema 添加一些你本地需要的數(shù)據(jù)，比如 isSelected 什么的

2. 丟失 __typename 信息
不能丟失任何層級上的 __typename！

當你 log fetchMoreResult 你會發(fā)現(xiàn)，它在很多層級上附帶了 __typename ，這個數(shù)據(jù)用于檢查寫入數(shù)據(jù)是否匹配 query schema。
一旦你丟失了 __typename ，可能會導致寫入失敗，或者盡管寫入了，但本該攜帶 __typename 的那一層的數(shù)據(jù)沒有寫入。

你可能說，那我當心一點，總是使用 Object.assign 或者 { ...obj, a: 1 } 這種 spread 賦值的方式吧。

年輕人，你還是太天真啊！

如果你得到一組數(shù)據(jù)，嵌套的某一個值為 null ，那么它本來就不攜帶 __typename！
如果這個值為 null 的數(shù)據(jù)在你的 query schema 中確實需要 __typename，那即使你對這個數(shù)據(jù)重新賦值，也無法被寫入到 apollo store 中，因為缺少 __typename 信息。

上面這段話比較繞，給你看個例子。

假設你有這樣一個 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 設置一些默認值

const next = {
    ...prev,
    user: {
        ...prev.user,
        statistic: {
            upvoted: false,
        }
    }
}

如果你將 next 數(shù)據(jù) writeToStore 你就會就發(fā)現(xiàn) statistic 還是為 null，這些數(shù)據(jù)還是沒有被寫入 apollo store。

這是因為，user.statistic 在 schema 中定義的 type 是 UserStatistic，而原始數(shù)據(jù)由于為 null，所以本該自動附加的 __typename 屬性也不存在。這導致你在寫入 store 的時候，缺少了必要的 __typename 信息，apollo 將拒絕接受。

很扯吧。

要讓上面的代碼 work 起來，你需要

const next = {
    ...prev,
    user: {
        ...prev.user,
        statistic: {
            upvoted: false,
+            __typename: "UserStatistic",
        }
    }
}

總結

如果沒有報錯消息的話，上面這種情況是極其難以排查的，尤其是我們特別容易遇到缺少 __typename 的場景。

為了減少此類事故的發(fā)生，你可以

和后端協(xié)商，不要返回 null 值

不論何時何地，何種層級，永遠給數(shù)據(jù)手動添加 __typename

不用 apollo

GPU云服務器云服務器云服務器文件寫入失敗原因短信發(fā)送失敗的原因域名訪問失敗原因日志寫入失敗

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91919.html

21 分鐘學 apollo-client 系列：獲取數(shù)據(jù)

摘要：分鐘學是一個系列，簡單暴力，包學包會。一旦組件掛載后，會自動進行數(shù)據(jù)請求，前提是客戶端提供的和后端的相符。如果回調返回直接不作請求。在組件內進行分頁請求之前提到了，這個裝飾器為添加了對象，其中有個函數(shù)為。 21 分鐘學 apollo-client 是一個系列，簡單暴力，包學包會。搭建 Apollo client 端，集成 redux使用 apollo-client 來獲取數(shù)據(jù)修改本...

robin 2019-08-22 11:10 評論0 收藏0
21 分鐘學 apollo-client 系列：修改本地 store 數(shù)據(jù)

摘要：分鐘學是一個系列，簡單暴力，包學包會。搭建端，集成使用來獲取數(shù)據(jù)修改本地的數(shù)據(jù)提供定制方案請求攔截封裝修改的存儲細節(jié)寫入的失敗原因分析和解決方案修改本地數(shù)據(jù)之前我們已經(jīng)知道，我們可以在請求結束之后，通過自動執(zhí)行的回調，修改。 21 分鐘學 apollo-client 是一個系列，簡單暴力，包學包會。搭建 Apollo client 端，集成 redux使用 apollo-clien...

617035918 2019-08-22 11:10 評論0 收藏0
21 分鐘學 apollo-client 系列：擴展 ApolloClient 的 api

摘要：分鐘學是一個系列，簡單暴力，包學包會。那怎么辦呢本章就教你非常簡單地實現(xiàn)擴展的。我們可以借鑒的的寫法，為的實例添加一些自己的方法。更重要的是，也會有的效果，上一個的輸出會成為下一個的輸入，便于組合。 21 分鐘學 apollo-client 是一個系列，簡單暴力，包學包會。搭建 Apollo client 端，集成 redux使用 apollo-client 來獲取數(shù)據(jù)修改本地的 ...

levy9527 2019-08-22 11:10 評論0 收藏0
21 分鐘學 apollo-client 系列：apollo store 存儲細節(jié)

摘要：分鐘學是一個系列，簡單暴力，包學包會。內部通過自己的私有沒有暴露給開發(fā)者來更新這個。相當于這個就是自己維護的，它將所有通過得到的數(shù)據(jù)保存在這里。的生成規(guī)則根據(jù)官方文檔的說法，在創(chuàng)建時，可選設置。如果不存在，則可能出現(xiàn)。 21 分鐘學 apollo-client 是一個系列，簡單暴力，包學包會。搭建 Apollo client 端，集成 redux使用 apollo-client 來...

lavor 2019-08-22 11:10 評論0 收藏0
21 分鐘學 apollo-client 系列：簡單搭建

摘要：分鐘學是一個系列，簡單暴力，包學包會。其中提到了等需要后端配合的東西，徒增了配置的復雜性。如果不行，再跟隨我的簡單步驟試試。環(huán)境要求請確保你已經(jīng)搭建了自己的環(huán)境下文在行號前添加表示刪除的原代碼，表示新增的代碼。 21 分鐘學 apollo-client 是一個系列，簡單暴力，包學包會。搭建 Apollo client 端，集成 redux使用 apollo-client 來獲取數(shù)據(jù)...

ranwu 2019-08-22 11:09 評論0 收藏0