eastern-cyan•7mo ago

global refetch

I have an edit page, that has 2 child components that both have useList and useCustom hooks inside of them. i want to be able to refetch those hooks from the parent edit page, is there a streamlined way to do that?

2 Replies

kapa.ai•7mo ago

Hi @biohazard#1521. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- 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:

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 (
    <div>
      <button onClick={handleGlobalRefetch}>Refetch All Data</button>
      <ChildComponent1 />
      <ChildComponent2 />
    </div>
  );
};

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 (
    <div>
      <button onClick={handleGlobalRefetch}>Refetch All Data</button>
      <ChildComponent1 />
      <ChildComponent2 />
    </div>
  );
};

Option 2: Pass refetch functions as props If you need more control, you can pass refetch functions from child components to the parent:

// Child component
const ChildComponent = ({ onRefetchReady }) => {
  const { queryResult } = useList({
    resource: "products"
  });
  
  // Pass the refetch function to parent when component mounts
  useEffect(() => {
    onRefetchReady(queryResult.refetch);
  }, []);
  
  return <div>...</div>;
};

// Parent component
const EditPage = () => {
  const refetchFunctions = useRef([]);
  
  const registerRefetch = (refetchFn) => {
    refetchFunctions.current.push(refetchFn);
  };
  
  const handleGlobalRefetch = () => {
    refetchFunctions.current.forEach(refetch => refetch());
  };
  
  return (
    <div>
      <button onClick={handleGlobalRefetch}>Refetch All</button>
      <ChildComponent1 onRefetchReady={registerRefetch} />
      <ChildComponent2 onRefetchReady={registerRefetch} />
    </div>
  );
};

// Child component
const ChildComponent = ({ onRefetchReady }) => {
  const { queryResult } = useList({
    resource: "products"
  });
  
  // Pass the refetch function to parent when component mounts
  useEffect(() => {
    onRefetchReady(queryResult.refetch);
  }, []);
  
  return <div>...</div>;
};

// Parent component
const EditPage = () => {
  const refetchFunctions = useRef([]);
  
  const registerRefetch = (refetchFn) => {
    refetchFunctions.current.push(refetchFn);
  };
  
  const handleGlobalRefetch = () => {
    refetchFunctions.current.forEach(refetch => refetch());
  };
  
  return (
    <div>
      <button onClick={handleGlobalRefetch}>Refetch All</button>
      <ChildComponent1 onRefetchReady={registerRefetch} />
      <ChildComponent2 onRefetchReady={registerRefetch} />
    </div>
  );
};

For custom queries For useCustom hooks, you need to set a specific query key to be able to invalidate them:

// In child component
useCustom({
  url: "/api/some-endpoint",
  method: "get",
  queryOptions: {
    queryKey: ["custom-key"],
  },
});

// In parent component
const queryClient = useQueryClient();
queryClient.invalidateQueries(["custom-key"]);

// In child component
useCustom({
  url: "/api/some-endpoint",
  method: "get",
  queryOptions: {
    queryKey: ["custom-key"],
  },
});

// In parent component
const queryClient = useQueryClient();
queryClient.invalidateQueries(["custom-key"]);

This approach is documented in the useCustom documentation. Automatic refetching with mutations It's worth noting that refine's mutation hooks (useCreate, useUpdate, useDelete, etc.) automatically invalidate related queries by default. For example, when you use useUpdate, it will automatically refetch list, many, and detail queries for that resource, as mentioned in the useUpdate documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@680514070167683118> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

global refetch

Did you find this page helpful?