vuejs3apollo-clientvue-apollo

Error: Invalid AST Node: Undefined on Vue apollo query


I'm getting the error below when providing a constant with my graphql query to useQuery inside of my component.

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)

My component script section looks like:

<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>

And my ./constants/graphql.js file looks like:

import gql from 'graphql-tag';

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

Why is this happening?


Solution

  • Turns out I forgot to prefix export to my constant MY_QUERY. This caused the component to attempt to use a undefined constant because it failed to import.

    In my ./constants/graphql.js file I have to change

    const MY_QUERY

    to

    export const MY_QUERY

    Now the error is fixed