Uncaught Invariant Violation: Schema type definitions not allowed in queries

[P4sca1]

trafficstars

Describe the bug When using useQuery, the following error occurs:

Uncaught Invariant Violation: Schema type definitions not allowed in queries. Found: "undefined"
    at new InvariantError (webpack-internal:///./node_modules/ts-invariant/lib/invariant.esm.js:18:28)
    at eval (webpack-internal:///./node_modules/@apollo/client/utilities/graphql/getFromAST.js:20:29)
    at Array.map (<anonymous>)
    at checkDocument (webpack-internal:///./node_modules/@apollo/client/utilities/graphql/getFromAST.js:18:10)
    at getOperationDefinition (webpack-internal:///./node_modules/@apollo/client/utilities/graphql/getFromAST.js:28:5)
    at getQueryDefinition (webpack-internal:///./node_modules/@apollo/client/utilities/graphql/getFromAST.js:42:20)
    at StoreReader.diffQueryAgainstStore (webpack-internal:///./node_modules/@apollo/client/cache/inmemory/readFromStore.js:79:290)
    at InMemoryCache.diff (webpack-internal:///./node_modules/@apollo/client/cache/inmemory/inMemoryCache.js:142:33)
    at QueryInfo.getDiff (webpack-internal:///./node_modules/@apollo/client/core/QueryInfo.js:89:31)
    at ObservableQuery.getCurrentResult (webpack-internal:///./node_modules/@apollo/client/core/ObservableQuery.js:99:39)

To Reproduce

const { result, error } = useQuery(
  gql`
    query {
      viewer {
        username
      }
    }
  `,
  null,
  { prefetch: false }
)

Expected behavior The query should not throw an uncaught error and should work. Calling the query manually works fine:

const { client } = useApolloClient()
if (process.client) {
  client
    .query({
      query: gql`
        query {
          viewer {
            username
          }
        }
      `
  })
  .then(console.dir)
  .catch(console.error)
}

Versions vue: 2.6.14 @vue/apollo-composable: 4.0.0-alpha.16 @vue/apollo-ssr: 4.0.0-alpha.16 @apollo/client: 3.5.9

[ndpu]

Seems like the problem is related with vue 2.6. Have exact same error and all is ok with vue 3!

[argoyle]

I think the problem is graphql 16.x. Downgrading to 15.8 makes it work. Not sure what the problem with 16.x is though.

[stephane303]

Yes I confirm same issue with vue: 2.6.14, fixed for now with downgrading to graphql 15.8. I checked and the issue starts with graphql 16.0.0

[stephenjason89]

@stephane303 @argoyle Still present with 16.6.0

Currently using with 15.8 I hope it gets fixed soon.

[hipertracker]

Still present in Vue 2.7.14 and Graphql 16.16.0

[MichaelGoff]

Came over here from #1372 where I'm seeing

Uncaught Error: Invalid AST Node: "__typename".
    at devAssert (devAssert.mjs:5:11)
    at visit (visitor.mjs:168:23)
    at print (printer.mjs:10:10)
    at defaultPrinter (selectHttpOptionsAndBody.ts:124:58)
    at selectHttpOptionsAndBodyInternal (selectHttpOptionsAndBody.ts:174:48)
    at batchHttpLink.ts:99:9
    at Array.map (<anonymous>)
    at OperationBatcher2.batchHandler (batchHttpLink.ts:98:38)
    at OperationBatcher2.consumeQueue (batching.ts:167:12)
    at batching.ts:218:12

vue: 2.7.8 vue-apollo: 3.1.0 @apollo/client: 3.6.10 graphql: 16.6.0

I'm seeing the same behavior when using either BatchHttpLink or just plain HttpLink.

It appears inside of the visit function it is falling into this section from visitor.mjs:

 else if (parent) {
      key = inArray ? index : keys[index];
      node = parent[key];

      if (node === null || node === undefined) {
        continue;
      }

      path.push(key);
    }

where the parent node is just

{
  kind: "Field",
  name: "__typename",
} 

And is just pulling out the name "__typename" as the node.

As mentioned above, moving back to GraphQL 15.8.0 resolves this issue, but I'm looking into upgrading to Apollo Server 4 on the server-side which requires at least GraphQL 16.6.0.

[thisiskianoush]

Describe the bug When using useQuery, the following error occurs:

Uncaught Invariant Violation: Schema type definitions not allowed in queries. Found: "undefined"
    at new InvariantError (webpack-internal:///./node_modules/ts-invariant/lib/invariant.esm.js:18:28)
    at eval (webpack-internal:///./node_modules/@apollo/client/utilities/graphql/getFromAST.js:20:29)
    at Array.map (<anonymous>)
    at checkDocument (webpack-internal:///./node_modules/@apollo/client/utilities/graphql/getFromAST.js:18:10)
    at getOperationDefinition (webpack-internal:///./node_modules/@apollo/client/utilities/graphql/getFromAST.js:28:5)
    at getQueryDefinition (webpack-internal:///./node_modules/@apollo/client/utilities/graphql/getFromAST.js:42:20)
    at StoreReader.diffQueryAgainstStore (webpack-internal:///./node_modules/@apollo/client/cache/inmemory/readFromStore.js:79:290)
    at InMemoryCache.diff (webpack-internal:///./node_modules/@apollo/client/cache/inmemory/inMemoryCache.js:142:33)
    at QueryInfo.getDiff (webpack-internal:///./node_modules/@apollo/client/core/QueryInfo.js:89:31)
    at ObservableQuery.getCurrentResult (webpack-internal:///./node_modules/@apollo/client/core/ObservableQuery.js:99:39)

To Reproduce

const { result, error } = useQuery(
  gql`
    query {
      viewer {
        username
      }
    }
  `,
  null,
  { prefetch: false }
)

Expected behavior The query should not throw an uncaught error and should work. Calling the query manually works fine:

const { client } = useApolloClient()
if (process.client) {
  client
    .query({
      query: gql`
        query {
          viewer {
            username
          }
        }
      `
  })
  .then(console.dir)
  .catch(console.error)
}

Versions vue: 2.6.14 @vue/apollo-composable: 4.0.0-alpha.16 @vue/apollo-ssr: 4.0.0-alpha.16 @apollo/client: 3.5.9

Apollo client does not allow to define types or input types in the query strings. If you wanna define types or input types, you should define them in a separate gql function, then pass them as typeDefs option in the main ApolloClient object.

Read this Apollo Client Document

[6XGate]

Apollo keeps closing any issues related to this. I can only assume that this needs to be raised over and over till fixed. Referencing this issue.

[ralph]

I just came here to say that I have exactly the same issue. I tried converting a vue 2.7 / GraphQL 16.6 app from vue-apollo to @vue/apollo-composable, both using the very same apolloClient instance ("@apollo/client": "^3.7.11"`).

Everything works fine using the older vue-apollo package, but when I try making the very same query with @vue/apollo-composable, I get the familiar "Invalid AST Node" error (see #1372). Once I downgrade GraphQL to version 15.8, everything works again, even with @vue/apollo-composable.

Was anybody able to resolve this issue?

EDIT: Problem still present with the latest v4.0.0-beta.7.

[apotdevin]

I just upgraded to Apollo Server V4 (which requires at least graphql v16.6.0) and all APQ are returning Unexpected error processing request: Error: Invalid AST Node: undefined.. If I disable APQ in Apollo client the queries work fine.

Not sure what the issue is but looking at this thread it seems to be persistent for any version of graphql above v16.0.0. Has anyone found a solution or even a workaround that doesn't involve downgrading?

[argoyle]

I just tried this with beta.5 and I still have the problem when using graphql 16.6.0 @Akryum

[shenie]

I've found thru debugging... the workaround is to call markRaw with the DocumentNode so that reactivity does not mutate the query.

[xavxyz]

@shenie 's workaround seems to make it work, thanks! 🙏

import { markRaw } from 'vue';

const query = gql`
  query {
    what {
      ever
    }
  }
`;

const { result, error } = useQuery(markRaw(query));

⚠️ Though making the operation document not reactive can be problematic depending on the app's architecture : https://vuejs.org/api/reactivity-advanced.html#markraw

[ralph]

@shenie I did not quite "get" your workaround. Can you please elaborate? Or maybe post a before/after example?

[ralph]

Finally figured it out. Because the project I'm working on is using graphql codgen, the solution was incredibly easy with this wrapper:

import { gql as apolloGql } from '@apollo/client/core'
import { markRaw } from 'vue'

export function gql(literals: string | readonly string[], ...args: any[]) {
  return markRaw(apolloGql(literals, ...args))
}

And this change to codegen.ts:

import type { CodegenConfig } from '@graphql-codegen/cli'
import graphqlConfig from './graphql.config'

const config: CodegenConfig = {
  generates: {
    'src/gql/index.ts': {
      config: {
        gqlImport: '@/helpers/gql#gql',
      },
    },
  },
}
export default config

Thank you @shenie and @xavxyz for your solutions!