Introduce a ktor feature

[jeggy]

Would be nice to make this into a multi project and create a ktor feature which adds a /graphql route. And would have some configuration support to allow graphiql support out of the box

Status:

• Easy to use Ktor Feature. Installation docs: https://kgraphql.io/Plugins/ktor/
• GraphQL Playground out of the box support with single boolean configuration.
• Simplified support for authentication. Current wrap/context are not easy to understand
• Status Pages for GraphQLError out of the box which are following the Spec error format
• Web sockets for Subscription support

[Allali84]

Hello,
Is there someone working on this feature ? can i take care of it ? :)

[jeggy]

I started to look at this last week. Quickly ran into the question of what would be the best way to solve this?

I was thinking of just making a extension function to ktor's Route
so you would use it like this:

install(Routing) {
  graphql {
    query("myType") {
      resolver { -> "Hello World" }
    }
  }
  // ... Your other normal routes
}

I would like to have easy setup of different things like:

• GraphiQL
• Websockets
• Authentication
• Ktor context mapping to KGraphQL context.

So I wanted to design the API before going directly to implementation.

[Edit - August 2020]: This was just a suggestion and is not what we ended with. Please look at the docs for the correct instructions for setting GraphQL up within ktor.

install(WebSockets)
install(Routing) {
  // Wrapping this inside a `Route.authenticate`, should work out of the box also.
  graphql {
    configure {
      // Setting this to true would return a web app of [https://github.com/prisma-labs/graphql-playground] 
      // Only when a HTTP method is `GET` and HTTP Accept header has `text/html`
      playground = true
    }
    query("myType") {
      resolver { ctx: Context ->
        // This User will come directly from the 
        val user = ctx.get<User>()
        "Hello ${user.name}"
      }
    }
  }
}

We can maybe wait a bit with the web sockets part, as that is mostly for subscription queries.

Other than that I would love to hear input, how would you imagine the usage would be?
And do you think the idea I have provided here would be easy to use?

[jeggy]

You are welcome to come with a pull request for this 😃

Then I can put my focus on something else instead

[Allali84]

I have not thought about the design yet but you have already helped me with your idea that I like very much, I will try to implement it and make a pull request so that we can discuss it at that time
You can focus on something else and let take care of it 😃

[jeggy]

I have created some basic code that you can look at here: 82c6203

I tried using Kotlin Serilization instead of Gson, but ran into some problems and just went with Gson in that example.

I would love it to use Kotlin Serialization or even better it would just use whatever implementation that they have used within their ContentNegotiation configuration. So we will be one step closer to multiplatform support(#6)

[zole40]

Hello, guys. I try to use the Ktor plugin and found a problem but I do not know it is a bug or just I don`t understand how it works. I migrated our code to use the Ktor plugin and it works well. After that, I tried to use the playground but is it not work with basic authentication and return with HTTP 401 in any way. It is a little confusing because it works with Ktor client and Insomnia as well. Can you help to fix or understand the problem?

[jeggy]

@zole40 Could you provide some more information about your setup? As for the small examples that I have tested it with, it does work.
Do you have some authentication setup using the wrap/context?
Do you have some custom CORS setup?
...

If possible it would be great if you could create a small example setup of where it fails, then I can fully investigate what's going wrong.

[zole40]

@zole40 Could you provide some more information about your setup? As for the small examples that I have tested it with, it does work.
Do you have some authentication setup using the wrap/context?
Do you have some custom CORS setup?
...

If possible it would be great if you could create a small example setup of where it fails, then I can fully investigate what's going wrong.

I used a simple configuration like this for test it:

   install(Authentication) {
       basic("test") {
            validate {
                UserIdPrincipal("test")
            }
        }
    }
    install(GraphQL) {
        playground = true
        wrap {
            authenticate("test", build = it)
        }
        context { call ->
            // access to authentication is only available if this is wrapped inside a `authenticate` before hand.
            call.authentication.principal<UserIdPrincipal>()?.let {
                +UserInfo(it.name, "")
            }
        }
        schema {
            configure {
                useDefaultPrettyPrinter = true
            }
            query("hello") {
                resolver { ctx: Context ->
                    val user = ctx.get<UserInfo>()!!
                    "Hello ${user.name}"
                }
            }
        }
    }

When I call it from Insomnia, it works. But when navigate to the playground localhost:8080/graphql it stopped working and I have the following error message.

[Error] Blocked http://localhost:8080/graphql from asking for credentials because it is a cross-origin request.
It looks like the playground calls do not contains the authentication headers.

[jeggy]

I got a completely different issue kotlinx.serialization.MissingFieldException: Field 'operationName' is required, but it was missing when using that Insomnia client. I have fixed this specific issue in version 0.15.6.

Are you making the request from a separate machine than where the ktor server is on? If so it seems like you should look at setting up CORS

[zole40]

I got a completely different issue kotlinx.serialization.MissingFieldException: Field 'operationName' is required, but it was missing when using that Insomnia client. I have fixed this specific issue in version 0.15.6.

Are you making the request from a separate machine than where the ktor server is on? If so it seems like you should look at setting up CORS

I making a request from the same machine.
I tried to set up the CORS and it does not solve the problem. I found a new error message in another browser and it looks like the problem is the playground js code is loaded from another host and tries to make a cross-origin request and block itself. It could be possible the Ktor server does not host the playground js code?
ServerParseError: Unexpected end of JSON input at JSON.parse (<anonymous>) at http://cdn.jsdelivr.net/npm/graphql-playground-react/build/static/js/middleware.js:124:179090