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: string;
    title: string;
}

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

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

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

tip

mutate can also accept lifecycle methods like onSuccess and onError.

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	{}

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>