---------------------- To refetch data from multiple hooks in child components from a parent component in refine, you have a few options: ### Option 1: Use the `useInvalidate` hook The most streamlined approach is to use the `useInvalidate` hook, which allows you to invalidate queries and trigger refetching: ```tsx import { useInvalidate } from "@refinedev/core"; const EditPage = () => { const invalidate = useInvalidate(); const handleGlobalRefetch = () => { // Invalidate list queries for your resource invalidate({ resource: "yourResourceName", invalidates: ["list"] }); // For custom queries, you need to know their query keys invalidate({ queryKey: ["custom-key"] }); }; return (

); }; ``` ### Option 2: Pass refetch functions as props If you need more control, you can pass refetch functions from child components to the parent: ```tsx // Child component const ChildComponent = ({ onRefetchReady }) => { const { queryResult } = useList({ resource: "products" }); // Pass the refetch function to parent when component mounts useEffect(() => { onRefetchReady(queryResult.refetch); }, []); return

...

; }; // Parent component const EditPage = () => { const refetchFunctions = useRef([]); const registerRefetch = (refetchFn) => { refetchFunctions.current.push(refetchFn); }; const handleGlobalRefetch = () => { refetchFunctions.current.forEach(refetch => refetch()); }; return (

); }; ```

global refetch

Similar Threads

Similar Threads

Similar Threads