GraphQL: What is the best practice for updating arrays of objects in a mutation?

I have a form that I can update a whole set of lets say recipes at once. The user should be able to cancel after editing and discard what they have filled out. When the user is done, they should be able to save which would fire off the update mutation. I will give two mutations in which I attempt to handle this. I would like to know the best practice when handling nested lists of objects in a mutation in regards to create, update, and delete?

Option 1:

mutation updateRecipesSet($id: Long!, $input: ContactsInput!) {
  updateRecipeSet(id: $id, input: {
    id: 123,
    name: "Desserts",
    recipes: [
      {
        id: 456,
        name: "Chocolate Chip Cookies",
        ingredients: [
          {
            id: 789,
            name: "Flour",
            amount: "1 cup"
          },
          {
            id: 101112,
            name: "Sugar",
            amount: "1 cup"
          },
          ...
        ]
      },
      {
        id: 131415,
        name: "Apple Pie",
        ingredients: [
          {
            id: 161718,
            name: "Apples",
            amount: "4"
          },
          {
            id: 192021,
            name: "Cinnamon",
            amount: "1 tbsp"
          },
          ...
        ]
      },
      ...
    ]
  }) {
    id
  }
}

Option 2:

mutation updateRecipesSet($id: Long!, $input: ContactsInput!) {
  updateRecipeSet(id: $id, input: {
    id: 123,
    name: "Desserts",
    recipes: {
      createRecipes: [
        {
          id: 152535,
          name: "Chocolate Cake",
          ingredients: [
            {
              id: 162636,
              name: "Eggs",
              amount: "2"
            },
            {
              id: 101112,
              name: "Flour",
              amount: "1 cup"
            },
            ...
          ]
        }
      ],
      updateRecipes: [
        {
          id: 456,
          name: "Chocolate Chip Cookies",
          ingredients: [
            {
              id: 789,
              name: "Flour",
              amount: "1 cup"
            },
            {
              id: 101112,
              name: "Sugar",
              amount: "1 cup"
            },
            ...
          ]
        },
        {
          id: 131415,
          name: "Apple Pie",
          ingredients: [
            {
              id: 161718,
              name: "Apples",
              amount: "4"
            },
            {
              id: 192021,
              name: "Cinnamon",
              amount: "1 tbsp"
            },
            ...
          ]
        },
        ...
      ],
      deleteRecipeIds: [222324, 252627]
    }
  }) {
    id
  }
}

Option 1 is simple. Whatever your object looks like is persisted to the backend and then the database. But it makes several assumptions that it I don't include an already existing item in the array it should be deleted and that I pass in an object without an id I want to create a new item. Option 2 is an attempt to resolve this however it makes the front-end logic more complex.

Should this logic even live in the front-end, or does this logic belong in the backend? Are those assumptions bad and what is the best practice to handle this scenario?