TypeScript
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.
Both @apollo/client
and apollo-angular
ship with definitions in their npm
packages, so installation should be done for you after the libraries are
included in your project.
#
Operation resultThe 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
is an Object
by default).
#
OptionsTo 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.
#
Other usageIt is not only Apollo
service where you can use generic types for Options and
Variables. Same logic applies to QueryRef
object.