How to use useQuery with React Async Select

Question

https://react-select.com/async: React async Select Library

https://redux-toolkit.js.org/rtk-query/overview: RTK Query

How to utilise the methods provided by useQuery with React Async library.

I was unable to utilise this because refetch does not take in callbacks.

I was able to achieve it using the normal function calls.(eg given below)

import React from 'react';

import AsyncSelect from 'react-select/async';
import searchSomethigFromAPI from '@something';

const searchFromAPI = (value,callback) => {
   searchSomethigFromAPI()
   .then(res => {
       const result = res.data.filter(e => e.name);
       callback(result);
   })
   .catch(err=>{console.log(err)}
}

export default () => (
  <AsyncSelect cacheOptions loadOptions={searchFromAPI} defaultOptions />
);

score 0 · Answer 1 · answered Jun 07 '23 at 09:59

You can use useLazyQuery with loadOptions.

Here is a partial snippet of how that would work:

export default function SearchProducts() {
  const [ getProducts ] = useLazyGetProductsQuery();
  
  const getProductOptions = async (query) => {
    const products = await getProducts({}).unwrap();
    
    return products.map((product) => ({
      value: product.id,
      label: product.name,
    }));
  };

  return (
    <AsyncSelect
      // other options...
      loadOptions={getProductOptions}
    />
  )
}

How to use useQuery with React Async Select

1 Answers1