Increase typesafety for mutations

[gt-codes]

# Problem

When submitting this mutation, an Unhandled Runtime Error is thrown. next-fetch should let us know there’s not an input with name="content"

// pages/api/todos.swr.ts
export const useCreateTodo = mutation(
  z.object({
    content: z.string(),
  }),
  async ({ content }) => {
    // ...
  }
);

// pages/index.tsx

export default function Home() {
  const mutation = useCreateTodo();
  
  <Form mutation={mutation}>
      <label htmlFor='newTodo'>Add a new todo</label>
      <input
          type='text'
          name='newTodo'
          id='newTodo'			
          placeholder='New todo'
        />
      <button type='submit'>Add todo</button>
  </Form>
}

Solution Description

When using the <Form /> component, there should be typesafety letting the user know they don't have an <input /> that aligns with their mutation's input.

I'd expect the same typesafety if programmatically calling the mutation like so:

const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  const values = new FormData(formRef.current as HTMLFormElement);
  const data = Object.fromEntries(values);
  createTodo.trigger(data);
};

This is the error on data being passed to trigger

[Schniz]

I can’t think of a way to make a form component statically typed based on its children inputs. Can you? 😞