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

Question

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

我最近实现了订阅功能，它似乎确实有效，但每当我对 link 投票时，我都会在 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。我不确定我在这里遗漏了什么导致了这个错误。一切似乎都正常，但我想知道为什么会不断抛出此错误。

Answer 1

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

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

Uncaught Invariant Violation: Store error

store

go

graphql

graphql-subscriptions

vue-apollo