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
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 😒
I am guessing that you are using async tasks somewhere in your
createModelStore()
which makes a call touseMutation()
after yoursetup()
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