Keystone next custom graphql mutation and external frontend

Question

Hey I am trying to get a custom mutation to work in keystone-next with a "external" react, next & apollo frontend, but I am getting issues when calling the mutation from the frontend, but not when when calling it from the Keystone api explorer. The mutation is really simple.

Schema extension:

export const extendedGqlSchema = graphQLSchemaExtension({
  typeDefs: graphql`
    type Mutation {
      testAvailability(name: String): String
    }
  `,
  resolvers: {
    Mutation: {
      testAvailability: testAvailability,
    },
  },
});

Resolver function (different file):

export const testAvailability = (
  root: any, 
  { name }: { name: string },
  context: KeystoneContext
): string => {
  if (context) {
    return new Date().toUTCString() + ": Hi " + name + ", I'm here!";
  }
  return new Date().toUTCString() + ": No context";
};

The raw http request body that works is:

{
    "operationName": null,
    "variables": {},
    "query": "mutation {\n  testAvailability(name: \"Eve\")\n}\n"
}

while the raw http frontend generated request bodylook like the following:

{
    "operationName": "testAvailability",
    "variables": {
        "name": "Eve"
    },
    "query": "mutation testAvailability($name: String) {\n  testAvailability(name: $name) {\n    name\n    __typename\n  }\n}\n"
}

When I run these requests from Postman with the exact same headers then the first still works while the second still does not (no auth etc). The error that is returned in 400 bad request response is the following:

{
    "errors": [
        {
            "message": "Cannot assign to read only property 'path' of object '#<Object>'",
            "extensions": {
                "code": "INTERNAL_SERVER_ERROR",
                "exception": {
                    "stacktrace": [
                        "TypeError: Cannot assign to read only property 'path' of object '#<Object>'",
                        "    at formatError (%ProjectPath%\\backend\\node_modules\\@keystone-next\\keystone\\dist\\createApolloServer-231615cf.cjs.dev.js:82:24)",
                        "    at %ProjectPath%\\backend\\node_modules\\apollo-server-errors\\src\\index.ts:287:28",
                        "    at Array.map (<anonymous>)",
                        "    at Object.formatApolloErrors (%ProjectPath%\\backend\\node_modules\\apollo-server-errors\\src\\index.ts:285:25)",
                        "    at formatErrors (%ProjectPath%\\backend\\node_modules\\apollo-server-core\\src\\requestPipeline.ts:665:12)",
                        "    at %ProjectPath%\\backend\\node_modules\\apollo-server-core\\src\\requestPipeline.ts:649:15",
                        "    at Generator.next (<anonymous>)",
                        "    at fulfilled (%ProjectPath%\\backend\\node_modules\\apollo-server-core\\dist\\requestPipeline.js:5:58)",
                        "    at runMicrotasks (<anonymous>)",
                        "    at processTicksAndRejections (internal/process/task_queues.js:93:5)"
                    ]
                }
            }
        }
    ]
}

What am I missing?

Answer 1

If you look at that second query, coming from the frontend, it's basically this:

mutation testAvailability($name: String) {
  testAvailability(name: $name) {
    name
    __typename
  }
}

But testAvailability returns a String, not an object, right? The correct query is probably closer to this...

mutation testAvailability($name: String) {
  testAvailability(name: $name)
}

So basically, check your frontend query.

I'm not sure where that Cannot assign to read only property 'path' of object '#<Object>'" error is coming from though... If I repro this I get a GRAPHQL_VALIDATION_FAILED error:

Field "testAvailability" must not have a selection since type "String" has no subfields.

Which is much more helpful!