Styjun

Which are more efficient in putting out wildfires: planes or helicopters?

Does a reference have a storage location?

Story about two rival crews terraforming a planet

In National Velvet why didn't they use a stunt double for Elizabeth Taylor?

Prime number raised to a power

how to set the columns in pandas

Versicle and response symbols

What does the ash content of broken wheat really mean?

Recolour existing plots

How can I get a file's size with C++17?

Bypass with wrong cvv of debit card and getting OTP

Can Monks cast spells?

what is the meaning of "stock" dilution on the Massive Dev Chart Website?

Magento 2: I am not aware about magneto optimization. Can you please share the steps for this?

3D nonogram – What's going on?

What is the right way to query an I2C device from an interrupt service routine?

SQL Server error 242 with ANSI datetime

Language Selector

What can a novel do that film and TV cannot?

What is -(-2,3,4)?

Was Wolfgang Unzicker the last Amateur GM?

How might boat designs change in order to allow them to be pulled by dragons?

Phrasing "it says" or "it reads"

Is it possible to spoof an IP address to an exact number?

then() in promise is always executed which is in Vue component even if i get an error from catch() which is in Vuex action

Cannot get object’s property in state before render using Vue + VuexTesting VueJS method inside of a promise which is returned from a vuex actionSaving user object to post Graphql/Apollo VueCan't modify vuex state through a mutationCross Component Communication Architecture with Apollo, GraphqlVue.js: Uncaught promises in vuex actionsVuex function execute before the otherReturning error from promise in vuex store actionVueX/VueJs : Execute code in component after async processVue JS How to catch errors globally and display them in a top level component

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

I am setting up authentication using apollo-vue graphql. To redirect user to homepage when he/she successfully logs in. I've returned promise from Vuex action and used then() in Vue component where i push my node in route for redirection but then() in Vue component is always executed even if i get error from catch() which is in vuex actions and user is always redirected to homepage

I've tried adding catch after then() in Vue component and it works but i want to capture my error in vuex not in vue component

Action in Vuex

login()
 return apollo
 .mutate(
 mutation: CREATE_SHOP_USER,
 variables: signUpData
 )
 .then((res) => console.log(res))
 .catch((err) => console.log(err))

Method in Vue Component

 userAuthenticate() {
 const userSignupData = 
 email: this.email,
 password: this.password
 ;

 this.$store
 .dispatch("authenticateApp", userSignupData)
 .then(() => 
 this.$router.push("/");
 ) 

I expect "then" in Vue component should never be executed if catch has been already executed which is in Vuex action.

vue.js graphql apollo

share|improve this question

asked Mar 25 at 18:13

junaidjunaid

3488 bronze badges

add a comment | 

0

I am setting up authentication using apollo-vue graphql. To redirect user to homepage when he/she successfully logs in. I've returned promise from Vuex action and used then() in Vue component where i push my node in route for redirection but then() in Vue component is always executed even if i get error from catch() which is in vuex actions and user is always redirected to homepage

I've tried adding catch after then() in Vue component and it works but i want to capture my error in vuex not in vue component

Action in Vuex

login()
 return apollo
 .mutate(
 mutation: CREATE_SHOP_USER,
 variables: signUpData
 )
 .then((res) => console.log(res))
 .catch((err) => console.log(err))

Method in Vue Component

 userAuthenticate() {
 const userSignupData = 
 email: this.email,
 password: this.password
 ;

 this.$store
 .dispatch("authenticateApp", userSignupData)
 .then(() => 
 this.$router.push("/");
 ) 

I expect "then" in Vue component should never be executed if catch has been already executed which is in Vuex action.

vue.js graphql apollo

share|improve this question

asked Mar 25 at 18:13

junaidjunaid

3488 bronze badges

add a comment | 

I am setting up authentication using apollo-vue graphql. To redirect user to homepage when he/she successfully logs in. I've returned promise from Vuex action and used then() in Vue component where i push my node in route for redirection but then() in Vue component is always executed even if i get error from catch() which is in vuex actions and user is always redirected to homepage

I've tried adding catch after then() in Vue component and it works but i want to capture my error in vuex not in vue component

Action in Vuex

login()
 return apollo
 .mutate(
 mutation: CREATE_SHOP_USER,
 variables: signUpData
 )
 .then((res) => console.log(res))
 .catch((err) => console.log(err))

Method in Vue Component

 userAuthenticate() {
 const userSignupData = 
 email: this.email,
 password: this.password
 ;

 this.$store
 .dispatch("authenticateApp", userSignupData)
 .then(() => 
 this.$router.push("/");
 ) 

I expect "then" in Vue component should never be executed if catch has been already executed which is in Vuex action.

vue.js graphql apollo

share|improve this question

asked Mar 25 at 18:13

junaidjunaid

3488 bronze badges

login()
 return apollo
 .mutate(
 mutation: CREATE_SHOP_USER,
 variables: signUpData
 )
 .then((res) => console.log(res))
 .catch((err) => console.log(err))

 userAuthenticate() {
 const userSignupData = 
 email: this.email,
 password: this.password
 ;

 this.$store
 .dispatch("authenticateApp", userSignupData)
 .then(() => 
 this.$router.push("/");
 ) 

share|improve this question

asked Mar 25 at 18:13

junaidjunaid

3488 bronze badges

share|improve this question

asked Mar 25 at 18:13

junaidjunaid

3488 bronze badges

asked Mar 25 at 18:13

junaidjunaid

3488 bronze badges

asked Mar 25 at 18:13

junaidjunaid

3488 bronze badges

1 Answer
1

active

oldest

votes

2

You can log the error inside the vuex action, but you'll need to throw it again in order to still have the promise reject:

return apollo.mutate(
 mutation: CREATE_SHOP_USER,
 variables: signUpData
)
 .then((res) => console.log(res))
 .catch((err) => 
 console.log(err)
 throw err
 )

This will prevent the then inside your component from being called. Of course, because we now have a rejected promise, we should still handle the rejection:

this.$store
 .dispatch("authenticateApp", userSignupData)
 .then(() => 
 this.$router.push("/");
 )
 .catch(() => 
 // Handle rejection here
 )

share|improve this answer

answered Mar 25 at 18:23

Daniel ReardenDaniel Rearden

21.9k22 gold badges2828 silver badges5151 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55344129%2fthen-in-promise-is-always-executed-which-is-in-vue-component-even-if-i-get-an%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

2

You can log the error inside the vuex action, but you'll need to throw it again in order to still have the promise reject:

return apollo.mutate(
 mutation: CREATE_SHOP_USER,
 variables: signUpData
)
 .then((res) => console.log(res))
 .catch((err) => 
 console.log(err)
 throw err
 )

This will prevent the then inside your component from being called. Of course, because we now have a rejected promise, we should still handle the rejection:

this.$store
 .dispatch("authenticateApp", userSignupData)
 .then(() => 
 this.$router.push("/");
 )
 .catch(() => 
 // Handle rejection here
 )

share|improve this answer

answered Mar 25 at 18:23

Daniel ReardenDaniel Rearden

21.9k22 gold badges2828 silver badges5151 bronze badges

add a comment | 

2

You can log the error inside the vuex action, but you'll need to throw it again in order to still have the promise reject:

return apollo.mutate(
 mutation: CREATE_SHOP_USER,
 variables: signUpData
)
 .then((res) => console.log(res))
 .catch((err) => 
 console.log(err)
 throw err
 )

This will prevent the then inside your component from being called. Of course, because we now have a rejected promise, we should still handle the rejection:

this.$store
 .dispatch("authenticateApp", userSignupData)
 .then(() => 
 this.$router.push("/");
 )
 .catch(() => 
 // Handle rejection here
 )

share|improve this answer

answered Mar 25 at 18:23

Daniel ReardenDaniel Rearden

21.9k22 gold badges2828 silver badges5151 bronze badges

add a comment | 

You can log the error inside the vuex action, but you'll need to throw it again in order to still have the promise reject:

return apollo.mutate(
 mutation: CREATE_SHOP_USER,
 variables: signUpData
)
 .then((res) => console.log(res))
 .catch((err) => 
 console.log(err)
 throw err
 )

This will prevent the then inside your component from being called. Of course, because we now have a rejected promise, we should still handle the rejection:

this.$store
 .dispatch("authenticateApp", userSignupData)
 .then(() => 
 this.$router.push("/");
 )
 .catch(() => 
 // Handle rejection here
 )

share|improve this answer

answered Mar 25 at 18:23

Daniel ReardenDaniel Rearden

21.9k22 gold badges2828 silver badges5151 bronze badges

return apollo.mutate(
 mutation: CREATE_SHOP_USER,
 variables: signUpData
)
 .then((res) => console.log(res))
 .catch((err) => 
 console.log(err)
 throw err
 )

this.$store
 .dispatch("authenticateApp", userSignupData)
 .then(() => 
 this.$router.push("/");
 )
 .catch(() => 
 // Handle rejection here
 )

share|improve this answer

answered Mar 25 at 18:23

Daniel ReardenDaniel Rearden

21.9k22 gold badges2828 silver badges5151 bronze badges

answered Mar 25 at 18:23

Daniel ReardenDaniel Rearden

21.9k22 gold badges2828 silver badges5151 bronze badges

answered Mar 25 at 18:23

Daniel ReardenDaniel Rearden

21.9k22 gold badges2828 silver badges5151 bronze badges