Provide 2 dropdowns for quickly creating queries

[theodorDiaconu]

One for Collections
One for Named Queries

On Click it should auto-complete the query input and parameter input with {undefineds}

Use the same design pattern from GraphiQL
Use codemirror as GraphiQL does
Provide shortcuts for full schema dumps

[Herteby]

I think you could integrate the query creation with the Schema/Link viewing into just one view. I'm thinking of making a new interface in Vue (because that's what I know) using just the backend stuff from grapher-live.

[theodorDiaconu]

I understand what you want... I believe that if our goal is to improve Grapher Live we should keep it unified. I am not against vue, but this is already a foundation we can build upon.

No-one stops you from creating a grapher-live-vue, but I feel that we may duplicate work, as the projects will live separately and can grow in different directions. This isn't necessarily bad also.

[Herteby]

Hmm, I don't think It would have many features specifically for grapher-vue, so separate packages wouldn't do much good. It's just that I don't feel like learning React in order to work on it, and I think it would be a pretty quick project. You could probably wrap a Vue component in React as easily as the reverse though, and use code splitting to avoid bloat.

[theodorDiaconu]

Understood, feel free to fork this package into a grapher-live-vue. You may write a better implementation for it that would encourage VueJS users more than this react one. And we can inspire and learn from each.

My ideal vision for grapher-live is to make it as good as graphiql, with autocompletion, and shortcuts that would do a :1 with all fields.

[Herteby]

My idea was instead of a text editor, create a graphic representation of the schema and links, where you can click on each field to toggle it on/off. If you enable a link field, it expands to let you toggle its fields on/off etc. This way you get both a full overview and editability. You'd see the resulting query at the side, as well as live updating results. For $filters etc. I might just make them textareas to start with, but could be made into graphic editors as well.

[theodorDiaconu]

Care to draw it on a sheet of paper or maybe a small mock on the web so I can understand your idea better ?

[Herteby]

Well, here's how it's looking at the moment 😄

[theodorDiaconu]

Wow, that's so nice!
I now see where you are heading... nice.

[Herteby]

You can check it out here 🙂
https://github.com/Herteby/graphical-grapher

[theodorDiaconu]

Shockingly amazing. Magical.

[Herteby]

Glad you like it! Btw, I discovered you had taken some shortcuts with the schema extraction. I remade it so that it now works with subschemas, "oneOf" fields, and includes all extra options like blackbox, min, max etc.

It also combines fields into a nested structure, instead of having them like "arrayField.$" and "objectField.foo", for easier rendering.

Now I just need to figure out how to turn it into a proper package. One downside of Vue is that you can't import .vue files from packages, so you must compile the package with webpack 😐

[theodorDiaconu]

@Herteby I think you should do it in React (in a PR here). It will be a good experience for you as a developer to try it.

[Herteby]

I've already spent a bit more time than can be justified on this. Vue is just 87 kb, less than a cat picture, and it can be dynamically imported. Should be easy enough to wrap in a React component.

Besides, if I were to remake it in React, then either the Vue people would have to do the same type of wrapping, or we'd have to support two versions, which is no fun.

[theodorDiaconu]

We need to think of a healthy way to do this to allow all people benefit of this easily.

[Herteby]

I think you could set it up so that if you import {GraphicalGrapherReact} from 'graphical-grapher' you'd get a React component that wraps GraphicalGrapher, using dynamic imports in ComponentDidMount.