refetch after a form submit with parameters

[aegiz]

Hi there,

Here is my use case:

• I have a form with two fields that, on submit, makes a GET request to a remote server
• In the body of this request I need to pass 2 parameters (that I get from the form)
• After the call is successful the form disappears, if the user starts over the form should be empty

I read carefully the discussions #351 #1549 and understand that because React Query is declarative you cannot pass any parameter to refetch. so something like this doesn't exist: refetch({email: "[email protected]", password: "12345"});
However, as far as I know, this forces me to use a useEffect and a useState. Here is my code:

React Query custom hook

import { UseQueryOptions, useQuery } from 'react-query';

import { api } from '@services/api';

export const useQueryHook = (param1: string, param2: string, options?: UseQueryOptions): any => {
    const queryFn = () => {
        return api.get(`/endpoint`, {
            params: {
                param1,
                param2,
            },
        });
    };

    const query = useQuery(['myQuery', param1, param2], queryFn, {
        onSuccess: () => console.info('Success'),
        onError: () => console.error('Error'),
        ...options,
    });

    return query;
};

export default useQueryHook;

Custom hook that call React query custom hook

import { useState, useEffect } from "react";

import { useQueryHook } from "../api/useQueryHook";

export const useBusinessLogic = (): any => {
  const [param1, setParam1] = useState("");
  const [param2, setParam2] = useState("");
  const { data } = useQueryHook(param1, param2, {
    enabled: param1 !== "" && param2 !== "",
  });

  const onFormSubmit = (values: any) => {
    setParam1(values.param1);
    setParam2(values.param2);
  };

  useEffect(() => {
    if (data) {
      console.log(data);
    }
  }, [data]);

  return {
    onFormSubmit
  };
};

export default useBusinessLogic;

Here are my questions:

1. Maybe I misunderstood and instead of using useQuery in this case I should use useMutation with a GET request in it?
2. Is the above code the recommended way to handle this kind of use case, if yes how would you transform it to avoid using a useEffect?
3. For the record, I also found this re-implementation of the Apollo useLazyQuery hook in useLazyQuery #1205 . I understand that React query is made to be declarative but would you recommend using this useLazyQuery hook in this scenario?

Thanks a lot !

[TkDodo]

Maybe I misunderstood and instead of using useQuery in this case I should use useMutation with a GET request in it?

It really depends on what you want to do. Is your request executing side-effects on the backend, like logging in a user? Then it's most certainly a mutation. Be aware that mutations really only run once when you invoke them. Queries on the other hand can re-fetch for a variety of reasons after you enable them. So for example, a window focus event could trigger a refetch. If it's truly a GET request, it doesn't matter because they are idempotent.

Also, ask yourself if you want to share data across components, because useMutation cannot do that out of the box.

Is the above code the recommended way to handle this kind of use case, if yes how would you transform it to avoid using a useEffect?

It's definitely a good implementation of useLazyQuery - except that you don't need the useEffect, it doesn't do anything react-query related?

For the record, I also found this re-implementation of the Apollo useLazyQuery hook in useLazyQuery #1205 . I understand that React query is made to be declarative but would you recommend using this useLazyQuery hook in this scenario?

A query that you permanently disable and then call refetch is a very imperative way of data fetching that I would not recommend. You get no background updates and you can't pass parameters to refetch. The useLazyQuery shown in #1205 (reply in thread) is the way I would go, but read answer to point number 1) on what that implies then, as the query will be enabled after the first invocation. It really just defers the query.

[aegiz]

Makes perfect sense, thanks a lot for your detailed answer :-)
I have a couple of follow-ups questions:

Be aware that mutations really only run once when you invoke them. Queries on the other hand can re-fetch for a variety of reasons after you enable them

Okay so in this case after this form is submitted we will never refetch it with the same parameter (the form disappears after the data comes back and its value get reset). Can you confirm in this case that:

1. It seems more like a useMutation?
2. You can actually make a GET request as the query function of useMutation?
3. Even if it works (useMutation + GET), is it a flag that things is not right, no?
4. Another potential option I can think of is leave it as a useQuery and when the data comes back use the queryClient.resetQueries method to reset it to initial state?

It's definitely a good implementation of useLazyQuery - except that you don't need the useEffect, it doesn't do anything react-query related?

5. As mentioned above, I need the form to disappear as soon as we receive the data so I use this useEffect to watch for changes.
   So, you are right, in a sense it has nothing to do with React Query, but maybe you have another implementation to suggest to make an actions (here, form disappears) when the data coming back from React Query?

Thanks again,

[TkDodo]

As mentioned above, I need the form to disappear as soon as we receive the data so I use this useEffect to watch for changes.
So, you are right, in a sense it has nothing to do with React Query, but maybe you have another implementation to suggest to make an actions (here, form disappears) when the data coming back from React Query?

you can use the onSuccess callback of useQuery for that.

It seems more like a useMutation?

Can you disclose what you are working on? I mean, a form where you click a button, that makes a GET request, but then you unmount the form... if it's a GET request that just retrieves data from the backend, and then you don't show it - what happens to that data?

You can actually make a GET request as the query function of useMutation?

sure, RQ doesn't care.

[aegiz]

Sure, I am working on a multi-steps dialog where at step 1 you have this form that make the GET request then when the data comes back this form disappear and the data are used in step 2 to make others calls.
If user closes the popup, form unmount and if he opens the dialog again he comes back to step 1 with a fresh form.

[aegiz]

👆Just updated my answer above.
In term of code what I end up doing was a useQuery that get removed when the form unmounts.
Like this:
queryClient.removeQueries('myQuery');

[TkDodo]

cacheTime: 0 would also make sure that the query is instantly garbage collected / removed as soon as the last observer unmounts.