TakeShape's API Mesh generates a GraphQL API that gives you full control of all your favorite services in one user experience.
Composable e-commerce enables brands to build experiences that perform faster and convert better than monolithic stores. The tradeoff? Slower time to market, bigger budgets, and more complex tech stacks.
The problem is, to maximize the benefits of going composable, you need a backend for your frontend—and a backend team who can build it.
TakeShape is a simple, low-code GraphQL backend for your frontend.
We empower you to convert more customers and go to market faster without investing large amounts of capital and labor upfront. We do so by giving you faster page loads, improved SEO, and all the benefits of composable e-commerce without any backend code.
Just deploy a TakeShape project, connect your favorite APIs, and we'll automatically generate a GraphQL API you can call from your frontend.
To show you how easy it is to get started, we built a composable e-commerce store you can visit right now. This article will walk you through how we built the store, using TakeShape, Next.js and 6 e-commerce APIs.
Deploying a composable e-commerce store with TakeShape
Today's e-commerce customers expect every store to provide a feature-rich shopping experience. Rich product pages, subscriptions, user reviews, referral rewards, loyalty points, product bundles, special promotions, and email campaigns are all table stakes.
The frontend must present those features in a beautiful, unique experience, and fulfill the promise of composable—faster page loads, better SEO, and faster time to new markets and channels.
Building a frontend that maximizes the benefits of composable is hard enough without having to develop an API that wraps all the backend functionality and exposes it for the frontend.
Let's walk through an example of how you can use TakeShape to get this kind of backend up and running, with little-to-no code, for free.
The frontend
Our demo store is called the E-Commerce Kitchen Sink. It's got every service but the kitchen sink (not quite ;) )! More importantly, it demonstrates how simple and powerful TakeShape is compared to rolling your own backend.
The possibilities with TakeShape are only limited by what you want to implement in the frontend. Instead of showing everything an e-commerce store might have, this project will demonstrate features most stores will have:
- Subscription products
- Customer reviews and ratings
- User accounts
- Loyalty points
- Order history
- Product search
We built these features with technologies most frontend developers know and love—Next.js, TypeScript, and Apollo Client. We also used Prettier and ESLint to clean up our code, and Vercel to deploy the project, which is live on vercel now.
You can clone the github repo here.
The backend
TakeShape will be the backend powering the frontend UX features, so let's talk about setting up a TakeShape project.
The first thing you'll need to do is sign up for an account, create a project and connect your preferred API services.
TakeShape provides bespoke support for many of the most popular services in e-commerce, as well as any generic REST and GraphQL API. Just follow the instructions for connecting the API and hit the Save button. TakeShape will take care of all the rest. If you run into trouble, we have docs to help you out.
There are a few limitations.
REST APIs that require multiple headers for authentication are tricky to connect with TakeShape, and GraphQL APIs that restrict introspection require a little more work to get up and running. But we're constantly resolving these issues, and more than happy to work with you directly to connect your APIs.
You can always contact us.
Choosing service providers
The store in this example project will be a composable Stripe deployment, so product data, checkouts, and order history will be handled by the Stripe API.
For user profiles, we decided on a custom solution that you can build in TakeShape. Every TakeShape project comes with a provisioned database, where custom data types like user profiles can be created, and instances of that data can be safely stored. We call those custom types Shapes, and we have a lot of docs on them.
In this project, we created a Profile shape that uses Auth0 credentials for authentication. Every time a user signs up for the store, they're sent through an Auth0 signup flow. When they're done, they're redirected to a page in our store that executes a mutation in our TakeShape projects' GraphQL API.
That mutation creates an instance of the Profile shape, attaching the credentials Auth0 generated when the user signed up. The mutation also creates a Stripe customer ID and attaches it to the new instance of the Profile shape. This allows us to fetch their order history and other Stripe details later.
Creating mutations and queries can be done by editing your TakeShape project's schema. Schema editing is outlined in our docs.
For customer reviews, ratings and loyalty points, we connected the REVIEWS.io and Voucherify services.
Adding more services
You can always connect more API services without impacting functionality already in your project, so we've also connected ShipEngine for shipping management and ReferralCandy as well. We can implement features from those services later in our frontend when we're ready.
Once your services are connected, TakeShape will add them to your existing GraphQL API with queries and mutations to access them. All you need is an API Key, which you can generate in your project's settings. You can manage multiple API keys and scope their permissions at a granular level, even limiting which queries and mutations they can call.
But if you want to get the most value out of TakeShape, there are many more features to activate.
For example, TakeShape can help you fetch product data up to 85% faster.
Here's how.
API Indexing
note: Don't use Shopify Admin here. Use Stripe.
When your API responses come back faster, your pages load faster—and when your pages load faster, your sales increase. Just 1 extra second of loading can drop conversion rates by 11%. Google's search engine rankings also optimize for pages that show the most information in the least amount of time.
Using TakeShape can greatly reduce the duration of API calls.
Our API Indexing feature lets you cache data from your preferred services like Shopify or Contentful in your TakeShape project's database. You can then fetch that data from TakeShape directly, which can be much faster if the service is typically slow, like Stripe or Shopify.
Configuring API Indexing is easy for the most popular services.
For example, after connecting a Stripe API to your TakeShape project, you'll be taken through a step-by-step process to index whichever data you'd like. You can then follow our comprehensive guide on API Indexing to create queries that fetch that indexed data.
Services that don't appear on our service list, like the Recharge Subscription API for example, might take a little more configuring. We have extensive documentation to help you declare which data you'd like to Index in your project's schema file.
In our Kitchen Sink store, we decided to use API indexing to fetch product data from Stripe. If you don't change your product data often, it makes sense to cache it—but you can also specify the interval your data should be re-indexed on, and any webhook events that should trigger re-indexing.
And there's one more powerful feature that indexing unlocked for our store: Product search.
Product search
Every TakeShape project's GraphQL API has a search query, which can search data stored in your project's database. When building the example store, we used this functionality to essentially get product searching in our frontend app for free.
You can check out the SearchStripeProducts query in the queries.ts file of the store's public repo to see how we search for the data in TakeShape. We also have a search page recipe in our docs if you'd like to set it up in your own store.
API Indexing isn't the only way to use your project's built-in data store. TakeShape has flexible data modeling features, which allow you to customize metadata for more optimized SEO. Let's talk about how it works.
Data modeling
By using our visual editor, you can create a data model for any content you want to use on your site. As we mentioned earlier, the data types you create are called shapes, and your GraphQL API will generate new queries and mutations every time you add, delete or update a Shape's data model—no coding required.
You can also compose shapes together. A FriendsList shape might contain an array of Profile objects, representing a user's friends.
For SEO purposes, you might want to model metadata in a Meta shape, then attach that shape to things you want to associate metadata with.
Here's an example of what that looks like in our visual editor.
You would then add the Meta shape as a property to any shapes you want add metadata to. When you fetch data that has a Meta property as defined in the image above, you'll be able to query for all the fields specified, such as keywords, title, and description.
We've put together a recipe in our docs if you want to give it a try in your store right now.
Putting it all together
- Upshot: Remind them of all the benefits — faster speeds, better SEO, faster go-to-market due to sped up creative process, more customers, more users, more sales.
- Give them links to get started.
Once our TakeShape project is connected to all the services we need, set up to index product data, and configured to use data from different services to create our custom Profile shape, all we have to do is give our frontend access to all this powerful functionality.
It's as simple as querying the project's GraphQL API. You can check out the queries.ts file in the store's public repo to see how we did it, but we have docs on using TakeShape in every popular frontend framework and SSG. Just check out our guide on calling the GraphQL API if you need help.
TakeShape is the missing piece
Every layer of composable e-commerce is straightforward—except the backend. Composing multiple services together is its own beast, but leveraging those services while maximizing the benefits of going composable is often a bottleneck for large projects.
TakeShape not only gives you faster API requests, flexible data modeling, and a GraphQL API, but it gives you these things with no backend coding required. Iterating, innovating and going to market can happen over the course of days or weeks, rather than months.
User experience is the biggest driver of SEO performance, conversions, and repeat-customers. TakeShape empowers you to deploy the backend that will support the high-performance, high-conversion frontend experience you want to build.
But we haven't even covered all the features we offer. Localization, automated workflows, and content versioning are just a few of the finer details included in the package.
We also have a large group of JamStack agencies and brands in our community slack who'd love to connect with you, and an ever-growing docs site.
Ready to get started?
Sign up now and start playing around! You can also deploy any of the following starter patterns to TakeShape to get going quickly:
- The E-Commerce Kitchen Sink pattern (the store described in this article).
- The Shopify API Indexing starter pattern.
- The Big Commerce starter pattern.
We're excited to welcome you to our community! Let's grow your business together.