How to use @apollo-elements/lib - 10 common examples

const scriptChildMutation = new MutationObserver(() => {
      const doc = getGraphQLScriptChildDocument(host);
      if (doc) host[key] = doc;
    });

const connect = (host, key) => {
    const onInvalidate = ({ target }) => {
      if (key === 'mutation') return;
      if (host === target && host[key]) {
        key === 'query' && host.observableQuery
          ? host.observableQuery.setVariables(host[key])
          : host.subscribe();
      }
    };
    host.addEventListener('@invalidate', onInvalidate);

    if (!host[key]) host[key] = getGraphQLScriptChildDocument(host);
    if (key !== 'mutation' && host[key]) host.subscribe();

    const scriptChildMutation = new MutationObserver(() => {
      const doc = getGraphQLScriptChildDocument(host);
      if (doc) host[key] = doc;
    });

    scriptChildMutation.observe(host, { characterData: true, childList: true, subtree: true });

    return () => {
      host.removeEventListener('@invalidate', onInvalidate);
      scriptChildMutation.disconnect();
    };
  };

const get = (host, previous) =>
    previous || getGraphQLScriptChildDocument(host) || doc || null;

connectedCallback() {
      super.connectedCallback && super.connectedCallback();
      this.elementMutationObserver = new MutationObserver(this.onElementMutation);
      this.elementMutationObserver.observe(this, {
        characterData: true,
        childList: true,
        subtree: true,
      });
      this.document = getGraphQLScriptChildDocument(this) || null;
    }

onElementMutation() {
      const doc = getGraphQLScriptChildDocument(this);
      if (doc) this.document = doc;
    }
  });

get: host => ({ query = host.query, variables = host.variables } = {}) => {
    if (!hasAllVariables({ query, variables })) return;
    host.observableQuery = host.watchQuery(host, { query });
    const error = onError(host);
    const next = onNext(host);
    return host.observableQuery.subscribe({ error, next });
  },
};

get: host => ({
    fetchPolicy = host.fetchPolicy,
    query = host.subscription,
    variables = host.variables,
  } = {}) => {
    if (!hasAllVariables({ query, variables })) return;
    const observable = host.client.subscribe({ fetchPolicy, query, variables });
    const error = host.nextError(host);
    const next = host.nextData(host);
    host.observable = observable;
    return observable.subscribe({ error, next });
  },
};

async subscribe({
      fetchPolicy = this.fetchPolicy,
      query = this.subscription,
      variables = this.variables,
    } = {}) {
      if (!hasAllVariables({ query, variables })) return;
      this.observable = this.client.subscribe(
        stripUndefinedValues({ query, variables, fetchPolicy })
      );
      return this.observable.subscribe({
        next: this.nextData,
        error: this.nextError,
      });
    }

async subscribe({ query = this.query, variables = this.variables } = {}) {
      if (!hasAllVariables({ query, variables })) return;
      this.observableQuery = this.watchQuery({ query, variables });
      return this.observableQuery.subscribe({
        next: this.nextData,
        error: this.nextError,
      });
    }

const set = (host, next) => {
    if (!next) return doc || null;
    if (!isValidGql(next)) throw new Error(errorMessage);
    if (onSet && typeof onSet === 'function') onSet(next);
    return next;
  };