T
tRPC

❓-help

Need Guidance Optimizing Multi-Select Typeahead

JJ.2/7/2024
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
});

Looking for more? Join the community!