Data-layer and data-fetching

When extending the UX/UI of Sales App, you may need to present data to the user, whether it’s data from the Sales App flow itself, additional information from VTEX APIs, or data from your own or third-party APIs.

In extension points, there are two main ways to interact with data:

Data-layer resources, such as the useCart hook or useCartItem
Fetching data from VTEX APIs or external APIs

Data-layer

Whenever possible, prefer using the data-layer from the Sales App itself. This is recommended because these data are already cached within the core Sales App’s data-layer, so accessing data (e.g., useCartItem) won’t trigger additional requests, which is highly beneficial for both applications performance and your extensions.

All interactions with the Sales App data-layer happen through functions and hooks provided by the @vtex/sales-app package. For example, if you need to access cart item data while using the cart.cart-item.after extension point, you can use the useCartItem hook:

import { useCartItem } from '@vtex/sales-app'

const MyComponent = () => {
  const { item } = useCartItem()

  return <p>Quantity: {item.quantity}</p>
}

Data-fetching

The data in the Sales App layer might not always be sufficient for building your extension. Sometimes, you may need to communicate with a VTEX API (e.g., Intelligent Search) or even your own APIs or third-party APIs.

In these cases, you can simply use the browser’s Fetch API to make requests, just as you would in your everyday React applications:

import React, { useState, useEffect } from 'react';

function MyCustomData() {
  const [response, setResponse] = useState({ status: 'loading' });

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://my-custom-data-api.com/custom-data');
        const data = await response.json();
        setResponse({ status: 'data', data });
      } catch (error) {
        setResponse({ status: 'error' })
      }
    };
    fetchData();
  }, []);

  if(response.status === 'loading') return <MySkeleton />
  if(response.status === 'error') return null

  return <p>Data: {data.information}</p>
}