dynamic sObject Lookup with GraphQL

dynamicLookup.html

<template>
  <!-- https://github.com/pozil/sfdc-ui-lookup-lwc -->
    <c-lookup
        lwc:ref="sobjLookup"
        label="sObject Lookup"
        onsearch={handleLookupSearch}
        onselectionchange={handleLookupSelectionChange}
    ></c-lookup>
</template>

dynamicLookup.js

import { LightningElement, wire, api } from 'lwc';
import { gql, graphql } from "lightning/uiGraphQLApi"

export default class DynamicLookup extends LightningElement {
    @api sobjectApiName;
    @api iconName;
    searchStr = '';

    @wire(graphql, {
        query:"$lookupQuery",
        variables: "$variables",
        operationName: "sObjectLookup",
    })
    graphqlQueryResult({data, errors}){
        if(data){
            const sObjLookup = this.refs.sobjLookup;
            const results = data.uiapi.query[this.sobjectApiName].edges.map((edge) => edge.node);

            const lookupResults = results.map((rec)=>{
                return {
                    id: rec.Id,
                    title: rec.Name.value,
                    sObjectType: this.sobjectApiName,
                    icon: this.iconName
                }
            });

            sObjLookup.setSearchResults(lookupResults);
        }

        if(errors){
            console.log(errors);
        }
    }

    get variables(){
        return {
            searchStr: this.searchStr
        };
    }

    get lookupQuery(){
        return gql`query sObjectLookup($searchStr: String) {
                        uiapi {
                            query {
                                ${this.sobjectApiName}(first: 5 where: { Name: { like: $searchStr } }){
                                    edges {
                                        node {
                                            Id
                                            Name{
                                                value
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                `;
    }

    handleLookupSearch(event){
        console.log(event);
        this.searchStr = event.detail.searchTerm + '%';
    }

    handleLookupSelectionChange(event){
        const lookupElement = event.target;
        let selectedRecords = lookupElement.getSelection();
        this.searchStr = '';

    }
}

dynamicLookup.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>64.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__AppPage">
            <property name="sobjectApiName" type="String" required="true" default="Contact"/>
            <property name="iconName" type="String" required="true" default="standard:contact"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>