Vue Apollo useQuery报错Invalid AST Node: undefined原因排查

在组件中向useQuery方法传入定义好的GraphQL查询常量时，控制台抛出如下错误：

Uncaught (in promise) Error: Invalid AST Node: undefined.
    at devAssert (app.js:60958:11)
    at visit (app.js:65283:130)
    at Object.assign.added (app.js:59225:58)
    at InMemoryCache.transformDocument (app.js:53379:101)
    at QueryManager.transform (app.js:56649:42)
    at QueryManager.getVariables (app.js:56681:121)
    at QueryManager.watchQuery (app.js:56684:147)
    at ApolloClient.watchQuery (app.js:55091:34)
    at start (app.js:5304:26)
    at immediate (app.js:5522:7)

对应组件的script段代码如下：

<script>
    import { MY_QUERY } from "./constants/qraphql";
    import {useQuery} from "@vue/apollo-composable";

    export default {
        setup() {
            const {result, loading, error} = useQuery(MY_QUERY);

            return {
                result,
                loading,
                error
            }
        }
    }
</script>

对应./constants/graphql.js文件代码如下：

import gql from 'graphql-tag';

const MY_QUERY = gql`
    query exampleQuery {
        tasks {
            id
            name
            title
            text
        }
    }`;

报错核心是传入useQuery的MY_QUERY实际值为undefined，由两处笔误共同导致：

• 导入路径拼写错误：组件中引入常量的路径写为./constants/qraphql，将正确文件名graphql的首字符g错写为q，路径指向不存在的模块。
• 常量未对外导出：即使修正路径拼写，graphql.js文件中仅定义了MY_QUERY常量，未使用export关键字暴露该常量，具名导入得到的值仍然是undefined。Apollo Client处理查询时校验AST节点发现传入值为undefined，就会抛出该错误。

1. 修正组件中的导入路径拼写，将./constants/qraphql改为./constants/graphql
2. 修改graphql.js中的常量定义，添加导出关键字：

import gql from 'graphql-tag';

export const MY_QUERY = gql`
    query exampleQuery {
        tasks {
            id
            name
            title
            text
        }
    }`;

内容的提问来源于stack exchange，提问作者xorinzor