Options
All
  • Public
  • Public/Protected
  • All
Menu

Class ApolloMutationElement<Data, Variables>

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

slot

trigger - the triggering element (e.g. button or anchor)

slot

variable - an input-like element with a data-variable attribute. it's value property will be queried to get the value for the corresponding variable

fires

will-mutate When the element is about to mutate. Useful for setting variables. Prevent default to prevent mutation. Detail is { element: this }

fires

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 }

fires

mutation-completed When the mutation resolves. detail is { data: Data, element: this }

fires

mutation-error When the mutation is rejected. detail is { error: ApolloError, element: this }

fires

'apollo-element-disconnected' when the element disconnects from the dom

fires

'apollo-element-connected' when the element connects to the dom

example

Using data attributes

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

Will mutate with the following as variables:

{
  "type": "Type",
  "action": "ACTION"
}
example

Using data attributes and variables

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

Will mutate with the following as variables:

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

Using data attributes and variables with input property

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

Will mutate with the following as variables:

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

Using DOM properties

html`
<apollo-mutation
    .mutation="${SomeMutation}"
    .variables="${{ type: "Type", action: "ACTION" }}">
  <mwc-button slot="trigger">OK</mwc-button>
</apollo-mutation>

Will mutate with the following as variables:

{
  "type": "Type",
  "action": "ACTION"
}

Type parameters

  • Data

  • Variables

Hierarchy

Implements

Index

Constructors

constructor

Properties

Private __document

__document: DocumentNode = null

Private __mo

Private __variables

__variables: Variables = null

Optional awaitRefetchQueries

awaitRefetchQueries: boolean

called

called: boolean = false

client

Optional context

context: Record<string, unknown>

data

data: Data

error

error: Error

Optional errorPolicy

errorPolicy: ErrorPolicy

errors

errors: readonly GraphQLError[]

Optional fetchPolicy

fetchPolicy: Extract<FetchPolicy, "no-cache">

ignoreResults

ignoreResults: boolean

Private inFlight

inFlight: boolean = false

inputKey

inputKey: string = ""

When set, variable data attributes will be packed into an object property with the name of this property

example
<apollo-mutation id="a" data-variable="var"></apollo-mutation>
<apollo-mutation id="b" input-key="input" data-variable="var"></apollo-mutation>
<script>
  console.log(a.variables) // { variable: 'var' }
  console.log(b.variables) // { input: { variable: 'var' } }
</script>

loading

loading: boolean

mostRecentMutationId

mostRecentMutationId: number

mutation

mutation: DocumentNode

Optional optimisticResponse

optimisticResponse: Data | ((vars: Variables) => Data)

refetchQueries

refetchQueries: MutationOptions["refetchQueries"] = null

As an attribute, can be a string of comma-separated query names

<mutation-element refetch-queries="QueryA, QueryB,QueryC"></mutation-element>

As a property, you can pass any legal refetchQueries value.

Private triggerNodes

triggerNodes: NodeListOf<HTMLElement>

Private variableNodes

variableNodes: NodeListOf<InputLikeElement>

Accessors

document

Protected href

  • get href(): string
  • The href attribute of the link trigger

    Returns string

Protected inputs

  • get inputs(): InputLikeElement[]
  • Variable input nodes

    Returns InputLikeElement[]

Protected trigger

  • Slotted trigger node

    Returns HTMLElement

variables

  • get variables(): Variables
  • set variables(v: Variables): void
  • Returns Variables

  • Parameters

    • v: Variables

    Returns void

Methods

Optional adoptedCallback

  • adoptedCallback(): void
  • Called when the element is adopted to a document.

    Returns void

Optional attributeChangedCallback

  • attributeChangedCallback(name: string, oldValue: string, newValue: string): void
  • Called when one of the element's observedAttributes changes.

    Parameters

    • name: string

      name of the observed attribute

    • oldValue: string

      previous value of the attribute. null if it was nonexistent

    • newValue: string

      current value of the attribute. null if removed.

    Returns void

connectedCallback

  • connectedCallback(): void

Private didMutate

  • didMutate(): void
  • Returns void

disconnectedCallback

  • disconnectedCallback(): void

Private generateMutationId

  • generateMutationId(): number
  • Increments and returns the most recent mutation id.

    Returns number

Private isMostRecentMutation

  • isMostRecentMutation(mutationId: number): boolean
  • Returns true when an ID matches the most recent mutation id.

    Parameters

    • mutationId: number

    Returns boolean

mutate

  • mutate(params?: Partial<MutationOptions<Data, Variables>>): Promise<FetchResult<Data>>
  • Parameters

    • Optional params: Partial<MutationOptions<Data, Variables>>

    Returns Promise<FetchResult<Data>>

Private onClick

  • onClick(event: MouseEvent): Promise<void>
  • Parameters

    • event: MouseEvent

    Returns Promise<void>

onCompleted

  • onCompleted(data: Data): void
  • Parameters

    • data: Data

    Returns void

Private onCompletedMutation

  • onCompletedMutation(response: FetchResult<Data>, mutationId: number): FetchResult<Data>
  • Callback for when a mutation is completed.

    Parameters

    • response: FetchResult<Data>
    • mutationId: number

    Returns FetchResult<Data>

onError

Private onMutationError

  • onMutationError(error: ApolloError, mutationId: number): never
  • Callback for when a mutation fails.

    Parameters

    Returns never

Private onSlotchange

  • onSlotchange(): void
  • Returns void

render

  • render(): TemplateResult

Optional resolveURL

  • resolveURL(data: Data): string | Promise<string>
  • 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.

    example

    Navigate to a post's page after creating it

    mutation CreatePostMutation($title: String, $content: String) {
      createPost(title: $title, content: $content) {
        slug
      }
    }
    const mutationTemplate = html`
    <apollo-mutation
        .mutation="${CreatePostMutation}"
        .resolveURL="${(data: Data) => `/posts/${data.createPost.slug}/`}">
      <mwc-textfield label="Post title" slot="variable" data-variable="title"></mwc-textfield>
      <mwc-textarea label="Post Content" slot="variable" data-variable="content"></mwc-textarea>
    </apollo-mutation>
    `

    Parameters

    • data: Data

      mutation data

    Returns string | Promise<string>

    url to navigate to

Optional updater

  • updater(...params: Parameters<MutationUpdaterFn<Data>>): ReturnType<MutationUpdaterFn<Data>>
  • Parameters

    • Rest ...params: Parameters<MutationUpdaterFn<Data>>

    Returns ReturnType<MutationUpdaterFn<Data>>

Private willMutate

  • willMutate(): void
  • Returns void

Private willNavigate

  • willNavigate(data: Data): Promise<void>
  • Parameters

    • data: Data

    Returns Promise<void>