I encountered an issue while trying to implement code using initialData in React Query. The output does not display as expected, and the key is not visible in the react-query-dev-tool. View image here
import { useQuery, useQueryClient } from 'react-query';
import axios from 'axios';
interface CustomError {
message: string;
}
interface User {
id: number;
first_name: string;
last_name: string;
email: string;
gender: string;
ip_address: string;
description: string;
location: string;
password: string;
mac_address: string;
url: string;
}
export async function fetchUserDataById({ queryKey }: any): Promise<User> {
const dataId = queryKey[1]
const response = await axios.get<User>(`http://localhost:5000/users/${dataId}`);
return response.data;
}
export const useDataUserById = (id: number) => {
const queryClient = useQueryClient();
return useQuery<User, CustomError>(['user-data', id], fetchUserDataById, {
initialData: () => {
const users = queryClient.getQueryData<User[]>('one-data');
if (users) {
const dataUser = users?.find((userData) => userData.id === id);
if(dataUser){
console.log(dataUser)
return dataUser
}
}
return undefined;
},
});
};
Please help me troubleshoot why my initialData in React Query is not functioning properly.