useCreate

useCreate is a modified version of react-query's useMutation for create mutations.

It uses create method as mutation function from the dataProvider which is passed to <Refine>.

Features

• Shows notifications after the mutation succeeds or fails.

• Automatically invalidates the list queries after mutation is succesfully run. Refer to React Query docs for detailed information →

Usage

Let'say we have a resource named categories

https://api.fake-rest.refine.dev/categories

{
    [
        {
            id: 1,
            title: "E-business",
        },
        {
            id: 2,
            title: "Virtual Invoice Avon",
        },
        {
            id: 3,
            title: "Unbranded",
        },
    ];
}

type CategoryMutationResult = {
    id: number;
    title: string;
};

import { useCreate } from "@pankod/refine-core";

const { mutate } = useCreate<CategoryMutationResult>();

mutate({
    resource: "categories",
    values: {
        title: "New Category",
    },
});

tip

mutate can also accept lifecycle methods like onSuccess and onError.

mutate(
    {
        resource: "categories",
        values: {
            title: "New Category",
        },
    },
    {
        onError: (error, variables, context) => {
            // An error happened!
        },
        onSuccess: (data, variables, context) => {
            // Let's celebrate!
        },
    },
);

Refer to react-query docs for further information. →

After the mutation runs, categories will be updated as below:

https://api.fake-rest.refine.dev/categories

{
    [
        {
            id: 1,
            title: "E-business",
        },
        {
            id: 2,
            title: "Virtual Invoice Avon",
        },
        {
            id: 3,
            title: "Unbranded",
        },
        {
            id: 4,
            title: "New Category",
        },
    ];
}

note

Queries that use /categories endpoint will be automatically invalidated to show the updated data. For example, data returned from useList will be automatically updated.

tip

useCreate returns react-query's useMutation result which includes a lot properties, one of which being mutate.

info

Variables passed to mutate must have these types.

{
    resource: string;
    values: TVariables = {};
}

API

Properties

Property	Description	Type	Default
resource Required	Resource name for API data interactions	string
values Required	Values for mutation function	TVariables	{}
successNotification	Successful Mutation notification	SuccessErrorNotification	"Successfully created resource"
errorNotification	Unsuccessful Mutation notification	SuccessErrorNotification	"There was an error creating resource (status code: statusCode)"
metaData	Metadata query for dataProvider	MetaDataQuery	{}
dataProviderName	If there is more than one dataProvider, you should use the dataProviderName that you will use.	string	default
invalidates	You can use it to manage the invalidations that will occur at the end of the mutation.	all, resourceAll, list, many, detail, false	["list", "many"]

Type Parameters

Property	Desription	Type	Default
TData	Result data of the mutation. Extends BaseRecord	BaseRecord	BaseRecord
TError	Custom error object that extends HttpError	HttpError	HttpError
TVariables	Values for mutation function	{}	{}

Return value

Description	Type
Result of the react-query's useMutation	UseMutationResult< { data: TData }, TError, { resource: string; values: TVariables; }, unknown>