feature: added support for automatic type inference with typed-docume…

…nt-node

package.json

@@ -67,6 +67,7 @@
     }
   },
   "dependencies": {
+    "@graphql-typed-document-node/core": "0.0.1",
     "@types/zen-observable": "^0.8.0",
     "@wry/context": "^0.5.2",
     "@wry/equality": "^0.2.0",

src/__tests__/ApolloClient.ts

@@ -13,6 +13,7 @@ import { ApolloLink } from '../link/core';
 import { HttpLink } from '../link/http';
 import { InMemoryCache } from '../cache';
 import { stripSymbols } from '../testing';
+import { TypedDocumentNode } from '@graphql-typed-document-node/core';
 
 describe('ApolloClient', () => {
   describe('constructor', () => {
@@ -1210,6 +1211,22 @@ describe('ApolloClient', () => {
       }
 
       describe('using writeQuery', () => {
+        it('with TypedDocumentNode', async () => {
+          const client = newClient();
+
+          // This is defined manually for the purpose of the test, but
+          // eventually this could be generated with graphql-code-generator
+          const typedQuery: TypedDocumentNode<Data, { testVar: string }> = query;
+
+          // The result and variables are being typed automatically, based on the query object we pass,
+          // and type inference is done based on the TypeDocumentNode object.
+          const result = await client.query({ query: typedQuery, variables: { testVar: 'foo' } });
+
+          // Just try to access it, if something will break, TS will throw an error
+          // during the test
+          result.data?.people.friends[0].id;
+        });
+
         it('with a replacement of nested array (wq)', done => {
           let count = 0;
           const client = newClient();

src/cache/core/cache.ts

@@ -15,7 +15,7 @@ export abstract class ApolloCache<TSerialized> implements DataProxy {
   // required to implement
   // core API
   public abstract read<T, TVariables = any>(
-    query: Cache.ReadOptions<TVariables>,
+    query: Cache.ReadOptions<TVariables, T>,
   ): T | null;
   public abstract write<TResult = any, TVariables = any>(
     write: Cache.WriteOptions<TResult, TVariables>,
@@ -104,7 +104,7 @@ export abstract class ApolloCache<TSerialized> implements DataProxy {
    * @param optimistic
    */
   public readQuery<QueryType, TVariables = any>(
-    options: DataProxy.Query<TVariables>,
+    options: DataProxy.Query<TVariables, QueryType>,
     optimistic: boolean = false,
   ): QueryType | null {
     return this.read({
@@ -120,7 +120,7 @@ export abstract class ApolloCache<TSerialized> implements DataProxy {
   private getFragmentDoc = wrap(getFragmentQueryDocument);
 
   public readFragment<FragmentType, TVariables = any>(
-    options: DataProxy.Fragment<TVariables>,
+    options: DataProxy.Fragment<TVariables, FragmentType>,
     optimistic: boolean = false,
   ): FragmentType | null {
     return this.read({

src/cache/core/types/Cache.ts

@@ -4,15 +4,15 @@ import { Modifier, Modifiers } from './common';
 export namespace Cache {
   export type WatchCallback = (diff: Cache.DiffResult<any>) => void;
 
-  export interface ReadOptions<TVariables = any>
-    extends DataProxy.Query<TVariables> {
+  export interface ReadOptions<TVariables = any, TData = any>
+    extends DataProxy.Query<TVariables, TData> {
     rootId?: string;
     previousResult?: any;
     optimistic: boolean;
   }
 
   export interface WriteOptions<TResult = any, TVariables = any>
-    extends DataProxy.Query<TVariables> {
+    extends DataProxy.Query<TVariables, TResult> {
     dataId?: string;
     result: TResult;
     broadcast?: boolean;

src/cache/core/types/DataProxy.ts

@@ -1,15 +1,16 @@
 import { DocumentNode } from 'graphql'; // eslint-disable-line import/no-extraneous-dependencies, import/no-unresolved
+import { TypedDocumentNode } from '@graphql-typed-document-node/core';
 
 import { MissingFieldError } from './common';
 
 export namespace DataProxy {
-  export interface Query<TVariables> {
+  export interface Query<TVariables, TData> {
     /**
      * The GraphQL query shape to be used constructed using the `gql` template
      * string tag from `graphql-tag`. The query will be used to determine the
      * shape of the data to be read.
      */
-    query: DocumentNode;
+    query: DocumentNode | TypedDocumentNode<TData, TVariables>;
 
     /**
      * Any variables that the GraphQL query may depend on.
@@ -24,7 +25,7 @@ export namespace DataProxy {
     id?: string;
   }
 
-  export interface Fragment<TVariables> {
+  export interface Fragment<TVariables, TData> {
     /**
      * The root id to be used. This id should take the same form as the
      * value returned by your `dataIdFromObject` function. If a value with your
@@ -38,7 +39,7 @@ export namespace DataProxy {
      * the shape of data to read. If you provide more than one fragment in this
      * document then you must also specify `fragmentName` to select a single.
      */
-    fragment: DocumentNode;
+    fragment: DocumentNode | TypedDocumentNode<TData, TVariables>;
 
     /**
      * The name of the fragment in your GraphQL document to be used. If you do
@@ -54,7 +55,7 @@ export namespace DataProxy {
   }
 
   export interface WriteQueryOptions<TData, TVariables>
-    extends Query<TVariables> {
+    extends Query<TVariables, TData> {
     /**
      * The data you will be writing to the store.
      */
@@ -66,7 +67,7 @@ export namespace DataProxy {
   }
 
   export interface WriteFragmentOptions<TData, TVariables>
-    extends Fragment<TVariables> {
+    extends Fragment<TVariables, TData> {
     /**
      * The data you will be writing to the store.
      */
@@ -95,7 +96,7 @@ export interface DataProxy {
    * Reads a GraphQL query from the root query id.
    */
   readQuery<QueryType, TVariables = any>(
-    options: DataProxy.Query<TVariables>,
+    options: DataProxy.Query<TVariables, QueryType>,
     optimistic?: boolean,
   ): QueryType | null;
 
@@ -105,7 +106,7 @@ export interface DataProxy {
    * provided to select the correct fragment.
    */
   readFragment<FragmentType, TVariables = any>(
-    options: DataProxy.Fragment<TVariables>,
+    options: DataProxy.Fragment<TVariables, FragmentType>,
     optimistic?: boolean,
   ): FragmentType | null;
 

src/core/ApolloClient.ts

@@ -277,7 +277,7 @@ export class ApolloClient<TCacheShape> implements DataProxy {
    * a description of store reactivity.
    */
   public watchQuery<T = any, TVariables = OperationVariables>(
-    options: WatchQueryOptions<TVariables>,
+    options: WatchQueryOptions<TVariables, T>,
   ): ObservableQuery<T, TVariables> {
     if (this.defaultOptions.watchQuery) {
       options = compact(this.defaultOptions.watchQuery, options);
@@ -305,7 +305,7 @@ export class ApolloClient<TCacheShape> implements DataProxy {
    * server at all or just resolve from the cache, etc.
    */
   public query<T = any, TVariables = OperationVariables>(
-    options: QueryOptions<TVariables>,
+    options: QueryOptions<TVariables, T>,
   ): Promise<ApolloQueryResult<T>> {
     if (this.defaultOptions.query) {
       options = compact(this.defaultOptions.query, options);
@@ -347,7 +347,7 @@ export class ApolloClient<TCacheShape> implements DataProxy {
    * {@link Observable} which either emits received data or an error.
    */
   public subscribe<T = any, TVariables = OperationVariables>(
-    options: SubscriptionOptions<TVariables>,
+    options: SubscriptionOptions<TVariables, T>,
   ): Observable<FetchResult<T>> {
     return this.queryManager.startGraphQLSubscription<T>(options);
   }
@@ -362,7 +362,7 @@ export class ApolloClient<TCacheShape> implements DataProxy {
    * optimistic results. Is `false` by default.
    */
   public readQuery<T = any, TVariables = OperationVariables>(
-    options: DataProxy.Query<TVariables>,
+    options: DataProxy.Query<TVariables, T>,
     optimistic: boolean = false,
   ): T | null {
     return this.cache.readQuery<T, TVariables>(options, optimistic);
@@ -383,7 +383,7 @@ export class ApolloClient<TCacheShape> implements DataProxy {
    * optimistic results. Is `false` by default.
    */
   public readFragment<T = any, TVariables = OperationVariables>(
-    options: DataProxy.Fragment<TVariables>,
+    options: DataProxy.Fragment<TVariables, T>,
     optimistic: boolean = false,
   ): T | null {
     return this.cache.readFragment<T, TVariables>(options, optimistic);

src/core/ObservableQuery.ts

@@ -45,7 +45,7 @@ export class ObservableQuery<
   TData = any,
   TVariables = OperationVariables
 > extends Observable<ApolloQueryResult<TData>> {
-  public readonly options: WatchQueryOptions<TVariables>;
+  public readonly options: WatchQueryOptions<TVariables, TData>;
   public readonly queryId: string;
   public readonly queryName?: string;
 
@@ -72,7 +72,7 @@ export class ObservableQuery<
   }: {
     queryManager: QueryManager<any>;
     queryInfo: QueryInfo;
-    options: WatchQueryOptions<TVariables>;
+    options: WatchQueryOptions<TVariables, TData>;
   }) {
     super((observer: Observer<ApolloQueryResult<TData>>) =>
       this.onSubscribe(observer),
@@ -219,7 +219,7 @@ export class ObservableQuery<
       ));
     }
 
-    const reobserveOptions: Partial<WatchQueryOptions<TVariables>> = {
+    const reobserveOptions: Partial<WatchQueryOptions<TVariables, TData>> = {
       // Always disable polling for refetches.
       pollInterval: 0,
     };
@@ -249,7 +249,7 @@ export class ObservableQuery<
   }
 
   public fetchMore<K extends keyof TVariables>(
-    fetchMoreOptions: FetchMoreQueryOptions<TVariables, K> &
+    fetchMoreOptions: FetchMoreQueryOptions<TVariables, K, TData> &
       FetchMoreOptions<TData, TVariables>,
   ): Promise<ApolloQueryResult<TData>> {
     const combinedOptions = {
@@ -404,7 +404,7 @@ once, rather than every time you call fetchMore.`);
   }
 
   public setOptions(
-    newOptions: Partial<WatchQueryOptions<TVariables>>,
+    newOptions: Partial<WatchQueryOptions<TVariables, TData>>,
   ): Promise<ApolloQueryResult<TData>> {
     return this.reobserve(newOptions);
   }
@@ -469,7 +469,7 @@ once, rather than every time you call fetchMore.`);
   public updateQuery<TVars = TVariables>(
     mapFn: (
       previousQueryResult: TData,
-      options: Pick<WatchQueryOptions<TVars>, "variables">,
+      options: Pick<WatchQueryOptions<TVars, TData>, "variables">,
     ) => TData,
   ): void {
     const { queryManager } = this;
@@ -594,7 +594,7 @@ once, rather than every time you call fetchMore.`);
   }
 
   public reobserve(
-    newOptions?: Partial<WatchQueryOptions<TVariables>>,
+    newOptions?: Partial<WatchQueryOptions<TVariables, TData>>,
     newNetworkStatus?: NetworkStatus,
   ): Promise<ApolloQueryResult<TData>> {
     this.isTornDown = false;

src/core/QueryManager.ts

@@ -333,7 +333,7 @@ export class QueryManager<TStore> {
 
   public fetchQuery<TData, TVars>(
     queryId: string,
-    options: WatchQueryOptions<TVars>,
+    options: WatchQueryOptions<TVars, TData>,
     networkStatus?: NetworkStatus,
   ): Promise<ApolloQueryResult<TData>> {
     return this.fetchQueryObservable<TData, TVars>(
@@ -428,7 +428,7 @@ export class QueryManager<TStore> {
   }
 
   public watchQuery<T, TVariables = OperationVariables>(
-    options: WatchQueryOptions<TVariables>,
+    options: WatchQueryOptions<TVariables, T>,
   ): ObservableQuery<T, TVariables> {
     // assign variable default values if supplied
     options = {
@@ -462,7 +462,7 @@ export class QueryManager<TStore> {
   }
 
   public query<TData, TVars = OperationVariables>(
-    options: QueryOptions<TVars>,
+    options: QueryOptions<TVars, TData>,
   ): Promise<ApolloQueryResult<TData>> {
     invariant(
       options.query,
@@ -759,7 +759,7 @@ export class QueryManager<TStore> {
   private getResultsFromLink<TData, TVars>(
     queryInfo: QueryInfo,
     allowCacheWrite: boolean,
-    options: Pick<WatchQueryOptions<TVars>,
+    options: Pick<WatchQueryOptions<TVars, TData>,
       | "variables"
       | "context"
       | "fetchPolicy"
@@ -817,7 +817,7 @@ export class QueryManager<TStore> {
 
   public fetchQueryObservable<TData, TVars>(
     queryId: string,
-    options: WatchQueryOptions<TVars>,
+    options: WatchQueryOptions<TVars, TData>,
     // The initial networkStatus for this fetch, most often
     // NetworkStatus.loading, but also possibly fetchMore, poll, refetch,
     // or setVariables.
@@ -931,7 +931,7 @@ export class QueryManager<TStore> {
 
   private fetchQueryByPolicy<TData, TVars>(
     queryInfo: QueryInfo,
-    options: WatchQueryOptions<TVars>,
+    options: WatchQueryOptions<TVars, TData>,
     // The initial networkStatus for this fetch, most often
     // NetworkStatus.loading, but also possibly fetchMore, poll, refetch,
     // or setVariables.

src/core/Reobserver.ts

@@ -17,13 +17,13 @@ import { invariant } from 'ts-invariant';
 export class Reobserver<TData, TVars> {
   constructor(
     private observer: Observer<ApolloQueryResult<TData>>,
-    private options: WatchQueryOptions<TVars>,
+    private options: WatchQueryOptions<TVars, TData>,
     // Almost certainly just a wrapper function around
     // QueryManager#fetchQueryObservable, but this small dose of
     // indirection means the Reobserver doesn't have to know/assume
     // anything about the QueryManager class.
     private fetch: (
-      options: WatchQueryOptions<TVars>,
+      options: WatchQueryOptions<TVars, TData>,
       newNetworkStatus?: NetworkStatus,
     ) => Concast<ApolloQueryResult<TData>>,
     // If we're polling, there may be times when we should avoid fetching,
@@ -37,7 +37,7 @@ export class Reobserver<TData, TVars> {
   private concast?: Concast<ApolloQueryResult<TData>>;
 
   public reobserve(
-    newOptions?: Partial<WatchQueryOptions<TVars>>,
+    newOptions?: Partial<WatchQueryOptions<TVars, TData>>,
     newNetworkStatus?: NetworkStatus,
   ): Promise<ApolloQueryResult<TData>> {
     if (newOptions) {
@@ -66,7 +66,7 @@ export class Reobserver<TData, TVars> {
     return (this.concast = concast).promise;
   }
 
-  public updateOptions(newOptions: Partial<WatchQueryOptions<TVars>>) {
+  public updateOptions(newOptions: Partial<WatchQueryOptions<TVars, TData>>) {
     Object.assign(this.options, compact(newOptions));
     this.updatePolling();
     return this;