Removed the changes GraphQL mutation option in favor of variables

rapidez · Mar 16, 2022 · 3fbafed · 3fbafed
1 parent e5262bf
commit 3fbafed
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 35 deletions.
diff --git a/resources/js/components/GraphqlMutation.vue b/resources/js/components/GraphqlMutation.vue
@@ -13,10 +13,6 @@
                 type: Object,
                 default: () => ({}),
             },
-            changes: {
-                type: Object,
-                default: () => ({}),
-            },
             redirect: {
                 type: String,
                 default: '',
@@ -57,7 +53,6 @@
 
         render() {
             return this.$scopedSlots.default({
-                changes: this.changes,
                 mutate: this.mutate,
                 mutated: this.mutated,
                 error: this.error,
@@ -85,7 +80,6 @@
 
         methods: {
             async mutate() {
-                delete this.changes.id
                 this.error = false
 
                 try {
@@ -100,7 +94,7 @@
                     }
 
                     let response = await axios.post(config.magento_url + '/graphql', {
-                        query: this.query.replace('changes', this.queryfy(this.changes)),
+                        query: this.query,
                         variables: this.data,
                     }, options)
 
@@ -118,11 +112,10 @@
                     }
 
                     if (this.callback) {
-                        await this.callback(this.changes, this.data, response)
+                        await this.callback(this.data, response)
                     }
 
                     if (this.clear) {
-                        this.changes = {}
                         this.data = {}
                     }
 
@@ -159,29 +152,6 @@
                     })
                 })
             },
-
-            // Credits: https://stackoverflow.com/a/54262737/622945
-            queryfy (obj, key = null) {
-                if (typeof obj === 'number') {
-                    return obj
-                }
-
-                if (obj === null) {
-                    return JSON.stringify('')
-                }
-
-                if (typeof obj !== 'object' || Array.isArray(obj)) {
-                    return key == 'country_code' ? obj : JSON.stringify(obj)
-                }
-
-                let props = Object.keys(obj).map(key =>
-                     `${key}:${this.queryfy(obj[key], key)}`
-                ).join(',')
-
-                return Object.keys(this.changes).length === 1
-                    ? props
-                    : `{${props}}`
-            }
         }
     }
 </script>
diff --git a/resources/views/layouts/partials/footer/newsletter.blade.php b/resources/views/layouts/partials/footer/newsletter.blade.php
@@ -1,5 +1,5 @@
-<graphql-mutation v-cloak query="mutation { subscribeEmailToNewsletter(changes) { status } }" :alert="false" :clear="true">
-    <div class="max-w-full mx-auto px-5 pt-12 lg:pt-16" slot-scope="{ mutate, changes, mutated, error }">
+<graphql-mutation v-cloak query="mutation visitor ($email: String!) { subscribeEmailToNewsletter(email: $email) { status } }" :alert="false" :clear="true">
+    <div class="max-w-full mx-auto px-5 pt-12 lg:pt-16" slot-scope="{ mutate, variables, mutated, error }">
         <div class="px-6 py-6 bg-gray-200 rounded-lg md:py-12 md:px-12 lg:py-16 lg:px-16 xl:flex xl:items-center">
             <div class="xl:w-0 xl:flex-1">
                 <strong class="text-2xl font-extrabold tracking-tight text-gray-600 sm:text-3xl">
@@ -19,7 +19,7 @@
                             label=""
                             name="email"
                             type="email"
-                            v-model="changes.email"
+                            v-model="variables.email"
                             class="px-5 py-3 !text-base"
                             wrapperClass="flex-grow"
                             dusk="newsletter-email"