useLazyQuery

[AjaxSolutions]

How could I use React Query lazily?

I'm looking for a functionality similar to Apollo useLazyQuery

See also this useSWR feature request.

[TkDodo]

You can use the enabled option to disable a query until a condition is met. This is very well documented: https://react-query.tanstack.com/guides/dependent-queries

[tannerlinsley]

You can also keep the query disabled and use the queryInfo.refetch() function to manually call the query.

[masiucd]

Exactly what I was looking for, thanks! 👍🏻

[AjaxSolutions]

If I wanted to refetch with new queryKey params and pass theses params to queryInfo.refetch(), how could I do this?

[TkDodo]

You don’t need refetch for that. Changing the queryKey will automatically refetch the query.

[hosseinmd]

How can I pass params to refetch function when calling that

[TkDodo]

Okay, what’s your use case please? I think there might be some underlying misconceptions about react-query, and just answering the question with "its not possible" won’t be satisfying. It’s not possible because useQuery is declarative, so there shouldn’t be many use cases to imperatively re-fetch, and if there is one, it should be with the same params.

[TkDodo]

Example: You have an id and you want to change that id and refetch with a different id. You don't do that with refetch, but by making the id part of the key:

const [id, setId] = React.useState(1)
const queryInfo = useQuery(['todos', id], () => fetchTodo(id))
...
<button onClick={() => setId(5)}>Set to 5</button>

setting the id to 5 will trigger a re-render (because of useState), then useQuery will get a new queryKey (from ['todos', 1] to ['todos', 5] and will thus create a new cache entry and trigger a refetch.

if your use-case is vastly different, please let me know.

[AjaxSolutions]

idk what use case Hossein had in mind, but I wanted to point out that your example is not fetching lazily. The first fetch is not a lazy call because the query is not disabled. Only subsequent fetches are on demand.

Here's is my scenario. For example, if the refetch function is passed to a child component which "knows" when and with what params to call refetch, it's a lot easier to pass those params to the refetch function then to the useQuery hook located in the parent.

[AjaxSolutions]

My suggestion would be to add the useLazyQuery hook to the library to make it very obvious that it can make lazy fetches.

See how the Apollo client has both the useQuery and useLazyQuery hooks.

[AjaxSolutions]

See how in this useLazyQuery GraphQL example variables are passed to the getDog function.

<button onClick={() => getDog({ variables: { breed: 'bulldog' } })}>
	Click me!
</button>

getDog would be the React Query refetch function. I'm looking for a way to pass params to this function.

[TkDodo]

@AjaxSolutions now we are back one full circle to the enabled prop. If you really want a useLazyQuery hook, you can easily build it in user-land:

const useLazyDog = () => {
    const [variables, setVariables] = React.useState()
    const queryInfo = useQuery(
        ['dogs', variables],
        () => fetchDogs(variables),
        { enabled: Boolean(variables) }
    )

    return {
        ....queryInfo,
        getDog: setVariables
    }
}

usage would be:

const { getDog } = useLazyDog()
<button onClick={() => getDog({ breed: 'bulldog' })}>
	Click me!
</button>

[AjaxSolutions]

This is pretty good, but IMO it's still more complicated than it should be. Is there a problem with adding the ability to pass params to refetch? This would be a littler easier because the requirement to use the intermediate useState hook be would be eliminated.

[tannerlinsley]

Just use QueryClient.fetchQuery(key, func)

[hosseinmd]

Just use QueryClient.fetchQuery(key, func)

This is cool.

[martinezguillaume]

Hi ! If it can help someone, I managed to make an usable useLazyQuery (like Apollo), here is the code

export type LazyQueryFunction<
  TParams = unknown,
  TQueryFnData = unknown,
  TError = unknown,
  TData = TQueryFnData,
  TQueryKey extends QueryKey = QueryKey
> = (
  params?: TParams,
  options?: FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>
) => Promise<TData>;

export type UseLazyQueryResult<
  TParams = unknown,
  TQueryFnData = unknown,
  TError = unknown,
  TData = TQueryFnData,
  TQueryKey extends QueryKey = QueryKey
> = [
  LazyQueryFunction<TParams, TQueryFnData, TError, TData, TQueryKey>,
  UseQueryResult<TData, TError>
];

export const useLazyQuery = <
  TParams = unknown,
  TQueryFnData = unknown,
  TError = unknown,
  TData = TQueryFnData,
  TQueryKey extends QueryKey = QueryKey
>(
  queryKey: TQueryKey,
  queryFn: (params?: TParams) => Promise<TQueryFnData> | TQueryFnData,
  options?: FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>
): UseLazyQueryResult<TParams, TQueryFnData, TError, TData, TQueryKey> => {
  const query = useQuery<TQueryFnData, TError, TData, TQueryKey>(queryKey, {
    enabled: false,
    cacheTime: 0,
  });
  const clientQuery = useQueryClient();
  const fetchQuery = useCallback<
    LazyQueryFunction<TParams, TQueryFnData, TError, TData, TQueryKey>
  >(
    (params, fetchQueryOptions) =>
      clientQuery.fetchQuery<TQueryFnData, TError, TData, TQueryKey>(
        queryKey,
        () => queryFn(params),
        {
          cacheTime: 0,
          ...options,
          ...fetchQueryOptions,
        }
      ),
    [clientQuery, options, queryFn, queryKey]
  );

  return [fetchQuery, query];
};

Here is an example of use:

const [fetch, data] = useLazyQuery<
  { property: string },
  { response: string },
  { errorMessage: string }
>('key', (params) => api.get('things', { params }), { retry: 4 });

// example data
data.data?.response; // api response
data.error?.errorMessage; // error message
data.isLoading; // check if data is loading

// Example fetch
fetch({ property: 'a parameter' }).then((result) => result.response);

If you find some things that aren't good, or something that can improve this hook, please let me know
(It can be good to have a lazy hook example available in the docs as well, it is a feature very useful and very requested)

[TkDodo]

One thing I'm missing here is that the query still stays disabled even after you call fetch. So you won't receive background updates, which is a huge benefit of using react-query.
Since the params are also not part of the query key, you won't get caching by different params. So every time you call fetch with another set of params, it will overwrite the cache entry, which means that switching back and forth between different params will not result in the snappy ux that you'd usually get from react-query. So I don't really see the benefit of it over:

const [params, setParams] = useState()
useQuery(['key', params, () => api.get('things', { params }), { enabled: Boolean(params) })

query starts disabled, once you call setParams, it will fetch with params and just behaves like a normal query afterwards, so it's really lazy (meaning it only defers the first execution until you call `setParams' )

[martinezguillaume]

I totally see your point,

The problem for me with that approach is that we don't have a Promise function like so
fetch({ property: 'a parameter' }).then((result) => result.response);

[TkDodo]

okay, but it has onSuccess callback for side-effects that you need to do when the promise resolves, and onError for when the promise rejects. If you need data transformation, you can do it via the select option or in the queryFn: api.get().then(...).

So I'm just not sure which problem you are trying to solve with this approach 🤔

[martinezguillaume]

I can solve the problem with onSuccess & onError but for my case, it would be so much better for visibility, code comprehension & complexity to have a useLazyQuery like the one from Apollo.
The thing that I miss the most is the return of a promise containing the data (or error)

[martinezguillaume]

Seems that Apollo has the same problem : issue

and the solution for now is the same, disable the query with skip option

[sinclairnick]

Late to the party here, but for those still looking for a reasonable solution, I ended up doing this:

export const useLazyQuery = <Vars, Data>(
  args: {
    getKey: (vars: Vars) => QueryKey;
    fetcher: (vars: Vars) => () => Promise<Data>;
  },
  options?: Omit<
    UseQueryOptions<Data, unknown, Data, QueryKey>,
    "queryKey" | "queryFn"
  >
) => {
  const [variables, setVariables] = useState<Vars>();
  const queryClient = useQueryClient();

  const queryInfo = useQuery(
    args.getKey(variables as any),
    args.fetcher(variables as any),
    { enabled: Boolean(variables), ...options }
  );

  const fetch = async (
    vars: Vars,
    fetchOptions?: FetchQueryOptions<Data, unknown, Data, QueryKey>
  ) => {
    setVariables(vars);
    try {
      const data = await queryClient.fetchQuery(
        args.getKey(vars),
        args.fetcher(vars),
        fetchOptions ?? options
      );
      return { data, error: undefined };
    } catch (error) {
      return { data: undefined, error };
    }
  };

  return [fetch, queryInfo] as const;
};

Not rigorously tested as of yet but seems to be doing the trick. Was designed to work with graphql-codegen for react-query, but can also easily work with vanilla implementations too. From what I understand, there should be minimal fetching and loader statusses etc. should still be retained more or less. Any obvious flaws here, @TkDodo?

[TkDodo]

that seems overly complex to me. if variables are part of the queryKey, react-query will do the refetching for you when a variable changes, making the fetch function unnecessary:

export const useLazyQuery = <Vars, Data>(
  args: {
    getKey: (vars: Vars) => QueryKey;
    fetcher: (vars: Vars) => () => Promise<Data>;
  },
  options?: Omit<
    UseQueryOptions<Data, unknown, Data, QueryKey>,
    "queryKey" | "queryFn"
  >
) => {
  const [variables, setVariables] = useState<Vars>();

  const queryInfo = useQuery(
    [args.getKey(variables as any), variables],
    args.fetcher(variables as any),
    { enabled: Boolean(variables), ...options }
  );

  const fetch = (vars: Vars) => setVariables(vars);

  return [fetch, queryInfo] as const;
};

all I did was make sure that the variables are part of the queryKey.

[coopbri]

I would love to have a useLazyQuery similar to Apollo, dynamic refetch parameters, or similar as someone using React Query with GraphQL Code Generator. fetchQuery works, but it would be nice to be able to use some of the convenient query methods (e.g. select) and I am running into an issue (dotansimha/graphql-code-generator-community#215) preventing the implementation from being clean.

Because of the generated code, I'd rather not create a userland implementation such as in #1549 (comment), though perhaps I could make a dynamic utility based on this. In my opinion, this should be implemented on the library side, however maybe it's best implemented in the GraphQL Code Generator adapter rather than RQ itself.

[TkDodo]

dynamic refetch parameters

it's not how react-query works: https://tkdodo.eu/blog/react-query-fa-qs#how-can-i-pass-parameters-to-refetch

[coopbri]

I understand, I should clarify that is why I mentioned "or similar" since I know React Query has a very nice declarative model for querying. I think it would be beneficial to have a baked-in approach to lazy, dynamic queries from within a component's context, akin to your useState example in that link. However, at the end of the day it's not that much extra code to implement dynamic parameters, and for now I have a simple "lazy factory" hook that I run my generated (GraphQL Code Generator) hooks/keys through similar to your example above.