Runtime dynamic forms from GraphQL schemas

[pontusr]

Hi Juan,

Thanks for your great work on this so far!

I'd like to propose a new feature where you could add a list of forms/layouts for all queries/mutations in a GraphQL introspection schema simply by providing a uri to the schema.

These dynamic forms would be ready for immediate use by being data-bound and having the basic validations already in place. As such they would serve primarily two use cases:

1. In many projects users (or often us the developers) have to perform simple CRUD operations directly against databases and so on many iterations into development. A reasonably user-friendly way of manipulating backend data using these dynamic forms would prevent this.
2. Starting the design-work on basic but already working forms and manipulating these using the editor considerably lowers the complexity and effort to create a large number of forms.

There are many interesting challenges to solve here, for example:
*matching of queries and mutations to forms
*managing which forms (dynamic vs customized) should be available to "viewers".

I would be happy to try and do some work on this if you think FormQL is the right place for it?

[jstoppa]

Thanks so much for proposing this feature, it's a great idea!

I originally created this library with the Apollo client but then I decided to make the service implementation up to the developer in case they want to use it with a normal RESTFul API (I documented the service in here). I always wanted to make sure the editor remains separated from the core library, this is to try to make @formql/core as smaller as possible so when running in production you don't need to carry the overhead of the editor.

Back to your question, I think FormQL is definitely the right place for your idea. I did look at how GraphQL Editor work and checked how I could integrate it with the FormQL editor, I thought user being able to write a query and then perhaps "drag" fields from the result into the form, the FormQL editor can automatically sort out the binding to the field selected. The editor is not strongly typed at the moment, I always thought about getting everything wired up first and then introduce as much validation as possible like the ability to select the schema from a list of fields, I also thought at some point to integrate with something like swagger for normal RESTful API.

I have to admit that I left the library a bit unattended since COVID started but I really want to get back to it this month, I have a few PRs that I've been testing locally but didn't get to finish yet. I've also been actively looking for people that want to get involved on building FormQL so if you are interested then you are more than welcome.

How do you envision your feature being implemented? Would the user select the data source type in the editor, add the uri and then have a list of fields that can be added to the form? (e.g. I show below where you select the data source in a form, the type of data source is something I wanted to make an enum with RESTful and GraphQL as options (see FormDataSource model here)

I sense you want something even more programmatic than that, it looks like you are proposing to have a list of predefined queries that you can use in your form?

In any case, I can definitely point you in the right direction, if you can elaborate then we can put some thoughts on how to build it

Juan

[LucianViana]

I'm trying to standardize the query by dynamodb, which should be simple queries and must meet the creation of a form for a product category for example we have json:

as you explain on this site i want to adapt the backend to formql with your help: https://aws.amazon.com/pt/blogs/database/how-sgk-simplified-the-data-structure-of-a-highly-dynamic-workload-by-migrating-from-an-rdbms-to-amazon-dynamodb/

and if you can give me the direction as you said in the previous conversation I would be grateful.

[jstoppa]

@LucianViana
Not sure if I understand what you are trying to do but I put a very simple example in stackblitz

This example has 2 fields and a save button. Worth noting in the example below the save button to save the form definition and the save button that is on the form to save your data

I made that example to store the data in local storage, this is simply to "simulate" as if your local storage was your webservice.

The idea with FormQL is that you design your form by dragging and dropping "components" in the form, you do that by dragging the third button on the left hand side (if you hover over the buttons, it tells you what they do)

once you build your form, you click on the pencil button and define what component you want to use (simple field, date picker, picklist, etc) and then define your "schema", that is the mapping to a JSON Data object

if I now type something in the form and press save, the data is stored in local storage

you might have also noticed that if I press the save button on the top to save my form definition, it will push the change to the local storage too

this specific example has been configured in a way that your parameters determine the name of the form you are editing and the id of the record you want to save

if you then remove the word edit, you can see the form in view mode (that's how your users will see/use your form)

FormQL doesn't force you to pass the form name and id through the URL all the time, I've just configured this specific example in that way to explain how FormQL works.

Back to your question, how would you implement the integration with DynamoDB? you just need to create a class that implements the IFormQLService interface and implements the getData/saveData and getForm/saveForm to connect to your backend of choice (you can see the implementation of the local storage here, it's also documented in this wiki). getData will be called when the form attempts to get the data to populate on the form and saveData when the user presses the Save button. In the same way getForm will be called when FormQL attempts to load the form definition and saveForm when the user clicks on the button on the top to save the form definition.

The philosophy behind FormQL is to help you build forms quickly by using the editor without having to write tons of code (you can read here how the editor works). It also gives you the ability to write your own componentes and build more complex scenarios (see this Mortgage Calculator implemented in FormQL which I also explained it in this blog

I hope it helps

[LucianViana]

Hi Juan,
I know it can be support but I didn't find it on formql.io where to ask, but I'm trying to access an external http and the error happens below, would it be any restrictions that formql still has or not?

Error:
"TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functio"

this.http.get(http://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=7facebd2cd201249fb820ac63ed905e5);

> 40 |     expect(actualDataReturned).toEqual(mockData);
     |                                ^
  41 |     done();
  42 |   });
  43 |     //service.getProducts().subscribe((products) => {

  at apps/angular/app/src/app/product.service.spec.ts:40:32
  at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:391:26)
  at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/proxy.js:129:39)
  at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:390:52)
  at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/dist/zone.js:150:43)
  at Object.<anonymous> (node_modules/jest-preset-angular/zone-patch/index.js:53:29)

thanks.

[jstoppa]

I'm not sure about your setup, looks like you are trying to mock some data with jest? in any case, formql shouldn't have any problem to work with that API. Maybe something related to the API called as in this StackOverflow question?

I just created a quick example in stackblitz
https://stackblitz.com/edit/simple-form-weather-api?file=src%2Fapp%2Fapp-service.ts

You can see below I added your URL using SSL (e.g. https otherwise stackblitz will block it) and the data is populated correctly in the form

I've just had to get the mapping aligned with the API response

hope it helps