{"componentChunkName":"component---src-templates-post-js","path":"/execute-booking-mutation","result":{"data":{"markdownRemark":{"html":"

In this part we will finilize the mutation.

\n

So we will use the Apollo Mutation component to execute the mutation. Go back into your BookingIndex.vue and make sure it looks like this:

\n
<template>\n  <div>\n    <!-- mutation --->\n    <ApolloMutation\n      :mutation="require('../../graphql/makeABooking.gql')"\n      :variables="{\n        size: parseInt(number),\n        customerEmail: email,\n        bookingDate: date,\n        listingId: this.$route.params.id,\n        customers: customers,\n      }"\n      @done="onDone"\n    >\n      <template v-slot="{ mutate, loading, error }">\n        <!-- TAB ONE --->\n\n        <a-tabs v-model="activeKey">\n          <a-tab-pane tab="Tab 1" key="1" class="flex justify-center">\n            <div class="flex flex-col p-20 ">\n              <HeadingOne>\n                Booking for Listing Name\n              </HeadingOne>\n              <div class="mt-5">\n                <BodyOne>\n                  Booking date\n                </BodyOne>\n                <DateInput placeholder="date" type="date" v-model="date" />\n              </div>\n\n              <div class="mt-5">\n                <BodyOne>\n                  Number of people\n                </BodyOne>\n                <Input placeholder="3" type="number" v-model="number" />\n              </div>\n\n              <div class="mt-5">\n                <BodyOne> Email address </BodyOne>\n                <Input\n                  placeholder="doku@corrisant.io"\n                  type="email"\n                  v-model="email"\n                />\n              </div>\n              <div class="flex lg:flex-row mt-5 s:flex-col">\n                <RedBlockButton\n                  @click="next(2)"\n                  text="Proceed"\n                  class="mr-5 s:mb-5 lg:mb-0"\n                />\n                <RedOutlineButton @click="$router.push('/')" text="Cancel" />\n              </div>\n            </div>\n          </a-tab-pane>\n\n          <!-- TAB ONE  END--->\n\n          <!-- TAB TWO --->\n\n          <a-tab-pane tab="Tab 2" key="2" class="flex justify-center">\n            <div class="flex flex-col p-20 ">\n              <HeadingOne>\n                Who are you travelling with?Who are you travelling with?\n              </HeadingOne>\n              <div\n                class="flex lg:flex-row s:flex-col mt-10"\n                v-for="(customer, i) in customers"\n                :key="i"\n              >\n                <hr />\n                <div class="flex flex-col mr-5">\n                  <BodyOne> customer name </BodyOne>\n\n                  <Input\n                    placeholder="doku@corrisant.io"\n                    type="email"\n                    v-model="customer.name"\n                  />\n\n                  <BodyOne> customer country </BodyOne>\n\n                  <Input\n                    placeholder="doku@corrisant.io"\n                    type="email"\n                    v-model="customer.country"\n                  />\n\n                  <BodyOne> Physio score </BodyOne>\n\n                  <Input\n                    placeholder="doku@corrisant.io"\n                    type="email"\n                    v-model="customer.physioScore"\n                  />\n                </div>\n\n                <div class="flex flex-col">\n                  <BodyOne> Customer surname </BodyOne>\n\n                  <Input\n                    placeholder="doku@corrisant.io"\n                    type="email"\n                    v-model="customer.Surname"\n                  />\n                  <label> </label>\n                  <input />\n\n                  <BodyOne> Passport number </BodyOne>\n\n                  <Input\n                    placeholder="doku@corrisant.io"\n                    type="email"\n                    v-model="customer.passportNumber"\n                  />\n                  <RemoveButton @click="removeCustomer(i)" />\n                </div>\n              </div>\n              <div class="mt-5 ">\n                <BlueBlockButton text="Add a customer" @click="addCustomer" />\n              </div>\n              <div class="flex lg:flex-row mt-5 s:flex-col">\n                <RedBlockButton\n                  @click="next(3)"\n                  text="Proceed"\n                  class="mr-5 s:mb-5  lg:mb-0"\n                />\n                <RedOutlineButton @click="next(1)" text="Back" />\n              </div>\n            </div>\n          </a-tab-pane>\n          <!-- TAB TWO  END--->\n          <!-- TAB THREE --->\n\n          <a-tab-pane\n            tab="Tab 3"\n            key="3"\n            class="text-black flex justify-center"\n          >\n            <div class="flex flex-col p-20 ">\n              <HeadingOne>\n                Your trip total\n              </HeadingOne>\n\n              <BodyOne>\n                Test using this credit card: 4242 4242 4242 4242, and enter any\n                5 digits for the zip code</BodyOne\n              >\n\n              <card\n                class="stripe-card mt-20 w-full"\n                id="card"\n                :class="{ complete }"\n                stripe="pk_test_5ThYi0UvX3xwoNdgxxxTxxrG"\n                :options="stripeOptions"\n              />\n\n              <BodyOne v-if="error"> {{ error }}</BodyOne>\n\n              <BodyOne v-if="loading"> Busy booking your trip</BodyOne>\n\n              <div class="flex flex-row mt-20">\n                <RedBlockButton\n                  @click="\n                    pay()\n                    mutate()\n                  "\n                  text="Pay"\n                  class="mr-5"\n                />\n                <RedOutlineButton @click="next(2)" text="Back" />\n              </div>\n            </div>\n          </a-tab-pane>\n          <!-- TAB THREE END--->\n          <!-- TAB FOUR --->\n\n          <a-tab-pane\n            tab="Tab 4"\n            key="4"\n            class="text-black flex justify-center"\n          >\n            <div class="flex flex-col p-20 ">\n              <HeadingOne>\n                Thanks for booking with us\n              </HeadingOne>\n              <img src="../../assets/Vector.svg" class="mt-5" />\n              <BodyOne class="mt-5"\n                >Your link to your ticket is in the mail. Keep it safe and we\n                will see you soon</BodyOne\n              >\n\n              <div class="flex flex-row ml-32 mt-20">\n                <RedBlockButton\n                  @click="$router.push('/')"\n                  text="Book more"\n                  class="mr-5"\n                />\n              </div>\n            </div>\n          </a-tab-pane>\n          <!-- TAB FOUR END--->\n        </a-tabs>\n      </template>\n    </ApolloMutation>\n  </div>\n</template>\n\n<script>\nimport HeadingOne from "../../components/typography/HeadingOne"\nimport BodyOne from "../../components/typography/BodyOne"\nimport DateInput from "../../components/inputs/DateInput"\nimport Input from "../../components/inputs/Input"\nimport RedBlockButton from "../../components/buttons/RedBlockButton"\nimport RedOutlineButton from "../../components/buttons/RedOutlineButton"\nimport RemoveButton from "../../components/buttons/RemoveButton"\nimport BlueBlockButton from "../../components/buttons/BlueBlockButton"\nimport { Card, createToken } from "vue-stripe-elements-plus"\n\nexport default {\n  name: "Index",\n  components: {\n    HeadingOne,\n    BodyOne,\n    DateInput,\n    Input,\n    RedBlockButton,\n    RedOutlineButton,\n    RemoveButton,\n    BlueBlockButton,\n    Card,\n  },\n  data() {\n    return {\n      activeKey: "1",\n      email: "",\n      number: "",\n      date: "",\n      customers: [],\n    }\n  },\n  methods: {\n    onDone() {\n      this.activeKey = "4"\n    },\n    next(k) {\n      this.activeKey = k.toString()\n    },\n    addCustomer() {\n      // const o = [...this.customers];\n      this.customers.push({\n        name: null,\n        Surname: null,\n      })\n\n      // this.customers.push({ o });\n      // console.log(this.customers);\n      //Failed to persist entry: TypeError: Cannot read property 'expires_at' of null\n    },\n\n    removeCustomer(i) {\n      this.customers.splice(i, 1)\n    },\n    submitForm() {\n      console.log(this.date)\n      alert(\n        `${this.customers[0].customerName}, ${this.email}, ${this.number}, ${this.date}`\n      )\n    },\n    pay() {\n      createToken().then(data => console.log(data.token))\n    },\n  },\n}\n</script>\n<style>\n.ant-tabs-bar.ant-tabs-top-bar {\n  display: none;\n}\n\n.stripe-card {\n  margin-top: 10px;\n  border: 1px solid #ccc;\n  padding: 5px 10px;\n  box-shadow: 0px 1px 3px rgba(230, 235, 241, 0.25);\n  border-radius: 4px;\n}\n.stripe-card.complete {\n  border-color: green;\n}\n</style>
\n

♻️ We pass in the schema document and the variables necessasry for the mutation. As well as execute an OnDone function which will allow the user to go to the next tab post mutation.

\n

♻️ We have a slot that as the variables that are similar to the query ones.

\n

♻️ In the third tab we have error states and loading states.

\n

♻️ In the red button the pay and mutate functions will hit stripe and execute the mutation.

\n

Thats it! You have a working GraphQL FULLSTACK APP. You should be able to make bookings for different listings now.

","frontmatter":{"date":"May 25, 2020","path":"/execute-booking-mutation","title":"Execute Booking Mutation","postnumber":35}}},"pageContext":{"previous":{"node":{"frontmatter":{"path":"/create-nav-and-header-react","postnumber":36}}},"next":{"node":{"frontmatter":{"path":"/create-react-input","postnumber":35}}}}},"staticQueryHashes":["3207677222","3649515864","63159454"]}