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]

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 */}}
/>