Skip to content

ng-craft-demo Examples

Primitives Examples (Low-level API)

1. Query - Basic Example

Description: Primitive version using query() functions directly for finer control over data fetching and caching.

🔗 Open in StackBlitz


2. Mutation - Data Modification

Description: Primitive version using mutation() functions directly for manual control of modification operations.

🔗 Open in StackBlitz


3. List with Pagination - Paginated List

Description: Primitive implementation of pagination with manual management of query params and pagination state.

🔗 Open in StackBlitz


4. Granular Mutation - Granular Mutations

Description: Primitive version of granular mutations with manual cache invalidation and optimistic updates management.

🔗 Open in StackBlitz


5. Full Demo - Complete Demo

Description: Comprehensive example using primitives for full control of all aspects of data management, without high-level abstractions.

🔗 Open in StackBlitz


Craft Examples (High-level API)

1. Query - Basic Example

Description: Demonstrates the use of craftQuery to fetch user data with automatic cache and state management.

🔗 Open in StackBlitz


2. Mutation - Data Modification

Description: Illustrates the use of craftMutations to create, update, and delete users with automatic cache invalidation.

🔗 Open in StackBlitz


3. List with Pagination - Paginated List

Description: Demonstrates managing a paginated list with craftQueryParam to synchronize pagination state with the URL and insertPaginationPlaceholderData for a smooth user experience.

🔗 Open in StackBlitz


4. Granular Mutation - Granular Mutations

Description: Shows how to perform granular mutations on lists with insertReactOnMutation to automatically update the cache without reloading all data.

🔗 Open in StackBlitz


5. Full Demo - Complete Demo

Description: Comprehensive example combining queries, mutations, async methods, state management, query params, pagination, and localStorage persistence. Demonstrates all Craft features in a realistic application.

🔗 Open in StackBlitz

Notes

All examples include their own api.service.ts to simulate API calls and are fully functional.