Consider support $ref in jsonschema

[comfuture]

Thanks for the great tool json-schema-form!
it is very helpful because it is headless and can be used in any framework.

In many json schemas generated by other tools (e.g. OpenAPI, Pydantic, ...), you may see the keyword $ref which is used to reference another schema. This is a very useful feature to avoid duplication and keep the schema DRY.

It would be great if json-schema-form can support this feature. I have tried to use it but it seems not working. I have also checked the documentation and the source code but I cannot find any information about this.

Most of cases, the $defs is defined in the same definition, so it should be easy to implement.

ex) #/$defs/Person will point to the definition of {"$defs": { "Person": {... } } } in the same file.

So, before parsing the schema, we can resolve the $ref and replace it with the actual definition.
I've wrote some simple pseudo code to demonstrate how it can be implemented. I hope this will be helpful.

function getRef(path: string, object: any): any {
  const keys = path.replace(/^#/, '').split('/');

  let current = object;
  for (const key of keys) {
    if (key in current) {
      current = current[key];
    } else {
      return null;
    }
  }

  return current;
}

function resolveRefs(object: any, rootObject: any = object): any {
  for (const key in object) {
    const value = object[key];
    if (typeof value === 'object' && value !== null) {
      if ('$ref' in value) {
        const resolved = getRef(value['$ref'], rootObject);
        if (resolved) {
          object[key] = resolved;
        } else {
          // throw new Error('Cannot resolve reference: ' + value['$ref']);
          console.error('Cannot resolve reference:', value['$ref']);
        }
      } else {
        // go recursive
        resolveRefs(value, rootObject);
      }
    }
  }
  return object;
}

Then, add option to the createHeadlessForm function to enable this feature.

const { fields, handleValidation } = createHeadlessForm(schema, {
  resolveRefs: true, // or the referable other schema
})

I hope this feature will be implemented in the future. Thanks!

[ollyd]

Hi @comfuture!

From your example, it looks like you specifically want to use $ref to support $defs rather than Base URI support. It isn't something we implemented as we don't require it at Remote. However, this has been brought up before so it's on our radar. Unfortunately I don't have a timeline as to when we'd be able to able to implement this, but if it's something that you want/need soon PRs are always very much appreciated! If you want to take a stab at it we would help guide it through to release.

[comfuture]

Hi @ollyd,
Thank you for reviewing the issue.
In my case, I often import json schemas as part of the openapi spec rather than writing them directly, so I encounter $ref quite frequently.
I thought it would be useful since $ref appears even in the simplest examples of the OpenAPI spec.
https://github.com/OAI/OpenAPI-Specification/blob/main/examples/v3.0/petstore.yaml#L108

I understand that if $ref is not yet used in the main cases for Remote, it might not be considered for immediate implementation in the near future.
The example code implementation that I've wrote was just a minimal sample, so I did not deeply consider what side effects it might bring when making a PR.

If necessary on my end, I will start by preprocessing the schema in a manner similar to the example to achieve the objective.
Later, when the code quality is sufficiently contributable, I will consider contributing through a PR.

[sandrina-p]

@comfuture, thanks for you help, feel free to open a PR supporting local $refs ☺️

[igorbrasileiro]

Do we have plans to support this? I'm trying to move from react-jsonschema-form to any other solution that have better performance and the $ref and "type": "array" is required for my use case.

[sandrina-p]

@igorbrasileiro, we plan to support local $refs (defs), but is not prioritized. PRs are welcome ☺️