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

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

I am using VueApollo for GraphQL queries.

I do have query using unions and it works in standalone GraphQL editors. Problem appears when I am trying to query union type with fields that are different for each type.

I am using VueApollo smart query interface.

Here is a query:

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

The error I do receive in console while query result is being resolved:

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

(notifications.notificable.commentable) Error appears when I am adding message field to Comment but it has nothing to do with Post. I am guessing the message field is being forced on Post type while writing to local store.

Stacktrace:

(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

What I am doing wrong?

I did added possible types to apollo cache as described in docs: https://www.apollographql.com/docs/react/data/fragments/#defining-possibletypes-manually

possibleTypes.json

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

it did not helped.

Solution