slides.com/gerardsans | @gerardsans
800
500
Yay! Released!
source: blog
// Query
{
user(name: "gsans") {
twitter
}
}
// Result
{
"user": {
"twitter": "@gerardsans"
}
}
source: blog
schema {
query: Query,
mutation: Mutation
}
type Query {
allTodoes(skip: Int, take: Int): [Todo!]!
}
type Todo {
id: ID!
text: String!
complete: Boolean!
}
schema {
query: Query,
mutation: Mutation
}
type Mutation {
createTodo(text: String!, complete: Boolean!): Todo
updateTodo(id: ID!, text: String, complete: Boolean): Todo
}
<app>
<add-todo>
<input><button>Add todo</button>
</add-todo>
<todo-list>
<ul>
<todo id="0" completed="false"><li>buy milk</li></todo>
</ul>
</todo-list>
<filters>
Show: <filter-link><a>All</a><filter-link> ...
</filters>
</app>
Dan Abramov
// client.ts
import ApolloClient, { createNetworkInterface } from 'apollo-client';
export const client = new ApolloClient({
networkInterface: createNetworkInterface('https://api.graph.cool/ZZZ'),
});
// app.module.ts
import { client } from 'apollo-client';
import { ApolloModule } from 'angular2-apollo';
import { App } from './app.component';
@NgModule({
imports: [
BrowserModule,
ApolloModule.withClient(client)
],
declarations: [ App ],
bootstrap: [ App ]
})
class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
// app.component.ts
@Component({ ... })
export class App {
constructor(private apollo: Angular2Apollo){
apollo.query({
query: gql`query todos {
allTodoes { id complete text } }`,
forceFetch: true
}).then(result => {
// result.data.allTodoes
}).catch(error => {
console.log(`Error: ${error.message}`);
});
}
}
// todo.component.ts
@Component({ ... })
export class Todo {
private onTodoClick(){
this.apollo.mutate({
mutation: gql`
mutation toggleTodo($id: ID!, $complete: Boolean!) {
updateTodo(id: $id, complete: $complete) { id complete }
}`,
variables: { id: this.id, complete: !this.complete }
}).then(({ data }) => { // data.updateTodo.id });
}
}
// todoList.component.ts
@Component({
template:
`<todo *ngFor="let todo of todos | async">{{todo.text}}</todo>`
})
class TodoList implements OnInit {
data: ApolloQueryObservable<any>;
constructor(private apollo: Angular2Apollo) { }
ngOnInit() {
this.data = this.apollo.watchQuery({ query: todosQuery })
.map(({data}) => data.allTodoes);
}
// onRefresh = this.data.refetch;
}