refetch should return proper value in lazy get

Is your feature request related to a problem? Please describe. I`d like to use react-select async select component with restful-react. For async loading options, we need to return proper options via loadOptions callback, the code is like below.

<AsyncSelect
  ...
  loadOptions={(input, callback) => {
    const result  = doQueryByInput(input);
    callback(buildOptionsFromResult(result));
  }}
/>

The problem is that refetch will not return any value, I have no idea how to return proper options by callback.

Describe the solution you’d like I’d like to get value from refetch, code like below

  const { data, refetch } = useGet({
    path: '/search-something',
    lazy: true,
  });

...

<AsyncSelect
  ...
  loadOptions={(input, callback) => {
    refetch({
      queryParams: buildQueryParams(input),
    }).then((response) => {
      callback(buildOptions(response));
    });
  }}
/>

Describe alternatives you’ve considered No other alternatives so far, but if you have any idea can archive that, it would be also appreciate.

Additional context No

[fabien0102]

So, let’s try to see if we can use restful-react for this kind of usecases (after, to be totally honnest with you, when this is becoming a bit too tricky, I do prefer put this in good old redux + rxjs with restful-react just there to generate the correct types 😁)

Let’s use a computed lazy and bring back queryParams to the query (so no extra request and no need for the useEffect)

diff --git a/playground.js b/playground.js
index efa0885..1bfc11e 100644
--- a/playground.js
+++ b/playground.js
@@ -1,15 +1,13 @@
 const { data: searchResults, loading: searchLoading, mutate: doSearch } = useMutate("POST", "/search");
 // lazy because there's nothing to search until there are results
-const { data: resultDetail, loading: detailsLoading, refetch: fetchDetails } = useGet("/details", { lazy: true })
+const { data: resultDetail, loading: detailsLoading, refetch: fetchDetails } = useGet("/details", {
+  lazy: Boolean(searchResults.results),
+  queryParams: { ids: searchResults.results.map(x => x.id).join(",") }
+})
 
 const [input, setInput] = useState("");
 const [alertMessage, setAlertMessage] = useState("");
 
-useEffect(() => {
-  if (searchResults?.results) {
-    fetchDetails({ queryParams: { ids: searchResults.results.map(x => x.id).join(",") } });
-  }
-}, [searchResults, fetchDetails]);
 useEffect(() => {
   if (resultDetail.results) {
     const maybeMessage = resultDetail.results.find(x => x.alertMessage)?.alertMessage;

(anyway, you PR looks good 😅 I just like challenging ^^)

[fabien0102]

Make sense, for now refetch already take some arguments, but is totally bind to the state (because it’s a refetch, not a fetch).

This would be easy to return some value from refetch (I just checked the codebase), but will this make the API a bit funky, since refetch was meant to refetching, not fetching… (so you will have some useless rerender for the loading for example)

I sadly don’t have a lot of time right now to play with this, but you can try to play around locally and submit a PR. I think a cleaner solution will be to introduce a useFetch, to avoid the conflict between the two API (data from state vs data from promise).

Maybe something like this

const getCollection = useFetch("GET", "/mycollection", {/* options, etc… */})

getCollection({/* params */}) // Promise<CollectionRes>

So you get all the context (basePath mainly) from restful-react and can also propagate the error the global handler if localErrorOnly = true

My main remaining question is about the Promise type and how to deal with the Error type, sadly it’s not really possible to type the catch, and I think having the error type is something nice (even if it’s usually forgotten ^^)