TypeScript

You can take an advantage of using TypeScript with apollo-angular.

Generic types

Every result of a GraphQL query is a type of ApolloQueryResult. It means that the actual data lives under data property. The default type of that property is just a simple object, but you can easily change it.

To add an interface to the result, just specify a generic type when using methods like watchQuery, mutate and more.

For an example, let’s take a look at one of them:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
interface User {
username: string;
email: string;
}

interface QueryResponse {
currentUser: User;
}

const UserQuery = gql`
query currentUser {
currentUser {
username
email
}
}
`;


class AppComponent {
user: User;

ngOnInit() {
this.apollo.watchQuery<QueryResponse>({ query: UserQuery })
.map(({data}) => data.currentUser);
}
}

Now, the data property has a type of QueryResponse.
Thanks to this, you can prevent many bugs and keep the structure of your data predictable.

Edit on GitHub