Rendering trees in the UI

[KevinJump]

Anyone currently rendering tree’s (outside of the core) in the new UI in Umbraco v16 (or maybe v15 too, as i have changed something)

I have a tree data source that follows the patterns in the core.

constructor(host: UmbControllerHost) {
	super(host, {
		getRootItems,
		getChildrenOf,
		getAncestorsOf,
		mapper,
	});
}

and for example the getRootItems method looks like this :

const getRootItems = async (args: UmbTreeRootItemsRequestArgs) => {
	var data = await SetService.setTreeRoot({
		query: {
			skip: args.skip,
			take: args.take,
		},
	});

	return data;
};

now this works ! even though i get a typescript error when i build

getRootItems,
~~~~~~~~~~~~
node_modules/@umbraco-cms/backoffice/dist-cms/packages/core/tree/data/tree-server-data-source-base.d.ts:9:5
getRootItems: (args: TreeRootItemsRequestArgsType) => Promise<UmbDataSourceResponse<UmbPagedModel<ServerTreeItemType>>>;
~~~~~~~~~~~~
The expected type comes from property 'getRootItems' which is declared here on type
 'UmbTreeServerDataSourceBaseArgs<TranslationTreeItemResponseModel, 
TranslationTreeItemModel, UmbTreeRootItemsRequestArgs, UmbTreeChildrenOfRequestArgs, 
UmbTreeAncestorsOfRequestArgs>'

src/section/tree/translations-tree.data-source.ts:23:4 - error TS2322: Type '(args: UmbTreeChildrenOfRequestArgs) => Promise<({ data: undefined; error: unknown; } | { data: PagedTranslationLanguageItemResponseModel; error: undefined; }) & { ...; }>' is not assignable to type '(args: UmbTreeChildrenOfRequestArgs) => Promise<UmbDataSourceResponse<UmbPagedModel<TranslationTreeItemResponseModel>>>'.
  Type 'Promise<({ data: undefined; error: unknown; } | { data: PagedTranslationLanguageItemResponseModel; error: undefined; }) & { request: Request; response: Response; }>' is not assignable to type 'Promise<UmbDataSourceResponse<UmbPagedModel<TranslationTreeItemResponseModel>>>'.
    Type '({ data: undefined; error: unknown; } | { data: PagedTranslationLanguageItemResponseModel; error: undefined; }) & { request: Request; response: Response; }' is not assignable to type 'UmbDataSourceResponse<UmbPagedModel<TranslationTreeItemResponseModel>>'.
      Type '{ data: undefined; error: unknown; } & { request: Request; response: Response; }' is not assignable to type 'UmbDataSourceResponse<UmbPagedModel<TranslationTreeItemResponseModel>>'.
        Types of property 'error' are incompatible.
          Type 'unknown' is not assignable to type 'UmbError | UmbApiError | UmbCancelError | Error | undefined'

The summary of this is - it doesn’t like that heyApi is returning unknown for the error and now something structured.

I have marked up the method in the controller.

    [HttpGet("TreeRoot")]
    [ProducesResponseType<PagedViewModel<TranslationLanguageItemResponseModel>>(StatusCodes.Status200OK)]
    [ProducesResponseType<ProblemDetails>(StatusCodes.Status400BadRequest)]
    public ActionResult<PagedViewModel<TranslationLanguageItemResponseModel>> GetRoot(int skip = 0, int take = 100)

So gone around the houses, i am not sure if it’s heyApi. (v0.66.5) or its missing something on the return or marked it up somehow wrong.

I know its a bit of a pain because when i generate from my API i will make my own PageViewModel and it will not inherit this from the Core umbraco one (because heyAPI doesn’t know i am using the @umbraco/backoffice package.

but it all actually works in the client, so long way around of saying - anyone does this outside of the core with their own client api and not got these errors (on v16).

It was fine in v15 - but that was old heyApi client (not major old actually) , might just be a slight change in a definition somewhere in v16?

[LuukPeters (Luuk Peters (Proud Nerds))]

I don’t have an answer for you, but I tried to update the NPM package for hey-api in my Umbraco 15 package, just to be up to date, but that already broke all kinds of things. So I guess that they hey-api packages have breaking changes.

[KevinJump]

oh yes, they have loads, but they properly break things

looking at the generated code for my v15 and v16 versions of the code they are very similar for this method.

[KevinJump]

So, coming back to this, i do have a solution.

looks like its down to heyApi config.

the core has the following for the fetch-client.

{
	name: '@hey-api/client-fetch',
	bundle: false,
	exportFromIndex: true,
	throwOnError: true,
},

if you don’t set throwOnError to true, then your methods will be generated like so..

public static getAncestors<ThrowOnError extends boolean = false>(options?: Options<GetAncestorsData, ThrowOnError>) {

which is wrong

setting throwOnError to true. gives you

public static getAncestors<ThrowOnError extends boolean = true>(options?: Options<GetAncestorsData, ThrowOnError>) {

one the warnings go away (just to note it ‘works’ both ways, but the code doesn’t have warning the second way.