Mocking Shopify's Storefront GraphQL API
While recently working on a headless e-commerce project using Shopify’s Storefront API in Next.js, I found myself wishing for the ability to spin up a local instance of Shopify to develop against. It’s becoming an increasingly-popular option for platform providers to offer CLI apps and other tools that can be run locally for development (and testing) purposes, and although Shopify does provide tools for local theme development, they don’t yet offer an option to simplify local development with the Storefront and Admin APIs.
While the latency cost of having to query an actual Shopify test store is fairly minor overall – and as a GraphQL API, Storefront is aligned toward keeping response payloads small – I did find that the extra bit of round-trip latency was having a bit of a negative affect on my development workflow. And, since the Storefront API is rate-limited, making real API requests means there’s always a non-zero risk of brushing up against the rate limit during development.
For a general overview of mocking, be sure to check out this blog post.
Suppose your interface consists of a
shopify.ts file, which instantiates a
graphql-request client with your Shopify domain and access token, and
products.ts, which exports a number of functions for querying products:
As is hopefully self-explanatory, users can call
all(5) and get a promise which will resolve to the first set of five products from the store.
As Nock overrides Node’s
http.request function – which is how
graphql-request ultimately processes requests in Node.js environments – Nock’s monkey-patching lets us return our own data from any route we specify.
The simplest approach is to instantiate Nock alongside our client in
shopify.ts, and we can set a condition that it only intercepts calls if, say, we’re in our development environment:
Here, we’ve set up Nock to intercept POST requests to the Storefront API endpoint only if
NODE_ENV === development. Easy!
conditionallyoption is a function, we can get as elaborate with it as we’d like. (We could, for example, bypass the mocked endpoint through the result of querying some external source.) Be sure to check out Nock’s documentation for more usage guidelines.
As mentioned earlier, using Nock is one approach to solving this particular problem, but certainly not the only approach. One alternative is fetch-mock, which is an isomorphic library for mocking requests via the Fetch API, and is well worth considering. You might also even consider going so far as to set up your own GraphQL server to simplify modifying mock data, or for use in staging environments.