How to add a Shopify Store to your GraphQL APIs in Seconds

Combining multiple GraphQL APIs just got a lot easier. We all know GraphQL is the perfect technology to combine multiple data sources into a unified data graph and quickly build rich user interfaces while enjoying a type-safe and self-documenting API. However, usually, you can only query what is implemented in the GraphQL server itself and if you want to add a new data source, you have to either write resolvers or configure something like schema stitching to extend your GraphQL schema. This still requires quite a bit of work, especially if you want to add a lot of functionality like an entire eCommerce store.

You could also call external APIs directly from your frontend, but this makes your frontend code more complex, harder to maintain with multiple API endpoints and you add additional network requests that slow down your page load times that result in a worse user experience.

We were looking for a way to make this as easy as possible for developers and launched remote modules last year. This enables developers to freely mix and match remote GraphQL APIs into a single unified data graph that is then delivered via the global Slicknode content infrastructure and can be extended with all the functionality that Slicknode has to offer like modular content, business logic, relations, images, etc.

With the release of the latest version of the Slicknode CLI, you can now create a remote module with a single command. For example, to add your entire Shopify store to your Slicknode CMS, all you have to do is create the remote module:

slicknode module create shopify --endpoint https://<your-shopify-name>.myshopify.com/api/2021-01/graphql.json -h "X-Shopify-Storefront-Access-Token: <storefront-access-token>"

Slicknode introspects the remote GraphQL API and automatically generates the module files and configuration. After deploying the changes, you then have access to the entire Shopify API and can query your product catalog etc. along with all other data that is part of your Slicknode project:

query GetProducts {
  Shopify_products(first: 10) {
    edges {
      node {
        handle
        title
        description
        priceRange {
          minVariantPrice {
            amount
          }
        }
      }
    }
  }
  # ... add other data
}

Another advantage of this approach is that the response will be delivered via the Slicknode content infrastructure. The combined response will be cached and delivered via the global edge network for super-fast response times and great user experiences, no matter how many data sources you combine this way. This also makes it much less likely to hit 3rd party API limits and saves server cost for the origin servers, since the responses will be cached and served at the edge.

Give it a try with your own GraphQL APIs and check out the documentation for more information.