Using react-query with react-select

[skelawsky]

Please, suggest how to use both libraries in the AsyncSelect component.

[TkDodo]

looking at their promises example, I think one way to do it is to provide queryClient.fetchQuery, which returns the promise. With a given staleTime, you would only fetch once and then use the cache.

but given that react-select async has its own cache via cacheOptions, maybe there is no need to combine the two?

[cubecleveland]

For what its worth, i was struggling with this myself and fouind the best option is actually not use the Async feature of react select and use reactQuery to inject the options to the normal select/

[TkDodo]

Yep, I've also done that once and it worked well 👍

[stychu]

I had a problem with making this work. All seemed fine when I wanted to use reactQuery and React Select (not async select) but then my options were not updating accordingly and I had no idea why. This repo example helped me fix the problem
https://github.com/kkomelin/react-select-customization-examples/blob/main/src/components/ExampleRemoteDataDebouncingAndCaching.tsx

after I added filterOption={null} to my select, options were updating when input changed <3
React-select + ReactQuery work like a charm!

[bhavinzwt]

Thank you. I am doing the same thing. I am facing this same issue. It has been solved by your given solution

[mirsahib]

After reading @TkDodo answer here is my solution

const fetchOptions = async (inputValue) => {
	const response = await fetch(`https://dummyjson.com/users/search?q=${inputValue}`);
	if (!response.ok) throw new Error("Network error");
	const data = await response.json();
	const options = data.users.map((user) => ({
		value: user.id,
		label: `${user.firstName} ${user.lastName}`,
	}));
	return options;
};

function MyComponent(){
	const [inputValue, setInputValue] = React.useState("");
	const queryClient  = useQueryClient();

    const { data: profileOptions } = useQuery({
		queryKey: ["options", inputValue],
		queryFn: () => fetchOptions(inputValue),
    });
	const loadOptions = debounce(async(inputValue, callback) => {
		setInputValue(inputValue);
		const newData = await queryClient.fetchQuery(
			["options", inputValue],
			() => fetchOptions(inputValue)
		);
		callback(newData)
	}, 500);
     return (
                      <AsyncSelect
			defaultOptions={profileOptions}
			cacheOptions={true}
			name={"role"}
			placeholder={"Select role"}
			loadOptions={loadOptions}
			value={null}
			onChange={(selected) => {
				console.log(
					"🚀 ~ onChange ~ selected:",
					selected
				);
			}}
			onInputChange={(e) => {
				console.log("🚀 ~ onInputChange ~ e:", e);
			}}
			noOptionsMessage={({ inputValue }) =>
				!inputValue
					? "Type to search"
					: "No options found"
			}
			loadingMessage={() => "Loading..."}
			isDisabled={false}
			isSearchable={true}
		/>
     )

}

[FunctionDJ]

Edit: Solved, see replies

I previously used AsyncSelect without Tanstack Query, but now I needed to use the select's loading indicator and debouncing.

Switching to the non-async select works but when the search updates the results flicker on update which didn't happen with AsyncSelect.

By logging the data from the useQuery call in the component render method I determined that the component never re-renders with empty .data, so it's not Tanstack Query's fault.

I guess it's just not intended on the react-select side to externally update options and they render differently for AsyncSelect.

If someone knows a solution, please let me know. Here's my usage:

const [search, setSearch] = useState("")
const debouncedSearch = useDebounce(search, 250)
const searchQuery = trpc.search.useQuery({ search: debouncedSearch })

return <Select
  inputValue={search}
  onInputChange={setSearch}
  filterOption={null}
  options={searchQuery.data}
  isLoading={searchQuery.isFetching}
  onChange={() => {/* placeholder */}}
/>

[TkDodo]

use their loadOptions prop and execute the query imperatively with queryClient.fetchQuery. You still get caching, deduplication and everything.

[FunctionDJ]

@TkDodo Thank you! In my case with tRPC for type-safety and debouncing, this is the solution that worked for me:

// trpc-client.ts
export const trpc = createTRPCReact<AppRouter>();
export const trpcVanilla = createTRPCClient<AppRouter>(trpcClientOptions); // yes, this is a separate client that i think won't share the cache with the trpc client for react, but for my use case it's fine

// Component.tsx
// timeoutId and debouncedSearch are defined outside the component so that i don't need to worry about re-renders or stable references
let timeoutId: number | null = null;

const debouncedSearch = (search: string) =>
	new Promise<RouterOutputs["search"]>((resolve) => {
		if (timeoutId) {
			window.clearTimeout(timeoutId);
		}

		timeoutId = window.setTimeout(() => {
			resolve(trpcVanilla.search.query({ search }));
		}, 100);
	});

export const MyComponent = () => {
	return (
		<AsyncSelect
			loadOptions={debouncedSearch}
			// no inputValue, onInputChange or options params needed in my case
			// ...
		/>
	);
}