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

Posted 2023-03-08

【中文标题】解决 graphql 查询中的联合结果时出现意外的 *Missing Field* 错误（Vue Apollo 客户端）

【英文标题】：Unexpected *Missing Field* error while solving union result on graphql query ( Vue Apollo Client )

【发布时间】：2021-05-05 18:04:07

【问题描述】：

我正在使用 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"]

它没有帮助。

【参考方案1】：

当我将 IntrospectionFragmentMatcher 用于 Apollo InMemoryCache 时，它​​有所帮助：https://www.apollographql.com/docs/react/v2/data/fragments/#fragments-on-unions-and-interfaces

【参考方案2】：

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

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