Function useCreate

A hook that helps you create a new resource.

The hook uses useMutation from @tanstack/react-query under the hood, so it accepts all the same options.

The hook returns an object with a single property, create, which is a function that takes the data and params of the resource to create, and calls the mutation function with the data and the resource.

The hook also sets the query data for the created resource and invalidates the list of resources, so that the list is refetched when the mutation is successful.

Example

import { useCreate } from '@tanstack/react-query-paginate';

type TData = { id: 1, name: 'Test' };
type TFormData = { name: string; email: string };
const PATH = 'users/{id}/messages';

const { create } = useCreate<typeof PATH, TData, TFormData>({
  resourcePath: PATH,
});

create({
  data: {
    name: 'John Doe',
    email: 'john@example.com',
  },
 resourceParams: {
   id: 10,
 },
  params: {
    teamId: 1,
  },
});
  • useCreate<TPath, TData, TFormData, TExtraData>(options): {
        create: ((__namedParameters: CreateOneVariables<TPath, TFormData, TExtraData>) => void);
        mutation:
            | {
                context: unknown;
                data: undefined;
                error: null;
                failureCount: number;
                failureReason: null | CustomError;
                isError: false;
                isIdle: true;
                isPaused: boolean;
                isPending: false;
                isSuccess: false;
                mutateAsync: UseMutateAsyncFunction<QueryResponse<TData> | QueryResponse<TData>[], CustomError, MutateVariables<TPath, TFormData, TExtraData>, unknown>;
                reset: (() => void);
                status: "idle";
                submittedAt: number;
                variables: undefined;
            }
            | {
                context: unknown;
                data: undefined;
                error: null;
                failureCount: number;
                failureReason: null | CustomError;
                isError: false;
                isIdle: false;
                isPaused: boolean;
                isPending: true;
                isSuccess: false;
                mutateAsync: UseMutateAsyncFunction<QueryResponse<TData> | QueryResponse<TData>[], CustomError, MutateVariables<TPath, TFormData, TExtraData>, unknown>;
                reset: (() => void);
                status: "pending";
                submittedAt: number;
                variables: MutateVariables<TPath, TFormData, TExtraData>;
            }
            | {
                context: unknown;
                data: undefined;
                error: CustomError;
                failureCount: number;
                failureReason: null | CustomError;
                isError: true;
                isIdle: false;
                isPaused: boolean;
                isPending: false;
                isSuccess: false;
                mutateAsync: UseMutateAsyncFunction<QueryResponse<TData> | QueryResponse<TData>[], CustomError, MutateVariables<TPath, TFormData, TExtraData>, unknown>;
                reset: (() => void);
                status: "error";
                submittedAt: number;
                variables: MutateVariables<TPath, TFormData, TExtraData>;
            }
            | {
                context: unknown;
                data: QueryResponse<TData> | QueryResponse<TData>[];
                error: null;
                failureCount: number;
                failureReason: null | CustomError;
                isError: false;
                isIdle: false;
                isPaused: boolean;
                isPending: false;
                isSuccess: true;
                mutateAsync: UseMutateAsyncFunction<QueryResponse<TData> | QueryResponse<TData>[], CustomError, MutateVariables<TPath, TFormData, TExtraData>, unknown>;
                reset: (() => void);
                status: "success";
                submittedAt: number;
                variables: MutateVariables<TPath, TFormData, TExtraData>;
            };
    }

  • Type Parameters

    • TPath extends string

      The API path as a string.

    • TData = any

      The expected shape of the data returned by the API.

    • TFormData = OnlyObject

      The shape of the data that will be sent to the API during the mutation.

    • TExtraData = any

    Parameters

    Returns {
        create: ((__namedParameters: CreateOneVariables<TPath, TFormData, TExtraData>) => void);
        mutation:
            | {
                context: unknown;
                data: undefined;
                error: null;
                failureCount: number;
                failureReason: null | CustomError;
                isError: false;
                isIdle: true;
                isPaused: boolean;
                isPending: false;
                isSuccess: false;
                mutateAsync: UseMutateAsyncFunction<QueryResponse<TData> | QueryResponse<TData>[], CustomError, MutateVariables<TPath, TFormData, TExtraData>, unknown>;
                reset: (() => void);
                status: "idle";
                submittedAt: number;
                variables: undefined;
            }
            | {
                context: unknown;
                data: undefined;
                error: null;
                failureCount: number;
                failureReason: null | CustomError;
                isError: false;
                isIdle: false;
                isPaused: boolean;
                isPending: true;
                isSuccess: false;
                mutateAsync: UseMutateAsyncFunction<QueryResponse<TData> | QueryResponse<TData>[], CustomError, MutateVariables<TPath, TFormData, TExtraData>, unknown>;
                reset: (() => void);
                status: "pending";
                submittedAt: number;
                variables: MutateVariables<TPath, TFormData, TExtraData>;
            }
            | {
                context: unknown;
                data: undefined;
                error: CustomError;
                failureCount: number;
                failureReason: null | CustomError;
                isError: true;
                isIdle: false;
                isPaused: boolean;
                isPending: false;
                isSuccess: false;
                mutateAsync: UseMutateAsyncFunction<QueryResponse<TData> | QueryResponse<TData>[], CustomError, MutateVariables<TPath, TFormData, TExtraData>, unknown>;
                reset: (() => void);
                status: "error";
                submittedAt: number;
                variables: MutateVariables<TPath, TFormData, TExtraData>;
            }
            | {
                context: unknown;
                data: QueryResponse<TData> | QueryResponse<TData>[];
                error: null;
                failureCount: number;
                failureReason: null | CustomError;
                isError: false;
                isIdle: false;
                isPaused: boolean;
                isPending: false;
                isSuccess: true;
                mutateAsync: UseMutateAsyncFunction<QueryResponse<TData> | QueryResponse<TData>[], CustomError, MutateVariables<TPath, TFormData, TExtraData>, unknown>;
                reset: (() => void);
                status: "success";
                submittedAt: number;
                variables: MutateVariables<TPath, TFormData, TExtraData>;
            };
    }

    An object with a single properties, create and mutation.

    create is a function that takes the data and params of the resource to create, and calls the mutation function with the data and the resource.

    mutation is result useMutation without propery mutate

Settings

Member Visibility