nuxt-modules / apollo

Nuxt.js module to use Vue-Apollo. The Apollo integration for GraphQL.
https://apollo.nuxtjs.org
MIT License
956 stars 198 forks source link

onBeforeDestroy is called during a mutation #405

Open GuillaumeBec opened 3 years ago

GuillaumeBec commented 3 years ago

Hello there,

Following instructions of several contributors on the issue 228 (https://github.com/nuxt-community/apollo-module/issues/288), i have setup my apollo client, and i'm now trying it on a sign in mutation of and ancient project.

When lauching the mutation, an error (which i think comes from a misunderstanding of the useMutation() hook), is thrown

This is my mutation, and its callback :

const signInMutation = gql`
mutation signIn($email: email!, $password: password!) {
    user
    token
  }`;
setup(_) {
const signIn = () => {
      const { mutate: login } = useMutation(signInQuery, {
        variables: { email: 'paolo@totem.paris', password: 'Testtest1' },
      });
    };

      return {
      signIn,      
    };
    }    
And the error : 

onBeforeDestroy is called when there is no active component instance to be associated with
andrefrodrigues commented 3 years ago

Hello! I'm not sure if you still have this issue, but for anyone that is having the issue and comes across this I found the solution: The error is being thrown because you are calling a composition function inside the signIn function. And composition functions can only be called inside the setup method.

The useMutation compose returns a mutation function that should be called when you want to trigger the GraphQL mutation request, which returns a promise for you to handle if you don't want to use the onDone and onError methods that useMutation returns. So for your example all you have to do is this:



setup(_) {
const { mutate: login } = useMutation(signInQuery);
const signIn = () => {
         login( { email: 'paolo@totem.paris', password: 'Testtest1' } );
    };

      return {
      signIn,      
    };
    }