+*Angular Modules*, also known as *NgModules*, are the powerful new way to organize and bootstrap your Angular application.
+
+
ApolloModule
+
If you want to define the default *ApolloClient* to be used by `Angular2Apollo` service, you can use `defaultApolloClient` provider.
```ts
-import {
- bootstrap
-} from '@angular/platform-browser-dynamic';
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { ApolloModule, defaultApolloClient } from 'angular2-apollo';
+import ApolloClient, { createNetworkInterface } from 'apollo-client';
+
+import { AppComponent } from './app.component';
+
+const client = new ApolloClient({
+ networkInterface: createNetworkInterface('http://localhost:8080')
+});
-import {
- defaultApolloClient,
- APOLLO_PROVIDERS
-} from 'angular2-apollo';
+@NgModule({
+ imports: [
+ BrowserModule,
+ ApolloModule,
+ ],
+ declarations: [ AppComponent ],
+ providers: [ defaultApolloClient(client) ],
+ bootstrap: [ AppComponent ],
+})
+class AppModule {}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
+```
-import ApolloClient, {
- createNetworkInterface
-} from 'apollo-client';
+
ApolloModule.withClient
-import {
- MyAppClass
-} from './app/';
+You can also define the default *ApolloClient* to be used by `Angular2Apollo` service, by using `ApolloModule.withClient`.
+
+```ts
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { ApolloModule } from 'angular2-apollo';
+import ApolloClient, { createNetworkInterface } from 'apollo-client';
+
+import { AppComponent } from './app.component';
const client = new ApolloClient({
networkInterface: createNetworkInterface('http://localhost:8080')
});
-bootstrap(, [
- APOLLO_PROVIDERS,
- defaultApolloClient(client)
- ]);
+@NgModule({
+ imports: [
+ BrowserModule,
+ ApolloModule.withClient(client),
+ ],
+ declarations: [ AppComponent ],
+ bootstrap: [ AppComponent ],
+})
+class AppModule {}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
```
Angular2Apollo service
@@ -53,21 +86,14 @@ This service allows you to bind queries and call mutations.
Since you previously used `APOLLO_PROVIDERS` to bootstrap you app, it is possible now just to define `Angular2Apollo` service inside the constructor.
```ts
-import {
- Component,
- Injectable
-} from '@angular/core';
-
-import {
- Angular2Apollo
-} from 'angular2-apollo';
+import { Component } from '@angular/core';
+import { Angular2Apollo } from 'angular2-apollo';
@Component({
- selector: 'postsList',
- templateUrl: 'client/postsList.html'
+ selector: 'posts-list',
+ templateUrl: 'client/posts-list.component.html'
})
-@Injectable()
-class postsList {
+class PostsListComponent {
constructor(private angularApollo : Angular2Apollo) {
}
}
@@ -82,22 +108,16 @@ Here's how you could run a query:
```ts
import 'rxjs';
-import {
- Component
-} from '@angular/core';
-
-import {
- Angular2Apollo,
- ApolloQueryObservable
-} from 'angular2-apollo';
+import { Component } from '@angular/core';
+import { Angular2Apollo, ApolloQueryObservable } from 'angular2-apollo';
import gql from 'graphql-tag';
@Component({
- selector: 'postsList',
- templateUrl: 'client/postsList.html'
+ selector: 'posts-list',
+ templateUrl: 'client/posts-list.component.html'
})
-class postsList {
+class PostsListComponent {
posts: ApolloQueryObservable;
constructor(private angularApollo : Angular2Apollo) {
@@ -126,21 +146,16 @@ If you just want to fetch a query you can use `query` method with the same argum
Here's how you could run a query:
```ts
-import {
- Component
-} from '@angular/core';
-
-import {
- Angular2Apollo
-} from 'angular2-apollo';
+import { Component } from '@angular/core';
+import { Angular2Apollo } from 'angular2-apollo';
import gql from 'graphql-tag';
@Component({
- selector: 'postsList',
- templateUrl: 'client/postsList.html'
+ selector: 'posts-list',
+ templateUrl: 'client/posts-list.component.html'
})
-class postsList {
+class PostsListComponent {
posts: any[] = [];
constructor(private angularApollo : Angular2Apollo) {
@@ -163,34 +178,82 @@ class postsList {
}
```
+**Variables with observable values**
+
+You can specify variables values as observables. Every time those observables emit new values, the query is rebuild.
+
+```ts
+import { Component, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { Angular2Apollo, ApolloQueryObservable } from 'angular2-apollo';
+import { Subject } from 'rxjs/Subject';
+
+import gql from 'graphql-tag';
+
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/debounceTime';
+
+@Component({
+ selector: 'search',
+ template: `
+
+
+
+
+ {{result.title}}
+
+
+ `
+})
+class SearchComponent implements OnInit {
+ results: ApolloQueryObservable;
+ searchControl = new FormControl();
+ search: Subject = new Subject();
+
+ constructor(private angularApollo : Angular2Apollo) {}
+
+ ngOnInit() {
+ this.results = angularApollo.query({
+ query: gql`
+ query getResults($search: String) {
+ results(title: $search) {
+ title
+ }
+ }
+ `,
+ variables: {
+ title: this.search
+ }
+ }).map(response => response.data.results);
+
+ this.searchControl.valueChanges
+ .debounceTime(300)
+ .subscribe(search => {
+ this.search.next(search);
+ });
+ }
+}
+```
+
+It is important to know that it is possible to mix observable values with primitive values.
+
Mutations
-To call a mutation you can use `mutate` method with the same arguments as [`ApolloClient#mutate`](mutations.html#mutate). In this case as the result you will receive a promise that resolves to a GraphQLResult.
+To call a mutation you can use `mutate` method with the same arguments as [`ApolloClient#mutate`](mutations.html#mutate). In this case as the result you will receive a promise that resolves to a ApolloQueryResult.
Here's how you would call a mutation and pass in arguments via variables:
```ts
-import {
- Component,
- Injectable
-} from '@angular/core';
-
-import {
- Angular2Apollo
-} from 'angular2-apollo';
+import { Component } from '@angular/core';
+import { Angular2Apollo } from 'angular2-apollo';
import gql from 'graphql-tag';
-import {
- graphQLResult
-} from 'graphql';
-
@Component({
- selector: 'postsList',
- templateUrl: 'client/postsList.html'
+ selector: 'posts-list',
+ templateUrl: 'client/posts-list.component.html'
})
-@Injectable()
-class postsList {
+class PostsListComponent {
constructor(private angularApollo : Angular2Apollo) {
}
@@ -226,16 +289,12 @@ class postsList {
category_id: categoryId,
raw: raw,
}
- }).then((graphQLResult) => {
- const { errors, data } = graphQLResult;
+ }).then((result) => {
+ const { data } = result;
if (data) {
console.log('got data', data);
}
-
- if (errors) {
- console.log('got some GraphQL execution errors', errors);
- }
}).catch((error) => {
console.log('there was an error sending the query', error);
});
@@ -277,17 +336,9 @@ It is also reactive so your variables will be always up to date.
Here's how you could run a query:
```ts
-import {
- Component, Injectable
-} from '@angular/core';
-
-import {
- Apollo
-} from 'angular2-apollo';
-
-import ApolloClient, {
- createNetworkInterface
-} from 'apollo-client';
+import { Component } from '@angular/core';
+import { Apollo } from 'angular2-apollo';
+import ApolloClient, { createNetworkInterface } from 'apollo-client';
import gql from 'graphql-tag';
@@ -296,13 +347,12 @@ const client = new ApolloClient({
});
@Component({
- selector: 'postsList',
- templateUrl: 'client/postsList.html'
+ selector: 'posts-list',
+ templateUrl: 'client/posts-list.component.html'
})
-@Injectable()
@Apollo({
client,
- queries(context) {
+ queries(context: PostsListComponent) {
return {
data: {
query: gql`
@@ -322,7 +372,7 @@ const client = new ApolloClient({
};
}
})
-class postsList {
+class PostsListComponent {
public tag: string = '1234';
public data: any;
}
@@ -338,22 +388,10 @@ It is also reactive so your variables will be always up to date.
Here's how you could run a mutation:
```ts
-import {
- Component,
- Injectable
-} from '@angular/core';
-
-import {
- Apollo
-} from 'angular2-apollo';
+import { Component } from '@angular/core';
+import { Apollo } from 'angular2-apollo';
-import {
- GraphQLResult
-} from 'graphql';
-
-import ApolloClient, {
- createNetworkInterface
-} from 'apollo-client';
+import ApolloClient, { createNetworkInterface, ApolloQueryResult } from 'apollo-client';
import gql from 'graphql-tag';
@@ -362,13 +400,12 @@ const client = new ApolloClient({
});
@Component({
- selector: 'postsList',
- templateUrl: 'client/postsList.html'
+ selector: 'posts-list',
+ templateUrl: 'client/posts-list.component.html'
})
-@Injectable()
@Apollo({
client,
- mutations(context) {
+ mutations(context: PostsListComponent) {
return {
postReply: ({
token,
@@ -404,21 +441,17 @@ const client = new ApolloClient({
};
}
})
-class postsList {
+class PostsListComponent {
public token: string = 'random';
reply(reply) {
this.postReply(reply)
- .then((result: GraphQLResult) => {
- const { errors, data } = result;
+ .then((result: ApolloQueryResult) => {
+ const { data } = result;
if (data) {
console.log('got data', data);
}
-
- if (errors) {
- console.log('got some GraphQL execution errors', errors);
- }
}).catch((error) => {
console.log('there was an error sending the query', error);
});