TanStackT
TanStack3y ago
1 reply
primary-violet

React query mutations

Hi guys I wrote this custom function in react-query to simplify my code

import { useMutation, useQuery } from '@tanstack/react-query';

import userRequest from '@/utils/AxiosInstance';




export const usePostQuery = <TResponse, TBody>(

  queryKey: string,

  url: string,

  body: TBody

) => {

  return useMutation({

    mutationKey: [queryKey],

    mutationFn: async () => {

      const { data } = await userRequest.post(url, body);

      return data as TResponse;

    },

    onSuccess: (data: TResponse) => {

      console.log(data);

    },

    onError: (err) => {

      console.error(err);

    },

  });

};


but when i try to call it inside onsubmit in formik

onSubmit={(values) => {

         const data = usePostQuery();

        }}


It throws this error

React Hook "usePostQuery" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function.eslintreact-hooks/rules-of-hooks

Expected 3 arguments, but got 0.ts(2554)

postQuery.ts(5, 3): An argument for 'queryKey' was not provided.

(alias) usePostQuery<unknown, unknown>(queryKey: string, url: string, body: unknown): UseMutationResult<unknown, unknown, void, unknown>
import usePostQuery


can you guys correct me if I write this fuction wrong, Thank you
Was this page helpful?