As your application grows, you may find it helpful to include a type system to
assist in development. Apollo supports type definitions for TypeScript system.
apollo-angular ship with definitions in their npm
packages, so installation should be done for you after the libraries are
included in your project.
The most common need when using type systems with GraphQL is to type the results of an operation. Given that a GraphQL server's schema is strongly typed, we can even generate TypeScript definitions automaticaly using a tool like Graphql Code Generator. In these docs however, we will be writing result types manually.
Since the result of a query will be sent to the component or service, we want to be able to tell our type system the shape of it. Here is an example setting types for an operation using TypeScript:
Without specyfing a Generic Type for
Apollo.watchQuery, TypeScript would throw
an error saying that
hero property does not exist in
result.data object (it
Object by default).
To make integration between Apollo and Angular even more statically typed you can define the shape of variables (in query, watchQuery and mutate methods). Here is an example setting the type of variables:
With this addition, the entirety of the integration between Apollo and Angular can be statically typed. When combined with the strong tooling each system provides, it can make for a much improved application and developer experience.
It is not only
Apollo service where you can use generic types for Options and
Variables. Same logic applies to