Different schemas for different pages of the application

Hi all,

I’m using json forms version 3.0 alpha and i’m trying to implement a webapp that has two different pages that each use a different schema.

I have a generic page component which is essentially just a wrapper for the JsonForms component e.g.

            <ErrorHeader errors={ajvErrors}/>
            <div className={classes.root}>
                    onChange={({data, errors}) => onChange(data, errors)}

I have two instances of this component and each has it’s own Route and it’s own schema. The ajv is something I define as static in my App.tsx.

One of the issues that i’m facing is that if I switch between my two pages and then switch back I get an error saying that the schema with the given id is already registered. I’ve managed to work around this issue by having a new instance of an ajv created each time my JsonForms wrapper component is run which happens every time I switch page however I’m wondering if there is a better way to deal with this situation?

Thanks in advance

Hi @james-morris,

AJV is designed in a way in which the used AJV instance is constantly mutated. For example it stores determined errors and also schemas which have an id set. Therefore I think the best approach is to not store one static instance but create it on the fly as needed, i.e. whenever the corresponding page is mounted. The easiest way is to just store it in the state of the component using it.

If you want to avoid that then you need to deregister the schema when switching pages. We actually have such code within JSON Forms but it’s not executed on initial rendering which is why the error still occurs for you.

I think there are some improvements we could to when using AJV within JSON Forms as there seem to be some options which seem to not mutate the AJV instance (or at least not as much) but this needs to be investigated.

1 Like

Ah that’s good to know. Thanks again for your help!