J.•6mo ago

Need Guidance Optimizing Multi-Select Typeahead

What your environment is: Node 18? Bun? pnpm / yarn / npm? - Bun v1.0.23 - Next.js v14.1.0 (app router) - tRPC v^10.45.0 - React Query v4 What's wrong: with complete and exact errors The current challenge involves the implementation of a multi-select typeahead feature. The objective is to disable the query when the user input's prefix matches any empty cached data. For instance, if a user enters "hello" and receives data [...], then enters "hellow" resulting in an empty data [], all subsequent queries prefixed with "hellow" should be disabled. What you have: any relevant code which you can share, better yet a full repo or stackblitz

// excerpted component code

// autocomplete
// (debounces input value and fetches autocomplete options)

const [inputValue, setInputValue] = useState("");
const [value, setValue] = useState<(string | QueryOutputItem)[]>([]);

const [platform, setPlatform] = useState<QueryInputPlatform>("👀");

const utils = trpc.useUtils();
const debouncedInputValue = useDebounce(inputValue, 750);

const queryInput = {
  platform,
  query:
    // intelligently determine whether to use cached or debounced input value
    inputValue &&
    (utils.autocomplete.getData({ platform, query: inputValue })
      ? inputValue
      : debouncedInputValue)
};

const autocompleteQuery = trpc.autocomplete.useQuery(queryInput, {
  enabled: !!queryInput.query
});

// excerpted component code

// autocomplete
// (debounces input value and fetches autocomplete options)

const [inputValue, setInputValue] = useState("");
const [value, setValue] = useState<(string | QueryOutputItem)[]>([]);

const [platform, setPlatform] = useState<QueryInputPlatform>("👀");

const utils = trpc.useUtils();
const debouncedInputValue = useDebounce(inputValue, 750);

const queryInput = {
  platform,
  query:
    // intelligently determine whether to use cached or debounced input value
    inputValue &&
    (utils.autocomplete.getData({ platform, query: inputValue })
      ? inputValue
      : debouncedInputValue)
};

const autocompleteQuery = trpc.autocomplete.useQuery(queryInput, {
  enabled: !!queryInput.query
});

0 Replies

No replies yetBe the first to reply to this messageJoin