How to re-render with query and useForm
Hi guys, i have make a hooks with tanstack query and i want to sorted my data with useForm, so i select a profile and i put this profile in my query for sorted but my query don't want re-render so it's happens nothing, how to do for my query re-renders ?
Code :
Code :
import { PlanningTodo, Projet } from '@/utils/types/databaseTypes';
import { useAppQuery } from '@/utils/functions/Tanstack/queryClientHooks';
import { PROJECTS_QUERY_KEYS } from '@/utils/query-keys';
import { useSortedForm } from '@/context/SortedForm';
import { applyFilters } from '@/utils/functions/Tanstack/applyFilters';
import { PlanningTodoFilters } from '@/utils/functions/Tanstack/filters/PlanningTodoFilters';
import { useStore } from '@tanstack/react-form';
const api = {
fetchProjectTODO: async (projet: Projet): Promise<PlanningTodo[]> => {
if (!projet || !projet.pro_id) return [];
const response = await fetch(`/api/planning/get_by_project_id?proId=${projet.pro_id}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.error || 'Failed to fetch project TODOs');
}
return response.json();
},
};
export const useGetAllProjectTodo = (projet: Projet | null) => {
const sortedForm = useSortedForm();
const profile = useStore(sortedForm.store, state => state.values.profiles);
return useAppQuery<PlanningTodo[]>({
queryKey: [
...PROJECTS_QUERY_KEYS.list(),
projet?.pro_id ?? 'no-project',
profile ?? 'no-profile',
],
queryFn: () => api.fetchProjectTODO(projet as Projet),
enabled: !!projet?.pro_id,
select: data => applyFilters(data, { profiles: profile }, PlanningTodoFilters),
});
};import { PlanningTodo, Projet } from '@/utils/types/databaseTypes';
import { useAppQuery } from '@/utils/functions/Tanstack/queryClientHooks';
import { PROJECTS_QUERY_KEYS } from '@/utils/query-keys';
import { useSortedForm } from '@/context/SortedForm';
import { applyFilters } from '@/utils/functions/Tanstack/applyFilters';
import { PlanningTodoFilters } from '@/utils/functions/Tanstack/filters/PlanningTodoFilters';
import { useStore } from '@tanstack/react-form';
const api = {
fetchProjectTODO: async (projet: Projet): Promise<PlanningTodo[]> => {
if (!projet || !projet.pro_id) return [];
const response = await fetch(`/api/planning/get_by_project_id?proId=${projet.pro_id}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.error || 'Failed to fetch project TODOs');
}
return response.json();
},
};
export const useGetAllProjectTodo = (projet: Projet | null) => {
const sortedForm = useSortedForm();
const profile = useStore(sortedForm.store, state => state.values.profiles);
return useAppQuery<PlanningTodo[]>({
queryKey: [
...PROJECTS_QUERY_KEYS.list(),
projet?.pro_id ?? 'no-project',
profile ?? 'no-profile',
],
queryFn: () => api.fetchProjectTODO(projet as Projet),
enabled: !!projet?.pro_id,
select: data => applyFilters(data, { profiles: profile }, PlanningTodoFilters),
});
};
