Apollo Angular 2.0 + Apollo Client 3.0 #1383
Conversation
kamilkisiela
force-pushed
the
feat/v2
branch
2 times, most recently
from
6bcecf2
to
16b077b
Compare
kamilkisiela
force-pushed
the
feat/v2
branch
4 times, most recently
from
f8cf48e
to
d34f5a3
Compare
kamilkisiela
force-pushed
the
feat/v2
branch
3 times, most recently
from
dcacf04
to
024b8d8
Compare
|
Please <3 |
kamilkisiela
changed the title
|
First beta: @denniscalazans @migueldv90 @chalber @JesseZomer @MrGekko @PowerKiKi @jcviau @MSakamaki @ambientlight @loremaps @lars-berger @OLDIN @d2kx @gavindoughtie No migration doc yet but in general, everything can be now imported from Http and HttpBatch are now under There are no NgModules, everything has |
|
Feedback welcome, especially about bundle size :) I haven't test it yet, super super busy but I'm counting on you! |
|
Initial findings:
Overall, seems to be about ~15kb larger, mostly from a small bump in the InMemoryCache in AC3 and another small bump in size from GraphQL@15. Also similar to before, Apollo Client itself still seems to always import zen-observable, which I wish was not the case since we have RxJS.
Have yet to try it in a real world application. I guess the new cache features etc. are all not to relevant to apollo-angular and will get exposed through getClient() or update functions to mutations etc. Also ❤🌈 thank you for your work, Kamil!! ❤🌈 |
|
M E R G E <3 |
|
@kamilkisiela It needs to be removed from being re-exported. I would argue that |
|
And please update the docs on the main website, i was so confused looking for angular docs, in the top left menu, and the docs should use @apollo/client then asap - avoids confusion, thanks ! Keep up the great work |
|
@sascha1337 it's a beta release, I moved away from Apollo org so there's a lot of work with documentation. I need to setup a website, update docs, create a migration chapter etc. |
|
Ah okay, wish you all the best - any estimated time for a release? Would appreciate a small use-v2-now.md with minimal examples for the most used things, and the best way to use the beta / branch with package.json. Thank you a LOT. |
|
Released :) |
|
Executing |
|
@KeithGillette what about |
Thanks, @kamilkisiela! |
|
However, the schematics added the following to every single TypeScript file in the entire project: |
|
@KeithGillette |
|
Specifically, munged the |
|
Just wanted to report that for a new project, ng add with 2.0.2 worked flawlessly ❤ I also see nothing funny in the package.json. |
|
|
|
@KeithGillette @pickfire The previous version tried to remove comments from |
|
Yes, it works now. 🎉 |
|
Nice work 🚀! Are those utility dependencies no longer required? Removed graphql-tag dependency
Removed apollo-client dependency
Removed apollo-cache-inmemory dependency
Removed apollo-link dependency
Removed apollo-link-http dependency
Removed apollo-angular-link-http dependencyWhich looks a bit scary on first impression. |
|
I don't think I mentioned https://apollo-angular.com/docs/migration, there's pretty much everything you need to know about the new and old versions. Basically, there's one |
|
@kamilkisiela Thanks for linking Migration Guide | Apollo Angular 2.0.0-next with the following explanation. Much clearer now 😃 Helps more people landing here as initial searches jumped either old migrations, general or React details to the top of the listings) |
|
Still seeing the following issues with
Trivial:
|
|
Ended up tracking a resolution for the issue below while writing it up... Confusing;, requires attention to detail. Left notes here in case other people migrate and missed some points. Still in the progress of migrating other usages and hope no other issues arise. Missed some details in the many changes. Also, the Note from the apollo-angular.com/docs/migration:
Differences between apollo-angular
Is there a migration instruction for using Docs from other places are still confusing and our migration guide does not list at the top of search results. Could we have an interim note on https://www.apollographql.com/docs/angular/basics/setup/ https://www.apollographql.com/docs/angular/migration/ denoting the versions to avoid confusion?
// - FIXME: No longer able to create a HttpLinkHandler
const http: HttpLinkHandler = httpLink.create({
uri: 'http://localhost:3000/graphql'
});
// Create a WebSocket link:
const ws = new WebSocketLink({
uri: `ws://localhost:5000/`,
options: {
reconnect: true
}
});Do we still have the httpLink provided in The previous split link example (for real time subscription vs query/mutation) relied on creating a HttpLinkHandler from a provided httpLink (rather than calling Any ideas? https://www.apollographql.com/docs/angular/basics/setup/, again, the React docs seem more up-to-date. Looking at the declarations The apollo-angular.com migration before-after diff shows no difference, but my node_modules declarations of HttpLink before and after no longer has the From the installed node modules before and after. From the apollo-angular-2.0.0-next migration doc. @NgModule({
imports: [
// ... other modules
HttpClientModule,
- HttpLinkModule,
- ApolloModule,
],
providers: [
{
provide: APOLLO_OPTIONS,
useFactory(httpLink: HttpLink) {
return {
cache: new InMemoryCache(),
link: httpLink.create({
uri: 'http://localhost:3000',
}),
};
},
deps: [HttpLink],
},
],
})
class AppModule {}
// angular-apollo version
import { HttpClient } from '@angular/common/http';
import { ApolloLink, Observable as LinkObservable, Operation, FetchResult } from '@apollo/client/core';
import { Options } from './types';
import * as ɵngcc0 from '@angular/core';
export declare class HttpLinkHandler extends ApolloLink {
private httpClient;
private options;
requester: (operation: Operation) => LinkObservable<FetchResult> | null;
constructor(httpClient: HttpClient, options: Options);
request(op: Operation): LinkObservable<FetchResult> | null;
}
export declare class HttpLink {
private httpClient;
constructor(httpClient: HttpClient);
create(options: Options): HttpLinkHandler;
static ɵfac: ɵngcc0.ɵɵFactoryDef<HttpLink, never>;
}
//# sourceMappingURL=http-link.d.ts.map// apollo-client version
import { ApolloLink, RequestHandler } from '../core';
import { HttpOptions } from './selectHttpOptionsAndBody';
export declare class HttpLink extends ApolloLink {
options: HttpOptions;
requester: RequestHandler;
constructor(options?: HttpOptions);
}
//# sourceMappingURL=HttpLink.d.ts.map |
|
@KeithGillette nested imports of About
It's trivial, I could write the whole migration, we (The Guild work a lot with AST but it's time consuming and I don't want to invest a lot of time into it, just basics so someone could push it forward. |
Related: #1380 #1381 #1521 #1287 #1511 #1516 #1517 #1518 #1534
Waiting for:
Migration from Apollo Angular 1.0 to 2.0 is a matter of one single command: