RFC: pass variables on refetch

[Belco90]

Hi there,

I recently run into a case where I need to pass the queries variables directly to refetch but current React Query API doesn't allow this, so I'd like to expose the issue to get another workaround or get some comments about how could be implemented in future RQ versions

What I was building was an autocomplete input that has to trigger a request when the user changes the input value so it can fetch the options to be displayed. The input expects an async callback or a function returning a promise which returns/fulfills the results. Until here, RQ refetch seemed fine since it returns a promise which fulfills to results.

When the autocomplete input calls that given callback for loading the options, it passes the current input value entered so you can use it in your actual request to filter the results. How could I achieve this with RQ? I thought it would be possible with refetch but it can't receive any query payload, so I can't pass the input value from there. In general, RQ only expects the query variables through the query hook call, so this kind of behavior is not achievable.

This is a snippet of what I have:

const fetchUsersQueryFn = async (key, queryArgs) => {
  const { results } = await readUsers(queryArgs);
  return results;
};

const SearchUsers = () => {

  const handleLoadOptions = async (inputValue) => {
    // I can't reuse here anything from RQ
    const results = await fetchUsersQueryFn(null, { q: inputValue});
    return results;
  }
  
  const { data } = useQuery(['users'], fetchUsersQueryFn);

  return (
    <Async
      loadOptions={handleLoadOptions}
      defaultOptions={data}
      // ...
    />
  )
}

If we look at this on Apollo, it provides what they call lazy queries. I know lazy queries can be done in RQ just using a regular useQuery passing enabled to false. But Apollo's useLazyQuery allows to pass query variables to the function for executing the query.

Based on this, I'd like to be able to do something similar in RQ like:

const fetchUsersQueryFn = async (key, queryArgs) => {
  const { results } = await readUsers(queryArgs);
  return results;
};

const SearchUsers = () => {
  // this is the default query with empty `q` request payload for filtering
  const { data, refetch } = useQuery(["users", { q: ''} ], fetchUsersQueryFn);

  const handleLoadOptions = async (inputValue) => {
    // here I call `refetch` passing the same shape of vars when defining `useQuery`
    // but passing through `q` request payload the value from the input
    const results = await refetch({ q: inputValue });
    return results;
  };


  return (
    <Async
      loadOptions={handleLoadOptions}
      defaultOptions={data}
      // ...
    />
  );
};

I know a workaround would be lifting up the input value from that Async component to SearchUsers component, but I'd like to avoid that to leave Async one uncontrolled. I think what I explained it's a valid API use case too.

What do you think to cover this use case then? Could refetch accept same variables from query key? A new hook similar to useLazyQuery would be necessary for this? Another workaround or something else I'm missing?

Thanks.

[tannerlinsley]

Does this not solve your issue?

const fetchUsersQueryFn = async (key, queryArgs) => {
  const { results } = await readUsers(queryArgs)
  return results
}

const SearchUsers = () => {
  const [inputValue, setInputValue] = React.useState('')

  const { data } = useQuery(['users', { q: inputValue }], fetchUsersQueryFn, {
    enabled: !!inputValue,
  })

  return (
    <Async
      loadOptions={setInputValue}
      defaultOptions={data}
      // ...
    />
  )
}

[Belco90]

I'm sorry, but after trying this solution it doesn't work.

Using the async select, then it requires a loadOptions which is async function or a promise which must fulfill with the new results. From your code snippet, setInputValue doesn't return the new results of course, and defaultOptions is only used when the select is focused to open the dropdown with empty input value (e.g. before the user starts searching). So I can't use that to control the async select myself and it ends in a "no options" dropdown when the user enters something to filter.

I tried to switch to the sync version from this select then, but then it doesn't like that I change the initial options I'm passing when the input changes, so it always render "no options" again.

Sadly I can't control either async or sync selects as I need from RQ. So I'm going back to my original proposal of being able to pass the query variables to refetch similar to Apollo's lazy query. Otherwise I'm afraid I'll have to remove RQ hook from this component and leave the async select to fully control the requests, but I'd like to get advantage of RQ cache of course.

I can built a small demo to reproduce this case if necessary.

Thanks.

[tannerlinsley]

A small codesandbox would go a long way here.

[Belco90]

Oh wow, the sync select is actually working with your approach in the codesandbox I built: https://codesandbox.io/s/react-query-refetch-demo-ux96w?file=/src/App.js

I'm gonna try this again in my real scenario because I might have missed something. Sorry about it, I'll come back again after checking my real app!

[TkDodo]

That looks really good, thanks for the example. react-select is a popular lib so it’s good to see it working with react-query :)

If you use isFetching rather than isLoading you would also see the loading spinner for background fetches if that’s what you want - it would be more similar to the react-select standalone version.

[Belco90]

I can't get it working on my real app with the same setup, but it obviously works fine in that codesandbox with sync select + RQ, so there must be an issue on my side. Thanks for your help guys.