Mutations

Learn how to modify data with mutations.

Basic Mutation

import { useState } from 'react';
import { graphql } from 'mearie';
import { useMutation } from '@mearie/react';

export const EditUserForm = ({ userId }: { userId: string }) => {
  const [name, setName] = useState('');
  const [updateUser, { loading }] = useMutation(
    graphql(`
      mutation UpdateUserMutation($id: ID!, $name: String!) {
        updateUser(id: $id, input: { name: $name }) {
          id
          name
        }
      }
    `),
  );

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    await updateUser({ id: userId, name });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input value={name} onChange={(e) => setName(e.target.value)} required />
      <button type="submit" disabled={loading}>
        {loading ? 'Saving...' : 'Save'}
      </button>
    </form>
  );
};

Other Frameworks

See Vue, Svelte, or Solid for framework-specific examples.

Automatic Cache Updates

When mutations return data, Mearie automatically updates the normalized cache and re-renders affected components.

Optimistic Updates

Update the UI before the server responds:

const [likePost] = useMutation(
  graphql(`
    mutation LikePostMutation($postId: ID!) {
      likePost(postId: $postId) {
        id
        liked
        likeCount
      }
    }
  `),
);

const handleLike = async (postId: string) => {
  await likePost(
    { postId },
    {
      optimisticResponse: {
        likePost: {
          id: postId,
          liked: true,
          likeCount: (prev) => prev + 1,
        },
      },
    },
  );
};

Loading States

Handle loading states gracefully:

const [updateUser, { loading }] = useMutation(
  graphql(`
    mutation UpdateUserMutation($id: ID!, $name: String!) {
      updateUser(id: $id, input: { name: $name }) {
        id
        name
      }
    }
  `),
);

return (
  <button disabled={loading}>
    {loading ? 'Saving...' : 'Save'}
  </button>
);

Best Practices

• Name mutations with Mutation suffix (e.g., UpdateUserMutation)
• Show loading states to provide user feedback

Next Steps

• Queries - Learn how to fetch data
• Fragments - Co-locate data requirements with components
• Links - Customize request/response handling