useQuery -> function to call query

[jmbldwn]

I have case where I'd like to use a query as a function in my component, instead of specifying the parameter in useQuery.

If I have an API to call with a parameter, where I specify the array key,

{ data: foo } = useQuery(['foo', param])

I'd like to instead get an async function that I could call to perform the query, and have the array key be generated for me.

{fn: foo} = useQuery('foo')
foo(bar).then(result =>...)

The reason is I have validation logic in a useEffect hook that needs to call an API, and takes in an async function for the validation, and I would like to have the API results get cached.

Is this possible?

[jmbldwn]

Here's what I ended up doing to solve this, but it feels like I'm missing a "front door" here.

My function checks to see if a username being chosen exists already. This solution leverages react-query only really for it's cache:

export const checkUsername = username => {
    const cached = queryCache.getQueryData(['username', username]);
    if (cached !== undefined) return Promise.resolve(cached);
    return axios.get(`/user/check/${username}`)
        .then(response => response.data)
        .then(data => {
            queryCache.setQueryData(['username', username], data, { staleTime: Infinity });
            return data;
        });
};

[cliffordfajardo]

Same! - I like how with useMutation you call it & recieve a function back to use later.

const [updateUser] = useMutation(UserService.updateUser)

//down in my component code
<input 
   onChange=((e) => {
     const bio = e.target.value;
     updateUser({bio})
   })
/>

I wish I could do something like this with useQuery

const [getBooks] = useQuery(UserService.updateUser)

//down in my component code
<input 
   onChange=((e) => {
     const title = e.target.value;
     getbooks({title}, {
      onSuccess: (books) => console.log(books)
     })
   })
/>

[TkDodo]

You can always do useQuery and set it to enabled: false, and then work with the refetch method returned by useQuery :)

[TkDodo]

The docs are working, but the search is still indexing.
https://react-query.tanstack.com/reference/useQuery

Look at the enabled option and the returned method called refetch

[CandyGreen]

But what if there is a need to fetch a new query, let's say, with a new url? And you have to do this several times with different urls, which you don't know from the start, 'cause they will be built by the user. refetch does not receive additional arguments you could pass to queryFn. For instance, Apollo has useLazyQuery hook which can do this trick. It seems like pretty useful functionality. Don't you think so?

[tannerlinsley]

Let me shed some light on this. useQuery is built as a subscription-like hook. The way it is designed to be used is in a declarative way. If your query has variables that are changing (eg. from a user input), then put them in the query key and pass them to the query function

const [state, setState] = React.useState('')

useQuery(['prefix', state], () => fetcher(state))

If you truly insist on having some imperative way to fetch some data and have it be cached, just use QueryClient.fetchData()

try {
  const data = queryClient.fetchQuery(key, () => fetcher())
} catch (err) {
  // error
}

As it turns out, this is even easier to do with the QueryClient that it is with other tools like Apollo that require a hook. 🤷‍♂️ But therein lies the secret sauce. By not using the hook, you don't get any of the automagical stuff that it supports.

[kiastorm]

I have a search query that I only want to invoke onSubmit.

This is what I tried:

const [searchTerm, setSearchTerm] = useState('');
const searchProjectQueryVariables = { projectId, searchTerm };
 
const { data: searchResults } = useSearchProjectQuery(searchProjectQueryVariables, { enabled: false }); // Custom hook that implicitly supplies queryKey and queryFn - (variables, options) => UseQueryResult

  const fetchSearchResults = () => {
    fetchQuery(getSearchProjectQueryOptions(searchProjectQueryVariables));
  };

...

<button onClick={fetchSearchResults} />

I expected the queryData to be available in scope, but be undefined until I invoke 'fetchSearchResults'

But it doesn't seem to work.

Does anyone have a recommendation on how to handle this?

The ideal scenario for me personally would look something like this:

const { data, fetch: fetchSearchResults } = useQuery(
    ['searchProject', { projectId, searchTerm }],
    () => api.searchProject(projectId, searchTerm), 
    { enabled: false }
);

<button onClick={fetchSearchResults} />

[CandyGreen]

Let me shed some light on this. useQuery is built as a subscription-like hook. The way it is designed to be used is in a declarative way. If your query has variables that are changing (eg. from a user input), then put them in the query key and pass them to the query function

const [state, setState] = React.useState('')

useQuery(['prefix', state], () => fetcher(state))

If you truly insist on having some imperative way to fetch some data and have it be cached, just use QueryClient.fetchData()

try {
  const data = queryClient.fetchQuery(key, () => fetcher())
} catch (err) {
  // error
}

As it turns out, this is even easier to do with the QueryClient that it is with other tools like Apollo that require a hook. 🤷‍♂️ But therein lies the secret sauce. By not using the hook, you don't get any of the automagical stuff that it supports.

Thank you so much for your reply. I really appreciate it!
What do you think about this implementation? Can this do the trick?

import { useQuery as useReactQuery, useQueryClient } from 'react-query';

const fetcher = async (url, options) => {
    const response = await fetch(url, options);
    const data = await response.json();

    const { headers, status } = response;

    return { headers, status, data };
};

const DEFAULT_QUERY_OPTIONS = { enabled: false };

export const useLazyQuery = (props = {}) => {
    const { url: initialUrl, fetcherOptions, queryOptions = DEFAULT_QUERY_OPTIONS } = props;

    const queryClient = useQueryClient();
    // `useQuery` is used to get the valuable query data and for the initial fetch
    const q = useReactQuery(initialUrl, () => fetcher(initialUrl, fetcherOptions), queryOptions);

    // This function can be called with different arguments on purpose
    const handleLazyFetch = (url = initialUrl, options = {}) => {
        const mergedOptions = { ...fetcherOptions, ...options };

        // Get the query result, which can be awaited if needed
        return queryClient.fetchQuery(url, () => fetcher(url, mergedOptions));
    };

    return { ...q, lazyFetch: handleLazyFetch };
};

[michael-land]

This is how i end up with, where useSalesOrdersQuery is a regular query fn

import { useCallback, useState } from 'react';
import { UseQueryResult } from 'react-query';

interface UseLazyQuery<T extends (...args: any[]) => UseQueryResult> {
  query: T;
  options?: Parameters<T>[1];
}

export function useLazyQuery<T extends (...args: any[]) => UseQueryResult>(
  queryOrConfig: UseLazyQuery<T> | T
) {
  const [debounceVariables, setDebounceVariables] = useState<Parameters<T>[0]>();
  const query = typeof queryOrConfig === 'function' ? queryOrConfig : queryOrConfig.query;
  const options = typeof queryOrConfig === 'function' ? undefined : queryOrConfig.options;

  const result = query(debounceVariables, { enabled: !!debounceVariables, ...options });
  const execute = useCallback((variables: Parameters<T>[0]) => setDebounceVariables(variables), []);
  return { ...result, execute };
}

const { data, execute } = useLazyQuery(useSalesOrdersQuery);


<FormField
  type="text"
  name="orderId"
  label="Order Reference Id"
  onKeyPress={(event) => {
    if (event.key !== 'Enter') return;
    event.preventDefault();
    execute( variables goes here );
  }}
/>

[alewis729]

If it's still relevant, something similar to the following worked for my use-case.

const [userInput, setUserInput] = React.useState('');
const { refetch, isFetching } = useQuery({
  queryKey: ['key', userInput],
  queryFn: () => getSomeUserData(userInput),
  enabled: false
});

const handleSomeStateUpdate = input => {
  // ...
  setUserInput(input);
};

const handleBtnClick = () => {
  refetch();
};

// ...

Some notes

• Disable the query from running automatically (on mount) with enabled: false
• Call on demand with refetch() (on the click of a button for instance)
• If there's some state that changes and is needed in the queryFn add it to the queryKey array and refetch will use the updated value
• Can use isFetching as if it were a "loading" state

[TkDodo]

and why would that be better than the lazy queries example in the docs?

https://tanstack.com/query/v4/docs/react/guides/disabling-queries#lazy-queries