CODEWITHSUNDEEP
javascriptangulartypesapolloapollo-client
Yordis Prieto Lazo
Yordis Prieto Lazo

Reputation: 830

Typescript fail with Apollo Client for Angular 2

I am trying to add Apollo Client to my Ionic Angular 2 app. I followed the official documentation.

I installed the packages

npm install apollo-client apollo-angular graphql-tag --save

I added Apollo Client instance

// src/apollo/client.ts
import { ApolloClient, createNetworkInterface } from 'apollo-client'

export const Client = new ApolloClient({
  networkInterface: createNetworkInterface({
    uri: 'http://localhost:4000/graphiql-tool',
    // opts: {
    //   credentials: 'same-origin',
    // },
  })
})

//app.module.ts
import { ApolloModule } from 'apollo-angular'
import { Client } from '../apollo/client'

@NgModule({
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    ApolloModule.forRoot(() => Client)
  ]
  // ...
})
export class AppModule {}

and I tried to run the app but the Typescript compilation fails

> ionic-app-scripts serve

[08:25:11]  ionic-app-scripts 1.3.7
[08:25:11]  watch started ...
[08:25:11]  build dev started ...
[08:25:11]  clean started ...
[08:25:11]  clean finished in 23 ms
[08:25:11]  copy started ...
[08:25:11]  transpile started ...
[08:25:15]  typescript: node_modules/apollo-client/core/types.d.ts, line: 17
            ',' expected.

      L16:  };
      L17:  export declare type ApolloExecutionResult<T = {
      L18:      [key: string]: any;

[08:25:15]  typescript: node_modules/apollo-client/core/types.d.ts, line: 17
            '>' expected.

      L16:  };
      L17:  export declare type ApolloExecutionResult<T = {
      L18:      [key: string]: any;

[08:25:15]  typescript: node_modules/apollo-client/core/types.d.ts, line: 19
            ';' expected.

      L18:      [key: string]: any;
      L19:  }> = {
      L20:      data?: T;

[08:25:15]  typescript: node_modules/apollo-client/core/types.d.ts, line: 19
            Expression expected.

      L18:      [key: string]: any;
      L19:  }> = {
      L20:      data?: T;

[08:25:15]  typescript: node_modules/apollo-client/core/types.d.ts, line: 20
            Expression expected.

      L19:  }> = {
      L20:      data?: T;
      L21:  };

There is even more errors like this one. I tried to find the answer but everything related to Typescript errors and Apollo Client but I have no good results on it.

The dependencies

"dependencies": {
    "@angular/common": "4.1.0",
    "@angular/compiler": "4.1.0",
    "@angular/compiler-cli": "4.1.0",
    "@angular/core": "4.1.0",
    "@angular/forms": "4.1.0",
    "@angular/http": "4.1.0",
    "@angular/platform-browser": "4.1.0",
    "@angular/platform-browser-dynamic": "4.1.0",
    "@ionic-native/core": "3.7.0",
    "@ionic-native/splash-screen": "3.7.0",
    "@ionic-native/status-bar": "3.7.0",
    "@ionic/storage": "2.0.1",
    "apollo-angular": "^0.13.0",
    "apollo-client": "^1.9.1",
    "graphql-tag": "^2.4.2",
    "ionic-angular": "3.2.1",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.10"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.7",
    "@ionic/cli-plugin-ionic-angular": "1.1.2",
    "ionic": "3.6.0",
    "typescript": "2.2.1"
  },

My typescript file

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5"
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

Upvotes: 0

Views: 1732

Answers (1)

Yordis Prieto Lazo
Yordis Prieto Lazo

Reputation: 830

Everything points to Typescript types definitions are wrong. Some of them disappear probably with some package update.

Right now the only one missing is

[10:38:46] 

 typescript: node_modules/@types/graphql/subscription/subscribe.d.ts, line: 17
            Cannot find name 'AsyncIterator'.

      L16:      subscribeFieldResolver?: GraphQLFieldResolver<any, any>
      L17:  ): AsyncIterator<ExecutionResult>;

[10:38:46]  typescript: node_modules/@types/graphql/subscription/subscribe.d.ts, line: 29
            Cannot find name 'AsyncIterable'.

      L28:      fieldResolver?: GraphQLFieldResolver<any, any>
      L29:  ): AsyncIterable<any>;

Which it is closed by this https://github.com/apollographql/graphql-subscriptions/issues/83

Upvotes: 1

Related Questions