Graphiql: "message": "Unknown operation named \"undefined\"."

[songololo]

I'm testing / debugging resolvers using GraphiQL. At times, seemingly prompted by restarting the backend app, I'll start getting responses like this:

{
  "errors": [
    {
      "message": "Unknown operation named \"undefined\"."
    }
  ]
}

Restarting the app or refreshing the GraphiQL page do not fix the error. However, cutting the query and pasting it back into the query window seems to resolve the issue.

Thanks.

[wincent]

Thanks for submitting the report, @shongololo. However, I think we might need a more concrete repro recipe. I know this might be hard, if the issue is intermittent; do you see it on every backend restart? Can you provide a little more detail about what versions you are running and how?

[jinxac]

Even i facing this issue while calling mutations on my sample project.

Sharing few details :-

Mutation Query

mutation{
 toggleTodo(input:{
  id:"0"
}){
  todo{
    id
  }
}
}

Schema.js

const GraphQLChangeTodoStatusMutation = mutationWithClientMutationId({
  name : 'ToggleTodoStatus',
  description : 'Toggle status of todo',
  inputFields : {
    id: { type: new GraphQLNonNull(GraphQLID) },
  },
   outputFields: {
     todo: {
      type: todoType,
      resolve: ({localTodoId}) => getTodo(localTodoId),
    },
  },
  mutateAndGetPayload: ({id}) => {
   const localTodoId = fromGlobalId(id).id;
   toggleTodo(localTodoId);
   return {localTodoId};
 },
})

const Mutation = new GraphQLObjectType({
  name: 'Mutation',
  fields : {
    toggleTodo: GraphQLChangeTodoStatusMutation
  }
})

const Schema = new GraphQLSchema({
  query  : queryType,
  mutation : Mutation
})

Mock data

class Todo {}

let nextTodoId = 0

const todosById = []

addTodo('First task',false)
addTodo('Second task',false)

function addTodo(text,complete){
  const todo = new Todo()
  todo.complete = complete
  todo.id = `${nextTodoId++}`;
  todo.text = text;
  todosById.push(todo)
  return todo.id
}

function getTodos(){
  return todosById
}

function getTodo(id){
  return todosById[id]
}

function toggleTodo(id){
    todosById.map(function(todo,index){
    if(todo.id === id ){
    todo.complete = !todo.complete
    }
  })
}

module.exports = {
  Todo,
  addTodo,
  getTodos,
  toggleTodo
}

[asiandrummer]

This happens when GraphiQL is trying to figure out which operation under the operationName it wants to run, as the query editor supports having multiple query contexts and running each query by specifying which one.

Are there some steps we can follow to reproduce the issue?

[leebyron]

I'm not exactly sure what the root issue is, but I think this is due to saving state between runs. localStorage coerces everything to a String before saving it, so setting undefined results in getting "undefined".

[kastermester]

I still hit this issue when using unnamed queries/mutations/subscriptions. The issue arises when entering a query, like:

mutation {
  someMutation(input: {
    clientMutationId: ""
  }) {
    clientMutationId
  }
}

If one enters this query, and executes it - everything works as intended. From here, a second reload will yield the error. If doing the exact same query but naming the operation, like this:

mutation MyMutation {
  someMutation(input: {
    clientMutationId: ""
  }) {
    clientMutationId
  }
}

Then no error occours.

EDIT: This is GraphIQL 0.10.1

[mairatma]

Just confirming that I'm having the same problem @kastermester mentioned here. It's pretty annoying and really easy to reproduce, you just need to: run a unnamed mutation, refresh the page and run it again. I'm using the graphiql that graphql-server-express renders, which seems to be at 0.10.2.

[mike-marcacci]

I run into this from time to time as well. @leebyron is definitely correct that the string "undefined" is getting serialized in both localStorage and the search params:

My suspicion is that the latter (the search param) is the real culprit here, as simply deleting it resolves the issue, even though undefined remains in localStorage.

[Durisvk]

I have the same problem, how long would it take to fix this on your side? Are you working on it?

[asiandrummer]

This is weird - after v0.10.0 release that includes the fix for the race condition in updating operationName and the queryFacts fix, this issue should have gone away. Basically I don't understand how (and cannot reproduce) the query without operationName can update the URL with "&operationName=undefined" - this code in example/index.html should guard from such a case.

I can reproduce this issue when I explicitly put &operationName=undefined in the address bar. I can put in a preventive fix not to update the URL when operationName === null, but it feels wrong since either I'm missing something here or something funky is going on.

@Durisvk @mairatma @kastermester Were you guys able to repro this issue from the example app in GraphiQL? Is there a different setup for you guys?

[IvanGoncharov]

this code in example/index.html should guard from such a case.

@asiandrummer You need to propagate this change to express-graphql and other servers.
For example, see this: https://github.com/graphql/express-graphql/blob/master/src/renderGraphiQL.js#L86-L89

[mairatma]

Just confirming that in my case this happens through express-graphql as well. Maybe it's just a matter of updating something there.

[asiandrummer]

Got it - closing this issue here, opening/fixing in express-graphql. Thanks everyone.

[Durisvk]

I have the same issue here and I am not using express-graphql... I use hapi server and apollo-server for graphql... So it's not the issue of express-graphql

[asiandrummer]

@Durisvk Doesn't apollo-server use express-graphql to expose GraphiQL (asking since I haven't tried using apollo-server)

[Durisvk]

@asiandrummer That's the implementation detail I didn't study so I don't know, but I think they are using Hapi for GraphiQL since I am registering it as a plugin for Hapi like this:

server.register([{
        register: apolloHapi,
            options: {
                path: '/graphql',
                apolloOptions: (req) => {
                    const identity = options.safeGuard.authenticate(req);
                    return {
                        context: { identity },
                        pretty: true,
                        schema: graphqlConfig(options).executableSchema,
                    };
                },
            },
        },
        {
            register: graphiqlHapi,
            options: {
                path: '/graphiql',
                graphiqlOptions: {
                    endpointURL: '/graphql',
                },
            },
        },
    ]);

[asiandrummer]

@Durisvk apollo-graphql doesn't use express-graphql, but it copies how GraphiQL can be rendered as a module.

[apoberez]

Hello, same issue using this tutorial http://docs.graphene-python.org/projects/sqlalchemy/en/latest/tutorial/
sorry if off-topic

[muke5hy]

@apoberez Any solution you found? I'm facing the same issue while following tutorial at http://docs.graphene-python.org/projects/django/en/latest/tutorial-plain/#getting-relations

[metakot]

Just hitting F5 reproduces this error.
For now, workaround is Ctrl+A, Ctrl+X, Ctrl+V and query runs normal.

[metakot]

For graphene-python users who can afford patching the python lib for development process, there is a simple solution:
in the file _graphql/execution/utils.py_ at the beginning of _init_ func of a class _ExecutionContext_ you can paste something like

if operation_name == 'undefined':
    operation_name = None

[Hubro]

This is happening to me too. Indeed, cutting and pasting the query fixes it! I'm using graphene-python with flask-graphql. GraphiQL is built in to flask-graphql.

[acao]

seems your implementation might be running an outdated version of GraphiQL. can you confirm which version you are using? Do you have any more information about your particular implementation?

[Hubro]

I am using Flask-GraphQL==2.0.1. By the source it seems they embed GraphiQL version 0.11.11.

[acao]

@Hubro ah ok I see, yeah it's lockewd. I can open a PR to upgrade and improve the implementation a bit, but that would be up to the maintianer, unless pip allows you to install from my fork. I'd love to make sure flask users have an up-to-date implementation!

[Hubro]

@acao I just opened an issue about it now... :P

https://github.com/graphql-python/flask-graphql/issues/75

A pull request would be neat!