GQL.fetch() causes TypeError: Cannot assign to read only property 'data' of object

[JohanHeyvaert]

I don't know if I'm encountering a bug or if I'm doing something wrong (I'm new to GraphQL, Apollo and this code generator).

The code generation seems to work fine, but I am getting the following error when the app tries to execute a query. I tried both with fetch() and watch().valueChanges; they both give this same error:
TypeError: Cannot assign to read only property 'data' of object
at QueryInfo.js:210
at perform (inMemoryCache.js:197)
at InMemoryCache.push.kifG.InMemoryCache.performTransaction (inMemoryCache.js:214)
at QueryInfo.push.FmZO.QueryInfo.markResult (QueryInfo.js:180)
at QueryManager.js:520
at asyncMap.js:11
at new ZoneAwarePromise (zone-evergreen.js:960)
at Object.next (asyncMap.js:11)
at notifySubscription (Observable.js:135)
at onNotify (Observable.js:179)

In Chrome's developer tools I can see that the query in fact is working: the server is returning the data.

The query is very simple:

query identify {
  identify(lastName: "dummy hard coded value") {
    id
    lastName
  }
}

I launch the query from an NgRx effect:

  public identify$ = createEffect(() =>
    this.actions$.pipe(
      ofType(Actions.identify),
      switchMap(action =>
        this.identifyGQL.fetch().pipe(
          map(queryResult => {
            console.log(queryResult);  // <--  sometimes shown in the console, sometimes not - the error is always shown though
            // this version doesn't have error handling for now, it's a simplified code, normally I use Nx's datapersistence features (I also have a global exception handler)

            // temporary result: I don't know yet how to "translate" the resulting data to a "known" type (queryResult has type any, so this is not very handy)
            return Actions.identifySucceeded({
              identifier: {
                id '123',
                lastName: 'dummy'
              } as Identifier
            });
          })
        )
      )
    )
  );

In the AppModule I don't do anything special, I just have added this provider:

{
      provide: APOLLO_OPTIONS,
      useFactory: (httpLink: HttpLink) => {
        return {
          cache: new InMemoryCache(),
          link: httpLink.create({
            uri: 'http://localhost:60798/graphql/'
          })
        };
      },
      deps: [HttpLink]
    }

I'm using this library in a project with Nx, Angular, NgRx and apollo-angular.
My package.json contains the following modules:
"@graphql-codegen/cli": "^1.19.4",
"@graphql-codegen/typescript-apollo-angular": "^2.2.1",
"@graphql-codegen/typescript-operations": "^1.17.12",
"@apollo/client": "^3.3.6",
"apollo-angular": "^2.1.0",
"graphql": "^15.4.0",

Your help is much appreciated!

[JohanHeyvaert]

Might help to know: bypassing the cache avoids the error and allows to retrieve the data correctly.

this.identifyGQL.fetch({}, { fetchPolicy: 'no-cache' })
.pipe(...)

[JohanHeyvaert]

I have the same problem when I write the fetch code myself, so the problem is not related to the graphql-code-generator but probably with the Apollo Client. I'll continue this discussion on their github.

[dotansimha]

As you noticed, it's not related directory to codegen. You are using Apollo-Angular, right? please make sure to update to latest version of it, and if it's still not working, please report an issue there. Thanks!