❀Nonstop Perpetual Motion

    TypeScript icon, indicating that this package has built-in type declarations

    1.4.0Β β€’Β PublicΒ β€’Β Published


    code snippet

    Published on npm Published on webcomponents.org ISC License Release

    πŸš€ Web component helpers for Apollo GraphQL πŸŒ‘

    πŸ¦… The element has registered πŸ‘¨β€πŸš€



    Generate a simple ApolloClient instance

    <apollo-client uri="/graphql"></apollo-client>

    Prevent network calls when required variables are absent

    <apollo-client uri="/graphql" validate-variables></apollo-client>

    Providing a client to a tree of Nodes

    <apollo-client id="client-a">

    Nesting separate clients

    <apollo-client id="client-a">
        <!-- This element queries from client-a's endpoint -->
      <apollo-client id="client-b">
          <!-- This element queries from client-b's endpoint -->


    Property Attribute Modifiers Type Description
    client ApolloClient<NormalizedCacheObject> | null Reference to the ApolloClient instance.
    elements readonly readonly ApolloElementElement<unknown, Record<string, any>>[] List of all ApolloElements registered to this client.
    typePolicies TypePolicies | undefined Type Policies for the client.
    uri uri string | undefined When the URI attribute is set, <apollo-client> will asynchronously
    create a new ApolloClient instance with some default parameters
    validateVariables validate-variables readonly boolean When true, client will not fetch operations that do not have all their non-nullable variables set.


    Method Type
    createApolloClient (): Promise<ApolloClient<NormalizedCacheObject> | null>


    Event Type
    client-changed CustomEvent<{ value: ApolloClient<NormalizedCacheObject> | null; client: ApolloClient<NormalizedCacheObject> | null; }>


    Simple Mutation component that takes a button or link-wrapped button as it's trigger. When loading, it disables the button. On error, it toasts a snackbar with the error message. You can pass a variables object property, or if all your variables properties are strings, you can use the element's data attributes

    Mixins: dedupeMixin, ApolloMutationMixinImpl, ApolloElementMixinImplementation


    Using data attributes

    <apollo-mutation data-type="Type" data-action="ACTION">
      <mwc-button slot="trigger">OK</mwc-button>

    Will mutate with the following as variables:

      "type": "Type",
      "action": "ACTION"

    Using data attributes and variables

    <apollo-mutation data-type="Quote" data-action="FLUB">
      <mwc-button slot="trigger" label="OK"></mwc-button>
      <mwc-textfield slot="variable"
      <mwc-textarea slot="variable"
          value="That's one small step..."

    Will mutate with the following as variables:

      "name": "Neil",
      "comment": "That's one small step...",
      "type": "Quote",
      "action": "FLUB"

    Using data attributes and variables with input property

    <apollo-mutation data-type="Type" data-action="ACTION" input-key="actionInput">
      <mwc-button slot="trigger" label="OK"></mwc-button>
      <mwc-textfield slot="variable"

    Will mutate with the following as variables:

      "actionInput": {
        "comment": "Hey!",
        "type": "Type",
        "action": "ACTION"

    Using DOM properties

    <apollo-mutation id="mutation">
      <mwc-button slot="trigger" label="OK"></mwc-button>
      document.getElementById('mutation').mutation = SomeMutation;
      document.getElementById('mutation').variables = {
        type: "Type",
        action: "ACTION"

    Will mutate with the following as variables:

      "type": "Type",
      "action": "ACTION"


    Property Attribute Type Default Description
    awaitRefetchQueries boolean | undefined Queries refetched as part of refetchQueries are handled asynchronously,
    and are not waited on before the mutation is completed (resolved).
    Setting this to true will make sure refetched queries are completed
    before the mutation is considered done. false by default.
    called called boolean false Whether the mutation was called
    client ApolloClient<NormalizedCacheObject> | null "window.APOLLO_CLIENT ?? null" The Apollo Client instance.
    context Record<string, unknown> | undefined Context passed to the link execution chain.
    data Data<D> | null null Latest mutation data
    document DocumentNode | TypedDocumentNode<{ [key: string]: any; }, { [key: string]: any; }> | null GraphQL operation document i.e. query, subscription, or mutation.
    Must be a parsed GraphQL DocumentNode, so use graphql-tag.
    If unset, the element can derive the document from the first
    light-DOM <script type="application/graphql"> child.
    error Error | ApolloError | null null Latest error
    errorPolicy "none" | "ignore" | "all" | undefined Specifies the ErrorPolicy to be used for this mutation.
    errors readonly GraphQLError[] | null null Latest errors
    fetchPolicy "no-cache" | undefined Specifies the FetchPolicy to be used for this mutation.
    ignoreResults boolean | undefined false If true, the returned data property will not update with the mutation result.
    inputKey input-key string "" When set, variable data attributes will be packed into an
    object property with the name of this property
    loading loading boolean "" Whether a request is in flight.
    mutation DocumentNode | ComponentDocument<D> | null The mutation.
    optimisticResponse Data<D> | ((vars: Variables<D, V>) => Data<D>) | undefined An object that represents the result of this mutation that
    will be optimistically stored before the server has actually returned a

    This is most often used for optimistic UI, where we want to be able to see
    the result of a mutation immediately, and update the UI later if any errors
    refetchQueries refetch-queries RefetchQueryDescription | ((result: FetchResult<Data<D>, Record<string, any>, Record<string, any>>) => RefetchQueryDescription) | null null A list of query names which will be refetched once this mutation has returned.
    This is often used if you have a set of queries which may be affected by a mutation and will have to update.
    Rather than writing a mutation query reducer (i.e. updateQueries) for this,
    you can refetch the queries that will be affected
    and achieve a consistent store once these queries return.
    variables Variables<D, V> | null "" An object that maps from the name of a variable as used in the mutation GraphQL document to that variable's value.


    Method Type Description
    adoptedCallback ((): void) | undefined Called when the element is adopted to a document.
    mutate (params?: Partial<MutationOptions<Data<D>, Variables<D, V>>> | undefined): Promise<FetchResult<Data<D>, Record<string, any>, Record<...>>> 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.
    resolveURL ((data: Data<D>): string | Promise<string>) | undefined Define this function to determine the URL to navigate to after a mutation.
    Function can be synchronous or async.
    If this function is not defined, will navigate to the href property of the link trigger.

    data: mutation data
    updater ((cache: ApolloCache<Data<D>>, mutationResult: FetchResult<Data<D>, Record<string, any>, Record<string, any>>): void) | undefined A function which updates the apollo cache when the query responds.
    This function will be called twice over the lifecycle of a mutation.
    Once at the very beginning if an optimisticResponse was provided.
    The writes created from the optimistic data will be rolled back before
    the second time this function is called which is when the mutation has
    succesfully resolved. At that point update will be called with the actual
    mutation result and those writes will not be rolled back.

    The reason a DataProxy is provided instead of the user calling the methods
    directly on ApolloClient is that all of the writes are batched together at
    the end of the update, and it allows for writes generated by optimistic
    data to be rolled back.


    Event Type Description
    apollo-element-connected when the element connects to the dom
    apollo-element-disconnected when the element disconnects from the dom
    apollo-error CustomEvent<ApolloError> when the mutation rejects
    apollo-mutation-result CustomEvent<FetchResult<Data<D>, Record<string, any>, Record<string, any>>> when the mutation resolves
    mutation-completed When the mutation resolves. detail is { data: Data, element: this }
    mutation-error When the mutation is rejected. detail is { error: ApolloError, element: this }
    will-mutate When the element is about to mutate. Useful for setting variables. Prevent default to prevent mutation. Detail is { element: this }
    will-navigate When the mutation resolves and the element is about to navigate. cancel the event to handle navigation yourself e.g. using a client-side router. . detail is { data: Data, element: this }


    Name Description
    trigger The triggering element. Must be a button or and anchor that wraps a button.
    variable An input with a data-variable attribute. It's value property gets the value for the corresponding variable.

    CSS Shadow Parts

    Part Description
    trigger The container for the trigger.
    See ApolloMutationInterface for more information on events
    variables The container for variable inputs.

    Dependencies (5)

    Dev Dependencies (0)


      npm i @apollo-elements/components

      DownloadsWeekly Downloads






      Unpacked Size

      193 kB

      Total Files


      Last publish


      • avatar