useDataSourceV2

This hook provides data fetching for single-page (non-paginated) data sources.

Import

import { useDataSourceV2 } from '@appmaker-xyz/core';

Basic Usage

const [queryResult, { item }] = useDataSourceV2({
  dataSource: {
    source: 'shopify',
    methodName: 'productDetail',
    params: { handle: 'my-product' },
    dataExtractor: (response) => response?.data?.data?.product,
  },
  enabled: true,
});

if (queryResult.isLoading) return <Loading />;

// item contains the extracted data
console.log(item.title);

Parameters

Parameter	Type	Description
dataSource	Object	Data source configuration (see below).
dataSource.source	string	The data source identifier (e.g., 'shopify').
dataSource.methodName	string	The method to call on the data source.
dataSource.params	Object	Parameters passed to the data source method.
dataSource.dataExtractor	Function	Optional function to extract the desired data from the raw response.
enabled	boolean	Whether the query should execute.
filterParams	Object	Optional filter parameters appended to the query key.

Return Value

Returns a tuple [queryResult, dataSourceResult]:

Index	Type	Description
0	Object	Query result object containing isLoading, isError, data, refetch, etc.
1	Object	Contains item — the extracted data (via dataExtractor if provided, otherwise the raw response).

Applying a GraphQL Query

To fetch data using a custom Shopify Storefront API GraphQL query, use methodName: 'gqlQuery' with the query and variables params:

const [{ isLoading }, { item }] = useDataSourceV2({
  dataSource: {
    source: 'shopify',
    methodName: 'gqlQuery',
    params: {
      query: `
        query GetProduct($handle: String!) {
          product(handle: $handle) {
            id
            title
            description
            priceRange {
              minVariantPrice {
                amount
                currencyCode
              }
            }
          }
        }
      `,
      variables: { handle: 'my-product-handle' },
    },
    dataExtractor: (response) => response?.data?.data?.product,
  },
  enabled: !!handle,
});