Dependent mutations? enabled missing?

[danactive]

useQuery allows an optional queryConfig with enabled property so I may skip a query per render. This enabled is also for chaining queries. What's the best approach for dependent mutations (enabled is not in the API for v2.26)?

For example I want to check a cookie value, if missing then useMutation.

Sample code for a GET call

const queryConfig = { enabled: !cookieValue };
useQuery('cart', cartService.createCart, queryConfig);

How would this code snippet transform for a POST call?

-=Dan=-

[TkDodo]

useMutation returns a mutate function. The mutation will only run when you call that function, e.g. on a button click. That is fundamentally different from useQuery. If you want to wait for a condition to be met, just call the function after that :)

[teahan-nguyen]

There is a need to add enabled option, check out this code

const idServiceSport = useGetId("sport_service"); // string or empty string
const { mutate } = useMakePaymentRequest(idServiceSport);
const makePaymentSportService = (param: any) => {
  if (idServiceSport) {
    mutate(param);
  }
};

[TkDodo]

why is there a need? Just don't invoke makePaymentSportService if you have no id ...

[debo07]

@TkDodo When does the mutationKey gets set? I think when we call useMutation, not on mutate.

I have a scenario where my mutationKey is using a variable part which I get after an async call.

export const useCreateData = ({
    onSuccess,
    siteid,
}: {
    onSuccess?: Function;
    siteid: Number;
}) => {
    return useMutation(
        {
            mutationFn: createData,
            onSuccess: resp => {
                if (resp.status === "ok") {
                    queryClient.invalidateQueries({
                        queryKey: myDataQueryKeys.list(siteid),
                    });
                }
                if (typeof onSuccess === "function") {
                    onSuccess(resp);
                }
            },
            mutationKey: myDataQueryKeys.add(siteid),
        },
        queryClient,
    );
};

Now when I am calling this from my functional component, I am calling like below -

   const siteid = useSiteId(); // This is a custom hook which will initially return undefined, but once the async operation resolves, it will return number.
   const { mutate: createMyData, isPending } = useCreateData({
        onSuccess: onMutateSuccess,
        siteid,
    });

Here, if siteid gets passed as undefined initially, is that not a problem for the mutationKey? My functional component is getting re-rendered once I am getting the correct siteid from my custom hook.

mutate won't be called before siteid resolution.