🍫

Vue Apollo の useMutation でつまづいたところ

2021/06/27に公開

概要

useMutation を使いたい!使おう!怒られる!なんで!

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 _callee$ (useAuth.ts?0ae4:26)
    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)
    at asyncGeneratorStep (asyncToGenerator.js?1da1:3)

怒られるコードのイメージ

こんな感じ。@clickでサーバーにアップロードするイメージ

<button @click="uploadSomething">アップロード</button>

...

const uploadSomething = async () => {
	const { mutate } = useMutation<Mutation>(UPDATE_GQL)
        const result = await mutate({ uuid, file })
}

正しいコードのイメージ

useMutation を callback 関数の外で記述しなきゃいけない。
もっと言うと async の中で書いてはいけないのかも知れない.

参考になった issue

const { mutate } = useMutation<Mutation>(UPDATE_GQL)
const uploadSomething = async () => {
        const result = await mutate({ uuid, file })
}

Discussion