how to update ui after graphql apollo mutation in vue3?

Solomon Sitotaw 0
Viewed 12

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>```
apollo vue.js
1 Answers

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 });
      },
    }
Solomon Sitotaw0
Related