useLazyQuery

[juicylevel]

Please add a hook useLazyQuery. It is inconvenient to specify the parameter enabled: false every time.

For expample:

const [fetch, { isLoading, data }] = useLazyQuery('key', () => axios.get('/bla-bla-bla'))

The parameter throwOnErrorneeds to work throwOnError: true.

For example:

const { refetch } = useQuery('key',
    () => axios.get('/bla-bla-bla'), {
        enabled: false,
    }
 );

const load = async () => {
    try {
        const data = await refetch();
    } catch (error) {
        console.log(error.message); // if there is an error and `throwOnError: true` -  this code will not be called
    }
};

throwOnError: true - do not working

[tannerlinsley]

Because the core API allows for this already, this request is more of a stylistic change that won't apply to everyone. For that reason, the official recommendation is to make your own custom hook like so:

export default function useLazyQuery (key, fn, options = {}) {
  const query = useQuery(key, fn, {
    ...options,
    enabled: false
  })

  return [query.refetch, query]
}

Using something akin to this hook will allow you to create any type of API interface to useQuery that you need.

[antoniel]

Fully typed version of this hook https://gist.github.com/antoniel/fd65e6f7b3c337ac2e2b719a26035dc0/revisions

[vjuux]

What about cases when using query.remove together with { enabled: false } the query.data will not reconcile thought the request is no longer present in the cache. Is there a flag to re-render?

[dan-cooke]

Fully typed version of this hook gist.github.com/antoniel/fd65e6f7b3c337ac2e2b719a26035dc0/revisions

I improved this by removing a few of the any and unknowns

https://gist.github.com/dan-cooke/171b8e43e0753cf6235706c8e63b3dc7

[bogdanq]

very bad examples

[itimoshenko]

Here is a simple implementation via ensureQueryData,
https://gist.github.com/itimoshenko/43e4f2fadba74c8d48ffa36f00dfdf67/

see more here, https://tanstack.com/query/latest/docs/reference/QueryClient#queryclientensurequerydata

[dan-cooke]

An even easier approach is to just use useMutation instead.

[TkDodo]

I'd probably just do:

<Button onPress={async() => {
  const { data } = await queryClient.fetchQuery()
  navigate(...)
}>

[NarenderDhamarlapally]

const [country, setCountry] = useState();
let urlGetCountryAutocomplete = ${GeographyUrls.GEOGRAPHY_COUNTRY_AUTOCOMPLETE};
const {
data: CountryAutocompleteData,
isFetching: CountryAutocompleteLoading,
} = useGeograhphyHook(
["getCountryAutocomplete", country],
urlGetCountryAutocomplete,
{ geographyName: country },
{ enabled: !!country }
);

i want usequery in another file

how to handle state

     <Input type="hidden" name="countryGeoSeq" />
    <AutoCompleteReuse
      name="geographyName"
      onTextChange={(text) => setCountry(text)}
      options={CountryAutocompleteData || []}
      nameSeq="countryGeoSeq"
      label="Country Name"
      placeholder="Enter Country Name"
      onChange1={(item) => {
        if (!item) return;
        setValue("countrySeq", item.countrySeq);
        setValue("locationSeq", null);
        setValue("locationName", "");
      }}
      required
      optionsLoading={CountryAutocompleteLoading}
    />

like another file

[ealexhaywood]

I'd probably just do:

<Button onPress={async() => {
  const { data } = await queryClient.fetchQuery()
  navigate(...)
}>

@TkDodo Is the expectation to manage loading state manually with queryClient.fetchQuery() since it only returns data?

@bryanltobing maybe it makes sense to just switch to useMutation() and leverage the onSuccess callback to use queryClient.setQueryData(). And before you call the trigger function you can check the cache with queryClient.getQueryData() first. It's more work but I'd rather do that than use queryClient.fetchQuery()

function useLazyQuery() {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: (variables) =>
      queryClient.getQueryData(["validation", variables]) ?? validateSomething(variables),
    onSuccess: (data, variables) => {
      queryClient.setQueryData(["validation", variables], data);
    },
  });
}

I would love a first-class useLazyQuery() because for cases where you need it, your choices are limited to

• manage extra state and use it to toggle enabled (I'm talking for onClick/onSubmit use-cases here, e.g. onclick you set some state that evaluates to true for your enabled condition)
• manually handle loading and catch potential errors with queryClient.fetchQuery()
• abuse refetch() with enabled: false which cannot accept any arguments

I'm more than happy to open a PR but from everything I've read I don't think it would be accepted.

[TkDodo]

Is the expectation to manage loading state manually with queryClient.fetchQuery() since it only returns data?

depending on which states you need, you can accompany it with useIsFetching to e.g. just disable the button, or add a useQuery call with enabled: false. I think this is slightly better than using refetch because you get data back immediately.

maybe it makes sense to just switch to useMutation() and leverage the onSuccess callback

that could work, too.

I would love a first-class useLazyQuery() because for cases where you need it

I think the cases where you do need it are kinda limited:

• For dependant queries and queries where you have to wait for some user input (like search / filter), enabled is great.
• Most cases where you have "button click, then redirect" are mutations, because its mostly a "login" use-case where you have a side-effect and don't want caching.
• If you want a fetch on demand, with caching, queryClient.fetchQuery is your man. If you also want loading states for that, yeah, we're back to the aforementioned options. I'd go with fetchQuery + a disabled useQuery then.

[ealexhaywood]

@TkDodo this makes sense. Thanks for your response. I'll keep these strategies in my back pocket 🙏

[ardok]

I ended up doing something like this. I also wanted the onSuccess, onError callbacks.

Fix the types yourself. This is inspired from useMutation, they're using Map for the callbacks.
So, the major thing here is that to utilize Map to put the callbacks into it so that the reference will stay the same since you'd just be referencing to the Map variable.

import type { QueryObserverOptions, UseQueryResult } from '@tanstack/react-query';

export const useLazyQuery = (
  rpcId: TRpcId,
  options?: RpcQueryOptions<GetRpcResponseT<TRpcId>> & {
    onSuccess?: (data: GetRpcResponseT<TRpcId>) => void;
    onError?: (error: Error) => void;
    onSettled?: (data: GetRpcResponseT<TRpcId> | undefined, error: Error | undefined) => void;
  }
): UseQueryResult<GetRpcResponseT<TRpcId>, Error> & {
  query: (params: GetRpcRequestT<TRpcId>) => void;
} => {
  const [variables, setVariables] = useState<null | GetRpcRequestT<TRpcId>>(null);
  const [callbacks] = useState(() => new Map());

  // Future major version will remove `onSuccess`, `onError`, and `onSettled` from `options`.
  // We can remove this destructuring when we upgrade to that version.
  const { onSuccess: _, onError: __, onSettled: ___, ...rpcQueryOptions } = options || {};

  const query = useQuery({ 
    ..., 
    // Always override `enabled` because we want to disable the query until `fetchQuery` is called
    enabled: Boolean(variables) 
  });

  useEffect(() => {
    if (options) {
      if (options?.onSuccess) {
        callbacks.set('success', options.onSuccess);
      }
      if (options?.onError) {
        callbacks.set('error', options.onError);
      }
      if (options?.onSettled) {
        callbacks.set('settled', options.onSettled);
      }
    }
  }, [options, callbacks]);

  const { data, error, status } = query;
  useEffect(() => {
    if (status === 'success') {
      callbacks.get('success')?.(data);
      callbacks.get('settled')?.(data, null);
      return;
    }
    if (status === 'error') {
      callbacks.get('error')?.(error);
      callbacks.get('settled')?.(undefined, error);
      return;
    }
  }, [data, error, status, callbacks]);

  const fetchQuery = useCallback((params: GetRpcRequestT<TRpcId>) => {
    setVariables(params);
  }, []);

  return useMemo(
    () => ({
      ...query,
      query: fetchQuery,
    }),
    [query, fetchQuery]
  );
};

[itimoshenko]

Here is a simple implementation via ensureQueryData,
https://gist.github.com/itimoshenko/43e4f2fadba74c8d48ffa36f00dfdf67/

see more here, https://tanstack.com/query/latest/docs/reference/QueryClient#queryclientensurequerydata

[mingazhev]

Thanks @itimoshenko that's really helpful!