Apollo-angular: Support for Apollo-Client 2

[DxCx]

Hey!

what's the plans on supporting the new apollo client?

at the moment the only breaking change i've found was that apollo client changed to use default import instead of named import, but i cannot really confirm this is the only issue

[esistgut]

Considering that one of the main features for the new 2.0 client is the decoupling of the store apis and being ngrx the main store platform for angular... Can we expect some built in integration inside this project?

[DxCx]

@kamilkisiela @Urigo @jbaxleyiii @stubailo ?

[kamilkisiela]

I'll take a look at it soon, I'm just not yet familiar with all those new things, whole ecosystem of packages. Give me couple of days to come up with something. Maybe would it be a great chance to change the point of view on the current implementation. Will see.

[DxCx]

Well since its observable based now there are alot of code that can be refactored and removed from here but i think first step is to compile it vs alpha (or beta already) version and have a working release (only requires compile and publish vs latest client)

[abdulhaq-e]

I'm not sure but I think with the introduction of Apollo Link, this library can use angular's native http module (HttpClient).

[mrbfrank]

+1 I'm looking forward to trying apollo-client@beta with Angular4

[patriknil90]

Any updates on this? Looking forward to implement the 2.0 apollo client :)

[DxCx]

it's already working (Angular-Client@beta + latest apolo-angular)
however, i think this library needs a huge refactor to really support it properly and not just "work".

[kamilkisiela]

@DxCx Yes and that's what I'm going to do in two weeks.

[abdulhaq-e]

@kamilkisiela Do you mind writing a short plan on what is going to change, maybe the community can contribute ideas before implementing anything

[changalberto]

Does anyone have a working example if Apollo Client 2.0 in Angular 4 yet? Preferably with ngrx...

[changalberto]

@DxCx How did you get angular client @beta + latest apollo angular to work? I'm getting type errors...

ERROR in /Users/[user]/Projects/MyProject/Dev/proj/node_modules/apollo-client-rxjs/RxApolloClient.d.ts (2,45): Generic type 'ApolloClient<TCacheShape>' requires 1 type argument(s).
ERROR in /Users/[user]/Projects/MyProject/Dev/proj/node_modules/apollo-client-rxjs/rxify.d.ts (5,51): Generic type 'ApolloClient<TCacheShape>' requires 1 type argument(s).
ERROR in /Users/[user]/Projects/MyProject/Dev/proj/node_modules/apollo-angular/build/src/types.d.ts (3,21): Generic type 'ApolloClient<TCacheShape>' requires 1 type argument(s).
ERROR in /Users/[user]/Projects/MyProject/Dev/proj/node_modules/apollo-angular/build/src/types.d.ts (5,43): Generic type 'ApolloClient<TCacheShape>' requires 1 type argument(s).
ERROR in /Users/[user]/Projects/MyProject/Dev/proj/node_modules/apollo-angular/build/src/Apollo.d.ts (2,100): Module '"/Users/[user]/Projects/MyProject/Dev/proj/node_modules/apollo-client/index"' has no exported member 'ApolloExecutionResult'.
ERROR in /Users/[user]/Projects/MyProject/Dev/proj/node_modules/apollo-angular/build/src/Apollo.d.ts (11,25): Generic type 'ApolloClient<TCacheShape>' requires 1 type argument(s).
ERROR in /Users/[user]/Projects/MyProject/Dev/proj/node_modules/apollo-angular/build/src/Apollo.d.ts (16,18): Generic type 'ApolloClient<TCacheShape>' requires 1 type argument(s).

[DxCx]

package.json:

    "apollo-angular": "^0.13.1",
    "apollo-cache-inmemory": "^0.2.0-beta.0",
    "apollo-client": "^2.0.0-beta.0",
    "apollo-link": "^0.6.1-beta.0",

client.ts:

import ApolloClient from 'apollo-client';
import { default as InMemoryCache, NormalizedCache } from 'apollo-cache-inmemory'
let client: ApolloClient<NormalizedCache>;

export function provideClient(): ApolloClient<NormalizedCache> {
  if ( !client ) {
    client = new ApolloClient<NormalizedCache>({
      link: // >>>>> (provide a link),
      cache: new InMemoryCache().restore(window['__APOLLO_STATE__'] || {}),
    });
  }

  return client;
}

app.module.ts:

import { provideClient } from './client';
import { ApolloModule } from 'apollo-angular';

@NgModule({
  imports: [
    ApolloModule.withClient(provideClient),
    ....
  ],
  ....
})
export class AppModule {}

[changalberto]

@DxCx Still no go for me 😪

ERROR in /Users/[user]/Projects/Proj/Dev/proj/src/app/core/apollo/apollo.module.ts (32,31): Argument of type '{ link: ApolloLink; cache: InMemoryCache; }' is not assignable to parameter of type '{ link: ApolloLink; cache: ApolloCache<NormalizedCache>; ssrMode?: boolean; ssrForceFetchDelay?: ...'.
  Types of property 'link' are incompatible.
    Type 'ApolloLink' is not assignable to type 'ApolloLink'. Two different types with this name exist, but they are unrelated.
      Types of property 'split' are incompatible.
        Type '(test: (op: Operation) => boolean, left: ApolloLink | RequestHandler, right?: ApolloLink | Reques...' is not assignable to type '(test: (op: Operation) => boolean, left: ApolloLink | RequestHandler, right?: ApolloLink | Reques...'. Two different types with this name exist, but they are unrelated.
          Types of parameters 'left' and 'left' are incompatible.
            Type 'ApolloLink | RequestHandler' is not assignable to type 'ApolloLink | RequestHandler'. Two different types with this name exist, but they are unrelated.
              Type 'ApolloLink' is not assignable to type 'ApolloLink | RequestHandler'.
                Type 'ApolloLink' is not assignable to type 'RequestHandler'.
                  Type 'ApolloLink' provides no match for the signature '(operation: Operation, forward?: NextLink): Observable<any>'.
ERROR in /Users/[user]/Projects/Proj/Dev/proj/node_modules/apollo-client-rxjs/RxApolloClient.d.ts (2,45): Generic type 'ApolloClient<TCacheShape>' requires 1 type argument(s).
ERROR in /Users/[user]/Projects/Proj/Dev/proj/node_modules/apollo-client-rxjs/rxify.d.ts (5,51): Generic type 'ApolloClient<TCacheShape>' requires 1 type argument(s).
ERROR in /Users/[user]/Projects/Proj/Dev/proj/node_modules/apollo-angular/build/src/types.d.ts (3,21): Generic type 'ApolloClient<TCacheShape>' requires 1 type argument(s).
ERROR in /Users/[user]/Projects/Proj/Dev/proj/node_modules/apollo-angular/build/src/types.d.ts (5,43): Generic type 'ApolloClient<TCacheShape>' requires 1 type argument(s).
ERROR in /Users/[user]/Projects/Proj/Dev/proj/node_modules/apollo-angular/build/src/Apollo.d.ts (2,100): Module '"/Users/[user]/Projects/Proj/Dev/proj/node_modules/apollo-client/index"' has no exported member 'ApolloExecutionResult'.
ERROR in /Users/[user]/Projects/Proj/Dev/proj/node_modules/apollo-angular/build/src/Apollo.d.ts (11,25): Generic type 'ApolloClient<TCacheShape>' requires 1 type argument(s).
ERROR in /Users/[user]/Projects/Proj/Dev/proj/node_modules/apollo-angular/build/src/Apollo.d.ts (16,18): Generic type 'ApolloClient<TCacheShape>' requires 1 type argument(s).

This is what my code looks like:

// Angular Core
import { NgModule, ModuleWithProviders } from '@angular/core';

// Import Apollo Libs
import { ApolloLink } from 'apollo-link';
import ApolloClient from 'apollo-client';
import { default as InMemoryCache, NormalizedCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';

import { environment } from '../../../environments/environment';

import { ApolloModule as ApolloNgModule } from 'apollo-angular';

const link = ApolloLink.from([
  new HttpLink({ uri: '/graphql' })
]);

let client: ApolloClient<NormalizedCache>;

export function provideClient(): ApolloClient<NormalizedCache> {
  if (!client) {
    client = new ApolloClient({
      link: link,
      cache: new InMemoryCache(),
    });
  }
  return client;
}

@NgModule({
  imports: [
    ApolloNgModule.forRoot(provideClient)
  ]
})
export class ApolloModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: ApolloModule,
      providers: [],
    }
  }
}

My package.json has:

    "apollo-angular": "^0.13.2",
    "apollo-cache-inmemory": "^0.2.0-beta.4",
    "apollo-client": "^2.0.0-beta.4",
    "apollo-link": "^0.6.1-beta.6",
    "apollo-link-http": "^0.7.0",

I'm hoping this makes more sense to you, and maybe can point me in the right direction. Much appreciated.

[DxCx]

hmm, i would first try downgrading packages to the one worked for me, i haven't tried with latest yet.
if not looks like some later change broke it again, @kamilkisiela how is it going with offical support?

[kamilkisiela]

@DxCx Fantastic news! Expect it to be done in next few days! :) :tada:

Supper pumped about the possibilities the next version will bring!!! :bomb:
Stay tuned!

[changalberto]

@kamilkisiela Don't hype me up too much. I'm expecting this to be done by Sat then!
I look forward to the good new =)

[kamilkisiela]

Ok, we have it!

377 - it's a preview of v1.0, looking forward to hear your thoughts about it

[beta]

Thanks for mentioning me and informing me of this awesome project lol 😆

[imakshath]

Hi, I'm using Apollo angular with ngrx and using ngrx effects for graphql queries. is this the right approach?

[patricknazar]

@akshath4u probably not the right place to ask this question. I put my apollo angular code in services, and call the services in the effects.