Apollo Elements Apollo Elements Guides API Blog Toggle darkmode

Hybrids: Mutation Factory

Use the mutation factory to add a GraphQL mutation to you hybrids element.

import { mutation, define, html } from '@apollo-elements/hybrids';

import { AddUserMutation } from './AddUser.mutation.graphql.js';

const onSubmitForm = (host, e) => {
  e.preventDefault();
  host.addUser.mutate({
    variables: {
      name: host.shadowRoot.getElementById('name').value,
    },
  });
}

define('add-user', {
  addUser: mutation(AddUserMutation),
  render: ({ users, addUser }) => html`
    <link rel="stylesheet" href="add-user.css">
    <form onsubmit=${onSubmitForm}>
      <label>Name <input id="name" disabled="${addUser.loading}"></label>
      <button disabled="${addUser.loading}">Submit</button>
      <output hidden="${!addUser.data}">
        <p>${addUser.data?.addUser?.name} added!</p>
      </output>
    </form>
  `,
});

mutation

Hybrids property descriptor factory for GraphQL mutations.

Parameters

mutationDocument

ComponentDocument<D> | null

The mutation document.

options

ApolloMutationControllerOptions<D, V>

Options to control the mutation.

Option Type Description
variables Variables<D, V> Operation variables. See variables.
optimisticResponse OptimisticResponseType<D, V> See optimisticResponse
fetchPolicy ErrorPolicy See fetchPolicy
refetchQueries RefetchQueriesType<D> | null See refetchQueries
awaitRefetchQueries boolean See awaitRefetchQueries
update MutationUpdaterFn<Data<D>> Function used to update the client cache following the mutation. See updater.

Inherits from ApolloControllerOptions

Returns


Exports

import { mutation } from '@apollo-elements/hybrids/factories/mutation';