Reactive queries Apollo graphql in Vue 3

Question

Trying to make a reactive query as per https://v4.apollo.vuejs.org/guide-option/queries.html#reactive-query-definition , but I can't get them to work.

Error:

Uncaught (in promise) Error: Invalid AST Node: { query: { kind: "Document", definitions: [Array], loc: [Object] }, loadingKey: "loading" }.

Query inside export default (checked is a reactive boolean v-model 'ed to a button defined in data()):

apollo: {
    getTags: getTags,
        getPhotos: {
        query() {
            if (this.checked)
                return {
                    query: getPhotos,
                    loadingKey: "loading",
                }
            else {
                return {
                    query: getPhotosByTag,
                    loadingKey: "loading",
                }
            }
        },
        update: (data) => data.getPhotos || data.getPhotos,
        },
},

GQL getPhotosByTag:

const getPhotosByTag = gql`
    query getPhotosByTag {
        getPhotos: findTagByID(id: 326962542206255296) {
            photos {
                data {
                    name
                    description
                    _id
                }
            }
        }
    }
`

GQL getPhotos:

const getPhotos = gql`
    query getPhotos {
        getPhotos: getPhotos(_size: 50) {
            data {
                name
                description
                _id
            }
        }
    }
`

If I take them out into separate queries and try to instead update use skip() via checked and !checked in the query definition, only the initial load delivers a query, if I click the button new query doesn't launch. Queries work by themselves fine.

Answer 1

apollo: {
    getPhotos: {
        query() {
            return this.checked ? getPhotos : getPhotosByTag
        },
        loadingKey: "loading",
        update: (data) => data.getPhotos || data.getPhotos,
    },
},

Loading key has to be on the same level as query