GraphQL and Swagger UI should know when the application reloaded

[FroMage]

I was following the GraphQL guide and started adding queries, and typing it in the GraphQL DEV UI, and then I started getting errors in my view, because it didn't know the new query. I'm guessing that's because the UI wasn't reloaded so it didn't reload the schema. Executing the query worked, though, so it felt weird. I could reload the DEV UI page and get it to see the new queries.

We should be able to have a websocket or SSE or whatever and make the DEV UI page know that the queries changed and notify the user with a button to reload the UI, no?

[quarkus-bot]

/cc @jmartisk, @phillip-kruger

[phillip-kruger]

So this is because when you hot-reload, the schema might have changed, and thus the UI needs to reload the schema. We have the same issue in REST (Swagger-UI does not automatically reload on hot reload). We can definitely look into this, but as with swagger-ui, the graphql-ui is an external dependency we pull in. We do already modify the HTML and JS so this should be possible. You do get use to refreshing (click in the logo) on every change, so I am not sure it's worth the effort.

[FroMage]

I think it's worth it for both, but it's less obvious for the Swagger one because the new operation will not appear, so you can't invoke it.
Here I can invoke the new query, even before the app is reloaded, and it's the invocation of the new query that causes the app to be reloaded, leading me to have both a valid result on the right, and an error on the left because the query is not recognised.
That's what's confusing, to me. At this point, having a visual clue about what went wrong would have helped.

Also, this is definitely something you can demo, so IMO worth it ;)

[phillip-kruger]

Ok cool, I can look at this a.s.a.p for both.

[phillip-kruger]

Hi @FroMage - I have been thinking about this a bit more. I think we have a chicken-egg problem here. We can add a websocket that, when in dev mode, ui's (like swagger-ui, graphql-ui and even dev-ui) can subscribe and then, when a hot reload happens, they refresh themselves. However, the thing that trigger the reload is a browser refresh. So in your case, that will not solve the problem, as you make a change to the graphql code, and until a web request comes in the hot reload does not happen, so if you go back to your screen, the hot reload has not happened ? @stuartwdouglas - any ideas ?

[stuartwdouglas]

You could add a poll on the page, so that if you are on that page hot reload will happen every time you poll (if there are changes), but I don't know if that is a great idea either.

[phillip-kruger]

I guess you stand a chance that it poll and find changes while the developer is still working on the code ? I wonder if it's worth it ? @FroMage ?

[FroMage]

Can we detect that there are changes without triggering hot-reload?

[stuartwdouglas]

Maybe, we actually have that sort of detection at the moment, but only when continuous testing is enabled and there is not really any hooks outside the test listener hooks. E.g. if you used a test listener to check for test run started that would tell you what had changed, but only if the tests are actually enabled.