Skip to main content
Version: Next

wasp/client/crud

Client-side APIs for the Queries and Actions of your Automatic CRUD specs.

Wasp generates one export for each crud spec you declare, named after it (e.g. Tasks for crud("Tasks", "Task", { ... })). Each one is a Crud object.

All CRUD operations are implemented with Queries and Actions, so they have the same features (e.g. automatic SuperJSON serialization, full-stack type safety when using TypeScript).

Placeholder Types​

Crud​

Placeholder

You can't import this name. Wasp generates the real exports from your Wasp Spec, named as the top of this page explains. This entry documents their general type.

The type of the client-side object for a crud spec.

It only has the fields for the operations you enabled in the spec. In TypeScript, their input and output types come from the operations' default implementations, or from your overrides (see wasp/server/crud).

Example​

import { Tasks } from "wasp/client/crud";

export const MainPage = () => {
  const { data: tasks, isLoading, error } = Tasks.getAll.useQuery();
  const createTask = Tasks.create.useAction();
  // ...
};

See​

Using the generated CRUD operations on the client

Properties​

create?​

optional create?: CrudAction<any, any>

Creates an Entity.

By default, it takes the new Entity's data, and returns the created Entity.

Example​
const createTask = Tasks.create.useAction();
await createTask({ description: "Buy some eggs", isDone: false });
delete?​

optional delete?: CrudAction<any, any>

Deletes an Entity.

By default, it takes the Entity's ID (e.g. { id: 1 }), and returns the deleted Entity.

Example​
const deleteTask = Tasks.delete.useAction();
await deleteTask({ id: 1 });
get?​

optional get?: CrudQuery<any, any>

Gets a single Entity.

By default, it takes the Entity's ID (e.g. { id: 1 }), and returns the matching Entity, or null if there isn't one.

Example​
const { data: task } = Tasks.get.useQuery({ id: 1 });
getAll?​

optional getAll?: CrudQuery<any, any>

Gets all the Entities.

By default, it takes no arguments, and returns an array with all the Entities. In TypeScript, pass an empty object ({}) when you call its query function directly.

Example​
const { data: tasks } = Tasks.getAll.useQuery();
update?​

optional update?: CrudAction<any, any>

Updates an Entity.

By default, it takes the Entity's ID (e.g. id) and the fields to update, and returns the updated Entity.

Example​
const updateTask = Tasks.update.useAction();
await updateTask({ id: 1, isDone: true });

Referenced Types​

CrudAction​

A CRUD Action (create, update, or delete) on the client.

Type Parameters​

Input​

Input

The type of the Action's input payload.

Output​

Output

The type of the Action's return value.

Properties​

action​

action: Action<Input, Output>

The Action itself. You can call it directly.

useAction​

useAction: (actionOptions?) => Action<Input, Output>

Enhances the Action with useAction (e.g. to add optimistic updates).

Parameters​
actionOptions?​

The options for useAction.

optimisticUpdates​

OptimisticUpdateDefinition<Input, any>[]

Returns​

Action<Input, Output>

A function with the same API as the Action.

CrudQuery​

A CRUD Query (get or getAll) on the client.

Type Parameters​

Input​

Input

The type of the Query's input payload.

Output​

Output

The type of the Query's return value.

Properties​

query​

query: Query<Input, Output>

The Query itself. You can call it directly, or pass it to useQuery.

useQuery​

useQuery: (queryFnArgs?, options?) => UseQueryResult<Output, Error>

Calls the Query with useQuery.

Parameters​
queryFnArgs?​

Input

The arguments object (payload) to pass to the Query.

options?​

any

A react-query options object for this particular Query.

Returns​

UseQueryResult<Output, Error>