Skip to main content

useProducts

The useProducts hook is used to get the products data by passing the query params.

ParamsDescription
queryData to be fetched
filtersFilters to be applied
sortSort to be applied
limitLimit of data to be fetched

Usage​


import { useProducts } from '@appmaker-xyz/shopify';

const {
    data,
    isLoading,
    isError,
    hasNextPage,
    fetchNextPage,
    isFetchingNextPage,
    productList,
    isFetching,
  } = useProducts({ query, filters: appliedFilters, sort: appliedSort, limit });

Example : Fetch products by product ids​


import { useProducts } from '@appmaker-xyz/shopify';

const productIds = ['gid://shopify/Product/123456789', 'gid://shopify/Product/987654321'];

const { productList } = useProducts({ query: { productIds } });

Example : Fetch products by collection id with filters and sort​


import { useProducts } from '@appmaker-xyz/shopify';
import { usePageState } from '@appmaker-xyz/core';

const appliedFilter = usePageState((state) => state.filter);
const appliedSort = usePageState((state) => state.sort);

const { productList } = useProducts({
    query: { collectionId: 'gid://shopify/Collection/268904398894' }, // Fetch products by collection id
    filters: appliedFilters,
    sort: appliedSort,
  });

Example : Fetch products by collection id​


import { useProducts } from '@appmaker-xyz/shopify';

const { productList } = useProducts({
    query: { collectionId: 'gid://shopify/Collection/268904398894' }, // Fetch products by collection id
    limit: 10,
  });

Example : Fetch products by recommendation id​


import { useProducts } from '@appmaker-xyz/shopify';

const { productList } = useProducts({
    query: { productRecommendationId: 'gid://shopify/Product/123456789' }, // Fetch products by recommendation id
    limit: 10,
  });

Example : Fetch products by search query​


import { useProducts } from '@appmaker-xyz/shopify';

const { productList } = useProducts({
    query: { searchQuery: 'T-shirt' }, // Fetch products by search query
    limit: 10,
  });