useCreate

This hook allows to call dataProvider.create() when the callback is executed.

// syntax
const [create, { data, isLoading, error }] = useCreate(
    resource,
    { data, meta },
    options
);

The create() method can be called with the same parameters as the hook:

create(
    resource,
    { data },
    options
);

So, should you pass the parameters when calling the hook, or when executing the callback? It’s up to you; but if you have the choice, we recommend passing the parameters when calling the create callback (second example below).

// set params when calling the hook
import { useCreate, useRecordContext } from 'react-admin';

const LikeButton = () => {
    const record = useRecordContext();
    const like = { postId: record.id };
    const [create, { isLoading, error }] = useCreate('likes', { data: like });
    const handleClick = () => {
        create()
    }
    if (error) { return <p>ERROR</p>; }
    return <button disabled={isLoading} onClick={handleClick}>Like</button>;
};

// set params when calling the create callback
import { useCreate, useRecordContext } from 'react-admin';

const LikeButton = () => {
    const record = useRecordContext();
    const like = { postId: record.id };
    const [create, { isLoading, error }] = useCreate();
    const handleClick = () => {
        create('likes', { data: like })
    }
    if (error) { return <p>ERROR</p>; }
    return <button disabled={isLoading} onClick={handleClick}>Like</button>;
};

Tip: If you use TypeScript, you can specify the record and error types for more type safety:

useCreate<Product, Error>(undefined, undefined, {
    onError: (error) => {
        // error is an instance of Error.
    },
    onSettled: (data, error) => {
        // data is an instance of Product.
        // error is an instance of Error.
    },
})