apollo: Error when using the useMutation function

Describe the bug I am getting this error when trying to use the new useMutation function:

TypeError: Cannot read property '$root' of null
    at getAppTracking (loadingTracking.js?b1f0:5)
    at getCurrentTracking (loadingTracking.js?b1f0:25)
    at track (loadingTracking.js?b1f0:50)
    at Object.trackMutation (loadingTracking.js?b1f0:70)
    at useMutation (useMutation.js?89f9:59)
    at useCreatePractitionerMutation (practitioner.ts?1d55:81)
    at useRegisterPractitionerMutation$ (practitioner.ts?1d55:87)
    at tryCatch (runtime.js?96cf:45)
    at Generator.invoke [as _invoke] (runtime.js?96cf:271)
    at Generator.prototype.<computed> [as next] (runtime.js?96cf:97)

To Reproduce Steps to reproduce the behavior:

Also, I know this should have been fixed in alpha.4, but for me the data is still of type any. here is part of my code:

const CREATE_PRACTITIONER = gql`
  mutation createPractitioner($input: CreatePractitionerInput!) {
    createPractitioner(input: $input) {
      clientMutationId
    }
  }
`;
export const useCreatePractitionerMutation = () => {
  return useMutation<
    CreatePractitionerMutation,
    CreatePractitionerMutationVariables
  >(CREATE_PRACTITIONER);
};

export const useRegisterPractitionerMutation = async (practitioner ) => {
 const variables: CreatePractitionerMutationVariables = { input: { practitioner } };

  const { loading, mutate, onError } = useCreatePractitionerMutation();
  const { data } = await mutate(variables, {
    awaitRefetchQueries: true,
    fetchPolicy: "network-only",
    refetchQueries: ["practitionerByPractitionerId"]
  });

  onError(err => useNotifyApolloError(err, errorMessages.FETCH_DATA_ERROR));

  return { loading, data };
};

Expected behavior

Since this is a brand new API I am not even sure that I am using it the correct way. Any help is appreciated! Versions “vue”: “2.6.11” / “2.6.10” “@vue/apollo-composable”: “^4.0.0-alpha.4”, “@vue/apollo-util”: “^4.0.0-alpha.2”, “@vue/composition-api”: “^0.3.4”, “apollo-client”: “^2.6.8”,

Thanks!

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 16

Most upvoted comments

The creating of stores occurs when the user selects a form value;

That’s exactly the issue. Your stores have to be created in your setup function, but not in any watch, hook or event callback. Once your setup function returns, you cannot call useMutation anymore. Not sure how to provide a better explaination tho since english is not my main language 😒

useMutation works fine in any composition function I create… it fails to work when I loop over the createModelStore composition function.

I am guessing that you are using async tasks somewhere in your createModelStore() which makes a call to useMutation() after your setup() function returns. I made a sandbox emulating your case the possible error you are having (well, i hope it does). You can try switching the boolean at Demo.vue:38 ! https://codesandbox.io/s/usemutation-demo-sandbox-hjce9?file=/src/components/Demo.vue