When in a customValidate function, how do I get the expanded form schema?

[gnalvesteffer]

Prerequisites

• I have read the documentation

What theme are you using?

fluent-ui

What is your question?

Hi, I'm trying to implement a custom validation function and need to access the expanded form schema. The retrieveSchema function sounds like what I want, but I haven't had any luck getting it to return anything but the exact same form schema I passed into it: https://rjsf-team.github.io/react-jsonschema-form/docs/api-reference/utility-functions#retrieveschemat--any-s-extends-strictrjsfschema--rjsfschema-f-extends-formcontexttype--any

I need the expanded version of the schema that has the dependencies, conditions, etc already resolved so I can do something in my validation like checking a conditional set of properties that are only presented when another boolean field is true, but without this, it looks like I would have to try to resolve this myself by somehow evaluating the conditions in oneOfs and such, which seems very error-prone if I were to do it myself.

[heath-freenome]

@gnalvesteffer are you passing the formData in properly so that retrieveSchema() knows which dependency/condition to use?

[gnalvesteffer]

@gnalvesteffer are you passing the formData in properly so that retrieveSchema() knows which dependency/condition to use?

Hi @heath-freenome, sorry for the late reply, but yes, in my customValidate function I have access to the incoming formData and I'm passing that in alongside the form schema to the retrieveSchema function. Let me put together a simple sample to share a reproduction of this issue. Will post it here once it's ready.

Also for reference, here are my project's dependencies:

    "@fluentui/react-components": "^9.54.15",
    "@rjsf/core": "^5.20.1",
    "@rjsf/fluentui-rc": "^5.20.1",
    "@rjsf/utils": "^5.20.1",
    "@rjsf/validator-ajv8": "^5.18.4",
    "@uiw/react-textarea-code-editor": "^3.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"

[gnalvesteffer]

Here is a sample I've put together to reproduce this: https://codesandbox.io/p/sandbox/q3hs27

See App.tsx:L106 for the retrieveSchema usage. I am also logging the formData and the retrieveSchema result to the console, triggered on form submission.

Example:

I'd expect the retrieveSchema result to have the "expanded" schema with the dependencies resolved, where in this example it should merge the dependency that was used into the properties:

The retrieveSchema result that I'd expect to get back in this example is:

{
  "title": "Expanded Schema Issue",
  "type": "object",
  "definitions": {
    "games": {
      "type": "string",
      "enumNames": [
        "Foo",
        "Bar",
        "Baz"
      ],
      "enum": [
        "game-foo",
        "game-bar",
        "game-baz"
      ]
    }
  },
  "properties": {
    "newGamesSection": {
      "title": "",
      "type": "object",
      "properties": {
        "displayNewGameBadges": {
          "title": "Display New Game Badges",
          "type": "boolean"
        },
        "newGames": {
          "title": "New Games",
          "description": "Specify the games to display the New Game badge for.",
          "type": "array",
          "minItems": 1,
          "items": {
            "title": "",
            "type": "object",
            "properties": {
              "game": {
                "title": "Game",
                "type": "string",
                "$ref": "#/definitions/games"
              },
              "shouldExpire": {
                "title": "Should Expire?",
                "type": "boolean"
              },
              "expirationDate": {
                "title": "Expiration Date",
                "description": "The date when the New Game badge should stop being shown.",
                "type": "string",
                "format": "date"
              }
            },
            "required": [
              "game"
            ]
          }
        }
      }
    }
  }
}

[gnalvesteffer]

After reading this comment explaining the behavior of retrieveSchema (it resolves the schema at the current level provided in the schema parameter), I was able to resolve the expanded schema with the following, which recursively resolves every level of the schema:

import { retrieveSchema, RJSFSchema } from "@rjsf/utils";
import AJV8Validator from "@rjsf/validator-ajv8/lib/validator";

/**
 * Expands a given JSON schema by resolving all its properties and nested properties using the provided validator.
 *
 * @param validator - An instance of AJV8Validator used to validate and resolve schemas.
 * @param schema - The initial JSON schema to be expanded.
 * @param rootSchema - The root schema that contains definitions and references.
 * @param data - The data object used to resolve conditional and referenced schemas.
 * @returns The expanded JSON schema with all properties and nested properties resolved.
 */
export default function getExpandedSchema(validator: AJV8Validator, schema: RJSFSchema, rootSchema: RJSFSchema, data: any) {
    const resolvedSchema = retrieveSchema(validator, schema, rootSchema, data);
    const expandedSchema = { ...resolvedSchema };
    if (expandedSchema.properties) {
        Object.keys(expandedSchema.properties).forEach((key) => {
            if (data[key] !== undefined) {
                const propertySchema = expandedSchema.properties[key];
                const resolvedPropertySchema = retrieveSchema(validator, propertySchema, rootSchema, data[key]);
                expandedSchema.properties[key] = { ...resolvedPropertySchema };
                expandedSchema.properties[key] = getExpandedSchema(validator, resolvedPropertySchema, rootSchema, data[key]);
            }
        });
    }
    return expandedSchema;
}

[gnalvesteffer]

Figured it out with the following solution: #4410 (comment)