how to update ui after graphql apollo mutation in vue3? - vue.js

Question

how can i update my local apollo cache after mutation in vue apollo composable please help here is my add recipe code and I want to update local apollo cache and also make changes to take effect in the UI ?
const people = [
{ id: 1, name: "category" },
{ id: 2, name: "Breakfast" },
{ id: 3, name: "Dinner" },
{ id: 4, name: "Lunch" },
];
const selectedPerson = ref(people[0]);
const user = userLoginStore();
const router = useRouter();
const { mutate: insertRecipe, result, onDone } = useMutation(INSERT_RECIPE);
onDone((result) => {
});
const onSubmit = (values) => {
insertRecipe(
{
title: values.title,
description: values.description,
category: selectedPerson.value.name,
image: values.image,
ingredients: ingredient.value.ingredients.toString(),
preparation_time: values.preparation_time,
steps: ingredient.value.steps.toString(),
},
cache.writeDate({})
);
};
</script>```

Answer 1

here is the update cache code after mutation
{
update: (cache, { data: { insert_recipe_one } }) => {
let data = cache.readQuery({ query: ALL_RECIPE });
// data.recipe = [...data.recipe, insert_recipe_one];
console.log(data);
data = {
...data,
recipe: [...data.recipe, insert_recipe_one],
};
console.log(data);
cache.writeQuery({ query: ALL_RECIPE, data });
},
}