Commerce-sdk-react-preview NPM

Commerce SDK React

A library of React hooks for fetching data from Salesforce B2C Commerce.

Documentation

The full documentation for PWA Kit and Managed Runtime is hosted on the Salesforce Developers portal.

PWA-Kit Integration

To integration this library with your PWA-Kit application you can use the CommerceApiProvider directly given that you use the withReactQuery higher order component to wrap your AppConfig component. Below is a snippet of how this is accomplished.

// app/components/_app-config/index.jsx

import {withReactQuery} from 'pwa-kit-react-sdk/ssr/universal/components/with-react-query'

const AppConfig = ({children}) => {
    return (
        <CommerceApiProvider {...commerceApiProviderProps}>
            {children}
        </CommerceApiProvider>
    )
} 

// Set configuration options for react query.
// NOTE: This configuration will be used both on the server-side and client-side.
const options = {
    queryClientConfig: {
        defaultOptions: {
            queries: {
                retry: false
            },
            mutations: {
                retry: false
            }
        }
    }
}

export default withReactQuery(AppConfig, options)

Generic Integration

You can use this library in any React application provided you bring your own QueryClient and QueryClientProvider. Below is a sample integration:

import {QueryClient, QueryClientConfig, QueryClientProvider} from '@tanstack/react-query'


const App = ({children}) => {
    const queryClient = new QueryClient(queryClientConfig)

    return (
        <QueryClientProvider client={queryClient}>
            <CommerceApiProvider {...commerceApiProviderProps}>
                {children}
            </CommerceApiProvider>
        </QueryClientProvider>
    )
} 

export default App