Using GraphQL Introspection Json in my schema.json

General
1

I am currently working with JsonForms to integrate it with my GraphQL api and I want to use my introspection Json in my schema.json file it is not compatible my graphql object is too big and complex with nested objects. For the time being I am constructing the schema.json manually and it’s tedious to do so. I also tried some scripts to convert my introspection json file to one that is like the jsonforms.

Thanks

2

Hi!

I never had the use case of transforming a GraphQL introspection to JSON Schema, so I can’t be of much assistance. I did some googling and found this library, however I can’t do a specific recommendation as I don’t know it.

1 Like
3

Hello @sdirix
Thanks a lot, dear now I can generate the schema.json from my graphql schema by using your suggested library in a different scenario. However, as of right now, the UI schema is unaware of the modifications to my schema.JSON and I need to manually sync them one more. Tell me what you think.

Thanks

4

Hi @Dave,

Is there a need to manually maintain the UI Schemas for you? Many users of JSON Forms don’t maintain them manually but make sure that their custom renderers render the form in the way they want to see.

Alternatively you can generate the UI Schema on the fly (Generate.uischema(schema)) and process it in the way you want to see it.

5

Hey @sdirix
Thanks for your fruitful responses.
I removed the ui schema and it’s fine but the schema.json I generated is not still compatible with the one that jsonforms expect.

  const options = {
        ignoreInternals: false,
        nullableArrayItems: false,
      };
        const introspection = schemaJSON.data as IntrospectionQuery;
        const jsonSchema = fromIntrospectionQuery(introspection, options);
        console.log('my custom json schema ' + JSON.stringify(jsonSchema));

The below also print the form but only the high level object there is no input at all

        const introspection = schemaJSON.data as IntrospectionQuery;
        const jsonSchema = fromIntrospectionQuery(introspection, options);
        console.log(JSON.stringify(jsonSchema, null, 2));

Thanks

6

Hi @Dave,

Our UI Schema generator only produces shallow UI Schemas with controls for each property of the object. If such a property is an object or array, the respective renderer will determine the “detail UI Schema” to be used.

You can hand over a detail UI Schema for these controls via the options.detail property, e.g.

type: 'Control',
scope: '#/properties/myObject',
options: {
  detail: {
    type: 'VerticalLayout',
    elements: [
      {
        type: 'Control',
        scope: '#/properties/myProperty', // path is relative to `myObject`
      },
      // etc
     ]
  }
}

If you don’t want to generate such a large UI Schema before rendering, then you can also use the uischemas registry which is handed over as a prop, similar to renderers and cells. It uses the same tester-based mechanism to deliver UI Schemas for objects and arrays.

7

@sdirix
Is it able to consider and analyze $ref objects?
The json I generated is like below

{
“test”: {
“type”: “object”,
“properties”: {
“return”: {
“$ref”: “#/definitions/test”
},
“arguments”: {
“type”: “object”,
“properties”: {
“testInput”: {
“$ref”: “#/definitions/testMutationInput”
}
},
“required”: [“testInput”]
}
},
“required”:
}
}

8

If for example #/properties/myProperty points to a subschema with a $ref:

{
  $ref: '#/definitions/test'
}

then JSON Forms will always try to resolve this. The resolve util is also exported and can be called outside of JSON Forms.

9

How could then I use the resolver util, should i write some specific rule?

I checked the doc about red resolving but it’s not explanatory

10

The linked documentation is for another use case, i.e. resolving external URLs or simplyfing a schema before handing it over to JSON Forms as we only support basic use cases.

Manual resolving can be done with Resolve.schema(schema, ref, rootSchema). Resolve can be imported from @jsonforms/core.

11

Thanks a lot, dear
Is there documentation about this fun or maybe a use case?

  const introspection = schemaJSON.data as IntrospectionQuery;
        const jsonSchema = fromIntrospectionQuery(introspection, options);
        console.log(
          'from introspection : ' + JSON.stringify(jsonSchema, null, 2)
        );

        Resolve.schema(schemaa, './schemaa.json', schemaa);

        debugger;
        console.log('after res : ' + JSON.stringify(schema, null, 2));