Wix React SDKs

In the Business Buddy app, on the Products page, users can choose a product from the site's Wix Store.

To work with the Wix apps on a user's site, we use the Wix Dashboard React SDK and the Wix React SDK. We already showed how to set up your page components with the Dashboard React SDK in the previous section. In this section, we'll use the React SDK to retrieve site data to display in the app.

Permissions

Before getting started making calls with the SDK, you need to request the proper permissions.

You can find out which permissions your app needs by checking the API reference for the functions your call. Our app queries store products, so it needs the Read Products permission.

You add permissions to your app in the Developers Center by selecting your app and then going to the Permissions tab.

Get products

After setting up permissions, our app can get a list of products from the site's store.

In our Products page code add the following imports. Make sure to install the packages as well:

1
import { useWixModules } from '@wix/sdk-react';
2
import { products } from '@wix/stores';
3
import { useQuery } from 'react-query';

These imports give us access to the Wix SDK overall and the particular functionality we need.

Once we import everything, we'll use the useWixModules() hook create an initialized copy of the products module that we can use directly in our page component code. We retrieve the products module's queryProducts() function that we can use to access store products.

1
const { queryProducts } = useWixModules(products);

Here, we use the React useQuery() hook to query for products whose names start with whatever has been entered into our AutoComplete component. We also make sure to handle any errors.

1
const {
2
  data: products,
3
  isLoading,
4
  error,
5
} = useQuery(['products', searchQuery], () =>
6
  queryProducts().startsWith('name', searchQuery).find()
7
);
8

9
if (error) return <div>Something went wrong</div>;

While we're at it, let's not forget to replace our dummy current product with the proper type now that we have it.

1
const [currentProduct, setCurrentProduct] = React.useState<
2
  products.Product | undefined
3
>();

Populate products

Now that we have a list of products, we can use them to populate the AutoComplete component and define what happens when a user selects a product.

First, we set the AutoComplete component's status.

1
status={isLoading ? 'loading' : undefined}

Then, we set the AutoComplete component's options to the products we got from the query by mapping them to a list of options objects with id and value properties.

1
options={products?.items.map((product) => ({
2
  id: product._id!,
3
  value: product.name,
4
}))}

Next, we set the AutoComplete component's onSelect to set the component's current product.

1
onSelect={(e) => {
2
  setCurrentProduct(
3
    products!.items.find(
4
      (product) => product._id === (e.id as string)
5
    )
6
  );
7
}}

While we're at it, we also set the AutoComplete component's onChange to set the search query and clear the current product.

1
onChange={(e) => {
2
  setSearchQuery(e.target.value);
3
  setCurrentProduct(undefined);
4
}}

Finally, we set the AutoComplete component's value to the current product if there is one.

1
value={currentProduct?.name ?? undefined}

Up next

Now that you understand how to work with the Wix SDK, let's see how to work with the Dashboard SDK.