useProductReferences(id?: string)

The useProductReferences() composable allows for loading and storing Product References.

Be careful about shared state

You should pass a unique ID as a parameter to avoid state conflicts when using multiple instances of this composable. Every instance with the same ID (or those that lack it) will share the same state, even on different pages.

references

Main data object populated by the search() method.

Type

const references: ComputedRef<ProductReference[]>;

References: ProductReference

Example

import { useProductReferences } from '@vsf-enterprise/sapcc';

export default {
  setup() {
    const { references } = useProductReferences('unique-id');

    return { references };
  }
};

loading

Indicates whether the search() method is in progress.

Type

const loading: ComputedRef<boolean>;

error

Contains errors thrown by the search() method.

Type

const error: ComputedRef<UseProductReferencesErrors>;

References: UseProductReferencesErrors

search()

Fetches Product References from the API and saves the fetched array in the references property. Under the hood, it sends a request to the getProductReferences API endpoint.

Type

interface GetProductReferencesProps extends BaseProps {
  productCode: string;
  pageSize?: number;
  referenceType?: keyof typeof ProductReferenceTypeEnum
}

async function search(searchParams: GetProductReferencesProps): Promise<void>;

References: GetProductReferencesProps, BaseProps, ProductReferenceTypeEnum

Basic Example

import { onSSR } from '@vue-storefront/core';
import { useProductReferences } from '@vsf-enterprise/sapcc';

export default {
  setup() {
    const { search } = useProductReferences('unique-id');

    onSSR(async () => {
      await search({ productCode: '1' });
    });
  }
};

Custom response fields example

import { onSSR } from '@vue-storefront/core';
import { useProductReferences } from '@vsf-enterprise/sapcc';

export default {
  setup() {
    const { search } = useProductReferences('unique-id');

    onSSR(async () => {
      await search({
        productCode: '1',
        fields: 'references(target(FULL))'
      });
    });
  }
};