Back to React Admin

useRefresh

docs_headless/src/content/docs/useRefresh.md

5.14.61.2 KB
Original Source

This hook returns a function that forces a refetch of all the active queries, and a rerender of the current view when the data has changed.

jsx
import { useRefresh } from 'ra-core';

const RefreshButton = () => {
    const refresh = useRefresh();
    const handleClick = () => {
        refresh();
    }
    return <button onClick={handleClick}>Refresh</button>;
};

It is common to use it after a mutation, e.g. after deleting a record.

jsx
import * as React from 'react';
import { useDelete, useNotify, useRefresh, useRecordContext } from 'ra-core';

const DeleteCommentButton = () => {
    const refresh = useRefresh();
    const record = useRecordContext();
    const notify = useNotify();
    const [deleteOne, { isPending }] = useDelete(
        'comments',
        { id: record.id },
        {
            onSuccess: (data) => {
                refresh();
                notify('Comment deleted');
            },
            onError: (error) => {
                notify(`Comment deletion error: ${error.message}`, { type: 'error' });
            },
        }
    );
    
    return <button onClick={() => deleteOne()} disabled={isPending}>Delete</button>;
};