T
TanStack•9mo ago
flat-fuchsia

Why data value of queries is not updated on queryClient.setQueryData(['grid'], updatedGrid)

The data variable returned to React component is not updated on setQueryData causing the isDirty function to pretend data is always dirty even after saving data server side. Query code : 
export const useUpdateGrid = () => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (grid: IGrid) => updateGrid(grid), // Fonction qui envoie la requête
    onSuccess: updatedGrid => {
      queryClient.setQueryData(['grid', updatedGrid._id], updatedGrid);
      queryClient.invalidateQueries({ queryKey: ['grids'] });
    },
  });
}
export const useUpdateGrid = () => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (grid: IGrid) => updateGrid(grid), // Fonction qui envoie la requête
    onSuccess: updatedGrid => {
      queryClient.setQueryData(['grid', updatedGrid._id], updatedGrid);
      queryClient.invalidateQueries({ queryKey: ['grids'] });
    },
  });
}
Component code: 
const { isFetching, data: serverGrid } = useFetchGrid(id);

//Always true since serverGrid is not updated after setQueryData
const isDirty = useMemo(() => {
  return JSON.stringify(currentGrid) !== JSON.stringify(serverGrid);
}, [currentGrid, serverGrid]);

  const handleSaveGridAction = async (): Promise<void> => {
    if (!currentGrid) return;

    updateGridMutation.mutate(currentGrid, {
      onSuccess: (grid: IGrid) => {
        setCurrentGrid(grid);
      },
    });
  };
const { isFetching, data: serverGrid } = useFetchGrid(id);

//Always true since serverGrid is not updated after setQueryData
const isDirty = useMemo(() => {
  return JSON.stringify(currentGrid) !== JSON.stringify(serverGrid);
}, [currentGrid, serverGrid]);

  const handleSaveGridAction = async (): Promise<void> => {
    if (!currentGrid) return;

    updateGridMutation.mutate(currentGrid, {
      onSuccess: (grid: IGrid) => {
        setCurrentGrid(grid);
      },
    });
  };
What is the issue there ? How to implement isDirty so ?
No description
1 Reply
stormy-gold
stormy-gold•9mo ago
I don't understand the question. please show a minimal reproduction (stackblitz or codesandbox) instead of some code snippets and screenshots

Did you find this page helpful?