Create an endpoint
You can use an OSF function called createEndpoint
to create an adapter to Commerce REST API functions.
Endpoints handle information provided to the REST URL and return information on how to implement the response.
Endpoints use the processInput
and processOutput
functions to provide and return information.
When you create a new endpoint, import the createOccRestRequest
function to make calls to the REST endpoints. This function contains all the necessary information to ensure that correct headers are included when you create a REST request.
/plugins/endpoint/list-currencies/index.js
file. In this example, the adapter takes a payload sent to the action and converts it into whatever form is required by the REST endpoint:import {createEndpoint, getBodyAsJson} from '@oracle-cx-commerce/wapi/endpoint';
import {populateError} from '@oracle-cx-commerce/wapi/utils';
/**
* Adapter for the _listCurrencies endpoint.
*/
export default createEndpoint('listCurrencies', {
/**
* Perform any necessary extra processing on the payload object that is
* included when dispatching an action that invokes this endpoint.
*
* @param {object} payload The action payload
*
* @return {object} Object with extra info to be included with endpoint request
*/
processInput() {
// Include a query parameter that limits the set of returned property values.
return {
query: {fields: 'repositoryId,displayName'}
};
},
/**
* Convert the response from the endpoint invocation into an object
* to be merged into the application state.
*
* @param {object} response The response from the endpoint call
*
* @return {object} An object to be merged into the application state
*/
async processOutput(response) {
const json = await getBodyAsJson(response);
// Store the response "items" array under myRepository.currencyInfo.currencies.
return response.ok
? {
myRepository: {
currencyInfo: {
currencies: json.items
}
}
}
: populateError(response, json);
}
});
The processOutput
function takes the response of the API call and stores it within the appropriate place in the state. This endpoint identifies an endpoint ID, which is how you associate this endpoint with the getCurrency
Commerce REST API. The index.js
file take the repository ID from the payload and adds it to the path of the URL. For example, if you call /ccstore/v1/store/currencies
endpoint, your response will contain currency. It returns this because the repository ID is added to the path. Because this example only uses the currencyCode
and displayName
fields a query parameter limits the set of properties returned.
The code also shows you how to return an object that augments the URL for the endpoint. This utility function gets an object out of the returned response and takes that object and merges it into the correct part of the Redux state. This is what changes the panel that is displayed to the shopper. The get-currency
endpoint was invoked for this currency, and the display name and the currency code were returned.
/plugins/endpoint/list-currencies/meta.js
file that indicates the name of the associated endpoint by doing the following:/**
* Metadata for the _listCurrencies endpoint.
*/
export const _listCurrencies = { }
/plugins/endpoint/index.js
file contains a set of functions with names that correspond to the names of your application's endpoints. Edit the /plugins/endpoint/index.js
file to contain the following:/**
* This module exports references that enable the application's
* endpoints to be accessed using dynamic imports.
*/
// By default, all available endpoints are exported.
export * from '@oracle-cx-commerce/endpoints';
// Export a reference to our _getCurrency endpoint.
export const _getCurrency = () => import('./list-currencies');
/plugins/endpoint/meta.js
file:/**
* This module exports references to metadata for the application's endpoints.
*/
export * from '@oracle-cx-commerce/endpoints/meta';
export {_getCurrency} from './list-currencies/meta';