[idea]: Update strategies for <apollo-mutation>

[bennypowers]

Consider:

<apollo-client src="/graphql">

  Fetch a list of users:

  <apollo-query id="all-users">
    <script type="application/graphql" src="AllUsers.query.graphql"></script>
    <template>
      <link rel="stylesheet" href="all-users.css"/>
      <ul>
        <template type="repeat" items="{{ data.users ?? [] }}">
          <li data-user-id="{{ item.id }}">
            <h2>{{ item.name }}</h2>
            <img src="{{ item.avatar }}" alt=""/>
          </li>
        </template>
      </ul>
    </template>
  </apollo-query>

  Add a new user, using <strong>refetch-queries</strong> to update the list above

  <apollo-mutation id="add-user" refetch-queries="AllUsers" await-refetch-queries>
    <script type="application/graphql" src="AddUser.mutation.graphql"></script>
    <template>
      <link rel="stylesheet" href="add-user.css">
      <slot></slot>
    </template>
    <label for="name">User Name</label>
    <input id="name" data-variable="name"/>
    <label for="avatar">Avatar Image</label>
    <input id="avatar" type="file" data-variable="avatar"/>
  </apollo-mutation>
</apollo-client>

In this case, apollo-mutation uses refetch-queries to update the list of users after mutating and await-refetch-queries to maintain its loading state.

Alternatively, we could write and pass an update function...

const allUsersEl = document.getElementById('all-users');
const addUsersEl = document.getElementById('add-users');

await addUsersEl.updateComplete;

addUsersEl.options.update = function(client, result) {
  const { query } = allUsersEl;
  const cached = client.readQuery({ query });
  client.writeQuery({ query, data: {
    ...cached,
    users: [...cached.users, result.data.addUser],
  });
}

What if the <apollo-mutation> element exposed configuration attributes for a set of common update recipes:

<apollo-mutation id="add-user"
                 data-updates-query-for="all-users"
                 data-update-strategy="list-append"
                 data-update-list-path="users">
  <script type="application/graphql" src="AddUser.mutation.graphql"></script>
  <template>
    <link rel="stylesheet" href="add-user.css">
    <slot></slot>
  </template>
  <label for="name">User Name</label>
  <input id="name" data-variable="name"/>
  <label for="avatar">Avatar Image</label>
  <input id="avatar" type="file" data-variable="avatar"/>
 </apollo-mutation>

The idea requires some fleshing out and forethought.