
Product
Socket Now Protects the Chrome Extension Ecosystem
Socket is launching experimental protection for Chrome extensions, scanning for malware and risky permissions to prevent silent supply chain attacks.
@commercetools-frontend/sdk
Advanced tools
Tools for declarative fetching.
$ npm install --save @commercetools-frontend/sdk
There are two sides to declarative fetching:
This module aims to provide the necessary parts for both.
⚠️ Deprecated This component will likely not get developed any further. Use regular redux-style action creators for now. In the future we plan to use Apollo to replace this completely.
The provided Sdk.Get
component can be rendered to fetch data. It uses the
middleware behind the scenes but adds some features on top. See
components/sdk-fetch/README.md for details.
The provided middleware takes an object which describes what data should be fetched. The middleware transforms that description into a promise and resolves the promise. It passes the response back to the callee.
The middleware is a thin wrapper around sdk-client
. It offers a way to declaratively describe the data requirements.
A Redux action using one of the action creators below needs to be dispatched. It contains the description of what to get/post/delete. The sdk
middleware then turns the declarative description into imperative API calls on sdk-client
. The dispatched action resolves with the result of sdk-client
.
The action creators can be imported as
import { actions as sdkActions } from '@commercetools-frontend/sdk';
The supported action creators are:
sdkActions.get(config)
: sends a HTTP GET
sdkActions.post(config)
: sends a HTTP POST
sdkActions.del(config)
: sends a HTTP DELETE
sdkActions.head(config)
: sends a HTTP HEAD
There are two ways to describe an endpoint:
uri
: pass the URI as stringservice
: uses the @commercetools/api-request-builder
to build the URI. You can pass config.options
to supply the necessary request parametersThe post
action creator additionally requires a config.payload
object or string, containing the request payload.
The
mcApiProxyTarget
values are exposed from the@commercetools-frontend/constants
package, asMC_API_PROXY_TARGETS
. The value will be used to build a prefix to theuri
as/proxy/<mcApiProxyTarget>/<uri>
.
Usage with uri
{
uri: String,
mcApiProxyTarget?: ApiProxyTarget,
payload?: Object | String
}
uri
can be relative or absolute. It gets passed to sdk-client
as-isThis approach must be used when querying something other than the CTP API. In case the CTP API is queried it is recommended to use service
and options
since that is easier to test. It is totally valid to provide uri
only as well though.
When both, uri
and options
(or service
) are present, the uri
takes precedence.
Usage with service
and options
{
service: String,
options: Object,
mcApiProxyTarget?: ApiProxyTarget,
payload?: Object | String
}
Before using the sdk-client
the sdk
middleware combines service
and options
using api-request-builder
's parse
method to form a uri
. It then makes the exact same request as when specifying uri
directly.
The supported options
can be found in the api-request-builder
's documentation under the Declarative Usage section.
By default, all requests with the SDK are configured to be sent to the MC API. However, Custom Applications using the Proxy to external API need to configure the request a bit differently, and send additional headers.
To make it easier to make requests to the proxy endpoint using the SDK, there is a new action creator wrapper that comes with built-in configuration options.
The exported action creators have a new export forwardTo
, which is an object containing wrappers around the normal action creators.
actions.forwardTo.get(options);
actions.forwardTo.del(options);
actions.forwardTo.head(options);
actions.forwardTo.post(options);
The options for the action creators are the same as the Usage with uri
, except that the uri
value needs to be the URL to the external API (see X-Forward-To
header).
The forwardTo
action creators additionally set the following headers:
Accept-version
X-Forward-To
X-Forward-To-Audience-Policy
For more information, check the Proxy to external API documentation.
Failed requests will result in a rejected promise. The sdk-client
's error handling applies, so network errors and CTP API errors on the content itself result in a rejected promise.
The sdk
package does not provide any error handling out of the box. It's the application's responsibility to handle errors (e.g. show a notification, track the error).
The Merchant Center has a handleActionError
function which is what we currently use for error handling. It logs the error to the tracking tool (Sentry) and shows a notification to the client. This should be used whenever a more special error handling is not necessary.
import { actions as sdkActions } from '@commercetools-frontend/sdk';
const fetchProductById = (productId) =>
sdkActions.get({
service: 'products',
options: { id: productId },
});
import * as globalActions from '@commercetools-frontend/actions-global';
class ProductPage extends React.Component {
state = { product: null };
componentDidMount() {
this.props.fetchProductById(this.props.productId).then(
(product) => {
this.setState({ product });
},
(error) => {
this.props.onActionError(error, 'ProductPage/fetchProductById');
}
);
}
render() {
if (!this.state.product) return <LoadingSpinner />;
return <div>{JSON.stringify(this.state.product)}</div>;
}
}
// and finally we need to pass the bound action creator to the component using plain old redux
export default connect(null, {
fetchProductById: productsActions.fetchProductById,
onActionError: globalActions.handleActionError,
})(ProductPage);
FAQs
Tools for declarative fetching
The npm package @commercetools-frontend/sdk receives a total of 2,392 weekly downloads. As such, @commercetools-frontend/sdk popularity was classified as popular.
We found that @commercetools-frontend/sdk demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket is launching experimental protection for Chrome extensions, scanning for malware and risky permissions to prevent silent supply chain attacks.
Product
Add secure dependency scanning to Claude Desktop with Socket MCP, a one-click extension that keeps your coding conversations safe from malicious packages.
Product
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.