Skip to main content

$ref

With $ref keyword schema can reference another schema or itself. To make this work, all referred schemas must be in context by passing them to <RepositoryProvider />.

<RepositoryProvider
  components={repo}
  schemas={[jsonSchema1, jsonSchema2]}
>
  // ...
</RepositoryProvider>

Next, repository should have component, which resolves $ref. Ready-to-go component is available within @autoviews/core package.

import {RefComponent} from '@autoviews/core';

repo.register('$ref', RefComponent);

To make AutoViews automatically render this component when facing $ref keyword, repo's getNodeType should return keyword as type:

new ComponentsRepo('example-repo', node => {
  if ('$ref' in node) {
    return '$ref';
  }

  return node.type;
});
note

Order of resolving types in getNodeType does matter. By placing $ref condition before returning node.type all references will be resolved at the beginning of processing each node.

Full example​

import React from 'react';
import {
    AutoView,
    RepositoryProvider,
    CoreSchemaMetaSchema,
    createUISchema
} from '@autoviews/core';
import {Box} from '@mui/material';

import userSchema from './UserSchema.json';
import bookSchema from './BookSchema.json';
import data from './data.json';
import {repo} from './repo';

const uiSchema = createUISchema({
    [repo.name]: {
        '/properties/name': {
            name: 'title'
        }
    }
});

const App = () => {
    return (
        <Box>
            <RepositoryProvider
                components={repo}
                schemas={[userSchema, bookSchema] as CoreSchemaMetaSchema[]}
            >
                <AutoView
                    uiSchema={uiSchema}
                    schema={bookSchema as CoreSchemaMetaSchema}
                    data={data}
                    metadata={{'The Fellowship of the Ring': 'tfotr.jpg'}}
                />
            </RepositoryProvider>
        </Box>
    );
};

export default App;

example with jsonSchemaResolver?​