@apollo-elements/components
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0-next.3Β β€’Β PublicΒ β€’Β Published

    @apollo-elements/components

    code snippet

    Published on npm Published on webcomponents.org ISC License Release

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

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

    apollo-client.js:

    class: ApolloClientElement, apollo-client

    Superclass

    name module package
    HTMLElement

    Fields

    name type privacy default description inheritedFrom
    is string apollo-client
    #client ApolloClient null private
    #instances Set private
    #typePolicies TypePolicies undefined private
    client ApolloClient null
    controllers readonly (ApolloController)[]
    typePolicies TypePolicies undefined
    uri string undefined When the URI attribute is set, <apollo-client> will asynchronously

    create a new ApolloClient instance with some default parameters
    validateVariables boolean When true, client will not fetch operations that do not have all their non-nullable variables set.

    Methods

    name privacy description parameters return inheritedFrom
    createApolloClient public
    findDeepInstances private void
    addDeepInstance private child Node Promise
    onElementConnected private Assigns the element controller's client instance to the child,

    and registers the child to receive the element's new client when its set.
    event ApolloEvent void
    onElementDisconnected private Performs clean up when the child disconnects event ApolloEvent void
    initialize private Set the client on the element's controller,

    and if it's a query or subscription controller, attempt to subscribe
    controller ApolloController void

    Events

    name type description inheritedFrom
    client-changed CustomEvent<{ client: ApolloClient }> When the client changes

    Attributes

    name fieldName inheritedFrom
    uri uri
    validate-variables validateVariables

    Exports

    kind name declaration module package
    js ApolloClientElement ApolloClientElement apollo-client.js
    custom-element-definition ApolloClientElement apollo-client.js

    apollo-element.js:

    class: ApolloElement

    Superclass

    name module package
    StampinoRender

    Fields

    name type privacy default description inheritedFrom
    controller ApolloController<D, V>
    readyToReceiveDocument boolean
    client ApolloClient null
    loading boolean
    data Data null
    document ComponentDocument null
    error Error ApolloError null
    errors readonly GraphQLError[]
    variables Variables<D, V> null
    templateHandlers TemplateHandlers StampinoRender
    template HTMLTemplateElement null Template element to render. Can either be a light-DOM child of the element,

    or referenced by ID with the template attribute.



    Templates are stampino templates using jexpr

    Methods

    name privacy description parameters return inheritedFrom
    isQueryable private node Node node is (ShadowRoot Document)
    createRenderRoot protected ShadowRoot HTMLElement
    getElementByIdFromRoot private id string null HTMLElement
    getTemplateFromRoot private HTMLTemplateElement null
    $ public querySelector within the render root. selector string E null
    $$ public querySelectorAll within the render root. selector string NodeListOf StampinoRender

    Attributes

    name fieldName inheritedFrom
    loading loading
    template template StampinoRender
    'no-shadow' StampinoRender

    Exports

    kind name declaration module package
    js ApolloElement ApolloElement apollo-element.js

    apollo-mutation.js:

    class: WillMutateError

    Superclass

    name module package
    Error

    class: ApolloMutationElement, apollo-mutation

    Superclass

    name module package
    ApolloElement

    Mixins

    name module package
    GraphQLScriptChildMixin @apollo-elements/mixins/graphql-script-child-mixin

    Fields

    name type privacy default description inheritedFrom
    is string apollo-mutation
    inFlightTrigger HTMLElement null private
    doMutate private
    debouncedMutate this private
    #buttonMO MutationObserver private
    #listeners private
    triggers NodeListOf protected Slotted trigger nodes
    buttons ButtonLikeElement[] protected If the slotted trigger node is a button, the trigger

    If the slotted trigger node is a link with a button as it's first child, the button
    inputs InputLikeElement[] protected Variable input nodes
    controller ApolloMutationController<D, V>
    inputKey string null When set, variable data attributes will be packed into an

    object property with the name of this property
    debounce number null
    called boolean
    mutation null ComponentDocument
    context Record<string, unknown>
    optimisticResponse OptimisticResponseType<D, V> An object that represents the result of this mutation that

    will be optimistically stored before the server has actually returned a

    result.



    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

    appear.



    An object that represents the result of this mutation that will be optimistically stored before the server has actually returned a result.

    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 appear.



    ts<br/><br/>element.optimisticResponse = ({ name }: HelloMutationVariables) => ({<br/><br/> __typename: 'Mutation',<br/><br/> hello: {<br/><br/> __typename: 'Greeting',<br/><br/> name,<br/><br/> },<br/><br/>});<br/><br/>

    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.
    ignoreResults boolean
    awaitRefetchQueries boolean 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.
    errorPolicy ErrorPolicy Specifies the ErrorPolicy to be used for this mutation.
    fetchPolicy 'no-cache' Specifies the FetchPolicy to be used for this mutation.
    refetchQueries RefetchQueriesType 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.
    readyToReceiveDocument boolean ApolloElement
    client ApolloClient null
    loading boolean ApolloElement
    data Data null
    document ComponentDocument null
    error Error ApolloError null
    errors readonly GraphQLError[] ApolloElement
    templateHandlers TemplateHandlers ApolloElement
    template HTMLTemplateElement null Template element to render. Can either be a light-DOM child of the element,

    or referenced by ID with the template attribute.



    Templates are stampino templates using jexpr

    Methods

    name privacy description parameters return inheritedFrom
    isButton private False when the element is a link. node Element null node is ButtonLikeElement
    isLink private node Element null node is HTMLAnchorElement
    toVariables private acc T, element InputLikeElement T
    isTriggerNode private node Node node is HTMLElement
    debounce private f () => void, timeout number () => void
    resolveURL 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 Data, trigger HTMLElement
    onLightDomMutation private records MutationRecord[]
    onSlotchange private void
    addTriggerListener private element HTMLElement
    willMutate private trigger HTMLElement void
    willNavigate private data Data null undefined, triggeringElement HTMLElement
    didMutate private void
    onTriggerEvent private event Event void
    createRenderRoot protected ShadowRoot HTMLElement
    getVariablesFromInputs protected Constructs a variables object from the element's data-attributes and any slotted variable inputs. Variables<D, V> null
    updater public 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.
    params Parameters<MutationUpdaterFn<Data>> ReturnType<MutationUpdaterFn<Data>>
    mutate public params Partial<MutationOptions<Data, Variables<D, V>>> undefined Promise<FetchResult<Data>>
    isQueryable private node Node node is (ShadowRoot Document)
    getElementByIdFromRoot private id string null HTMLElement
    getTemplateFromRoot private HTMLTemplateElement null
    $ public querySelector within the render root. selector string E null
    $$ public querySelectorAll within the render root. selector string NodeListOf ApolloElement

    Events

    name type description inheritedFrom
    WillMutateEvent
    will-mutate WillMutateEvent When the element is about to mutate. Useful for setting variables. Prevent default to prevent mutation. Detail is { element: this }
    will-navigate WillNavigateEvent 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 }
    mutation-completed MutationCompletedEvent When the mutation resolves. detail is { data: Data, element: this }
    mutation-error MutationErrorEvent When the mutation is rejected. detail is { error: ApolloError, element: this }
    apollo-element-disconnected ApolloElementEvent when the element disconnects from the dom
    apollo-element-connected ApolloElementEvent when the element connects to the dom

    Attributes

    name fieldName inheritedFrom
    await-refetch-queries awaitRefetchQueries
    error-policy errorPolicy
    fetch-policy fetchPolicy
    refetch-queries refetchQueries
    input-key inputKey
    debounce debounce
    called called
    ignore-results ignoreResults
    loading loading ApolloElement
    template template ApolloElement
    'no-shadow' ApolloElement

    Slots

    name description
    Mutations typically trigger when clicking a button. Slot in an element with a trigger attribute to assign it as the element's trigger. The triggering element. Must be a button or and anchor that wraps a button.\n\nYou may also slot in input elements with the data-variable=\"variableName\" attribute. It's value property gets the value for the corresponding variable. See ApolloMutationInterface for more information on events

    Exports

    kind name declaration module package
    js WillMutateError WillMutateError apollo-mutation.js
    js ApolloMutationElement ApolloMutationElement apollo-mutation.js
    custom-element-definition apollo-mutation ApolloMutationElement apollo-mutation.js

    apollo-query.js:

    class: ApolloQueryElement, apollo-query

    Superclass

    name module package
    ApolloElement

    Mixins

    name module package
    GraphQLScriptChildMixin @apollo-elements/mixins/graphql-script-child-mixin

    Fields

    name type privacy default description inheritedFrom
    is string apollo-query
    controller ApolloQueryController<D, V>
    canAutoSubscribe boolean
    options ApolloQueryControllerOptions<D, V> All properties are optional



    Property
    networkStatus NetworkStatus networkStatus is useful if you want to display a different loading indicator (or no indicator at all)

    depending on your network status as it provides a more detailed view into the state of a network request

    on your component than loading does. networkStatus is an enum with different number values between 1 and 8.

    These number values each represent a different network state.



    1. loading: The query has never been run before and the request is now pending. A query will still have this network status even if a result was returned from the cache, but a query was dispatched anyway.

    2. setVariables: If a query’s variables change and a network request was fired then the network status will be setVariables until the result of that query comes back. React users will see this when options.variables changes on their queries.

    3. fetchMore: Indicates that fetchMore was called on this query and that the network request created is currently in flight.

    4. refetch: It means that refetch was called on a query and the refetch request is currently in flight.

    5. Unused.

    6. poll: Indicates that a polling query is currently in flight. So for example if you are polling a query every 10 seconds then the network status will switch to poll every 10 seconds whenever a poll request has been sent but not resolved.

    7. ready: No request is in flight for this query, and no errors happened. Everything is OK.

    8. error: No request is in flight for this query, but one or more errors were detected.



    If the network status is less then 7 then it is equivalent to loading being true. In fact you could

    replace all of your loading checks with networkStatus < 7 and you would not see a difference.

    It is recommended that you use loading, however.
    query null ComponentDocument
    context Record<string, any>
    partial boolean If data was read from the cache with missing fields,

    partial will be true. Otherwise, partial will be falsy.
    partialRefetch boolean If true, perform a query refetch if the query result is marked as being partial,

    and the returned data is reset to an empty Object by the Apollo Client QueryManager

    (due to a cache miss).



    The default value is false for backwards-compatibility's sake,

    but should be changed to true for most use-cases.
    pollInterval number
    returnPartialData boolean Opt into receiving partial results from the cache for queries

    that are not fully satisfied by the cache.
    noAutoSubscribe boolean When true, the component will not automatically subscribe to new data.

    Call the subscribe() method to do so.
    notifyOnNetworkStatusChange boolean
    errorPolicy ErrorPolicy errorPolicy determines the level of events for errors in the execution result. The options are:

    - none (default): any errors from the request are treated like runtime errors and the observable is stopped (XXX this is default to lower breaking changes going from AC 1.0 => 2.0)

    - ignore: errors from the request do not stop the observable, but also don't call next

    - all: errors are treated like data and will notify observables
    fetchPolicy WatchQueryFetchPolicy Determines where the client may return a result from. The options are:



    - cache-first (default): return result from cache, fetch from network if cached result is not available.

    - cache-and-network: return result from cache first (if it exists), then return network result once it's available.

    - cache-only: return result from cache if available, fail otherwise.

    - no-cache: return result from network, fail if network call doesn't succeed, don't save to cache

    - network-only: return result from network, fail if network call doesn't succeed, save to cache

    - standby: only for queries that aren't actively watched, but should be available for refetch and updateQueries.
    nextFetchPolicy WatchQueryFetchPolicy NextFetchPolicyFunction<D, V> When someone chooses cache-and-network or network-only as their

    initial FetchPolicy, they often do not want future cache updates to

    trigger unconditional network requests, which is what repeatedly

    applying the cache-and-network or network-only policies would seem

    to imply. Instead, when the cache reports an update after the

    initial network request, it may be desirable for subsequent network

    requests to be triggered only if the cache result is incomplete.

    The nextFetchPolicy option provides a way to update

    options.fetchPolicy after the intial network request, without

    having to set options.
    readyToReceiveDocument boolean ApolloElement
    client ApolloClient null
    loading boolean ApolloElement
    data Data null
    document ComponentDocument null
    error Error ApolloError null
    errors readonly GraphQLError[] ApolloElement
    variables Variables<D, V> null
    templateHandlers TemplateHandlers ApolloElement
    template HTMLTemplateElement null Template element to render. Can either be a light-DOM child of the element,

    or referenced by ID with the template attribute.



    Templates are stampino templates using jexpr

    Methods

    name privacy description parameters return inheritedFrom
    refetch public Exposes the ObservableQuery#refetch method. variables Variables<D, V> Promise<ApolloQueryResult<Data>>
    subscribe public Resets the observableQuery and subscribes. params Partial<WatchQueryOptions<Variables<D, V>, Data>> ZenObservable.Subscription
    subscribeToMore public 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.
    options SubscribeToMoreOptions<Data, TSubscriptionVariables, TSubscriptionData> (() => void) void
    executeQuery public Executes a Query once and updates the with the result params Partial<QueryOptions<Variables<D, V>, Data>> Promise<ApolloQueryResult<Data>>
    fetchMore public Exposes the ObservableQuery#fetchMore method.

    https://www.apollographql.com/docs/react/api/core/ObservableQuery/#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.
    params Partial<FetchMoreParams<D, V>> Promise<ApolloQueryResult<Data>>
    startPolling public ms number void
    stopPolling public void
    isQueryable private node Node node is (ShadowRoot Document)
    createRenderRoot protected ShadowRoot HTMLElement
    getElementByIdFromRoot private id string null HTMLElement
    getTemplateFromRoot private HTMLTemplateElement null
    $ public querySelector within the render root. selector string E null
    $$ public querySelectorAll within the render root. selector string NodeListOf ApolloElement

    Attributes

    name fieldName inheritedFrom
    no-auto-subscribe noAutoSubscribe
    error-policy errorPolicy
    fetch-policy fetchPolicy
    next-fetch-policy nextFetchPolicy
    partial-refetch partialRefetch
    poll-interval pollInterval
    return-partial-data returnPartialData
    notify-on-network-status-change notifyOnNetworkStatusChange
    loading loading ApolloElement
    template template ApolloElement
    'no-shadow' ApolloElement

    Exports

    kind name declaration module package
    js ApolloQueryElement ApolloQueryElement apollo-query.js
    custom-element-definition apollo-query ApolloQueryElement apollo-query.js

    apollo-subscription.js:

    class: ApolloSubscriptionElement, apollo-subscription

    Superclass

    name module package
    ApolloElement

    Mixins

    name module package
    GraphQLScriptChildMixin @apollo-elements/mixins/graphql-script-child-mixin

    Fields

    name type privacy default description inheritedFrom
    is string apollo-subscription
    controller ApolloSubscriptionController<D, V>
    canAutoSubscribe boolean
    subscription null ComponentDocument
    context Record<string, any>
    noAutoSubscribe boolean
    notifyOnNetworkStatusChange boolean
    shouldResubscribe boolean
    skip boolean
    errorPolicy this['controller']['options']['errorPolicy']
    fetchPolicy this['controller']['options']['fetchPolicy']
    pollInterval number
    readyToReceiveDocument boolean ApolloElement
    client ApolloClient null
    loading boolean ApolloElement
    data Data null
    document ComponentDocument null
    error Error ApolloError null
    errors readonly GraphQLError[] ApolloElement
    variables Variables<D, V> null
    templateHandlers TemplateHandlers ApolloElement
    template HTMLTemplateElement null Template element to render. Can either be a light-DOM child of the element,

    or referenced by ID with the template attribute.



    Templates are stampino templates using jexpr

    Methods

    name privacy description parameters return inheritedFrom
    subscribe args Parameters<this['controller']['subscribe']> void
    cancel void
    shouldSubscribe options Partial<this['controller']['options']> boolean
    isQueryable private node Node node is (ShadowRoot Document)
    createRenderRoot protected ShadowRoot HTMLElement
    getElementByIdFromRoot private id string null HTMLElement
    getTemplateFromRoot private HTMLTemplateElement null
    $ public querySelector within the render root. selector string E null
    $$ public querySelectorAll within the render root. selector string NodeListOf ApolloElement

    Attributes

    name fieldName inheritedFrom
    no-auto-subscribe noAutoSubscribe
    fetch-policy fetchPolicy
    notify-on-network-status-change notifyOnNetworkStatusChange
    should-resubscribe shouldResubscribe
    skip skip
    error-policy errorPolicy
    poll-interval pollInterval
    loading loading ApolloElement
    template template ApolloElement
    'no-shadow' ApolloElement

    Exports

    kind name declaration module package
    js ApolloSubscriptionElement ApolloSubscriptionElement apollo-subscription.js
    custom-element-definition apollo-subscription ApolloSubscriptionElement apollo-subscription.js

    events.js:

    class: MutationEvent

    Superclass

    name module package
    CustomEvent

    Fields

    name type privacy default description inheritedFrom
    type MutationEventType
    detail MutationEventDetail<D, V>

    class: WillMutateEvent

    Superclass

    name module package
    MutationEvent

    Fields

    name type privacy default description inheritedFrom
    type string will-mutate
    detail MutationEventDetail<D, V> MutationEvent

    class: MutationCompletedEvent

    Superclass

    name module package
    MutationEvent

    Fields

    name type privacy default description inheritedFrom
    type string mutation-completed
    detail MutationEventDetail<D, V> MutationEvent

    class: WillNavigateEvent

    Superclass

    name module package
    MutationEvent

    Fields

    name type privacy default description inheritedFrom
    type string will-navigate
    detail MutationEventDetail<D, V> MutationEvent

    class: MutationErrorEvent

    Superclass

    name module package
    MutationEvent

    Fields

    name type privacy default description inheritedFrom
    type string mutation-error
    detail MutationEventDetail<D, V> MutationEvent

    Exports

    kind name declaration module package
    js MutationEvent MutationEvent events.js
    js WillMutateEvent WillMutateEvent events.js
    js MutationCompletedEvent MutationCompletedEvent events.js
    js WillNavigateEvent WillNavigateEvent events.js
    js MutationErrorEvent MutationErrorEvent events.js

    index.js:

    Exports

    kind name declaration module package
    js * * ./apollo-client.js
    js * * ./apollo-query.js
    js * * ./apollo-mutation.js
    js * * ./apollo-subscription.js

    stampino-render.js:

    class: StampinoRender

    Superclass

    name module package
    ReactiveElement

    Fields

    name type privacy default description inheritedFrom
    templateHandlers TemplateHandlers
    template HTMLTemplateElement null Template element to render. Can either be a light-DOM child of the element,

    or referenced by ID with the template attribute.



    Templates are stampino templates using jexpr

    Methods

    name privacy description parameters return inheritedFrom
    isQueryable private node Node node is (ShadowRoot Document)
    createRenderRoot protected ShadowRoot HTMLElement
    getElementByIdFromRoot private id string null HTMLElement
    getTemplateFromRoot private HTMLTemplateElement null
    $ public querySelector within the render root. selector string E null
    $ public selector K SVGElementTagNameMap[K] null
    $ public selector K HTMLElementTagNameMap[K] null
    $$ public querySelectorAll within the render root. selector string NodeListOf
    $$ public selector K NodeListOf<SVGElementTagNameMap[K]>
    $$ public selector K NodeListOf<HTMLElementTagNameMap[K]>

    Attributes

    name fieldName inheritedFrom
    template template
    'no-shadow'

    Exports

    kind name declaration module package
    js StampinoRender StampinoRender stampino-render.js

    Install

    npm i @apollo-elements/[email protected]

    Version

    2.0.0-next.3

    License

    ISC

    Unpacked Size

    685 kB

    Total Files

    46

    Last publish

    Collaborators

    • bennyp