useCollection

πŸ“ž Call this hook to get a selected collection.

The collection will be automatically selected based on url parameters from urlPattern (see MojitoHooksProvider for more details).

The useCollection hook will call and return a response from the collectionBySlug API.

Hooks Sample Code

...
import useCollection from "mojito-hooks/useCollection";

function App {
    const { collection, isLoading } = useCollection();

    if(isLoading) return <Loader />;

    if(collection) return (
        <div>
            <h1>{collection.name}</h1>
            <div>
                {collection.items.map((item) => <DrawCollectionItem item={item} />)}
            </div>
        </div>
    );

    return <div>No collection available</div>
}

Parameters

PropertyDescriptionTypeDefault
slugThe slug of the collection to load. Optional.StringDynamic from page url (see urlPatterns)
pathnamePage url pathname that contains collection slug. Optional.StringThe page url. e.g., getCollectionSlugFromPathname();

πŸ“˜

pathname can be used to pass the URL pathname on SSR.

Result

PropertyDescriptionType
collectionThe selected collection.MojitoCollection
isLoadingDisplay request loading status, provided for convenience.Boolean
errorThe error object for the query, if an error was thrown.Error
refetchA function to manually refetch the query.(options: T) => Promise<U>
queryResultOriginal React-Query query result.QueryResult<T>