import React from 'react'
import {createReferenceInput} from 'role:@sanity/form-builder'
import client from 'client:@sanity/base/client'
import {unprefixType} from '../utils/unprefixType'
import debounce from 'debounce-promise'

function fetchSingle(id) {
  return client.fetch('*[.$id == %id]', {id}).then(response => unprefixType(response.result[0]))
}
function createHit(document) {
  return {document}
}

const ReferenceInput = createReferenceInput({
  search: debounce((query, field) => {
    const toField = field.to[0]
    if (!toField.searchField) {
      throw new TypeError(`Unable to peform search: No "searchField" specified on reference type for "${field.name}". Check your schema.`)
    }
    return client.fetch(`*[.$type == %type && .${toField.searchField} == %q]`, {
      type: `beerfiesta.${toField.type}`,
      q: query
    })
    .then(response => response.result.map(unprefixType).map(createHit))
  }, 200),

  materializeReferences(referenceIds) {
    return Promise.all(referenceIds.map(fetchSingle))
  }
})

export default function Reference(props) {
  return (
    <div>
      <ReferenceInput {...props} />
      <div style={{fontSize: 10}}>[Only exact matches are supported for now!]</div>
    </div>
  )
}
Reference.valueContainer = ReferenceInput.valueContainer

@@ -1,38 +1,12 @@
-import React from 'react'%0A
 import %7B
 crea
@@ -1,22 +1,16 @@
 import %7B
-create
 Referenc
@@ -152,48 +152,8 @@
 ype'
-%0Aimport debounce from 'debounce-promise'
 %0A%0Afu
@@ -280,66 +280,22 @@
 )%0A%7D%0A
-function createHit(document) %7B%0A  return %7Bdocument%7D%0A%7D%0A%0Acons
+%0Aexport defaul
 t Re
@@ -310,72 +310,42 @@
 nput
- = 
+.
 create
-ReferenceInput(%7B%0A  search: debounce((query, 
+Browser(%7B%0A  fetch(
 field) 
-=%3E 
 %7B
+%0A
 %0A   
@@ -358,16 +358,21 @@
  toField
+Types
  = field
@@ -378,334 +378,338 @@
 d.to
-%5B0%5D%0A    if (!toField.searchField) %7B%0A      throw new TypeError(%60Unable to peform search: No %22searchField%22 specified on reference type for %22$%7Bfield.name%7D%22. Check your schema.%60)%0A    %7D%0A    return client.fetch(%60*%5B.$type == %25type && .$%7BtoField.searchField%7D == %25q%5D%60, %7B%0A      type: %60beerfiesta.$%7BtoField.type%7D%60,%0A      q: query%0A    %7D)%0A
+.map(toField =%3E toField.type)%0A%0A    const params = toFieldTypes.reduce((acc, toFieldType, i) =%3E %7B%0A      acc%5B%60toFieldType$%7Bi%7D%60%5D = %60beerfiesta.$%7BtoFieldType%7D%60%0A      return acc%0A    %7D, %7B%7D)%0A%0A    const eqls = Object.keys(params).map(key =%3E (%0A      %60.$type == %25$%7Bkey%7D%60%0A    )).join(' %7C%7C ')%0A%0A    return client.fetch(%60*%5B$%7Beqls%7D%5D%60, params)%0A  
     
@@ -763,36 +763,14 @@
 ype)
-.map(createHit))%0A  %7D, 200),%0A
+)%0A  %7D,
 %0A  m
@@ -871,263 +871,4 @@
 %0A%7D)%0A
-%0Aexport default function Reference(props) %7B%0A  return (%0A    %3Cdiv%3E%0A      %3CReferenceInput %7B...props%7D /%3E%0A      %3Cdiv style=%7B%7BfontSize: 10%7D%7D%3E%5BOnly exact matches are supported for now!%5D%3C/div%3E%0A    %3C/div%3E%0A  )%0A%7D%0AReference.valueContainer = ReferenceInput.valueContainer%0A

Use a reference browser instead of autocomplete