T
TanStack•3w ago
harsh-harlequin

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 : 
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),
  });
};
2 Replies
genetic-orange
genetic-orange•3w ago
I'd pull out these two lines 
const sortedForm = useSortedForm();
const profile = useStore(sortedForm.store, state => state.values.profiles);
const sortedForm = useSortedForm();
const profile = useStore(sortedForm.store, state => state.values.profiles);
and pass the profile to useGetAllProjectToDo export const useGetAllProjectTodo = (projet: Projet | null, profile: string) =>
harsh-harlequin
harsh-harlequinOP•3w ago
like this ? It doesn't change anything, the behavior remains the same 
export const useGetAllProjectTodo = (projet: Projet | null, profile?: Profile | null) => {
  return useAppQuery<PlanningTodo[]>({
    queryKey: [
      ...PROJECTS_QUERY_KEYS.list(),
      projet?.pro_id ?? 'no-project',
      profile ?? 'no-sorted',
    ],
    queryFn: () => api.fetchProjectTODO(projet as Projet),
    enabled: !!projet?.pro_id,
    select: data => applyFilters(data, { profiles: profile }, PlanningTodoFilters),
  });
};
export const useGetAllProjectTodo = (projet: Projet | null, profile?: Profile | null) => {
  return useAppQuery<PlanningTodo[]>({
    queryKey: [
      ...PROJECTS_QUERY_KEYS.list(),
      projet?.pro_id ?? 'no-project',
      profile ?? 'no-sorted',
    ],
    queryFn: () => api.fetchProjectTODO(projet as Projet),
    enabled: !!projet?.pro_id,
    select: data => applyFilters(data, { profiles: profile }, PlanningTodoFilters),
  });
};
  const sortedForm = useSortedForm();
  const profile = useStore(sortedForm.store, state => state.values.profiles);
  const {
    data: projectTodos,
    isLoading: isLoadingProjectTodos,
    isError: isErrorProjectTodos,
  } = useGetAllProjectTodo(selectedProject, profile);
  const sortedForm = useSortedForm();
  const profile = useStore(sortedForm.store, state => state.values.profiles);
  const {
    data: projectTodos,
    isLoading: isLoadingProjectTodos,
    isError: isErrorProjectTodos,
  } = useGetAllProjectTodo(selectedProject, profile);

Did you find this page helpful?