未捕获的不变违规：存储错误

Posted 2023-03-10

【中文标题】未捕获的不变违规：存储错误

【英文标题】：Uncaught Invariant Violation: Store error

【发布时间】：2021-02-16 19:58:56

【问题描述】：

我正在尝试使用用 Go 编写的 graphql api 编写一个 HackerNews 克隆，并将 graph-gophers 包作为后端，以及一个以 apollo graphql-client 作为前端的 Vuejs 应用程序。相关 Github Repos Backend Frontend.

我最近实现了订阅功能，它似乎确实有效，但每当我对链接进行投票时，我都会在 javascript 控制台中收到一个令人讨厌的错误，其全文如下。

Observable.js?5234:65 Uncaught Invariant Violation: Store error: the application attempted to write an object with no provided id but the store already contains an id of Link:10 for this object. The selectionSet that was trying to be written is:
"kind":"Field","name":"kind":"Name","value":"link","arguments":[],"directives":[],"selectionSet":"kind":"SelectionSet","selections":["kind":"Field","name":"kind":"Name","value":"votes","arguments":[],"directives":[],"selectionSet":"kind":"SelectionSet","selections":["kind":"Field","name":"kind":"Name","value":"id","arguments":[],"directives":[],"kind":"Field","name":"kind":"Name","value":"user","arguments":[],"directives":[],"selectionSet":"kind":"SelectionSet","selections":["kind":"Field","name":"kind":"Name","value":"id","arguments":[],"directives":[],"kind":"Field","name":"kind":"Name","value":"__typename"],"kind":"Field","name":"kind":"Name","value":"__typename"],"kind":"Field","name":"kind":"Name","value":"__typename"]
    at new InvariantError (webpack-internal:///./node_modules/ts-invariant/lib/invariant.esm.js:16:28)
    at invariant (webpack-internal:///./node_modules/ts-invariant/lib/invariant.esm.js:28:15)
    at StoreWriter.writeFieldToStore (webpack-internal:///./node_modules/apollo-cache-inmemory/lib/bundle.esm.js:680:166)
    at eval (webpack-internal:///./node_modules/apollo-cache-inmemory/lib/bundle.esm.js:576:27)
    at Array.forEach (<anonymous>)
    at StoreWriter.writeSelectionSetToStore (webpack-internal:///./node_modules/apollo-cache-inmemory/lib/bundle.esm.js:567:33)
    at StoreWriter.writeFieldToStore (webpack-internal:///./node_modules/apollo-cache-inmemory/lib/bundle.esm.js:665:22)
    at eval (webpack-internal:///./node_modules/apollo-cache-inmemory/lib/bundle.esm.js:576:27)
    at Array.forEach (<anonymous>)
    at StoreWriter.writeSelectionSetToStore (webpack-internal:///./node_modules/apollo-cache-inmemory/lib/bundle.esm.js:567:33)
WriteError @ bundle.esm.js?d5b7:498
enhanceErrorWithDocument @ bundle.esm.js?d5b7:505
StoreWriter.writeResultToStore @ bundle.esm.js?d5b7:544
InMemoryCache.write @ bundle.esm.js?d5b7:875
eval @ bundle.esm.js?6445:1867
eval @ bundle.esm.js?6445:1867
InMemoryCache.performTransaction @ bundle.esm.js?d5b7:943
DataStore.markMutationResult @ bundle.esm.js?6445:1866
next @ bundle.esm.js?6445:1011
notifySubscription @ Observable.js?5234:135
onNotify @ Observable.js?5234:179
next @ Observable.js?5234:235
eval @ bundle.esm.js?6445:866
next @ bundle.esm.js?6445:866
notifySubscription @ Observable.js?5234:135
onNotify @ Observable.js?5234:179
next @ Observable.js?5234:235
eval @ bundle.esm.js?8322:76
setTimeout (async)
hostReportError @ Observable.js?5234:64
notifySubscription @ Observable.js?5234:149
onNotify @ Observable.js?5234:179
next @ Observable.js?5234:235
eval @ bundle.esm.js?6445:866
next @ bundle.esm.js?6445:866
notifySubscription @ Observable.js?5234:135
onNotify @ Observable.js?5234:179
next @ Observable.js?5234:235
eval @ bundle.esm.js?8322:76
Promise.then (async)
eval @ bundle.esm.js?8322:75
Subscription @ Observable.js?5234:197
subscribe @ Observable.js?5234:279
eval @ bundle.esm.js?6445:864
Subscription @ Observable.js?5234:197
subscribe @ Observable.js?5234:279
eval @ bundle.esm.js?6445:1001
eval @ bundle.esm.js?6445:998
step @ tslib.es6.js?4d3a:100
eval @ tslib.es6.js?4d3a:81
eval @ tslib.es6.js?4d3a:74
__awaiter @ tslib.es6.js?4d3a:70
QueryManager.mutate @ bundle.esm.js?6445:950
ApolloClient.mutate @ bundle.esm.js?6445:2016
mutate @ vue-apollo.esm.js?ebd5:1286
voteForLink @ LinkItem.vue?5bee:46
click @ LinkItem.vue?441e:18
invokeWithErrorHandling @ vue.esm.js?efeb:1863
invoker @ vue.esm.js?efeb:2188
original._wrapper @ vue.esm.js?efeb:7565

我已经进行了足够多的调试以确认我尝试添加到商店的任何内容都没有丢失任何 ID。我不确定我在这里缺少什么导致此错误。一切似乎都正常，但我想知道为什么这个错误不断被抛出。

【参考方案1】：

我最终想通了。错误的原因是在更新商店时发生 upvote 时，我一直专注于 graphql 模式中的投票订阅，而问题实际上是 upvote 突变。作为架构的一部分返回的链接缺少 id。

【讨论】：

也发生在我身上。我的案例中也缺少 ID，但它不是 GQL 查询中的***实体，而是内部实体！