Skip to main content

BigCommerce Middleware

BigCommerce's APIs are split into a few different categories

  • GraphQL Clientside API
    • aka. GraphQL Storefront API
  • GraphQL Serverside API
    • aka. GraphQL Customer Impersonation API
  • REST Clientside API
    • aka. Storefront API
  • REST Serverside API
    • aka. Management API

GraphQL Clientside API​

This is the primary API to use within react components and provides most of the functionality of the BigCommerce provider. It does though have various gaps that necessitate using the other 3 APIs, most significantly around customer data.

GraphQL Serverside API​

This is the API to use when you need to access customer data. It is not directly available to react components and must be used via a NextJS API route. This has a few requirements.

  • Your XAUTH key must support customer impersonation, when creating the token you must specifically check this option.
  • You need an API route setup that loads the BigCommerce middleware, the starter kit provides this by default.
  • You need to generate a customer impersonation token, this is done automatically via pnpm gesso config or the starter kit, assuming you have an appropriate XAUTH key.

Usage​

The BigCommerce provider provides 2 graphql clients, one for the clientside API and one for the serverside API. Normally it will automatically use the correct one, but if you are adding new functionality you will have to make sure to use the correct one.

The user must be logged in for the serverside API to work, which can be done with the useCustomer hook.

const { login } = useCustomer();

login(email, password);

Once the user is logged in you can use the serverside API. The useCustomer hook will do this automatically to provide the customer object. Both graphql clients function the same and you may make normal graphql queries to them.