解决 graphql 查询联合结果时出现意外 Missing Field 错误（Vue Apollo 客户端）

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) 当我将 message 字段添加到 Comment 时出现错误，但它与 Post 无关。我猜测 message 字段在写入本地存储时被强制使用 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

我做错了什么？

我确实按照文档中的描述向 apollo 缓存添加了可能的类型：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 用于 Apollo InMemoryCache 时，它有所帮助，如下所述：https://www.apollographql.com/docs/react/v2/data/fragments/#fragments-on-unions-and-interfaces

Answer 2

由于 Apollo InMemoryCache 引发此错误。 Refreshing the browser window solved the error.

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

解决 graphql 查询联合结果时出现意外 Missing Field 错误（Vue Apollo 客户端）

Unexpected Missing Field error while solving union result on graphql query ( Vue Apollo Client )

graphql

apollo-client

graphql-js

vue-apollo

解决 graphql 查询联合结果时出现意外 *Missing Field* 错误（Vue Apollo 客户端）

Unexpected *Missing Field* error while solving union result on graphql query ( Vue Apollo Client )

graphql

apollo-client

graphql-js

vue-apollo

解决 graphql 查询联合结果时出现意外 Missing Field 错误（Vue Apollo 客户端）

Unexpected Missing Field error while solving union result on graphql query ( Vue Apollo Client )