@apollo-elements/fast - npm Package Compare versions

Comparing version 1.2.0-alpha.0 to 1.2.0-alpha.1

apollo-element.d.ts

 import type { GraphQLError } from 'graphql';
-import type { ApolloClient, ApolloError, NormalizedCacheObject } from '@apollo/client/core';
+import type { ApolloClient, ApolloError, NormalizedCacheObject, OperationVariables } from '@apollo/client/core';
 import type { ApolloElementInterface } from '@apollo-elements/interfaces/apollo-element';
-import type { Constructor, CustomElement } from '@apollo-elements/interfaces';
+import type { Constructor, CustomElement, Data, Variables } from '@apollo-elements/interfaces';
 import { FASTElement } from '@microsoft/fast-element';
 declare const ApolloElement_base: {
-    new <TData_1 = unknown, TVariables_1 = unknown>(...a: any[]): {
-        context?: Record<string, unknown> | undefined;
-        data: TData_1 | null;
-        variables: TVariables_1 | null;
+    new <D_1 = unknown, V_1 = Record<string, any>>(...a: any[]): {
+        data: Data<D_1> | null;
+        variables: Variables<D_1, V_1> | null;
         error: Error | ApolloError | null;
         errors: readonly GraphQLError[] | null;
         loading: boolean;
+        context?: Record<string, unknown> | undefined;
         client: ApolloClient<NormalizedCacheObject> | null;
-        _document: import("graphql").DocumentNode | null;
+        _document: import("graphql").DocumentNode | import("@apollo-elements/interfaces").ComponentDocument<D_1> | null;
         _documentSetByJS: boolean;
-        _variables: TVariables_1 | null;
+        _variables: Variables<D_1, V_1> | null;
         _variablesSetByJS: boolean;
         mo: MutationObserver | null;
-        document: import("graphql").DocumentNode | null;
+        document: import("graphql").DocumentNode | import("@apollo-elements/interfaces").ComponentDocument<D_1> | null;
         connectedCallback(): void;
         disconnectedCallback(): void;
-        documentChanged?(document: import("graphql").DocumentNode | null): void;
-        variablesChanged?(variables: TVariables_1 | null): void;
+        documentChanged?(document: import("graphql").DocumentNode | import("@apollo-elements/interfaces").ComponentDocument<D_1> | null): void;
+        variablesChanged?(variables: Variables<D_1, V_1> | null): void;
         onDOMMutation(records: MutationRecord[]): void;
-        getDOMGraphQLDocument(): import("graphql").DocumentNode | null;
-        getDOMVariables(): TVariables_1 | null;
+        getDOMGraphQLDocument(): import("graphql").DocumentNode | import("@apollo-elements/interfaces").ComponentDocument<D_1> | null;
+        getDOMVariables(): Variables<D_1, V_1> | null;
         attributeChangedCallback?(name: string, oldValue: string, newValue: string): void;
@@ -47,5 +47,5 @@ adoptedCallback?(): void;
         click(): void;
-        addEventListener<K extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "click" | "scroll" | "blur" | "focus" | "apollo-mutation-result" | "apollo-error" | "apollo-query-result" | "apollo-subscription-result" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "canplay" | "canplaythrough" | "contextmenu" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "invalid" | "keydown" | "keypress" | "keyup" | "load" | "loadeddata" | "loadedmetadata" | "loadstart" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "ratechange" | "seeked" | "seeking" | "stalled" | "submit" | "suspend" | "timeupdate" | "volumechange" | "waiting" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "cancel" | "cuechange" | "dragexit" | "focusin" | "focusout" | "gotpointercapture" | "lostpointercapture" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "securitypolicyviolation" | "selectionchange" | "selectstart" | "toggle" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "wheel" | "copy" | "fullscreenchange" | "fullscreenerror" | "cut" | "paste">(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
+        addEventListener<K extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "click" | "scroll" | "blur" | "focus" | "apollo-mutation-result" | "apollo-error" | "apollo-query-result" | "cancel" | "apollo-subscription-result" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "canplay" | "canplaythrough" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "load" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "toggle" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "waiting" | "wheel" | "copy" | "cut" | "paste">(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
-        removeEventListener<K_1 extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "click" | "scroll" | "blur" | "focus" | "apollo-mutation-result" | "apollo-error" | "apollo-query-result" | "apollo-subscription-result" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "canplay" | "canplaythrough" | "contextmenu" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "invalid" | "keydown" | "keypress" | "keyup" | "load" | "loadeddata" | "loadedmetadata" | "loadstart" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "ratechange" | "seeked" | "seeking" | "stalled" | "submit" | "suspend" | "timeupdate" | "volumechange" | "waiting" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "cancel" | "cuechange" | "dragexit" | "focusin" | "focusout" | "gotpointercapture" | "lostpointercapture" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "securitypolicyviolation" | "selectionchange" | "selectstart" | "toggle" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "wheel" | "copy" | "fullscreenchange" | "fullscreenerror" | "cut" | "paste">(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
+        removeEventListener<K_1 extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "click" | "scroll" | "blur" | "focus" | "apollo-mutation-result" | "apollo-error" | "apollo-query-result" | "cancel" | "apollo-subscription-result" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "canplay" | "canplaythrough" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "load" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "toggle" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "waiting" | "wheel" | "copy" | "cut" | "paste">(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
@@ -301,7 +301,7 @@ readonly assignedSlot: HTMLSlotElement | null;
  */
-export declare class ApolloElement<TData = unknown, TVariables = unknown> extends ApolloElement_base<TData, TVariables> implements ApolloElementInterface<TData, TVariables> {
+export declare class ApolloElement<D = unknown, V = OperationVariables> extends ApolloElement_base<D, V> implements ApolloElementInterface<D, V> {
     context?: Record<string, unknown>;
-    variables: TVariables;
+    variables: Variables<D, V>;
     client: ApolloClient<NormalizedCacheObject> | null;
-    data: TData | null;
+    data: Data<D> | null;
     error: ApolloError | Error | null;
@@ -308,0 +308,0 @@ errors: readonly GraphQLError[] | null;

apollo-element.js

@@ -13,5 +13,5 @@ import { __decorate } from "tslib";
  */
-export class ApolloElement extends ApolloElementMixin(
+export class ApolloElement
 // have to cast because of the TypeScript bug which causes the error in apollo-element-mixin
-FASTElement) {
+ extends ApolloElementMixin(FASTElement) {
     constructor() {
@@ -18,0 +18,0 @@ var _a;

apollo-element.test.js

@@ -88,2 +88,3 @@ import { __decorate } from "tslib";
         assertType(this.data);
+        assertType(this.variables);
         assertType(this.error.message);
@@ -98,2 +99,8 @@ assertType(this.data.a);
 }
+class TDNTypeCheck extends ApolloElement {
+    typeCheck() {
+        assertType(this.data);
+        assertType(this.variables);
+    }
+}
 //# sourceMappingURL=apollo-element.test.js.map

apollo-element.test.ts

 import type { DocumentNode, GraphQLError } from 'graphql';
-import type { ApolloClient, NormalizedCacheObject } from '@apollo/client/core';
+import type { ApolloClient, NormalizedCacheObject, TypedDocumentNode } from '@apollo/client/core';
 import { expect, fixture, unsafeStatic, html as fhtml } from '@open-wc/testing';
@@ -71,3 +71,4 @@
 type TypeCheckData = { a: 'a', b: number };
-class TypeCheck extends ApolloElement<TypeCheckData> {
+type TypeCheckVars = { c: 'c', d: number };
+class TypeCheck extends ApolloElement<TypeCheckData, TypeCheckVars> {
   typeCheck() {
@@ -87,2 +88,3 @@ /* eslint-disable func-call-spacing, no-multi-spaces */
     assertType<TypeCheckData>                       (this.data!);
+    assertType<TypeCheckVars>                       (this.variables!);
     assertType<string>                              (this.error.message);
@@ -98,1 +100,9 @@ assertType<'a'>                                 (this.data.a);
 }
+
+type TDN = TypedDocumentNode<TypeCheckData, TypeCheckVars>;
+class TDNTypeCheck extends ApolloElement<TDN> {
+  typeCheck() {
+    assertType<TypeCheckData>(this.data!);
+    assertType<TypeCheckVars>(this.variables!);
+  }
+}

apollo-element.ts

 import type { GraphQLError } from 'graphql';
-import type { ApolloClient, ApolloError, NormalizedCacheObject } from '@apollo/client/core';
+import type {
+  ApolloClient,
+  ApolloError,
+  NormalizedCacheObject,
+  OperationVariables,
+} from '@apollo/client/core';
 import type { ApolloElementInterface } from '@apollo-elements/interfaces/apollo-element';
-import type { Constructor, CustomElement } from '@apollo-elements/interfaces';
+import type { Constructor, CustomElement, Data, Variables } from '@apollo-elements/interfaces';
 
@@ -18,11 +23,9 @@ import { ApolloElementMixin } from '@apollo-elements/mixins/apollo-element-mixin';
  */
-export class ApolloElement<TData = unknown, TVariables = unknown>
-  extends ApolloElementMixin(
-    // have to cast because of the TypeScript bug which causes the error in apollo-element-mixin
-    FASTElement as Constructor<CustomElement & FASTElement>
-  )<TData, TVariables>
-  implements ApolloElementInterface<TData, TVariables> {
+export class ApolloElement<D = unknown, V = OperationVariables>
+  // have to cast because of the TypeScript bug which causes the error in apollo-element-mixin
+  extends ApolloElementMixin(FASTElement as Constructor<CustomElement & FASTElement>)<D, V>
+  implements ApolloElementInterface<D, V> {
   declare context?: Record<string, unknown>;
 
-  declare variables: TVariables;
+  declare variables: Variables<D, V>;
 
@@ -32,3 +35,3 @@ @observable client: ApolloClient<NormalizedCacheObject> | null =
 
-  @observable data: TData | null = null;
+  @observable data: Data<D> | null = null;
 
@@ -35,0 +38,0 @@ @observable error: ApolloError | Error | null = null;

apollo-mutation.d.ts

@@ -1,27 +0,27 @@
-import type { DocumentNode, MutationOptions } from '@apollo/client/core';
+import type { ApolloMutationInterface, Constructor, RefetchQueriesType } from '@apollo-elements/interfaces';
+import type { OperationVariables } from '@apollo/client/core';
 import { ApolloElement } from './apollo-element';
-import { ApolloMutationInterface, Constructor } from '@apollo-elements/interfaces';
 declare const ApolloMutation_base: {
-    new <TData_1, TVariables_1>(): {
-        mutation: DocumentNode | null;
-        optimisticResponse?: TData_1 | ((vars: TVariables_1) => TData_1) | undefined;
+    new <D_1, V_1 = Record<string, any>>(): {
+        mutation: import("graphql/language/ast").DocumentNode | import("@apollo-elements/interfaces").ComponentDocument<D_1> | null;
+        variables: import("@apollo-elements/interfaces").Variables<D_1, V_1> | null;
+        refetchQueries: import("@apollo/client/core/watchQueryOptions").RefetchQueryDescription | ((result: import("@apollo/client/core").FetchResult<import("@apollo-elements/interfaces").Data<D_1>, Record<string, any>, Record<string, any>>) => import("@apollo/client/core/watchQueryOptions").RefetchQueryDescription) | null;
+        called: boolean;
+        context?: Record<string, unknown> | undefined;
+        optimisticResponse?: import("@apollo-elements/interfaces").Data<D_1> | ((vars: import("@apollo-elements/interfaces").Variables<D_1, V_1>) => import("@apollo-elements/interfaces").Data<D_1>) | undefined;
         errorPolicy?: "ignore" | "none" | "all" | undefined;
         fetchPolicy?: "no-cache" | undefined;
-        refetchQueries: import("@apollo/client/core/watchQueryOptions").RefetchQueryDescription | ((result: import("@apollo/client/core").FetchResult<TData_1, Record<string, any>, Record<string, any>>) => import("@apollo/client/core/watchQueryOptions").RefetchQueryDescription) | null | undefined;
         awaitRefetchQueries?: boolean | undefined;
-        called: boolean;
-        onCompleted?(_data: TData_1): void;
+        onCompleted?(_data: import("@apollo-elements/interfaces").Data<D_1>): void;
         onError?(_error: Error): void;
-        updater?(cache: import("@apollo/client/core").ApolloCache<TData_1>, mutationResult: import("@apollo/client/core").FetchResult<TData_1, Record<string, any>, Record<string, any>>): void;
+        updater?(cache: import("@apollo/client/core").ApolloCache<import("@apollo-elements/interfaces").Data<D_1>>, mutationResult: import("@apollo/client/core").FetchResult<import("@apollo-elements/interfaces").Data<D_1>, Record<string, any>, Record<string, any>>): void;
         ignoreResults: boolean;
         mostRecentMutationId: number;
         connectedCallback(): void;
-        mutate(params?: Partial<MutationOptions<TData_1, TVariables_1>> | undefined): Promise<import("@apollo/client/core").FetchResult<TData_1, Record<string, any>, Record<string, any>>>;
+        mutate(params?: Partial<import("@apollo/client/core").MutationOptions<import("@apollo-elements/interfaces").Data<D_1>, import("@apollo-elements/interfaces").Variables<D_1, V_1>>> | undefined): Promise<import("@apollo/client/core").FetchResult<import("@apollo-elements/interfaces").Data<D_1>, Record<string, any>, Record<string, any>>>;
         generateMutationId(): number;
         isMostRecentMutation(mutationId: number): boolean;
-        onCompletedMutation(mutationId: number, response: import("@apollo/client/core").FetchResult<TData_1, Record<string, any>, Record<string, any>>): import("@apollo/client/core").FetchResult<TData_1, Record<string, any>, Record<string, any>>;
+        onCompletedMutation(mutationId: number, response: import("@apollo/client/core").FetchResult<import("@apollo-elements/interfaces").Data<D_1>, Record<string, any>, Record<string, any>>): import("@apollo/client/core").FetchResult<import("@apollo-elements/interfaces").Data<D_1>, Record<string, any>, Record<string, any>>;
         onMutationError(mutationId: number, error: import("@apollo/client/errors").ApolloError): never;
-        context?: Record<string, unknown> | undefined;
-        data: TData_1 | null;
-        variables: TVariables_1 | null;
+        data: import("@apollo-elements/interfaces").Data<D_1> | null;
         error: Error | import("@apollo/client/errors").ApolloError | null;
@@ -31,14 +31,14 @@ errors: readonly import("graphql").GraphQLError[] | null;
         client: import("@apollo/client/core").ApolloClient<import("@apollo/client/core").NormalizedCacheObject> | null;
-        _document: DocumentNode | null;
+        _document: import("graphql/language/ast").DocumentNode | import("@apollo-elements/interfaces").ComponentDocument<D_1> | null;
         _documentSetByJS: boolean;
-        _variables: TVariables_1 | null;
+        _variables: import("@apollo-elements/interfaces").Variables<D_1, V_1> | null;
         _variablesSetByJS: boolean;
         mo: MutationObserver | null;
-        document: DocumentNode | null;
+        document: import("graphql/language/ast").DocumentNode | import("@apollo-elements/interfaces").ComponentDocument<D_1> | null;
         disconnectedCallback: (() => void) & (() => void);
-        documentChanged?(document: DocumentNode | null): void;
-        variablesChanged?(variables: TVariables_1 | null): void;
+        documentChanged?(document: import("graphql/language/ast").DocumentNode | import("@apollo-elements/interfaces").ComponentDocument<D_1> | null): void;
+        variablesChanged?(variables: import("@apollo-elements/interfaces").Variables<D_1, V_1> | null): void;
         onDOMMutation(records: MutationRecord[]): void;
-        getDOMGraphQLDocument(): DocumentNode | null;
-        getDOMVariables(): TVariables_1 | null;
+        getDOMGraphQLDocument(): import("graphql/language/ast").DocumentNode | import("@apollo-elements/interfaces").ComponentDocument<D_1> | null;
+        getDOMVariables(): import("@apollo-elements/interfaces").Variables<D_1, V_1> | null;
         attributeChangedCallback?(name: string, oldValue: string, newValue: string): void;
@@ -63,5 +63,5 @@ adoptedCallback?(): void;
         click(): void;
-        addEventListener<K extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "click" | "scroll" | "blur" | "focus" | "apollo-mutation-result" | "apollo-error" | "apollo-query-result" | "apollo-subscription-result" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "canplay" | "canplaythrough" | "contextmenu" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "invalid" | "keydown" | "keypress" | "keyup" | "load" | "loadeddata" | "loadedmetadata" | "loadstart" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "ratechange" | "seeked" | "seeking" | "stalled" | "submit" | "suspend" | "timeupdate" | "volumechange" | "waiting" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "cancel" | "cuechange" | "dragexit" | "focusin" | "focusout" | "gotpointercapture" | "lostpointercapture" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "securitypolicyviolation" | "selectionchange" | "selectstart" | "toggle" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "wheel" | "copy" | "fullscreenchange" | "fullscreenerror" | "cut" | "paste">(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
+        addEventListener<K extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "click" | "scroll" | "blur" | "focus" | "apollo-mutation-result" | "apollo-error" | "apollo-query-result" | "cancel" | "apollo-subscription-result" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "canplay" | "canplaythrough" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "load" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "toggle" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "waiting" | "wheel" | "copy" | "cut" | "paste">(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
-        removeEventListener<K_1 extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "click" | "scroll" | "blur" | "focus" | "apollo-mutation-result" | "apollo-error" | "apollo-query-result" | "apollo-subscription-result" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "canplay" | "canplaythrough" | "contextmenu" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "invalid" | "keydown" | "keypress" | "keyup" | "load" | "loadeddata" | "loadedmetadata" | "loadstart" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "ratechange" | "seeked" | "seeking" | "stalled" | "submit" | "suspend" | "timeupdate" | "volumechange" | "waiting" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "cancel" | "cuechange" | "dragexit" | "focusin" | "focusout" | "gotpointercapture" | "lostpointercapture" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "securitypolicyviolation" | "selectionchange" | "selectstart" | "toggle" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "wheel" | "copy" | "fullscreenchange" | "fullscreenerror" | "cut" | "paste">(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
+        removeEventListener<K_1 extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "click" | "scroll" | "blur" | "focus" | "apollo-mutation-result" | "apollo-error" | "apollo-query-result" | "cancel" | "apollo-subscription-result" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "canplay" | "canplaythrough" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "load" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "toggle" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "waiting" | "wheel" | "copy" | "cut" | "paste">(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
@@ -307,3 +307,3 @@ readonly assignedSlot: HTMLSlotElement | null;
     documentType: string;
-} & Constructor<ApolloElement<unknown, unknown>>;
+} & Constructor<ApolloElement<any, any>>;
 /**
@@ -318,5 +318,3 @@ * `ApolloMutation`
  */
-export declare class ApolloMutation<TData, TVariables> extends ApolloMutation_base<TData, TVariables> implements ApolloMutationInterface<TData, TVariables> {
-    mutation: DocumentNode;
-    optimisticResponse?: TData | ((vars: TVariables) => TData);
+export declare class ApolloMutation<D, V = OperationVariables> extends ApolloMutation_base<D, V> implements ApolloMutationInterface<D, V> {
     called: boolean;
@@ -330,4 +328,4 @@ /**
      */
-    refetchQueries: MutationOptions<TData, TVariables>['refetchQueries'] | null;
+    refetchQueries: RefetchQueriesType<D> | null;
 }
 export {};

apollo-mutation.test.js

@@ -181,2 +181,9 @@ import { __decorate } from "tslib";
 }
+class TDNTypeCheck extends ApolloMutation {
+    typeCheck() {
+        assertType(this.data);
+        assertType(this.variables);
+        assertType(this.mutation);
+    }
+}
 class TypeCheckAccessor extends ApolloMutation {
@@ -183,0 +190,0 @@ // @ts-expect-error: current typescript versions don't allow this type of override

apollo-mutation.test.ts

@@ -7,2 +7,4 @@ import type {
   NormalizedCacheObject,
+  OperationVariables,
+  TypedDocumentNode,
 } from '@apollo/client/core';
@@ -50,3 +52,3 @@
 @customElement({ name: 'fast-testable-apollo-mutation-class', template })
-class TestableApolloMutation<D = unknown, V = unknown>
+class TestableApolloMutation<D = unknown, V = OperationVariables>
   extends ApolloMutation<D, V>
@@ -56,3 +58,3 @@ implements MutationElement<D, V> {
 
-  async hasRendered(): Promise<TestableApolloMutation<D, V>> {
+  async hasRendered(): Promise<this> {
     await nextFrame();
@@ -214,3 +216,3 @@ await DOM.nextUpdate();
     // ApolloMutationInterface
-    assertType<DocumentNode>                        (this.mutation);
+    assertType<DocumentNode>                        (this.mutation!);
     assertType<TypeCheckVars>                       (this.variables!);
@@ -242,2 +244,11 @@ assertType<boolean>                             (this.called);
 
+type TDN = TypedDocumentNode<TypeCheckData, TypeCheckVars>;
+class TDNTypeCheck extends ApolloMutation<TDN> {
+  typeCheck() {
+    assertType<TypeCheckData>(this.data!);
+    assertType<TypeCheckVars>(this.variables!);
+    assertType<TDN>(this.mutation!);
+  }
+}
+
 class TypeCheckAccessor extends ApolloMutation<
@@ -244,0 +255,0 @@ NonNullableParamMutationData,

apollo-mutation.ts

@@ -1,3 +0,9 @@
-import type { DocumentNode, MutationOptions } from '@apollo/client/core';
+import type {
+  ApolloMutationInterface,
+  Constructor,
+  RefetchQueriesType,
+} from '@apollo-elements/interfaces';
 
+import type { OperationVariables } from '@apollo/client/core';
+
 import { attr, ValueConverter } from '@microsoft/fast-element';
@@ -8,3 +14,2 @@
 import { ApolloMutationMixin } from '@apollo-elements/mixins/apollo-mutation-mixin';
-import { ApolloMutationInterface, Constructor } from '@apollo-elements/interfaces';
 
@@ -27,10 +32,6 @@ const refetchQueriesConverter: ValueConverter = {
  */
-export class ApolloMutation<TData, TVariables>
+export class ApolloMutation<D, V = OperationVariables>
   // have to cast because of the TypeScript bug which causes the error in apollo-element-mixin
-  extends ApolloMutationMixin(ApolloElement as Constructor<ApolloElement>)<TData, TVariables>
-  implements ApolloMutationInterface<TData, TVariables> {
-  declare mutation: DocumentNode;
-
-  declare optimisticResponse?: TData | ((vars: TVariables) => TData)
-
+  extends ApolloMutationMixin(ApolloElement as Constructor<ApolloElement<any, any>>)<D, V>
+  implements ApolloMutationInterface<D, V> {
   @attr({ mode: 'boolean' }) called = false;
@@ -46,3 +47,3 @@
   @attr({ mode: 'fromView', attribute: 'refetch-queries', converter: refetchQueriesConverter })
-  refetchQueries: MutationOptions<TData, TVariables>['refetchQueries'] | null = null;
+  refetchQueries: RefetchQueriesType<D> | null = null;
 }

apollo-query.d.ts

 /// <reference types="zen-observable" />
-import { NetworkStatus } from '@apollo/client/core';
+import type { ApolloQueryInterface, Constructor } from '@apollo-elements/interfaces';
 import { ApolloElement } from './apollo-element';
-import { ApolloQueryInterface, Constructor } from '@apollo-elements/interfaces';
+import { NetworkStatus, OperationVariables } from '@apollo/client/core';
 declare const ApolloQuery_base: {
-    new <TData, TVariables>(...a: any[]): {
-        query: import("graphql/language/ast").DocumentNode | null;
+    new <D_1 = unknown, V_1 = Record<string, any>>(...a: any[]): {
+        query: import("graphql/language/ast").DocumentNode | import("@apollo-elements/interfaces").ComponentDocument<D_1> | null;
+        variables: import("@apollo-elements/interfaces").Variables<D_1, V_1> | null;
         fetchPolicy?: "cache-first" | "network-only" | "cache-only" | "no-cache" | "standby" | undefined;
         partial?: boolean | undefined;
         partialRefetch?: boolean | undefined;
+        refetchQueries: import("@apollo/client/core/watchQueryOptions").RefetchQueryDescription | ((result: import("@apollo/client/core").FetchResult<import("@apollo-elements/interfaces").Data<D_1>, Record<string, any>, Record<string, any>>) => import("@apollo/client/core/watchQueryOptions").RefetchQueryDescription) | null;
         returnPartialData?: boolean | undefined;
         nextFetchPolicy?: "cache-first" | "network-only" | "cache-only" | "no-cache" | "standby" | undefined;
         networkStatus: NetworkStatus;
-        observableQuery?: import("@apollo/client/core").ObservableQuery<TData, TVariables> | undefined;
-        options: Partial<import("@apollo/client/core").WatchQueryOptions<TVariables, TData>> | null;
+        observableQuery?: import("@apollo/client/core").ObservableQuery<import("@apollo-elements/interfaces").Data<D_1>, import("@apollo-elements/interfaces").Variables<D_1, V_1>> | undefined;
+        options: Partial<import("@apollo/client/core").WatchQueryOptions<import("@apollo-elements/interfaces").Variables<D_1, V_1>, import("@apollo-elements/interfaces").Data<D_1>>> | null;
         noAutoSubscribe: boolean;
         notifyOnNetworkStatusChange: boolean;
         pollInterval?: number | undefined;
-        onData?(_result: import("@apollo/client/core").ApolloQueryResult<TData>): void;
+        onData?(_result: import("@apollo/client/core").ApolloQueryResult<import("@apollo-elements/interfaces").Data<D_1>>): void;
         onError?(_error: Error): void;
@@ -25,31 +27,30 @@ errorPolicy: import("@apollo/client/core").ErrorPolicy;
         connectedCallback(): void;
-        documentChanged(query: import("graphql/language/ast").DocumentNode | null): void;
-        variablesChanged(variables: TVariables): void;
-        refetch(variables: TVariables): void | Promise<import("@apollo/client/core").ApolloQueryResult<TData>>;
-        canSubscribe(options?: Partial<import("@apollo/client/core").SubscriptionOptions<TVariables, TData>> | undefined): boolean;
-        shouldSubscribe(options?: Partial<import("@apollo/client/core").SubscriptionOptions<TVariables, TData>> | undefined): boolean;
-        subscribe(params?: Partial<import("@apollo/client/core").SubscriptionOptions<TVariables, TData>> | undefined): ZenObservable.Subscription;
-        subscribeToMore(options: import("@apollo/client/core").SubscribeToMoreOptions<TData, TVariables, TData>): void | (() => void);
-        executeQuery(params?: Partial<import("@apollo/client/core").QueryOptions<TVariables, any>> | undefined): Promise<import("@apollo/client/core").ApolloQueryResult<TData>>;
-        fetchMore(params?: Partial<import("@apollo/client/core").FetchMoreQueryOptions<TVariables, keyof TVariables, any> & import("@apollo/client/core").FetchMoreOptions<TData, TVariables>> | undefined): Promise<import("@apollo/client/core").ApolloQueryResult<TData>>;
-        watchQuery(params?: Partial<import("@apollo/client/core").WatchQueryOptions<TVariables, TData>> | undefined): import("@apollo/client/core").ObservableQuery<TData, TVariables>;
-        nextData(result: import("@apollo/client/core").ApolloQueryResult<TData>): void;
+        documentChanged(query: import("graphql/language/ast").DocumentNode | import("@apollo-elements/interfaces").ComponentDocument<D_1> | null): void;
+        variablesChanged(variables: import("@apollo-elements/interfaces").Variables<D_1, V_1>): void;
+        refetch(variables: import("@apollo-elements/interfaces").Variables<D_1, V_1>): void | Promise<import("@apollo/client/core").ApolloQueryResult<import("@apollo-elements/interfaces").Data<D_1>>>;
+        canSubscribe(options?: Partial<import("@apollo/client/core").SubscriptionOptions<import("@apollo-elements/interfaces").Variables<D_1, V_1> | null, import("@apollo-elements/interfaces").Data<D_1>>> | undefined): boolean;
+        shouldSubscribe(options?: Partial<import("@apollo/client/core").SubscriptionOptions<import("@apollo-elements/interfaces").Variables<D_1, V_1>, import("@apollo-elements/interfaces").Data<D_1>>> | undefined): boolean;
+        subscribe(params?: Partial<import("@apollo/client/core").SubscriptionOptions<import("@apollo-elements/interfaces").Variables<D_1, V_1>, import("@apollo-elements/interfaces").Data<D_1>>> | undefined): ZenObservable.Subscription;
+        subscribeToMore(options: import("@apollo/client/core").SubscribeToMoreOptions<import("@apollo-elements/interfaces").Data<D_1>, import("@apollo-elements/interfaces").Variables<D_1, V_1>, import("@apollo-elements/interfaces").Data<D_1>>): void | (() => void);
+        executeQuery(params?: Partial<import("@apollo/client/core").QueryOptions<import("@apollo-elements/interfaces").Variables<D_1, V_1>, any>> | undefined): Promise<import("@apollo/client/core").ApolloQueryResult<import("@apollo-elements/interfaces").Data<D_1>>>;
+        fetchMore(params?: Partial<import("@apollo-elements/interfaces").FetchMoreParams<D_1, V_1>> | undefined): Promise<import("@apollo/client/core").ApolloQueryResult<import("@apollo-elements/interfaces").Data<D_1>>>;
+        watchQuery(params?: Partial<import("@apollo/client/core").WatchQueryOptions<import("@apollo-elements/interfaces").Variables<D_1, V_1>, import("@apollo-elements/interfaces").Data<D_1>>> | undefined): import("@apollo/client/core").ObservableQuery<import("@apollo-elements/interfaces").Data<D_1>, import("@apollo-elements/interfaces").Variables<D_1, V_1>>;
+        nextData(result: import("@apollo/client/core").ApolloQueryResult<import("@apollo-elements/interfaces").Data<D_1>>): void;
         nextError(error: import("@apollo/client/errors").ApolloError): void;
-        context?: Record<string, unknown> | undefined;
-        data: TData | null;
-        variables: TVariables | null;
+        data: import("@apollo-elements/interfaces").Data<D_1> | null;
         error: Error | import("@apollo/client/errors").ApolloError | null;
         errors: readonly import("graphql").GraphQLError[] | null;
         loading: boolean;
+        context?: Record<string, unknown> | undefined;
         client: import("@apollo/client/core").ApolloClient<import("@apollo/client/core").NormalizedCacheObject> | null;
-        _document: import("graphql/language/ast").DocumentNode | null;
+        _document: import("graphql/language/ast").DocumentNode | import("@apollo-elements/interfaces").ComponentDocument<D_1> | null;
         _documentSetByJS: boolean;
-        _variables: TVariables | null;
+        _variables: import("@apollo-elements/interfaces").Variables<D_1, V_1> | null;
         _variablesSetByJS: boolean;
         mo: MutationObserver | null;
-        document: import("graphql/language/ast").DocumentNode | null;
+        document: import("graphql/language/ast").DocumentNode | import("@apollo-elements/interfaces").ComponentDocument<D_1> | null;
         disconnectedCallback: (() => void) & (() => void);
         onDOMMutation(records: MutationRecord[]): void;
-        getDOMGraphQLDocument(): import("graphql/language/ast").DocumentNode | null;
-        getDOMVariables(): TVariables | null;
+        getDOMGraphQLDocument(): import("graphql/language/ast").DocumentNode | import("@apollo-elements/interfaces").ComponentDocument<D_1> | null;
+        getDOMVariables(): import("@apollo-elements/interfaces").Variables<D_1, V_1> | null;
         attributeChangedCallback?(name: string, oldValue: string, newValue: string): void;
@@ -74,5 +75,5 @@ adoptedCallback?(): void;
         click(): void;
-        addEventListener<K extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "click" | "scroll" | "blur" | "focus" | "apollo-mutation-result" | "apollo-error" | "apollo-query-result" | "apollo-subscription-result" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "canplay" | "canplaythrough" | "contextmenu" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "invalid" | "keydown" | "keypress" | "keyup" | "load" | "loadeddata" | "loadedmetadata" | "loadstart" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "ratechange" | "seeked" | "seeking" | "stalled" | "submit" | "suspend" | "timeupdate" | "volumechange" | "waiting" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "cancel" | "cuechange" | "dragexit" | "focusin" | "focusout" | "gotpointercapture" | "lostpointercapture" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "securitypolicyviolation" | "selectionchange" | "selectstart" | "toggle" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "wheel" | "copy" | "fullscreenchange" | "fullscreenerror" | "cut" | "paste">(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
+        addEventListener<K extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "click" | "scroll" | "blur" | "focus" | "apollo-mutation-result" | "apollo-error" | "apollo-query-result" | "cancel" | "apollo-subscription-result" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "canplay" | "canplaythrough" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "load" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "toggle" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "waiting" | "wheel" | "copy" | "cut" | "paste">(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
-        removeEventListener<K_1 extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "click" | "scroll" | "blur" | "focus" | "apollo-mutation-result" | "apollo-error" | "apollo-query-result" | "apollo-subscription-result" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "canplay" | "canplaythrough" | "contextmenu" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "invalid" | "keydown" | "keypress" | "keyup" | "load" | "loadeddata" | "loadedmetadata" | "loadstart" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "ratechange" | "seeked" | "seeking" | "stalled" | "submit" | "suspend" | "timeupdate" | "volumechange" | "waiting" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "cancel" | "cuechange" | "dragexit" | "focusin" | "focusout" | "gotpointercapture" | "lostpointercapture" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "securitypolicyviolation" | "selectionchange" | "selectstart" | "toggle" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "wheel" | "copy" | "fullscreenchange" | "fullscreenerror" | "cut" | "paste">(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
+        removeEventListener<K_1 extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "click" | "scroll" | "blur" | "focus" | "apollo-mutation-result" | "apollo-error" | "apollo-query-result" | "cancel" | "apollo-subscription-result" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "canplay" | "canplaythrough" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "load" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "toggle" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "waiting" | "wheel" | "copy" | "cut" | "paste">(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
@@ -318,3 +319,3 @@ readonly assignedSlot: HTMLSlotElement | null;
     documentType: string;
-} & Constructor<ApolloElement<unknown, unknown>>;
+} & Constructor<ApolloElement<any, any>>;
 /**
@@ -330,5 +331,5 @@ * `ApolloQuery`
  */
-export declare class ApolloQuery<Data, Variables> extends ApolloQuery_base<Data, Variables> implements ApolloQueryInterface<Data, Variables> {
+export declare class ApolloQuery<D = unknown, V = OperationVariables> extends ApolloQuery_base<D, V> implements ApolloQueryInterface<D, V> {
     networkStatus: NetworkStatus;
 }
 export {};

apollo-query.js

 import { __decorate } from "tslib";
+import { ApolloElement } from './apollo-element';
 import { NetworkStatus } from '@apollo/client/core';
-import { ApolloElement } from './apollo-element';
 import { attr, nullableNumberConverter } from '@microsoft/fast-element';
@@ -5,0 +5,0 @@ import { ApolloQueryMixin } from '@apollo-elements/mixins/apollo-query-mixin';

apollo-query.test.js

@@ -109,2 +109,9 @@ import { __decorate } from "tslib";
 }
+class TDNTypeCheck extends ApolloQuery {
+    typeCheck() {
+        assertType(this.data);
+        assertType(this.variables);
+        assertType(this.query);
+    }
+}
 //# sourceMappingURL=apollo-query.test.js.map

apollo-query.test.ts

@@ -5,5 +5,7 @@ import type {
   FetchPolicy,
+  NormalizedCacheObject,
+  ObservableQuery,
+  OperationVariables,
+  TypedDocumentNode,
   WatchQueryOptions,
-  ObservableQuery,
-  NormalizedCacheObject,
 } from '@apollo/client/core';
@@ -39,3 +41,3 @@
 @customElement({ name: 'fast-testable-apollo-query-class', template })
-class TestableApolloQuery<D = unknown, V = unknown>
+class TestableApolloQuery<D = unknown, V = OperationVariables>
   extends ApolloQuery<D, V>
@@ -146,1 +148,10 @@ implements QueryElement<D, V> {
 }
+
+type TDN = TypedDocumentNode<TypeCheckData, TypeCheckVars>;
+class TDNTypeCheck extends ApolloQuery<TDN> {
+  typeCheck() {
+    assertType<TypeCheckData>(this.data!);
+    assertType<TypeCheckVars>(this.variables!);
+    assertType<TDN>(this.query!);
+  }
+}

apollo-query.ts

@@ -1,6 +0,6 @@
-import { NetworkStatus } from '@apollo/client/core';
+import type { ApolloQueryInterface, Constructor } from '@apollo-elements/interfaces';
 
 import { ApolloElement } from './apollo-element';
+import { NetworkStatus, OperationVariables } from '@apollo/client/core';
 import { attr, nullableNumberConverter } from '@microsoft/fast-element';
-import { ApolloQueryInterface, Constructor } from '@apollo-elements/interfaces';
 import { ApolloQueryMixin } from '@apollo-elements/mixins/apollo-query-mixin';
@@ -18,7 +18,7 @@
  */
-export class ApolloQuery<Data, Variables>
+export class ApolloQuery<D = unknown, V = OperationVariables>
   // have to cast because of the TypeScript bug which causes the error in apollo-element-mixin
-  extends ApolloQueryMixin(ApolloElement as Constructor<ApolloElement>)<Data, Variables>
-  implements ApolloQueryInterface<Data, Variables> {
+  extends ApolloQueryMixin(ApolloElement as Constructor<ApolloElement<any, any>>)<D, V>
+  implements ApolloQueryInterface<D, V> {
   @attr({ converter: nullableNumberConverter }) networkStatus: NetworkStatus = NetworkStatus.ready;
 }

apollo-subscription.d.ts

 /// <reference types="zen-observable" />
+import type { OperationVariables } from '@apollo/client/core';
 import { ApolloElement } from './apollo-element';
 import { ApolloSubscriptionInterface, Constructor } from '@apollo-elements/interfaces';
 declare const ApolloSubscription_base: {
-    new <TData_1, TVariables_1>(...a: any[]): {
-        data: TData_1 | null;
+    new <D_1, V_1>(...a: any[]): {
+        subscription: import("graphql/language/ast").DocumentNode | import("@apollo-elements/interfaces").ComponentDocument<D_1> | null;
+        data: import("@apollo-elements/interfaces").Data<D_1> | null;
+        variables: import("@apollo-elements/interfaces").Variables<D_1, V_1> | null;
         fetchPolicy?: "cache-first" | "network-only" | "cache-only" | "no-cache" | "standby" | undefined;
         pollInterval?: number | undefined;
         noAutoSubscribe: boolean;
-        observable?: import("zen-observable")<import("@apollo/client/core").FetchResult<TData_1, Record<string, any>, Record<string, any>>> | undefined;
+        observable?: import("zen-observable")<import("@apollo/client/core").FetchResult<import("@apollo-elements/interfaces").Data<D_1>, Record<string, any>, Record<string, any>>> | undefined;
         observableSubscription?: ZenObservable.Subscription | undefined;
-        subscription: import("graphql").DocumentNode | null;
-        variables: TVariables_1 | null;
         notifyOnNetworkStatusChange: boolean;
         shouldResubscribe: boolean | ((options: import("@apollo-elements/interfaces").SubscriptionDataOptions<unknown, Record<string, any>>) => boolean) | undefined;
         skip: boolean;
-        onSubscriptionData?(_result: import("@apollo-elements/interfaces").OnSubscriptionDataParams<TData_1>): void;
+        onSubscriptionData?(_result: import("@apollo-elements/interfaces").OnSubscriptionDataParams<import("@apollo-elements/interfaces").Data<D_1>>): void;
         onSubscriptionComplete?(): void;
@@ -22,27 +23,27 @@ onError?(error: import("@apollo/client/errors").ApolloError): void;
         disconnectedCallback(): void;
-        documentChanged(document: import("graphql").DocumentNode): void;
-        variablesChanged(variables: TVariables_1): void;
-        subscribe(params?: Partial<import("@apollo-elements/interfaces").SubscriptionDataOptions<TData_1, TVariables_1>> | undefined): void;
+        documentChanged(document: import("graphql/language/ast").DocumentNode | import("@apollo-elements/interfaces").ComponentDocument<D_1>): void;
+        variablesChanged(variables: import("@apollo-elements/interfaces").Variables<D_1, V_1> | null): void;
+        subscribe(params?: Partial<import("@apollo-elements/interfaces").SubscriptionDataOptions<D_1, V_1>> | undefined): void;
         cancel(): void;
-        canSubscribe(options?: Partial<import("@apollo/client/core").SubscriptionOptions<Record<string, any>, any>> | undefined): boolean;
-        shouldSubscribe(options?: Partial<import("@apollo/client/core").SubscriptionOptions<Record<string, any>, any>> | undefined): boolean;
-        initObservable(params?: Partial<import("@apollo-elements/interfaces").SubscriptionDataOptions<TData_1, TVariables_1>> | undefined): void;
-        nextData(result: import("@apollo/client/core").FetchResult<TData_1, Record<string, any>, Record<string, any>>): void;
+        canSubscribe(params?: Partial<import("@apollo/client/core").SubscriptionOptions<import("@apollo-elements/interfaces").Variables<D_1, V_1> | null, any>> | undefined): boolean;
+        shouldSubscribe(params?: Partial<import("@apollo/client/core").SubscriptionOptions<import("@apollo-elements/interfaces").Variables<D_1, V_1> | null, any>> | undefined): boolean;
+        initObservable(params?: Partial<import("@apollo-elements/interfaces").SubscriptionDataOptions<D_1, V_1>> | undefined): void;
+        nextData(result: import("@apollo/client/core").FetchResult<import("@apollo-elements/interfaces").Data<D_1>, Record<string, any>, Record<string, any>>): void;
         nextError(error: import("@apollo/client/errors").ApolloError): void;
         onComplete(): void;
         endSubscription(): void;
-        context?: Record<string, unknown> | undefined;
         error: Error | import("@apollo/client/errors").ApolloError | null;
         errors: readonly import("graphql").GraphQLError[] | null;
         loading: boolean;
-        client: import("@apollo/client/core").ApolloClient<import("@apollo/client/cache").NormalizedCacheObject> | null;
-        _document: import("graphql").DocumentNode | null;
+        context?: Record<string, unknown> | undefined;
+        client: import("@apollo/client/core").ApolloClient<import("@apollo/client/core").NormalizedCacheObject> | null;
+        _document: import("graphql/language/ast").DocumentNode | import("@apollo-elements/interfaces").ComponentDocument<D_1> | null;
         _documentSetByJS: boolean;
-        _variables: TVariables_1 | null;
+        _variables: import("@apollo-elements/interfaces").Variables<D_1, V_1> | null;
         _variablesSetByJS: boolean;
         mo: MutationObserver | null;
-        document: import("graphql").DocumentNode | null;
+        document: import("graphql/language/ast").DocumentNode | import("@apollo-elements/interfaces").ComponentDocument<D_1> | null;
         onDOMMutation(records: MutationRecord[]): void;
-        getDOMGraphQLDocument(): import("graphql").DocumentNode | null;
-        getDOMVariables(): TVariables_1 | null;
+        getDOMGraphQLDocument(): import("graphql/language/ast").DocumentNode | import("@apollo-elements/interfaces").ComponentDocument<D_1> | null;
+        getDOMVariables(): import("@apollo-elements/interfaces").Variables<D_1, V_1> | null;
         attributeChangedCallback?(name: string, oldValue: string, newValue: string): void;
@@ -67,5 +68,5 @@ adoptedCallback?(): void;
         click(): void;
-        addEventListener<K extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "click" | "scroll" | "blur" | "focus" | "apollo-mutation-result" | "apollo-error" | "apollo-query-result" | "apollo-subscription-result" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "canplay" | "canplaythrough" | "contextmenu" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "invalid" | "keydown" | "keypress" | "keyup" | "load" | "loadeddata" | "loadedmetadata" | "loadstart" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "ratechange" | "seeked" | "seeking" | "stalled" | "submit" | "suspend" | "timeupdate" | "volumechange" | "waiting" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "cancel" | "cuechange" | "dragexit" | "focusin" | "focusout" | "gotpointercapture" | "lostpointercapture" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "securitypolicyviolation" | "selectionchange" | "selectstart" | "toggle" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "wheel" | "copy" | "fullscreenchange" | "fullscreenerror" | "cut" | "paste">(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
+        addEventListener<K extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "click" | "scroll" | "blur" | "focus" | "apollo-mutation-result" | "apollo-error" | "apollo-query-result" | "cancel" | "apollo-subscription-result" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "canplay" | "canplaythrough" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "load" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "toggle" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "waiting" | "wheel" | "copy" | "cut" | "paste">(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
-        removeEventListener<K_1 extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "click" | "scroll" | "blur" | "focus" | "apollo-mutation-result" | "apollo-error" | "apollo-query-result" | "apollo-subscription-result" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "canplay" | "canplaythrough" | "contextmenu" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "invalid" | "keydown" | "keypress" | "keyup" | "load" | "loadeddata" | "loadedmetadata" | "loadstart" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "ratechange" | "seeked" | "seeking" | "stalled" | "submit" | "suspend" | "timeupdate" | "volumechange" | "waiting" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "cancel" | "cuechange" | "dragexit" | "focusin" | "focusout" | "gotpointercapture" | "lostpointercapture" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "securitypolicyviolation" | "selectionchange" | "selectstart" | "toggle" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "wheel" | "copy" | "fullscreenchange" | "fullscreenerror" | "cut" | "paste">(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
+        removeEventListener<K_1 extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "click" | "scroll" | "blur" | "focus" | "apollo-mutation-result" | "apollo-error" | "apollo-query-result" | "cancel" | "apollo-subscription-result" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "canplay" | "canplaythrough" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "load" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "toggle" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "waiting" | "wheel" | "copy" | "cut" | "paste">(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
@@ -311,3 +312,3 @@ readonly assignedSlot: HTMLSlotElement | null;
     documentType: string;
-} & Constructor<ApolloElement<unknown, unknown>>;
+} & Constructor<ApolloElement<any, any>>;
 /**
@@ -323,4 +324,4 @@ * `ApolloSubscription`
  */
-export declare class ApolloSubscription<TData, TVariables> extends ApolloSubscription_base<TData, TVariables> implements ApolloSubscriptionInterface<TData, TVariables> {
+export declare class ApolloSubscription<D = unknown, V = OperationVariables> extends ApolloSubscription_base<D, V> implements ApolloSubscriptionInterface<D, V> {
 }
 export {};

apollo-subscription.test.js

@@ -96,2 +96,8 @@ import { __decorate } from "tslib";
 }
+class TDNTypeCheck extends ApolloSubscription {
+    typeCheck() {
+        assertType(this.data);
+        assertType(this.variables);
+    }
+}
 //# sourceMappingURL=apollo-subscription.test.js.map

apollo-subscription.test.ts

@@ -5,4 +5,6 @@ import type {
   FetchResult,
+  NormalizedCacheObject,
   Observable,
-  NormalizedCacheObject,
+  OperationVariables,
+  TypedDocumentNode,
 } from '@apollo/client/core';
@@ -28,3 +30,3 @@
 @customElement({ name: 'testable-apollo-subscription', template })
-class TestableApolloSubscription<D = unknown, V = unknown>
+class TestableApolloSubscription<D = unknown, V = OperationVariables>
   extends ApolloSubscription<D, V>
@@ -125,1 +127,9 @@ implements SubscriptionElement<D, V> {
 }
+
+type TDN = TypedDocumentNode<TypeCheckData, TypeCheckVars>;
+class TDNTypeCheck extends ApolloSubscription<TDN> {
+  typeCheck() {
+    assertType<TypeCheckData>(this.data!);
+    assertType<TypeCheckVars>(this.variables!);
+  }
+}

apollo-subscription.ts

@@ -0,1 +1,2 @@
+import type { OperationVariables } from '@apollo/client/core';
 import { ApolloElement } from './apollo-element';
@@ -15,6 +16,5 @@ import { ApolloSubscriptionMixin } from '@apollo-elements/mixins/apollo-subscription-mixin';
  */
-export class ApolloSubscription<TData, TVariables>
+export class ApolloSubscription<D = unknown, V = OperationVariables>
   // have to cast because of the TypeScript bug which causes the error in apollo-element-mixin
-  extends ApolloSubscriptionMixin(ApolloElement as Constructor<ApolloElement>)<TData, TVariables>
-  implements ApolloSubscriptionInterface<TData, TVariables> {
-}
+  extends ApolloSubscriptionMixin(ApolloElement as Constructor<ApolloElement<any, any>>)<D, V>
+  implements ApolloSubscriptionInterface<D, V> { }

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [1.2.0-alpha.1](https://github.com/apollo-elements/apollo-elements/compare/@apollo-elements/fast@1.2.0-alpha.0...@apollo-elements/fast@1.2.0-alpha.1) (2020-12-05)
+
+
+### Features
+
+* support for TypedDocumentNode ([152b4f0](https://github.com/apollo-elements/apollo-elements/commit/152b4f0e66ff22b7aa30c7b926db8291b0cbdfea))
+
+
+
+
+
 # [1.2.0-alpha.0](https://github.com/apollo-elements/apollo-elements/compare/@apollo-elements/fast@1.1.3...@apollo-elements/fast@1.2.0-alpha.0) (2020-12-04)
@@ -8,0 +19,0 @@

package.json

 {
   "name": "@apollo-elements/fast",
-  "version": "1.2.0-alpha.0",
+  "version": "1.2.0-alpha.1",
   "description": "👩‍🚀🌛 FastElements for Apollo GraphQL 🚀👨‍🚀",
@@ -57,7 +57,7 @@ "main": "index.js",
   "dependencies": {
-    "@apollo-elements/mixins": "^3.4.0-alpha.0",
+    "@apollo-elements/mixins": "^3.4.0-alpha.1",
     "@microsoft/fast-element": "^0.18.0",
     "tslib": "^2.0.3"
   },
-  "gitHead": "5de7f7b7d2db6476675f304d6748c5af047ad1c2"
+  "gitHead": "20383fd2003cf7fec69965500b33e5ec9828e332"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

234618

increased by3.06%

Lines of code

3191

increased by2.37%

Dependency changes

• Updated@apollo-elements/mixins@^3.4.0-alpha.1