(Axios) HTTP POST request failed after two minutes, Laravel 5 + VueJS - mysql

Question

I am trying to replicate data in the database for a specific user. It is almost 1000 rows that should be replicated. But my request gets failed with Empty response after 2 min. you can see in the picture. I am not able to identify the issue. Guide me if anyone has already solved this kind of issue.
My database is hosted on Google Cloud Storage and I am using MySQL.
This is my controller method:
public function createDataForManyToMany (Request $request)
{
$rows = TableA::where('id_analysis',
$request->analysis_id)->get();
$files_data = TableB::Where('id_analysis',
$request->analysis_id)->get();
foreach ($rows as $row)
{
$row->input_files()->saveMany($files_data);
}
return response()->json([
'status' => 'ok',
'analysis_id' => $request->analysis_id
]);
}
My Axios post request:
axios.post('/app/create-det-infiles-data', { '_token': this.csrf_token, 'analysis_id': res.data.analysis_id})
.then( res => {
if (res.data.status === 'ok') {
this.signupTried = false
this.emailSent = true
}
Vue Component:
<template>
<div class="fullwidth-container">
<div class="login-container">
<v-card class="login_form elevation-9">
<form class="login">
<input type="hidden" name="_token" :value="csrf_token"/>
<div class="header">
<h1>PIX2MAP SignUp</h1>
</div>
<v-text-field
color="dark"
prepend-icon="person"
:label="$t('name')"
required
:error-messages="nameErrors"
v-model="name">
</v-text-field>
<v-text-field
color="dark"
prepend-icon="email"
label="Email"
required
:error-messages="emailErrors"
v-model="email">
</v-text-field>
<v-text-field
color="dark"
prepend-icon="vpn_key"
:append_icon="show_pass ? 'visibility_off' : 'visibility'"
:type="show_pass ? 'text' : 'password'"
:error-messages="passwordErrors"
required
:label="$t('password')"
v-model="password"
#click:append="show_pass = !show_pass">
</v-text-field>
<v-text-field
class="pwd-confirm"
color="dark"
:append_icon="show_pass ? 'visibility_off' : 'visibility'"
:type="show_pass2 ? 'text' : 'password'"
:error-messages="repeatPasswordErrors"
required
:label="$t('repeat_password')"
v-model="password2"
#click:append="show_pass = !show_pass">
</v-text-field>
<v-layout row style="margin: 0">
<v-flex shrink style="margin-top: 0">
<v-checkbox
v-model="termsAccepted"
:label="`I accept the `"
:error-messages="acceptAgreementError"
>
</v-checkbox>
</v-flex>
<v-flex grow text-xs-left style="margin-top: 0">
contract
</v-flex>
</v-layout>
<v-btn class="btn-signup" color="accent" #click="doSignup"
:disabled="formFilled"
>Confirm <span class="float-right" :class="{'fas':signupTried, 'fa-spinner':signupTried, 'fa-spin':signupTried}"></span>
</v-btn>
<p class="privacy">{{ $t('form_privacy') }}</p>
</form>
</v-card>
<div class="back">
<v-btn flat #click="$emit('back')"><v-icon>arrow_back</v-icon>{{ $t('back_button') }}</v-btn>
</div>
</div>
<v-dialog
v-model="dialog"
max-width="650"
>
<v-card>
<v-card-title class="headline grey lighten-2">{{ contractTitile }}
<span style="margin-left: auto"><v-icon right #click="dialog = !dialog">fas fa-times</v-icon></span>
</v-card-title>
<v-card-text >
{{ contractBody }}
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>
</v-dialog>
<v-snackbar
v-if="signupTried"
v-model="snackbar"
dark
:bottom="y === 'bottom'"
:timeout="timeout"
:left="x === 'left'"
:color="color"
:multi-line="mode === 'multi-line'"
:right="x === 'right'"
:top="y === 'top'"
:vertical="mode === 'vertical'"
>
{{ text }}
</v-snackbar>
<v-snackbar
v-if="emailSent"
v-model="emailSnackbar"
:bottom="y === 'bottom'"
:timeout="timeout"
:left="x === 'left'"
:multi-line="mode === 'multi-line'"
:right="x === 'right'"
:top="y === 'top'"
:color="color"
:vertical="mode === 'vertical'"
>
{{ emailSentMessage }}
</v-snackbar>
</div>
</template>
<script>
import { required, email } from 'vuelidate/lib/validators'
import {TITLE, BODY_TEXT} from '../contract'
import axios from 'axios'
export default {
props: {
csrf_token: String,
name: String,
email: String,
},
data: () => ({
contractTitile: TITLE,
contractBody: BODY_TEXT,
show_pass: false,
show_pass2: false,
name: '',
email: '',
password: '',
password2: '',
signupTried: false,
emailExist: false,
dialog: false,
termsAccepted: false,
snackbar: true,
y: 'bottom',
x: null,
mode: '',
timeout: 10000,
color: '#fff',
text: 'This process will take some time, please! be patience.',
emailSent: false,
emailSnackbar: true,
emailSentMessage: 'We have sent you instructions, please verify your account by visiting your email.'
}),
validations: {
name: {
required
},
email: {
required,
email
},
password: {
required
},
password2: {
required
},
termsAccepted: {
required
}
},
methods: {
async doSignup () {
this.signupTried = true
if (this.$v.name.required && this.$v.email.required && this.$v.email.email && this.$v.password.required && this.termsAccepted ) {
axios.post('/app/register', { '_token': this.csrf_token, 'name': this.name,'email': this.email, 'password': this.password })
.then(res => {
if (res.data.status === 'ok') {
axios.post('/app/create-in-files-data', { '_token': this.csrf_token, 'analysisIds': res.data.analysis_ids})
.then(resp => {
if (resp.data.status === 'ok') {
axios.post('/app/create-mo-files-data', { '_token': this.csrf_token, 'analysisIds': resp.data.analysis_ids})
.then( res => {
if (res.data.status === 'ok') {
// window.location = '/'
// this.signupTried = false
// this.emailSent = true
axios.post('/app/create-det-infiles-data', { '_token': this.csrf_token, 'analysis_id': res.data.analysis_id})
.then( res => {
if (res.data.status === 'ok') {
this.signupTried = false
this.emailSent = true
// await axios.post('/app/create-det-mofiles-data', { '_token': this.csrf_token, 'analysis_id': res.data.analysis_id, demo: true})
// .then(async res => {
// if (res.data.status === 'ok') {
// this.showSpinner = false
// window.location = '/'
// } else {
// console.log('Files not created')
// this.showSpinner = false
// this.$emit('forgotPw', {email: this.email});
// }
// })
// .catch(e => {
// console.log('2nd error', e)
// })
} else {
console.log('Files not created')
this.showSpinner = false
this.$emit('forgotPw', {email: this.email});
}
})
.catch(e => {
console.log('2nd error', e)
})
} else {
console.log('Signup Failed')
this.signupTried = false
this.$emit('forgotPw', {email: this.email});
}
})
.catch(e => {
console.log('2nd error', e)
})
} else {
console.log('Files not created')
this.showSpinner = false
this.$emit('forgotPw', {email: this.email});
}
})
.catch(e => {
console.log('Error: ', e)
})
} else {
this.showSpinner = false
this.$emit('forgotPw', {email: this.email});
}
})
}
},
changeState () {
this.dialog = !this.dialog
}
},
computed: {
nameErrors () {
if (this.signupTried && this.name.length == 0 && !this.$v.name.required) return [this.$t('name_required')]
},
emailErrors () {
const errors = []
if (this.signupTried && !this.$v.email.required) errors.push(this.$t('email_required'))
if (!this.$v.email.email) errors.push(this.$t('not_valid_email'))
if (this.emailExist) errors.push(this.$t('existing_email'))
return errors
},
passwordErrors () {
if (this.signupTried && !this.$v.password.required) return [this.$t('password_required')]
},
repeatPasswordErrors () {
if (this.signupTried && !this.$v.password2.required) return [this.$t('password_required')]
if (this.password2 != this.password) return [this.$t('passwords_not_equal')]
},
acceptAgreementError () {
if (this.signupTried && !this.$v.termsAccepted.required) return [this.$t('agreement_required')]
},
formFilled () {
if (!this.$v.name.required || !this.$v.email.required || !this.$v.password.required || !this.$v.password2.required || !this.termsAccepted || (this.password != this.password2))
{
return true
} else {
return false
}
}
}
}
</script>
<style scoped lang="stylus">
#import '../../stylus/theme.styl'
.fullwidth-container {
width: 100%;
height: 100%;
background: $bg-login;
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
.login-container {
position: relative;
width: 500px;
top: 25px;
margin: auto;
.login_form {
padding: 16pt;
text-align: center;
height: 800px;
* {
margin-top: 24pt;
}
.header {
margin: 24pt;
}
.i-am {
display: flex;
flex-direction: row;
align-items: center;
* {
margin-top: 0pt;
}
span {
width: 8%;
}
.i-am-text {
margin-right: 20px;
}
.i-am-select {
margin-left: 5%;
}
}
.btn-signup {
margin-left: auto;
margin-right: auto;
width: 80%;
}
.privacy {
margin-top: 8pt;
font-style: italic;
}
.pwd-confirm {
margin-left: 7%;
}
.checkboxAccept {
display: inline;
}
.float-right {
margin-top: -3px;
margin-left: 5px;
color: #fff;
font-size: 18px;
}
}
}
}
</style>

Answer 1

This issue might be caused due to MySQL instance is reaching the time out limit for your query.
In Cloud SQL you can try to modify the flag “wait_timeout” and set a bigger value, for example 50000.
Check this link as a reference to set a flag in Cloud SQL instance.