Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

refetch should return proper value in lazy get

See original GitHub issue

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.

  loadOptions={(input, callback) => {
    const result  = doQueryByInput(input);

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,


  loadOptions={(input, callback) => {
      queryParams: buildQueryParams(input),
    }).then((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

Issue Analytics

  • State:open
  • Created 3 years ago
  • Comments:7 (2 by maintainers)

github_iconTop GitHub Comments

fabien0102commented, Oct 1, 2021

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: =>",") }
 const [input, setInput] = useState("");
 const [alertMessage, setAlertMessage] = useState("");
-useEffect(() => {
-  if (searchResults?.results) {
-    fetchDetails({ queryParams: { ids: =>",") } });
-  }
-}, [searchResults, fetchDetails]);
 useEffect(() => {
   if (resultDetail.results) {
     const maybeMessage = resultDetail.results.find(x => x.alertMessage)?.alertMessage;

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

fabien0102commented, Jun 22, 2020

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 ^^)

Read more comments on GitHub >

github_iconTop Results From Across the Web

Refetching queries in Apollo Client - Apollo GraphQL Docs
The client.refetchQueries method collects the TResult results returned by onQueryUpdated , defaulting to TResult = Promise<ApolloQueryResult<any>> if ...
Read more >
Refetch no longer works in 3.5 when skip is true #9101 - GitHub
Hello. I've been using refetch from useQuery for over a year. In my code, I use it in combination with skip: true to...
Read more >
Is it possible to prevent `useLazyQuery` queries from being re ...
Not the UI I want, and it causes an error if you delete the search text entirely (as it's trying to search with...
Read more >
Automated Re-fetching | Redux Toolkit
If cache data is being invalidated, it will either refetch the ... are used to determine whether cached data returned by an endpoint...
Read more >
useLazyLoadQuery - Relay
Hook used to fetch a GraphQL query during render. ... Return Value​ ... Calling useLazyLoadQuery will fetch and render the data for this ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found