You're Invited: Meet the Socket team at BSidesSF and RSAC - April 27 - May 1.RSVP →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@apollo-elements/mixins

Package Overview
Dependencies
Maintainers
1
Versions
62
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@apollo-elements/mixins - npm Package Compare versions

Comparing version

3.1.0
to
3.1.1

211

apollo-element-mixin.js

@@ -20,3 +20,2 @@ import { gql } from '@apollo/client/core';

function ApolloElementMixinImplementation(superclass) {
var _a;
/**

@@ -26,113 +25,113 @@ * @element

// @ts-expect-error: https://github.com/microsoft/TypeScript/issues/37142
return _a = class ApolloElement extends superclass {
constructor() {
super();
this.client = window.__APOLLO_CLIENT__;
/** @private */
class ApolloElement extends superclass {
constructor() {
super();
this.client = window.__APOLLO_CLIENT__;
/** @private */
this._document = null;
/** @private */
this._documentSetByJS = false;
/** @private */
this._variables = null;
/** @private */
this._variablesSetByJS = false;
this.data = null;
this.variables = null;
this.error = null;
this.errors = null;
this.loading = false;
}
/** GraphQL Document */
get document() {
var _a;
return (_a = this._document) !== null && _a !== void 0 ? _a : this.getDOMGraphQLDocument();
}
set document(document) {
var _a, _b;
this._documentSetByJS = false;
if (!document)
this._document = null;
/** @private */
this._documentSetByJS = false;
/** @private */
this._variables = null;
/** @private */
this._variablesSetByJS = false;
Object.defineProperties(this, {
variables: {
configurable: true,
enumerable: true,
get() {
return this._variables;
},
set(variables) {
var _a;
this._variables = variables;
if (this.mo) // element is connected
(_a = this.variablesChanged) === null || _a === void 0 ? void 0 : _a.call(// element is connected
this, variables);
},
},
});
this.data = null;
this.variables = null;
this.error = null;
this.errors = null;
this.loading = false;
else if (!isValidGql(document))
throw new TypeError(`${capital((_a = this.constructor.documentType) !== null && _a !== void 0 ? _a : 'document')} must be a gql-parsed DocumentNode`);
else {
this._document = document;
this._documentSetByJS = true;
if (this.mo) // element is connected
(_b = this.documentChanged) === null || _b === void 0 ? void 0 : _b.call(// element is connected
this, document);
}
/** GraphQL Document */
get document() {
var _a;
return (_a = this._document) !== null && _a !== void 0 ? _a : this.getDOMGraphQLDocument();
}
/**
* @fires 'apollo-element-connected' when the element connects to the dom
*/
connectedCallback() {
var _a, _b, _c;
(_a = super.connectedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
this.mo = new MutationObserver(this.onMutation.bind(this));
this.mo.observe(this, { characterData: true, childList: true, subtree: true });
this._document = (_b = this._document) !== null && _b !== void 0 ? _b : this.getDOMGraphQLDocument();
this._variables = (_c = this._variables) !== null && _c !== void 0 ? _c : this.getDOMVariables();
this.dispatchEvent(new ApolloElementEvent('apollo-element-connected', this));
}
/**
* @fires 'apollo-element-disconnected' when the element disconnects from the dom
*/
disconnectedCallback() {
var _a, _b;
(_a = this.mo) === null || _a === void 0 ? void 0 : _a.disconnect();
(_b = super.disconnectedCallback) === null || _b === void 0 ? void 0 : _b.call(this);
this.dispatchEvent(new ApolloElementEvent('apollo-element-disconnected', this));
}
/** @private */
onMutation() {
if (!this._documentSetByJS)
this._document = this.getDOMGraphQLDocument();
if (!this._variablesSetByJS)
this._variables = this.getDOMVariables();
}
/**
* Get a GraphQL DocumentNode from the element's GraphQL script child
* @private
*/
getDOMGraphQLDocument() {
var _a;
const script = this.querySelector('script[type="application/graphql"]');
const text = script === null || script === void 0 ? void 0 : script.innerText;
if (!text)
return null;
else
return gql((_a = text.replace) === null || _a === void 0 ? void 0 : _a.call(text, /<!---->/g, ''));
}
/**
* Gets operation variables from the element's JSON script child
* @private
*/
getDOMVariables() {
const script = this.querySelector('script[type="application/json"]');
try {
return JSON.parse(script.innerText);
}
set document(document) {
var _a, _b;
this._documentSetByJS = false;
if (!document)
this._document = null;
else if (!isValidGql(document))
throw new TypeError(`${capital((_a = this.constructor.documentType) !== null && _a !== void 0 ? _a : 'document')} must be a gql-parsed DocumentNode`);
else {
this._document = document;
this._documentSetByJS = true;
if (this.mo) // element is connected
(_b = this.documentChanged) === null || _b === void 0 ? void 0 : _b.call(// element is connected
this, document);
}
catch {
return null;
}
/**
* @fires 'apollo-element-connected' when the element connects to the dom
*/
connectedCallback() {
var _a, _b, _c;
(_a = super.connectedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
this.mo = new MutationObserver(this.onMutation.bind(this));
this.mo.observe(this, { characterData: true, childList: true, subtree: true });
this._document = (_b = this._document) !== null && _b !== void 0 ? _b : this.getDOMGraphQLDocument();
this._variables = (_c = this._variables) !== null && _c !== void 0 ? _c : this.getDOMVariables();
this.dispatchEvent(new ApolloElementEvent('apollo-element-connected', this));
}
/**
* @fires 'apollo-element-disconnected' when the element disconnects from the dom
*/
disconnectedCallback() {
var _a, _b;
(_a = this.mo) === null || _a === void 0 ? void 0 : _a.disconnect();
(_b = super.disconnectedCallback) === null || _b === void 0 ? void 0 : _b.call(this);
this.dispatchEvent(new ApolloElementEvent('apollo-element-disconnected', this));
}
/** @private */
onMutation() {
if (!this._documentSetByJS)
this._document = this.getDOMGraphQLDocument();
if (!this._variablesSetByJS)
this._variables = this.getDOMVariables();
}
/**
* Get a GraphQL DocumentNode from the element's GraphQL script child
* @private
*/
getDOMGraphQLDocument() {
}
}
ApolloElement.documentType = 'document';
Object.defineProperties(ApolloElement.prototype, {
variables: {
configurable: true,
enumerable: true,
get() {
return this._variables;
},
set(variables) {
var _a;
const script = this.querySelector('script[type="application/graphql"]');
const text = script === null || script === void 0 ? void 0 : script.innerText;
if (!text)
return null;
else
return gql((_a = text.replace) === null || _a === void 0 ? void 0 : _a.call(text, /<!---->/g, ''));
}
/**
* Gets operation variables from the element's JSON script child
* @private
*/
getDOMVariables() {
const script = this.querySelector('script[type="application/json"]');
try {
return JSON.parse(script.innerText);
}
catch {
return null;
}
}
this._variables = variables;
if (this.mo) // element is connected
(_a = this.variablesChanged) === null || _a === void 0 ? void 0 : _a.call(// element is connected
this, variables);
},
},
_a.documentType = 'document',
_a;
});
return ApolloElement;
}

@@ -139,0 +138,0 @@ /**

43

apollo-element-mixin.ts

@@ -43,3 +43,3 @@ import type { ApolloClient, ApolloError, NormalizedCacheObject } from '@apollo/client/core';

// @ts-expect-error: https://github.com/microsoft/TypeScript/issues/37142
return class ApolloElement<
class ApolloElement<
TData = unknown,

@@ -101,21 +101,2 @@ TVariables = unknown

type This = this;
Object.defineProperties(this, {
variables: {
configurable: true,
enumerable: true,
get(this: This): TVariables {
return this._variables;
},
set(this: This, variables) {
this._variables = variables;
if (this.mo) // element is connected
this.variablesChanged?.(variables);
},
},
});
this.data = null;

@@ -198,3 +179,23 @@ this.variables = null;

}
};
}
Object.defineProperties(ApolloElement.prototype, {
variables: {
configurable: true,
enumerable: true,
get(this: ApolloElement) {
return this._variables;
},
set(this: ApolloElement, variables) {
this._variables = variables;
if (this.mo) // element is connected
this.variablesChanged?.(variables);
},
},
});
return ApolloElement;
}

@@ -201,0 +202,0 @@

177

apollo-mutation-mixin.js
import { dedupeMixin } from '@open-wc/dedupe-mixin';
import { ApolloElementMixin } from './apollo-element-mixin';
function ApolloMutationMixinImpl(superclass) {
var _a;
return _a = class ApolloMutationElement extends ApolloElementMixin(superclass) {
constructor() {
super();
this.called = false;
this.ignoreResults = false;
this.mostRecentMutationId = 0;
this.variables = null;
Object.defineProperties(this, {
mutation: {
configurable: true,
enumerable: true,
get() {
return this.document;
},
set(mutation) {
this.document = mutation;
},
},
});
class ApolloMutationElement extends ApolloElementMixin(superclass) {
constructor() {
super();
this.called = false;
this.ignoreResults = false;
this.mostRecentMutationId = 0;
this.variables = null;
}
/**
* This resolves a single mutation according to the options specified and returns a Promise which is either resolved with the resulting data or rejected with an error.
*/
async mutate(params) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
const options = {
awaitRefetchQueries: (_a = params === null || params === void 0 ? void 0 : params.awaitRefetchQueries) !== null && _a !== void 0 ? _a : this.awaitRefetchQueries,
context: (_b = params === null || params === void 0 ? void 0 : params.context) !== null && _b !== void 0 ? _b : this.context,
errorPolicy: (_c = params === null || params === void 0 ? void 0 : params.errorPolicy) !== null && _c !== void 0 ? _c : this.errorPolicy,
fetchPolicy: (_d = params === null || params === void 0 ? void 0 : params.fetchPolicy) !== null && _d !== void 0 ? _d : this.fetchPolicy,
mutation: (_e = params === null || params === void 0 ? void 0 : params.mutation) !== null && _e !== void 0 ? _e : this.mutation,
optimisticResponse: (_f = params === null || params === void 0 ? void 0 : params.optimisticResponse) !== null && _f !== void 0 ? _f : this.optimisticResponse,
refetchQueries: (_g = params === null || params === void 0 ? void 0 : params.refetchQueries) !== null && _g !== void 0 ? _g : this.refetchQueries,
update: (_h = params === null || params === void 0 ? void 0 : params.update) !== null && _h !== void 0 ? _h : this.updater,
variables: (_j = params === null || params === void 0 ? void 0 : params.variables) !== null && _j !== void 0 ? _j : this.variables,
};
const mutationId = this.generateMutationId();
this.loading = true;
this.error = null;
this.data = null;
this.called = true;
return this.client.mutate(options)
.then((response) => this.onCompletedMutation(response, mutationId))
.catch((error) => this.onMutationError(error, mutationId));
}
/**
* Increments and returns the most recent mutation id.
* @private
*/
generateMutationId() {
this.mostRecentMutationId += 1;
return this.mostRecentMutationId;
}
/**
* Returns true when an ID matches the most recent mutation id.
* @private
*/
isMostRecentMutation(mutationId) {
return this.mostRecentMutationId === mutationId;
}
/**
* Callback for when a mutation is completed.
* @private
*/
onCompletedMutation(response, mutationId) {
var _a;
const { data } = response;
if (this.isMostRecentMutation(mutationId) && !this.ignoreResults) {
this.loading = false;
this.error = null;
this.data = data !== null && data !== void 0 ? data : null;
}
/**
* This resolves a single mutation according to the options specified and returns a Promise which is either resolved with the resulting data or rejected with an error.
*/
async mutate(params) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
const options = {
awaitRefetchQueries: (_a = params === null || params === void 0 ? void 0 : params.awaitRefetchQueries) !== null && _a !== void 0 ? _a : this.awaitRefetchQueries,
context: (_b = params === null || params === void 0 ? void 0 : params.context) !== null && _b !== void 0 ? _b : this.context,
errorPolicy: (_c = params === null || params === void 0 ? void 0 : params.errorPolicy) !== null && _c !== void 0 ? _c : this.errorPolicy,
fetchPolicy: (_d = params === null || params === void 0 ? void 0 : params.fetchPolicy) !== null && _d !== void 0 ? _d : this.fetchPolicy,
mutation: (_e = params === null || params === void 0 ? void 0 : params.mutation) !== null && _e !== void 0 ? _e : this.mutation,
optimisticResponse: (_f = params === null || params === void 0 ? void 0 : params.optimisticResponse) !== null && _f !== void 0 ? _f : this.optimisticResponse,
refetchQueries: (_g = params === null || params === void 0 ? void 0 : params.refetchQueries) !== null && _g !== void 0 ? _g : this.refetchQueries,
update: (_h = params === null || params === void 0 ? void 0 : params.update) !== null && _h !== void 0 ? _h : this.updater,
variables: (_j = params === null || params === void 0 ? void 0 : params.variables) !== null && _j !== void 0 ? _j : this.variables,
};
const mutationId = this.generateMutationId();
this.loading = true;
this.error = null;
(_a = this.onCompleted) === null || _a === void 0 ? void 0 : _a.call(this, data);
return response;
}
/**
* Callback for when a mutation fails.
* @private
*/
onMutationError(error, mutationId) {
var _a;
if (this.isMostRecentMutation(mutationId)) {
this.loading = false;
this.data = null;
this.called = true;
return this.client.mutate(options)
.then((response) => this.onCompletedMutation(response, mutationId))
.catch((error) => this.onMutationError(error, mutationId));
this.error = error !== null && error !== void 0 ? error : null;
}
/**
* Increments and returns the most recent mutation id.
* @private
*/
generateMutationId() {
this.mostRecentMutationId += 1;
return this.mostRecentMutationId;
}
/**
* Returns true when an ID matches the most recent mutation id.
* @private
*/
isMostRecentMutation(mutationId) {
return this.mostRecentMutationId === mutationId;
}
/**
* Callback for when a mutation is completed.
* @private
*/
onCompletedMutation(response, mutationId) {
var _a;
const { data } = response;
if (this.isMostRecentMutation(mutationId) && !this.ignoreResults) {
this.loading = false;
this.error = null;
this.data = data !== null && data !== void 0 ? data : null;
}
(_a = this.onCompleted) === null || _a === void 0 ? void 0 : _a.call(this, data);
return response;
}
/**
* Callback for when a mutation fails.
* @private
*/
onMutationError(error, mutationId) {
var _a;
if (this.isMostRecentMutation(mutationId)) {
this.loading = false;
this.data = null;
this.error = error !== null && error !== void 0 ? error : null;
}
(_a = this.onError) === null || _a === void 0 ? void 0 : _a.call(this, error);
throw error;
}
(_a = this.onError) === null || _a === void 0 ? void 0 : _a.call(this, error);
throw error;
}
}
ApolloMutationElement.documentType = 'mutation';
Object.defineProperties(ApolloMutationElement.prototype, {
mutation: {
configurable: true,
enumerable: true,
get() {
return this.document;
},
set(mutation) {
this.document = mutation;
},
},
_a.documentType = 'mutation',
_a;
});
return ApolloMutationElement;
}

@@ -98,0 +97,0 @@ /**

38

apollo-mutation-mixin.ts

@@ -20,3 +20,3 @@ import type { DocumentNode } from 'graphql/language/ast';

function ApolloMutationMixinImpl<B extends Constructor>(superclass: B) {
return class ApolloMutationElement<TData, TVariables>
class ApolloMutationElement<TData, TVariables>
extends ApolloElementMixin(superclass)<TData, TVariables>

@@ -68,19 +68,3 @@ implements ApolloMutationInterface<TData, TVariables> {

super();
type This = this;
this.variables = null;
Object.defineProperties(this, {
mutation: {
configurable: true,
enumerable: true,
get(this: This): DocumentNode {
return this.document;
},
set(this: This, mutation) {
this.document = mutation;
},
},
});
}

@@ -163,3 +147,21 @@

}
};
}
Object.defineProperties(ApolloMutationElement.prototype, {
mutation: {
configurable: true,
enumerable: true,
get(this: ApolloMutationElement<unknown, unknown>): DocumentNode {
return this.document;
},
set(this: ApolloMutationElement<unknown, unknown>, mutation) {
this.document = mutation;
},
},
});
return ApolloMutationElement;
}

@@ -166,0 +168,0 @@

415

apollo-query-mixin.js

@@ -24,214 +24,213 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin';

function ApolloQueryMixinImpl(superclass) {
var _a;
return _a = class ApolloQueryElement extends ApolloElementMixin(superclass) {
constructor() {
super();
this.errorPolicy = 'none';
/** @private */
this.__options = null;
Object.defineProperties(this, {
query: {
configurable: true,
enumerable: true,
get() {
return this.document;
},
set(query) {
this.document = query;
},
},
options: {
configurable: true,
enumerable: true,
get() {
return this.__options;
},
set(options) {
var _a;
this.__options = options;
(_a = this.observableQuery) === null || _a === void 0 ? void 0 : _a.setOptions(options);
},
},
noAutoSubscribe: {
configurable: true,
enumerable: true,
get() {
return this.hasAttribute('no-auto-subscribe');
},
set(v) {
if (v)
this.setAttribute('no-auto-subscribe', '');
else
this.removeAttribute('no-auto-subscribe');
},
},
});
class ApolloQueryElement extends ApolloElementMixin(superclass) {
constructor() {
super(...arguments);
this.errorPolicy = 'none';
/** @private */
this.__options = null;
}
/** @protected */
connectedCallback() {
super.connectedCallback();
this.documentChanged(this.query);
}
documentChanged(query) {
if (this.canSubscribe({ query }) && this.shouldSubscribe({ query }))
this.subscribe({ query });
}
variablesChanged(variables) {
if (this.observableQuery)
this.refetch(variables);
else if (this.canSubscribe({ variables }) && this.shouldSubscribe({ variables }))
this.subscribe({ variables });
else
return;
}
/**
* Exposes the [`ObservableQuery#refetch`](https://www.apollographql.com/docs/react/api/apollo-client.html#ObservableQuery.refetch) method.
*
* @param variables The new set of variables. If there are missing variables, the previous values of those variables will be used..
*/
refetch(variables) {
var _a;
return (_a = this.observableQuery) === null || _a === void 0 ? void 0 : _a.refetch(variables);
}
/**
* Determines whether the element is able to automatically subscribe
* @protected
*/
canSubscribe(options) {
var _a;
return (!this.noAutoSubscribe &&
!!this.client &&
!!((_a = options === null || options === void 0 ? void 0 : options.query) !== null && _a !== void 0 ? _a : this.document));
}
/**
* Determines whether the element should attempt to automatically subscribe i.e. begin querying
*
* Override to prevent subscribing unless your conditions are met.
*/
shouldSubscribe(options) {
return (void options, true);
}
/**
* Resets the observableQuery and subscribes.
*/
subscribe(params) {
var _a, _b, _c, _d;
const options = {
context: (_a = params === null || params === void 0 ? void 0 : params.context) !== null && _a !== void 0 ? _a : this.context,
fetchPolicy: (_b = params === null || params === void 0 ? void 0 : params.fetchPolicy) !== null && _b !== void 0 ? _b : this.fetchPolicy,
query: (_c = params === null || params === void 0 ? void 0 : params.query) !== null && _c !== void 0 ? _c : this.query,
variables: (_d = params === null || params === void 0 ? void 0 : params.variables) !== null && _d !== void 0 ? _d : this.variables,
};
if (this.observableQuery)
this.observableQuery.stopPolling();
this.observableQuery =
this.watchQuery(options);
this.loading = true;
return this.observableQuery.subscribe({
next: this.nextData.bind(this),
error: this.nextError.bind(this),
});
}
/**
* Lets you pass a GraphQL subscription and updateQuery function
* to subscribe to more updates for your query.
*
* The `updateQuery` parameter is a function that takes the previous query data,
* then a `{ subscriptionData: TSubscriptionResult }` object,
* and returns an object with updated query data based on the new results.
*/
subscribeToMore(options) {
var _a;
return (_a = this.observableQuery) === null || _a === void 0 ? void 0 : _a.subscribeToMore(options);
}
/**
* Executes a Query once and updates the component with the result
*/
async executeQuery(params) {
var _a, _b;
const query = (_a = params === null || params === void 0 ? void 0 : params.query) !== null && _a !== void 0 ? _a : this.query;
const variables = (_b = params === null || params === void 0 ? void 0 : params.variables) !== null && _b !== void 0 ? _b : this.variables;
const options = { ...pickExecuteQueryOpts(this), ...params, query, variables };
this.loading = true;
try {
const result = await this.client.query(options);
this.nextData(result);
return result;
}
/** @protected */
connectedCallback() {
super.connectedCallback();
this.documentChanged(this.query);
catch (error) {
this.nextError(error);
throw error;
}
documentChanged(query) {
if (this.canSubscribe({ query }) && this.shouldSubscribe({ query }))
this.subscribe({ query });
}
variablesChanged(variables) {
if (this.observableQuery)
this.refetch(variables);
else if (this.canSubscribe({ variables }) && this.shouldSubscribe({ variables }))
this.subscribe({ variables });
else
return;
}
/**
* Exposes the [`ObservableQuery#refetch`](https://www.apollographql.com/docs/react/api/apollo-client.html#ObservableQuery.refetch) method.
*
* @param variables The new set of variables. If there are missing variables, the previous values of those variables will be used..
*/
refetch(variables) {
}
/**
* Exposes the `ObservableQuery#fetchMore` method.
* https://www.apollographql.com/docs/react/api/apollo-client.html#ObservableQuery.fetchMore
*
* The optional `updateQuery` parameter is a function that takes the previous query data,
* then a `{ subscriptionData: TSubscriptionResult }` object,
* and returns an object with updated query data based on the new results.
*
* The optional `variables` parameter is an optional new variables object.
*/
fetchMore(params) {
var _a, _b, _c;
const options = {
query: (_a = params === null || params === void 0 ? void 0 : params.query) !== null && _a !== void 0 ? _a : this.query,
updateQuery: params === null || params === void 0 ? void 0 : params.updateQuery,
variables: params === null || params === void 0 ? void 0 : params.variables,
context: (_b = params === null || params === void 0 ? void 0 : params.context) !== null && _b !== void 0 ? _b : this.context,
};
this.loading = true;
return (_c = this.observableQuery) === null || _c === void 0 ? void 0 : _c.fetchMore(options);
}
/**
* Creates an instance of ObservableQuery with the options provided by the element.
* - `context` Context to be passed to link execution chain
* - `errorPolicy` Specifies the ErrorPolicy to be used for this query
* - `fetchPolicy` Specifies the FetchPolicy to be used for this query
* - `fetchResults` Whether or not to fetch results
* - `metadata` Arbitrary metadata stored in the store with this query. Designed for debugging, developer tools, etc.
* - `notifyOnNetworkStatusChange` Whether or not updates to the network status should trigger next on the observer of this query
* - `pollInterval` The time interval (in milliseconds) on which this query should be refetched from the server.
* - `query` A GraphQL document that consists of a single query to be sent down to the server.
* - `variables` A map going from variable name to variable value, where the variables are used within the GraphQL query.
*/
watchQuery(params) {
var _a, _b;
const options = {
...pickWatchQueryOpts(this),
...params,
query: (_a = params === null || params === void 0 ? void 0 : params.query) !== null && _a !== void 0 ? _a : this.query,
variables: (_b = params === null || params === void 0 ? void 0 : params.variables) !== null && _b !== void 0 ? _b : this.variables,
};
return this.client.watchQuery(options);
}
/**
* Sets `data`, `loading`, and `error` on the instance when new subscription results arrive.
* @private
*/
nextData(result) {
var _a, _b, _c;
this.data = (_a = result === null || result === void 0 ? void 0 : result.data) !== null && _a !== void 0 ? _a : null;
this.loading = result === null || result === void 0 ? void 0 : result.loading;
this.networkStatus = result === null || result === void 0 ? void 0 : result.networkStatus;
this.partial = result === null || result === void 0 ? void 0 : result.partial;
if (result.error !== undefined)
this.error = result === null || result === void 0 ? void 0 : result.error;
if (result.errors !== undefined)
this.errors = (_b = result === null || result === void 0 ? void 0 : result.errors) !== null && _b !== void 0 ? _b : null;
(_c = this.onData) === null || _c === void 0 ? void 0 : _c.call(this, result);
}
/**
* Sets `error` and `loading` on the instance when the subscription errors.
* @private
*/
nextError(error) {
var _a;
this.error = error;
(_a = this.onError) === null || _a === void 0 ? void 0 : _a.call(this, error);
}
}
ApolloQueryElement.documentType = 'query';
Object.defineProperties(ApolloQueryElement.prototype, {
query: {
configurable: true,
enumerable: true,
get() {
return this.document;
},
set(query) {
this.document = query;
},
},
options: {
configurable: true,
enumerable: true,
get() {
return this.__options;
},
set(options) {
var _a;
return (_a = this.observableQuery) === null || _a === void 0 ? void 0 : _a.refetch(variables);
}
/**
* Determines whether the element is able to automatically subscribe
* @protected
*/
canSubscribe(options) {
var _a;
return (!this.noAutoSubscribe &&
!!this.client &&
!!((_a = options === null || options === void 0 ? void 0 : options.query) !== null && _a !== void 0 ? _a : this.document));
}
/**
* Determines whether the element should attempt to automatically subscribe i.e. begin querying
*
* Override to prevent subscribing unless your conditions are met.
*/
shouldSubscribe(options) {
return (void options, true);
}
/**
* Resets the observableQuery and subscribes.
*/
subscribe(params) {
var _a, _b, _c, _d;
const options = {
context: (_a = params === null || params === void 0 ? void 0 : params.context) !== null && _a !== void 0 ? _a : this.context,
fetchPolicy: (_b = params === null || params === void 0 ? void 0 : params.fetchPolicy) !== null && _b !== void 0 ? _b : this.fetchPolicy,
query: (_c = params === null || params === void 0 ? void 0 : params.query) !== null && _c !== void 0 ? _c : this.query,
variables: (_d = params === null || params === void 0 ? void 0 : params.variables) !== null && _d !== void 0 ? _d : this.variables,
};
if (this.observableQuery)
this.observableQuery.stopPolling();
this.observableQuery =
this.watchQuery(options);
this.loading = true;
return this.observableQuery.subscribe({
next: this.nextData.bind(this),
error: this.nextError.bind(this),
});
}
/**
* Lets you pass a GraphQL subscription and updateQuery function
* to subscribe to more updates for your query.
*
* The `updateQuery` parameter is a function that takes the previous query data,
* then a `{ subscriptionData: TSubscriptionResult }` object,
* and returns an object with updated query data based on the new results.
*/
subscribeToMore(options) {
var _a;
return (_a = this.observableQuery) === null || _a === void 0 ? void 0 : _a.subscribeToMore(options);
}
/**
* Executes a Query once and updates the component with the result
*/
async executeQuery(params) {
var _a, _b;
const query = (_a = params === null || params === void 0 ? void 0 : params.query) !== null && _a !== void 0 ? _a : this.query;
const variables = (_b = params === null || params === void 0 ? void 0 : params.variables) !== null && _b !== void 0 ? _b : this.variables;
const options = { ...pickExecuteQueryOpts(this), ...params, query, variables };
this.loading = true;
try {
const result = await this.client.query(options);
this.nextData(result);
return result;
}
catch (error) {
this.nextError(error);
throw error;
}
}
/**
* Exposes the `ObservableQuery#fetchMore` method.
* https://www.apollographql.com/docs/react/api/apollo-client.html#ObservableQuery.fetchMore
*
* The optional `updateQuery` parameter is a function that takes the previous query data,
* then a `{ subscriptionData: TSubscriptionResult }` object,
* and returns an object with updated query data based on the new results.
*
* The optional `variables` parameter is an optional new variables object.
*/
fetchMore(params) {
var _a, _b, _c;
const options = {
query: (_a = params === null || params === void 0 ? void 0 : params.query) !== null && _a !== void 0 ? _a : this.query,
updateQuery: params === null || params === void 0 ? void 0 : params.updateQuery,
variables: params === null || params === void 0 ? void 0 : params.variables,
context: (_b = params === null || params === void 0 ? void 0 : params.context) !== null && _b !== void 0 ? _b : this.context,
};
this.loading = true;
return (_c = this.observableQuery) === null || _c === void 0 ? void 0 : _c.fetchMore(options);
}
/**
* Creates an instance of ObservableQuery with the options provided by the element.
* - `context` Context to be passed to link execution chain
* - `errorPolicy` Specifies the ErrorPolicy to be used for this query
* - `fetchPolicy` Specifies the FetchPolicy to be used for this query
* - `fetchResults` Whether or not to fetch results
* - `metadata` Arbitrary metadata stored in the store with this query. Designed for debugging, developer tools, etc.
* - `notifyOnNetworkStatusChange` Whether or not updates to the network status should trigger next on the observer of this query
* - `pollInterval` The time interval (in milliseconds) on which this query should be refetched from the server.
* - `query` A GraphQL document that consists of a single query to be sent down to the server.
* - `variables` A map going from variable name to variable value, where the variables are used within the GraphQL query.
*/
watchQuery(params) {
var _a, _b;
const options = {
...pickWatchQueryOpts(this),
...params,
query: (_a = params === null || params === void 0 ? void 0 : params.query) !== null && _a !== void 0 ? _a : this.query,
variables: (_b = params === null || params === void 0 ? void 0 : params.variables) !== null && _b !== void 0 ? _b : this.variables,
};
return this.client.watchQuery(options);
}
/**
* Sets `data`, `loading`, and `error` on the instance when new subscription results arrive.
* @private
*/
nextData(result) {
var _a, _b, _c;
this.data = (_a = result === null || result === void 0 ? void 0 : result.data) !== null && _a !== void 0 ? _a : null;
this.loading = result === null || result === void 0 ? void 0 : result.loading;
this.networkStatus = result === null || result === void 0 ? void 0 : result.networkStatus;
this.partial = result === null || result === void 0 ? void 0 : result.partial;
if (result.error !== undefined)
this.error = result === null || result === void 0 ? void 0 : result.error;
if (result.errors !== undefined)
this.errors = (_b = result === null || result === void 0 ? void 0 : result.errors) !== null && _b !== void 0 ? _b : null;
(_c = this.onData) === null || _c === void 0 ? void 0 : _c.call(this, result);
}
/**
* Sets `error` and `loading` on the instance when the subscription errors.
* @private
*/
nextError(error) {
var _a;
this.error = error;
(_a = this.onError) === null || _a === void 0 ? void 0 : _a.call(this, error);
}
this.__options = options;
(_a = this.observableQuery) === null || _a === void 0 ? void 0 : _a.setOptions(options);
},
},
_a.documentType = 'query',
_a;
noAutoSubscribe: {
configurable: true,
enumerable: true,
get() {
return this.hasAttribute('no-auto-subscribe');
},
set(v) {
if (v)
this.setAttribute('no-auto-subscribe', '');
else
this.removeAttribute('no-auto-subscribe');
},
},
});
return ApolloQueryElement;
}

@@ -238,0 +237,0 @@ /**

22

apollo-query-mixin.test.js

@@ -60,2 +60,24 @@ import { expect, html as fhtml, defineCE, unsafeStatic, fixture, nextFrame, } from '@open-wc/testing';

}
function RuntimeMixin(superclass) {
return class extends superclass {
};
}
class MixedClass extends RuntimeMixin(ApolloQueryMixin(HTMLElement)) {
}
function ChildMixin(superclass) {
return class extends superclass {
};
}
class Inheritor extends ChildMixin(MixedClass) {
}
const runChecks = false;
if (runChecks) {
const instance = new MixedClass();
const inheritor = new Inheritor();
assertType(instance.data.foo);
assertType(instance.mixinProp);
assertType(inheritor.data.foo);
assertType(inheritor.mixinProp);
assertType(inheritor.childProp);
}
class TypeCheckAccessor extends ApolloQueryMixin(HTMLElement) {

@@ -62,0 +84,0 @@ // @ts-expect-error: don't allow using accessors. Run a function when dependencies change instead

28

apollo-query-mixin.test.ts

@@ -54,2 +54,3 @@ import type {

import NullableParamQuery from '@apollo-elements/test-helpers/NullableParam.query.graphql';
import { Constructor } from '@apollo-elements/interfaces';

@@ -110,2 +111,29 @@ class XL extends HTMLElement {}

function RuntimeMixin<Base extends Constructor>(superclass: Base) {
return class extends superclass {
declare mixinProp: boolean;
};
}
class MixedClass<D, V> extends RuntimeMixin(ApolloQueryMixin(HTMLElement))<D, V> { }
function ChildMixin<Base extends Constructor>(superclass: Base) {
return class extends superclass {
declare childProp: number;
};
}
class Inheritor<D, V> extends ChildMixin(MixedClass)<D, V> { }
const runChecks = false;
if (runChecks) {
const instance = new MixedClass<{ foo: number }, unknown>();
const inheritor = new Inheritor<{ foo: string }, unknown>();
assertType<number>(instance.data.foo);
assertType<boolean>(instance.mixinProp);
assertType<string>(inheritor.data.foo);
assertType<boolean>(inheritor.mixinProp);
assertType<number>(inheritor.childProp);
}
class TypeCheckAccessor extends ApolloQueryMixin(HTMLElement)<unknown, { hey: 'yo' }> {

@@ -112,0 +140,0 @@ // @ts-expect-error: don't allow using accessors. Run a function when dependencies change instead

100

apollo-query-mixin.ts

@@ -50,3 +50,3 @@ import type { Constructor, ApolloQueryInterface } from '@apollo-elements/interfaces';

function ApolloQueryMixinImpl<B extends Constructor>(superclass: B) {
return class ApolloQueryElement<TData, TVariables>
class ApolloQueryElement<TData, TVariables>
extends ApolloElementMixin(superclass)<TData, TVariables>

@@ -93,51 +93,2 @@ implements ApolloQueryInterface<TData, TVariables> {

constructor() {
super();
type This = this;
Object.defineProperties(this, {
query: {
configurable: true,
enumerable: true,
get(this: This) {
return this.document;
},
set(this: This, query) {
this.document = query;
},
},
options: {
configurable: true,
enumerable: true,
get(this: This): Partial<WatchQueryOptions> {
return this.__options;
},
set(this: This, options) {
this.__options = options;
this.observableQuery?.setOptions(options);
},
},
noAutoSubscribe: {
configurable: true,
enumerable: true,
get(this: This): boolean {
return this.hasAttribute('no-auto-subscribe');
},
set(v: boolean) {
if (v)
this.setAttribute('no-auto-subscribe', '');
else
this.removeAttribute('no-auto-subscribe');
},
},
});
}
/** @protected */

@@ -326,3 +277,50 @@ connectedCallback(): void {

}
};
}
Object.defineProperties(ApolloQueryElement.prototype, {
query: {
configurable: true,
enumerable: true,
get(this: ApolloQueryElement<unknown, unknown>) {
return this.document;
},
set(this: ApolloQueryElement<unknown, unknown>, query) {
this.document = query;
},
},
options: {
configurable: true,
enumerable: true,
get(this: ApolloQueryElement<unknown, unknown>): Partial<WatchQueryOptions> {
return this.__options;
},
set(this: ApolloQueryElement<unknown, unknown>, options) {
this.__options = options;
this.observableQuery?.setOptions(options);
},
},
noAutoSubscribe: {
configurable: true,
enumerable: true,
get(this: ApolloQueryElement<unknown, unknown>): boolean {
return this.hasAttribute('no-auto-subscribe');
},
set(v: boolean) {
if (v)
this.setAttribute('no-auto-subscribe', '');
else
this.removeAttribute('no-auto-subscribe');
},
},
});
return ApolloQueryElement;
}

@@ -329,0 +327,0 @@

11

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log

## [3.1.1](https://github.com/apollo-elements/apollo-elements/compare/@apollo-elements/mixins@3.1.0...@apollo-elements/mixins@3.1.1) (2020-10-30)
### Bug Fixes
* **mixins:** define properties at class level ([91522a6](https://github.com/apollo-elements/apollo-elements/commit/91522a62e3a2c11826cd21b76b409b6c4cb905db))
# [3.1.0](https://github.com/apollo-elements/apollo-elements/compare/@apollo-elements/mixins@3.0.5...@apollo-elements/mixins@3.1.0) (2020-10-25)

@@ -8,0 +19,0 @@

4

package.json
{
"name": "@apollo-elements/mixins",
"version": "3.1.0",
"version": "3.1.1",
"description": "👩‍🚀🌛 Custom Element class mixins for Apollo GraphQL 🚀👨‍🚀",

@@ -59,3 +59,3 @@ "main": "index.js",

},
"gitHead": "87b018f7d76920263a1b92ed90493806ccaf0344"
"gitHead": "55e943d3eca62541a52881ab4a43ae7bf587a6d1"
}
apollo-element-mixin.js.map

Sorry, the diff of this file is not supported yet

apollo-mutation-mixin.js.map

Sorry, the diff of this file is not supported yet

apollo-query-mixin.js.map

Sorry, the diff of this file is not supported yet

apollo-query-mixin.test.js.map

Sorry, the diff of this file is not supported yet