React Query Invalid hook call when I introduce useQueryClient

Question

I am experiencing the below error when I introduce useQueryClient? Any ideas why this may be?

I am trying to invalidateQueries for a queryKey onSuccess of the useUpdateEmployee hook.

bundle.js:1427 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

Component

import { useFetchEmployee, useUpdateEmployee } from '../Users/Usershooks';

const User = () => {

    const userData = {
        name: 'test'
    };

    const { data } = useFetchEmployee(userID);
    const { mutate } = useUpdateEmployee(userID, userData);

    const saveChangesOnClick = () => {
        mutate();
    };

    return (
        <div>
            ...
        </div>
    );
};

export default User;

HookFile

import axios from 'axios';
import { useMutation, useQuery, useQueryClient } from 'react-query';

const queryClient = useQueryClient();

export const useFetchEmployers = () => useQuery(['fetchEmployers'], () => axios.get('https://jsonplaceholder.typicode.com/users')
    .then(response => response.data));

export const useFetchEmployee = (userID: any) => useQuery(['fetchEmployers', userID], () => axios.get(`https://jsonplaceholder.typicode.com/users/${userID}`)
    .then(response => response.data));

export const useUpdateEmployee = (userID: any, userData: any) => useMutation(
    () => axios.put(`https://jsonplaceholder.typicode.com/users/${userID}`, userData)
        .then(response => response.data),
    {
        onSuccess: () => {
            console.log("success");
            queryClient.invalidateQueries(['fetchEmployers']);
        }
    }
);

kind user · Accepted Answer · 2022-10-19 14:55:09Z

3

useQueryClient is a hook, it has to be initialized in a React component or in a custom hook. Just move it inside the useUpdateEmployee.

export const useUpdateEmployee = (userID: any, userData: any) => {
   const queryClient = useQueryClient();

   return useMutation(
      ...,
      onSuccess: () => {
        queryClient.invalidateQueries(['fetchEmployers']);
     }
   );
};

answered Oct 19, 2022 at 14:55

kind user

42k8 gold badges69 silver badges78 bronze badges

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

Collectives™ on Stack Overflow

React Query Invalid hook call when I introduce useQueryClient

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related