Data Management
The FDK Store is a package that serves as a wrapper over the FDK Client Javascript SDK, providing users with a convenient interface to interact with the SDK's functionality. This package utilizes Redux Toolkit to manage the application state and automatically updates the store based on actions performed through the SDK. The FDK Store exports a class that encapsulates the Redux store and exposes methods for interacting with the SDK and retrieving data from the store. It also includes a getters object that provides getter functions for different slices of the store
fdk-store:- https://github.com/gofynd/fdk-store/blob/v2.0.2/docs/API.md
fdk-store-gql:- https://github.com/gofynd/fdk-store-gql/blob/v1_0_1/README.md
Installation
To install the FDK Store package in your project, run the following command:
npm install `https://github.com/gofynd/fdk-store.git#v2.0.2
Usage
Importing the Package
To import the FDK Store package into your project, use the following import statement:
import FDKStore from 'fdk-store';
Creating an Instance
Create an instance of the FDKStore
const fpiOptions = {
applicationID,
applicationToken,
domain,
storeInitialData,
};
const { client: fpi } = new FDKStore(fpiOptions);
📄️ Using FPI Client Instance
Use the FPI (Fynd Platform Interface) client in Fynd Commerce themes via the useFPI hook available on every page. Read Redux state and sync data with the FDK Store for server and client rendering. Essential guide for fetching catalog, cart, and user data in theme components.
📄️ Set Custom Value to Store
Store and retrieve custom values in the Fynd Commerce theme Redux store using fpi.custom.setValue and fpi.getters.CUSTOM_VALUE. Persist theme-specific state across pages and components without modifying core FDK Store slices.
📄️ Observe Store
Subscribe to specific Redux store slices in Fynd Commerce themes using the observeStore function for vanilla JavaScript environments. Receive updates when store data changes, similar to useGlobalStore but usable outside React components. Ideal for non-React scripts and legacy integrations within themes.
📄️ FPI Mutation Functions
Custom GraphQL functions let Fynd Commerce extensions intercept and modify GraphQL mutations and queries triggered by the storefront. Customize frontend GraphQL behavior dynamically without changing core theme code. Covers the three key components of the custom GraphQL flow for extensible storefronts.