react-query custom hook how to use useMutation and useQuery conditionaly

Question

i create custom hook for use useQuery() :


export const useRequest = (
  {
    path = "",
    params = {},
    body = {},
    key = "",
    options= {},
    method = "get"
  }
) => {

  // async function for get API:
  const callApi = async () => {
    const { data: { response } } = await axios[method](baseUrl._serviceUrl + path,
      {
        params,
        ...body
      });

    return response;
  }

  const query = useQuery(key, callApi, {
    refetchOnWindowFocus: false,
    ...options
  });

  return { ...query, isLoading: query.isLoading && query.fetchStatus !== "idle" }
}

To use the useMutation hook without using the separate function, I changed my useRequest() as follows:


export const useRequest = (
  {
    path = "",
    params = {},
    body = {},
    key = "",
    options= {},
    method = "get",
    mutation = false
  }
) => {

  // async function for get API:
  const callApi = async () => {
    const { data: { response } } = await axios[method](baseUrl._serviceUrl + path,
      {
        params,
        ...body
      });

    return response;
  }
  
  if (mutation) {
    const callMutationApi = async (data) => {
      const {params, body} = data;
      const { data: { response } } = await axios.post(baseUrl._serviceUrl + path,
        {
          params,
          ...body
        });

      return response;
    }

    return useMutation(callMutationApi, options);
  }

  const query = useQuery(key, callApi, {
    refetchOnWindowFocus: false,
    ...options
  });

  return { ...query, isLoading: query.isLoading && query.fetchStatus !== "idle" }
}

But I get the following error: React Hook "useMutation" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?

What changes should I make in the useRequest() function? Thank you for your guidance.

///// UPDATE /////

According to the answer of dear @kapobajza...

I changed the code as follows and it worked:

export const useRequest = (
  {
    path = "",
    params = {},
    body = {},
    key = "",
    options= {},
    method = "get",
    mutation = false
  }
) => {

  // async function for get API:
  const callApi = async () => {
    const { data: { response } } = await axios[method](baseUrl._serviceUrl + path,
      {
        params,
        ...body
      });

    return response;
  }


  const callMutationApi = async (data) => {
    const {params, body} = data;
    const { data: { response } } = await axios.post(baseUrl._serviceUrl + path,
      {
        params,
        ...body
      });

    return response;
  }

  // Instead of returning here, just save the result in a variable
  const useMutationResult = useMutation(callMutationApi, options);

  const query = useQuery(key, callApi, {
    refetchOnWindowFocus: false,
    enabled: (!mutation && options?.enabled),
    ...options
  });
  
  // If mutation is defined, return that result
  if (mutation) {
    return useMutationResult;
  }

  return { ...query, isLoading: query.isLoading && query.fetchStatus !== "idle" }
}

I added the option part of the following code to useQuery().. This will prevent useQuery() from running:

{
    refetchOnWindowFocus: false,
    enabled: (!mutation && options?.enabled),
    ...options
}

Please tell me if this solution is correct?

Kapobajza · Accepted Answer · 2022-10-12 17:04:07Z

1

Unfortunately you cannot call React hooks conditionally.

One thing you'll find out early adopting react is that you cannot have conditional hooks. This is because every hook is initially added into a list that is reviewed on every render cycle, so if the hooks don't add up, there is something amiss and any linter set up correctly will warn you.

Taken from this article

But the thing you could do is to return the result of the useMutation hook if mutation is defined:

export const useRequest = (
  {
    path = "",
    params = {},
    body = {},
    key = "",
    options= {},
    method = "get",
    mutation = false
  }
) => {

  // async function for get API:
  const callApi = async () => {
    const { data: { response } } = await axios[method](baseUrl._serviceUrl + path,
      {
        params,
        ...body
      });

    return response;
  }


  const callMutationApi = async (data) => {
    const {params, body} = data;
    const { data: { response } } = await axios.post(baseUrl._serviceUrl + path,
      {
        params,
        ...body
      });

    return response;
  }

  // Instead of returning here, just save the result in a variable
  const useMutationResult = useMutation(callMutationApi, options);

  const query = useQuery(key, callApi, {
    refetchOnWindowFocus: false,
    ...options
  });
  
  // If mutation is defined, return that result
  if (mutation) {
    return useMutationResult;
  }

  return { ...query, isLoading: query.isLoading && query.fetchStatus !== "idle" }
}

answered Oct 12, 2022 at 17:04

Kapobajza

2,46917 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Masoud Tesna Over a year ago

Thanks for the answer. But there is a problem, the automatic useMutation() function is called without calling the mutate() function!

Kapobajza Over a year ago

@MasoudTesna and what is the purpose of mutate being automatically called? As far as I can see in the docs, there is no option to call mutate automatically when useMutation is being called.

Masoud Tesna Over a year ago

Please see the answer I sent

Masoud Tesna Over a year ago

dear @kapobajza I found a solution. The problem was from useQuery() that was running! There is an option called Enabled, which I changed as follows: enabled: (!mutation && options?.enabled), Do you think it's right?

Collectives™ on Stack Overflow

react-query custom hook how to use useMutation and useQuery conditionaly

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related