woocommerce/packages/js/api
Sam Seay 03dbab0edd
Fix some bugs in syncpack configuration (#35651)
* Fix syncpack config

* Loosen the matched version for typescript eslint

* Add changelog entries

* Update lockfile
2022-11-22 12:06:47 +13:00
..
changelog Fix some bugs in syncpack configuration (#35651) 2022-11-22 12:06:47 +13:00
src Fix and consolidate linting across the monorepo (#35012) 2022-10-12 15:05:01 +13:00
.eslintignore Fix and consolidate linting across the monorepo (#35012) 2022-10-12 15:05:01 +13:00
.eslintrc.js Fix and consolidate linting across the monorepo (#35012) 2022-10-12 15:05:01 +13:00
CHANGELOG.md Update CHANGELOG.md 2021-12-20 11:51:43 -05:00
NEXT_CHANGELOG.md js packages next changelogs 2021-11-11 16:34:50 +13:00
README.md PR Review 2022-03-29 15:04:37 +01:00
composer.json Changelogger: Fix PHPCS violations (#33664) 2022-07-07 08:54:48 +12:00
composer.lock Add PR numbers to changelog entries on code freeze process (#33627) 2022-06-28 11:15:39 -07:00
jest.config.js Update e2e package locations and add PNPM (#30977) 2021-10-29 08:32:31 +13:00
package.json Fix some bugs in syncpack configuration (#35651) 2022-11-22 12:06:47 +13:00
tsconfig.json Converted Spaces To Tabs In JSON 2022-05-10 13:31:01 -07:00

README.md

WooCommerce API Client

An API client for interacting with WooCommerce installations that works both in the browser and in Node environments. Here are the current and planned features:

  • TypeScript Definitions *
  • Axios API Client with support for OAuth & basic auth
  • Partial support to Repositories, to simplify interaction with basic data types *
  • Service classes for common activities such as changing settings

* TypeScript Definitions and Repositories are currently only supported for Products, and partially supported for Orders.

Differences from @woocommerce/woocomerce-rest-api

WooCommerce has two API clients in JavaScript for interacting with a WooCommerce installation's RESTful API. This package, and the @woocommerce/woocomerce-rest-api package.

The main difference between them is the Repositories and the TypeScript definitions for the supported endpoints. When using Axios directly, as you can do with both libraries, you query the WooCommerce API in a raw object format, following the API documentation parameters. Comparatively, with the Repositories provided in this package, you have the parameters as properties of an object, which gives you the benefits of auto-complete and strict types, for instance.

Usage

npm install @woocommerce/api --save-dev

Depending on what you're intending to get out of the API client there are a few different ways of using it.

REST API

The simplest way to use the client is directly:

import { HTTPClientFactory } from '@woocommerce/api';

// You can create an API client using the client factory with pre-configured middleware for convenience.
let client = HTTPClientFactory.build( 'https://example.com' )
    .withBasicAuth( 'username', 'password' )
    .create();

// You can also create an API client configured for requests using OAuth.
client = HTTPClientFactory.build( 'https://example.com' )
    .withOAuth( 'consumer_secret', 'consumer_password' )
    .create();

// You can then use the client to make API requests.
client.get( '/wc/v3/products' ).then( ( response ) => {
  // Access the status code from the response.
  response.status;
  // Access the headers from the response.
  response.headers;
  // Access the data from the response, in this case, the products.
  response.data;
}, ( error ) => {
  // Handle errors that may have come up.
} );

Repositories

As a convenience utility we've created repositories for core data types that can simplify interacting with the API:

Parent/Base Repositories

  • SimpleProduct
  • ExternalProduct
  • GroupedProduct
  • VariableProduct
  • Coupon
  • Order
  • SettingsGroup

Child Repositories

  • ProductVariation
  • Setting

These repositories provide CRUD methods for ease-of-use:

import { HTTPClientFactory, SimpleProduct } from '@woocommerce/api';

// Prepare the HTTP client that will be consumed by the repository.
// This is necessary so that it can make requests to the REST API.
const httpClient = HTTPClientFactory.build( 'https://example.com' )
    .withBasicAuth( 'username', 'password' )
    .create();

const repository = SimpleProduct.restRepository( httpClient );

// The repository can now be used to create models.
const product = repository.create( { name: 'Simple Product', regularPrice: '9.99' } );

// The response will be one of the models with structured properties and TypeScript support.
product.id;

Repository Methods

The following methods are available on all repositories if the corresponding method is available on the API endpoint:

  • create( {...properties} ) - Create a single object of the model type
  • delete( objectId ) - Delete a single object of the model type
  • list( {...parameters} ) - Retrieve a list of the existing objects of that model type
  • read( objectId ) - Read a single object of the model type
  • update( objectId, {...properties} ) - Update a single object of the model type

Child Repositories

In child model repositories, each method requires the parentId as the first parameter:

import { HTTPClientFactory, VariableProduct, ProductVariation } from '@woocommerce/api';

const httpClient = HTTPClientFactory.build( 'https://example.com' )
    .withBasicAuth( 'username', 'password' )
    .withIndexPermalinks()
    .create();

const productRepository = VariableProduct.restRepository( httpClient );
const variationRepository = ProductVariation.restRepository( httpClient );

const product = await productRepository.create({
    "name": "Variable Product with Three Attributes",
    "defaultAttributes": [
    {
     "id": 0,
     "name": "Size",
     "option": "Medium"
    },
    {
     "id": 0,
     "name": "Colour",
     "option": "Blue"
    }
    ],
    "attributes": [
    {
     "id": 0,
     "name": "Colour",
     "isVisibleOnProductPage": true,
     "isForVariations": true,
     "options": [
       "Red",
       "Green",
       "Blue"
     ],
     "sortOrder": 0
    },
    {
     "id": 0,
     "name": "Size",
     "isVisibleOnProductPage": true,
     "isForVariations": true,
     "options": [
       "Small",
       "Medium",
       "Large"
     ],
     "sortOrder": 0
   }
  ]
});

const variation = await variationRepository.create( product.id, {
    "regularPrice": "19.99",
    "attributes": [
      {
        "name": "Size",
        "option": "Large"
      },
      {
        "name": "Colour",
        "option": "Red"
      }
    ]
});