意外*丢失字段*在解决graphql查询的联合结果时出错( Vue阿波罗客户端)

Question

我正在使用VueApollo进行GraphQL查询。

我确实有使用联合的查询，它在独立的GraphQL编辑器中工作。当我试图使用与每个类型不同的字段查询联合类型时，会出现问题。

我正在使用VueApollo智能查询接口。

下面是一个查询：

{
    notifications{
    id,
    message,
    recipient {
      id
      username
    }
    notificable {
      __typename
      ... on Comment {
        id
        commentable {
          ... on Post {
            __typename
            id
            title
          }
          ... on Comment { 
            __typename
            id
            message     
          }
        }
      }
    }   
    }
}

在解决查询结果时，我在控制台中接收到的错误：

instrument.js:109 Missing field message in {
  "__typename": "Post",
  "id": "999bf735-057b-4a69-a164-e2b09a0be2f1",
  "title": "Post"
}

(notifications.notificable.commentable)当我添加要注释的消息字段时会出现错误，但它与Post无关。我猜邮件字段是在写到本地商店时被迫使用Post类型的。

堆栈跟踪：

(anonymous) @   instrument.js:109
(anonymous) @   invariant.esm.js:29
(anonymous) @   bundle.esm.js:575
push../node_modules/apollo-cache-inmemory/lib/bundle.esm.js.StoreWriter.writeSelectionSetToStore    @   bundle.esm.js:551
(anonymous) @   bundle.esm.js:603
push../node_modules/apollo-cache-inmemory/lib/bundle.esm.js.StoreWriter.writeSelectionSetToStore    @   bundle.esm.js:551
push../node_modules/apollo-cache-inmemory/lib/bundle.esm.js.StoreWriter.writeFieldToStore   @   bundle.esm.js:649
(anonymous) @   bundle.esm.js:560
push../node_modules/apollo-cache-inmemory/lib/bundle.esm.js.StoreWriter.writeSelectionSetToStore    @   bundle.esm.js:551
(anonymous) @   bundle.esm.js:603
push../node_modules/apollo-cache-inmemory/lib/bundle.esm.js.StoreWriter.writeSelectionSetToStore    @   bundle.esm.js:551
push../node_modules/apollo-cache-inmemory/lib/bundle.esm.js.StoreWriter.writeFieldToStore   @   bundle.esm.js:649
(anonymous) @   bundle.esm.js:560
push../node_modules/apollo-cache-inmemory/lib/bundle.esm.js.StoreWriter.writeSelectionSetToStore    @   bundle.esm.js:551
(anonymous) @   bundle.esm.js:702
push../node_modules/apollo-cache-inmemory/lib/bundle.esm.js.StoreWriter.processArrayValue   @   bundle.esm.js:685
push../node_modules/apollo-cache-inmemory/lib/bundle.esm.js.StoreWriter.writeFieldToStore   @   bundle.esm.js:631
(anonymous) @   bundle.esm.js:560
push../node_modules/apollo-cache-inmemory/lib/bundle.esm.js.StoreWriter.writeSelectionSetToStore    @   bundle.esm.js:551
push../node_modules/apollo-cache-inmemory/lib/bundle.esm.js.StoreWriter.writeResultToStore  @   bundle.esm.js:529
push../node_modules/apollo-cache-inmemory/lib/bundle.esm.js.InMemoryCache.write @   bundle.esm.js:875
push../node_modules/apollo-client/bundle.esm.js.DataStore.markQueryResult   @   bundle.esm.js:1781
push../node_modules/apollo-client/bundle.esm.js.QueryManager.markQueryResult    @   bundle.esm.js:1201
(anonymous) @   bundle.esm.js:1642
next    @   Observable.js:322
notifySubscription  @   Observable.js:135
onNotify    @   Observable.js:179
next    @   Observable.js:235
(anonymous) @   bundle.esm.js:866
next

我做错什么了？

我确实向阿波罗缓存添加了可能的类型，如docs：https://www.apollographql.com/docs/react/data/fragments/#defining-possibletypes-manually中所描述的。

possibleTypes.json

{"Commentable":["Comment","Post"],"Node":["Post","User"],"Notificable":["Comment","Post"]}

这没什么用。

Answer 1

当我将IntrospectionFragmentMatcher用于阿波罗InMemoryCache时，它起了很大的作用：https://www.apollographql.com/docs/react/v2/data/fragments/#fragments-on-unions-and-interfaces

Answer 2

此错误是由于阿波罗InMemoryCache引发的。Refreshing the browser window solved the error。

如果失败，请重新启动开发服务器。