Enhance customer experiences with Apollo GraphOS


<p>This post is a part of our <a href="https://www.apollographql.com/blog/platform/retail/how-to-power-modern-retail-apps-with-apollo-graphos" data-type="URL" data-id="https://www.apollographql.com/blog/platform/retail/how-to-power-modern-retail-apps-with-apollo-graphos">&#8220;How to power modern retail apps with Apollo GraphOS&#8221;</a> series. Also in this series:</p>



<ul class="wp-block-list">
<li><a href="https://www.apollographql.com/blog/platform/retail/unify-your-ecommerce-checkout-with-graphql" data-type="URL" data-id="https://www.apollographql.com/blog/platform/retail/unify-your-ecommerce-checkout-with-graphql">Unify your e-commerce checkout with GraphQL</a></li>



<li><a href="https://www.apollographql.com/blog/platform/retail/personalizing-the-ecommerce-shopping-experience-with-graphql" data-type="URL" data-id="https://www.apollographql.com/blog/platform/retail/personalizing-the-ecommerce-shopping-experience-with-graphql">Personalizing the e-commerce shopping experience with GraphQL</a></li>



<li><a href="https://www.apollographql.com/blog/platform/retail/create-an-omnichannel-shopping-experience-with-graphql" data-type="URL" data-id="https://www.apollographql.com/blog/platform/retail/create-an-omnichannel-shopping-experience-with-graphql">Creating an omnichannel shopping experience with GraphQL</a></li>



<li><a href="https://www.apollographql.com/blog/platform/retail/manage-time-gated-product-launches-with-graphql" data-type="URL" data-id="https://www.apollographql.com/blog/platform/retail/manage-time-gated-product-launches-with-graphql">Manage time-gated product launches with GraphQL</a></li>
</ul>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<p>One of the great things about GraphQL is that it allows you to consolidate data across multiple data sources and present all of that data in a unified view to client developers. For example, in a supergraph for a retail business that might mean fetching product attribute data from an internal source while fetching related review data from a third party service.</p>



<p>Apollo Federation makes this easy—even when different teams need to manage portions of the supergraph schema that provide the product and reviews data in two different subgraphs. Let’s take a look at how that would work.</p>



<h2 class="wp-block-heading"><a href="#linking-third-party-reviews-to-products" aria-hidden="true" class="aal_anchor" id="linking-third-party-reviews-to-products"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Linking third-party reviews to products</h2>



<p>Imagine that we have a products subgraph that contains the following type definition for <code>Product</code>:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql"># Products subgraph

&quot;&quot;&quot;
A specific product sold by our store. This contains all the high level details but is not the purchasable item.
See Variant for more info.
&quot;&quot;&quot;
type Product @key(fields: &quot;id&quot;) @key(fields: &quot;upc&quot;) {
  id: ID!
  title: String
  description: String
  mediaUrl: String
  upc: ID!

  &quot;&quot;&quot;
  Variants of the products to view specific size/color/price options
  &quot;&quot;&quot;
  variants(searchInput: VariantSearchInput): [Variant]
}</code></pre>



<p>We need to add a <code>reviews</code> field to the <code>Product</code> type, but the reviews data is managed by another team via a third-party service. To accommodate this, that team can create a new reviews subgraph and add the following definition:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql"># Review subgraph

type Review {
  id: ID!

  &quot;The plain text version of the review&quot;
  body: String

  &quot;The person who authored the review&quot;
  author: String

  &quot;The product which this review is about&quot;
  product: Product
}</code></pre>



<p>The reviews subgraph won’t need to know anything about products except the UPC of the product that the review is associated with (this is one of the key fields that has been identified for the <code>Product</code> type). For brevity, we’ll assume that it’s possible to configure this value in the third-party reviews service and we’ll also assume this value can be retrieved from that service’s API when querying review data.</p>



<p>The team that owns the new reviews subgraph will then need to write resolvers for this new portion of the schema, including a resolver for the <code>product</code> field that returns the product ID value so that Apollo Router can forward these values to the products subgraph to be fully resolved with all product details:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">const resolvers = {
  Review: {
    Product: (parent) =&gt; parent.product.upc
  }
};</code></pre>



<p>We can also make the relationship between products and reviews bidirectional. To associate a list of reviews with a product, we can extend the `Product` entity type from within the reviews subgraph as follows:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">type Product @key(fields: &quot;id&quot;) @key(fields: &quot;upc&quot;) {
  id: ID!
  reviews: [Review]
}</code></pre>



<p>The reviews subgraph will then need to include a resolver that fetches a list of reviews based on a product’s UPC:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">const resolvers = {
  Product: {
    reviews: (parent) =&gt; getReviewsByProductUpc(parent.product.upc)
  }
};</code></pre>



<p>Once the reviews subgraph is composed into the supergraph, a client developer will now be able to all product and reviews data seamlessly and as though it all originated from the same data source.</p>



<h2 class="wp-block-heading"><a href="#sharing-some-data-back-with-third-parties" aria-hidden="true" class="aal_anchor" id="sharing-some-data-back-with-third-parties"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Sharing (some) data back with third parties</h2>



<p>Consolidating data across multiple sources is a big win that can help speed up development times for internal teams that build online shopping apps for web and mobile devices, but what about external partners such as third-party sellers that also need access to product data to build their own client apps?</p>



<p>There would likely be some data in supergraph meant for internal use only, such as sensitive user data. So that could mean maintaining two different versions of the supergraph schema to hide this data from external partners, which would require significant development overhead.</p>



<p>Luckily, GraphOS allows you to have the best of both worlds and maintain a single, unified supergraph schema that exposes different views to different API consumers using a feature of Apollo Studio called <a href="https://www.apollographql.com/docs/graphos/delivery/contracts/">Contracts</a> (currently available for Enterprise plans).</p>



<p>If we wanted to expose a limited partner schema that only revealed product information to partners, then we can use the special <code>@tag</code> directive to decorate the <code>Product</code> type:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">type Product @key(fields: &quot;id&quot;) @key(fields: &quot;upc&quot;) @tag(name: &quot;partner&quot;) {
  id: ID! @tag(“internal”)
  title: String
  description: String
  mediaUrl: String
  upc: ID!

  &quot;&quot;&quot;
  Variants of the products to view specific size/color/price options
  &quot;&quot;&quot;
  variants(searchInput: VariantSearchInput): [Variant]
}</code></pre>



<p>All <code>Product</code> fields will inherit the <code>partner</code> tag set on the parent type definition. Keep in mind that this also applies to field extensions from other subgraphs (such as the <code>reviews</code> field that the reviews subgraph adds to <code>Product</code>) so you will want to apply tags at the object type level with care, or alternatively, apply them at the field level only for finer-grained control.</p>



<p>We also explicitly set an <code>internal</code> tag for the product ID field because this value will be used for internal purposes only. Next, we can apply the same partner tag to some product <code>Query</code> fields:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">type Query {

  &quot;&quot;&quot;
  Get all available products to shop for. Optionally provide some search filters
  &quot;&quot;&quot;
  searchProducts(searchInput: ProductSearchInput! = {}): [Product] @tag(name: &quot;partner&quot;)

  &quot;&quot;&quot;
  Get a specific product by id. Useful for the product details page or checkout page
  &quot;&quot;&quot;
  product(id: ID!): Product @tag(name: &quot;partner&quot;)
}</code></pre>



<p>Now we can create a <a href="https://www.apollographql.com/docs/graphos/delivery/contracts/">Contract variant</a> in Apollo Studio that includes the <code>partner</code> tag and excludes the <code>internal</code> tag. And with a Contract variant available in Apollo Studio, we can now configure an Apollo Router to serve this supergraph schema only at an endpoint available for third-party partners to query.</p>



<h2 class="wp-block-heading"><a href="#get-started-with-a-retail-supergraph-today" aria-hidden="true" class="aal_anchor" id="get-started-with-a-retail-supergraph-today"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Get started with a retail supergraph today</h2>



<p>Beyond onboarding third-party partners to supergraph, the best way to see the possibilities of a supergraph is to try one out. <a href="https://studio.apollographql.com/public/apollo-retail-supergraph/explorer?explorerURLState=N4IgzghgbgpgJgYQPYBsUwMYBcCWSB2AknCAFwgCccEADAEYQAsdAtAIwBMcbLjMdrABwUBLOvEZM4jAOwA2AGYKQAGnDR4yNJlwEAoviwAnAJ7EyIOBxqyMAVkEsqdCrw72nEGAGZ23uNxyMIzcbHYgAL5AA&amp;referrer=operation_collections&amp;variant=prod">You can explore a retail supergraph schema and run real queries against it here.</a></p>



<p>We also have additional posts in this <a href="https://www.apollographql.com/blog/platform/retail/how-to-power-modern-retail-apps-with-apollo-graphos" data-type="URL" data-id="https://www.apollographql.com/blog/platform/retail/how-to-power-modern-retail-apps-with-apollo-graphos">series of retail best practices</a> that dive into different elements of this schema to illustrate how Apollo GraphOS help power essential features of modern retail applications.</p>



<p>If you’d like to talk to an Apollo expert about how a supergraph can power your retail experience, <a href="https://www.apollographql.com/contact-sales/?referrer=retail-solutions-page" data-type="URL" data-id="https://www.apollographql.com/contact-sales/?referrer=retail-solutions-page">please reach out to us</a>.</p>


How to aggregate and share data with third parties using GraphOS


<p>This post is a part of our <a href="https://www.apollographql.com/blog/platform/retail/how-to-power-modern-retail-apps-with-apollo-graphos" data-type="URL" data-id="https://www.apollographql.com/blog/platform/retail/how-to-power-modern-retail-apps-with-apollo-graphos">&#8220;How to power modern retail apps with Apollo GraphOS&#8221;</a> series. Also in this series:</p>



<ul class="wp-block-list">
<li><a href="https://www.apollographql.com/blog/platform/retail/unify-your-ecommerce-checkout-with-graphql" data-type="URL" data-id="https://www.apollographql.com/blog/platform/retail/unify-your-ecommerce-checkout-with-graphql">Unify your e-commerce checkout with GraphQL</a></li>



<li><a href="https://www.apollographql.com/blog/platform/retail/personalizing-the-ecommerce-shopping-experience-with-graphql" data-type="URL" data-id="https://www.apollographql.com/blog/platform/retail/personalizing-the-ecommerce-shopping-experience-with-graphql">Personalizing the e-commerce shopping experience with GraphQL</a></li>



<li><a href="https://www.apollographql.com/blog/platform/retail/create-an-omnichannel-shopping-experience-with-graphql" data-type="URL" data-id="https://www.apollographql.com/blog/platform/retail/create-an-omnichannel-shopping-experience-with-graphql">Creating an omnichannel shopping experience with GraphQL</a></li>



<li><a href="https://www.apollographql.com/blog/platform/retail/how-to-aggregate-and-share-data-with-third-parties-using-graphos" data-type="URL" data-id="https://www.apollographql.com/blog/platform/retail/how-to-aggregate-and-share-data-with-third-parties-using-graphos">How to aggregate and share data with third parties using GraphOS</a></li>
</ul>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<p>Whether launching a new collection of products or coordinating product drops in an app, there’s often a need to filter queryable product data from a GraphQL API based some time-related metadata.</p>



<p>Typically, there are two possible places to gate product data based on a specific time:</p>



<ul class="wp-block-list">
<li>The backend service that acts as a data source for for the GraphQL API</li>



<li>The GraphQL resolvers</li>
</ul>



<p>Ultimately, the net data result will be the same for the client, but which option you choose depends on whether the time-gating should be handled implicitly or explicitly through the GraphQL API.</p>



<h2 class="wp-block-heading"><a href="#two-approaches-to-filtering" aria-hidden="true" class="aal_anchor" id="two-approaches-to-filtering"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Two approaches to filtering</h2>



<p>No additions are required to a GraphQL schema when implicitly filtering time-gated product data. Instead, the logic that determines what products are returned is handled by the domain service, and the team that owns that service will be responsible for filtering out any invalid or unavaiable items before the data reaches the resolvers.&nbsp;</p>



<p>Alternatively, product filtering may take place in the GraphQL layer itself when appropriate metadata is available, such as a release date. Inside of the field resolver, the release date can be checked against the current time to determine whether the product should be made available to the client.</p>



<p>For example:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-typescript">import { productAPI } from &quot;../APIs&quot;;

async function product(id: String): Product {

    return productAPI.getProductById(id).then(product =&gt; {
        // Date comparison is tricky, this is for demonstration purposes only!
        if (product.releaseDate) {
            const now = Date.now();
            const release = new Date(product.releaseDate).getTime();
            if (release &gt; now) {
                return null;
            }
        }

        return product;
    });
}</code></pre>



<h2 class="wp-block-heading"><a href="#displaying-unavailable-products" aria-hidden="true" class="aal_anchor" id="displaying-unavailable-products"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Displaying unavailable products</h2>



<p>Sometimes you need to show unreleased products or display a countdown until their release in a client app. For these cases you can include a `releaseDate` field as part of the `Product` type:</p>



<p>For example:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">type Product {
  description: String
  id: ID!
  mediaUrl: String
  releaseDate: String
  title: String
  variants: [Variant] 
}</code></pre>



<p>You would need to have additional logic in cart-related mutations to prevent users from adding unreleased products to their carts. Again, this logic could be handled either in the mutations field resolvers or in the data source behind the GraphQL API.</p>



<h2 class="wp-block-heading"><a href="#implications-of-gating-products" aria-hidden="true" class="aal_anchor" id="implications-of-gating-products"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Implications of gating products</h2>



<p>When gating product releases via a GraphQL API, there are a few more things that we need to keep in mind. Specifically, we need to think about error handling, connecting entity types across subgraphs, and paginating lists.</p>



<p>First, if a not-yet-available product is filtered from the result (either in the field resolver or the underlying data source) and the field expects an non-null value to be returned, then a GraphQL error will be thrown. This could lead to unexpected error states in a client application.</p>



<p>Additionally, if the <code>Product</code> type is defined as an entity in a federated graph, then we may run into similar issues. When the <code>Product</code> entity is extended in another subgraph and that subgraph knows about and returns an unavailable product’s ID in its representation of the <code>Product</code> from a field resolver, then that ID will leak in the query results even when the results of the product data is determined to be unavailable by the subgraphs that owns <code>Product</code>.</p>



<p>For example, this query:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">query GetRecommendedProducts {
  user {
    recommendedProducts {
      id
      releaseDate
      variants {
        id
      }
    }
  }
}</code></pre>



<p>May return this response:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-json">{
    &quot;data&quot;:{
      “user”: {
        &quot;recommendedProducts&quot;: [
          {
            &quot;id&quot;:&quot;unreleased-product:1&quot;,
            &quot;releaseDate&quot;: null,
            &quot;variants&quot;: null
          }
        ]
      }
    }
}</code></pre>



<p>This result would occur when the subgraph that owns the <code>viewer</code> field is aware of the <code>unreleased-product:1</code> ID, but the products subgraph won’t return the rest of the field data due to time-gating in the `Product` resolver or the data source.</p>



<p>However, if either the <code>releaseDate</code> or <code>variant</code> field was defined as non-null in the schema, then a GraphQL error would be thrown for the previous query. These may be the intended outcomes of running this operation, but it’s important to always consider the edge cases for time-gated results and ensure that the client is prepared to handle various error states.</p>



<p>Lastly, if the results of a query that contains time-gated products can be paginated, then you’ll also want to consider what unexpected client states may result when time-gated products are removed from the list, particularly when the filtering happens within the field resolver.</p>



<p>For example, filtering products in the resolver may result in pages of results being returned to the client with varying numbers of items. And in the case where every item in a particular page of results is time-gated and subsequently filtered, then this will result in an empty list being returned to the client. For these cases, it may be better for the time-gated results to be filtered from the list within the data source to ensure predictable responses are sent to the client.</p>



<h2 class="wp-block-heading"><a href="#get-started-with-a-retail-supergraph-today" aria-hidden="true" class="aal_anchor" id="get-started-with-a-retail-supergraph-today"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Get started with a retail supergraph today</h2>



<p>Beyond time-gating products, the best way to see the possibilities of a supergraph is to try one out. <a href="https://studio.apollographql.com/public/apollo-retail-supergraph/explorer?explorerURLState=N4IgzghgbgpgJgYQPYBsUwMYBcCWSB2AknCAFwgCccEADAEYQAsdAtAIwBMcbLjMdrABwUBLOvEZM4jAOwA2AGYKQAGnDR4yNJlwEAoviwAnAJ7EyIOBxqyMAVkEsqdCrw72nEGAGZ23uNxyMIzcbHYgAL5AA&amp;referrer=operation_collections&amp;variant=prod">You can explore a retail supergraph schema and run real queries against it here.</a></p>



<p>We also have additional posts in this <a href="https://www.apollographql.com/blog/platform/retail/how-to-power-modern-retail-apps-with-apollo-graphos" data-type="URL" data-id="https://www.apollographql.com/blog/platform/retail/how-to-power-modern-retail-apps-with-apollo-graphos">series of retail best practices</a> that dive into different elements of this schema to illustrate how Apollo GraphOS help power essential features of modern retail applications.</p>



<p>If you’d like to talk to an Apollo expert about how a supergraph can power your retail experience, <a href="https://www.apollographql.com/contact-sales/?referrer=retail-solutions-page" data-type="URL" data-id="https://www.apollographql.com/contact-sales/?referrer=retail-solutions-page">please reach out to us</a>.</p>


Manage time-gated product launches with GraphQL


<p>This post is a part of our <a href="https://www.apollographql.com/blog/platform/retail/how-to-power-modern-retail-apps-with-apollo-graphos" data-type="URL" data-id="https://www.apollographql.com/blog/platform/retail/how-to-power-modern-retail-apps-with-apollo-graphos">&#8220;How to power modern retail apps with Apollo GraphOS&#8221;</a> series. Also in this series:</p>



<ul class="wp-block-list">
<li><a href="https://www.apollographql.com/blog/platform/retail/unify-your-ecommerce-checkout-with-graphql" data-type="URL" data-id="https://www.apollographql.com/blog/platform/retail/unify-your-ecommerce-checkout-with-graphql">Unify your e-commerce checkout with GraphQL</a></li>



<li><a href="https://www.apollographql.com/blog/platform/retail/personalizing-the-ecommerce-shopping-experience-with-graphql" data-type="URL" data-id="https://www.apollographql.com/blog/platform/retail/personalizing-the-ecommerce-shopping-experience-with-graphql">Personalizing the e-commerce shopping experience with GraphQL</a></li>



<li><a href="https://www.apollographql.com/blog/platform/retail/manage-time-gated-product-launches-with-graphql" data-type="URL" data-id="https://www.apollographql.com/blog/platform/retail/manage-time-gated-product-launches-with-graphql">Manage time-gated product launches with GraphQL</a></li>



<li><a href="https://www.apollographql.com/blog/platform/retail/how-to-aggregate-and-share-data-with-third-parties-using-graphos" data-type="URL" data-id="https://www.apollographql.com/blog/platform/retail/how-to-aggregate-and-share-data-with-third-parties-using-graphos">How to aggregate and share data with third parties using GraphOS</a></li>
</ul>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<p>&#8220;Omnichannel&#8221; has become the go-to term to describe how data is shared across your company so customers will have a unified experience interacting with all parts of your business—from social marketing to the digital or physical marketplace. </p>



<p>Because Apollo GraphOS is the go-to platform for providing a unified API experience to clients apps by connecting all of your data sources in a supergraph, it&#8217;s a perfect fit for creating omnichannel experiences. Let&#8217;s dive into how you can accomplish that with GraphQL.</p>



<h2 class="wp-block-heading"><a href="#federating-a-supergraph-schema" aria-hidden="true" class="aal_anchor" id="federating-a-supergraph-schema"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Federating a supergraph schema</h2>



<p>A <a href="https://www.apollographql.com/docs/federation/">federated GraphQL architecture</a> splits services into subgraphs so that each team can own a smaller, more focused domain, while still providing a single, unified supergraph schema for all of your clients to consume. This means that your client teams—whether they work on the website, mobile apps, chatbots, or POS systems—can all use the same API to accomplish their specific goals.</p>



<p>Omnichannel revolves around connecting all data sources back to your user, so ideally, you have a user ID that can be used across all channels or a way of converting it in each channel. We can define that user in a subgraph schema as follows:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql"># Users subgraph

type User @key(fields: &quot;id&quot;) {
  id: ID!
}</code></pre>



<p>By setting the <code>id</code> as the key field using the <code>@key</code> directive, we have turned the <code>User</code> object type into an <a href="https://www.apollographql.com/docs/federation/entities/">entity</a> so any other subgraph can now add fields to the <code>User</code> type or return the <code>User</code> from any of their fields, and all they need to know about a specific user is their ID. </p>



<p>For example, in the separate subgraph for a checkout service, we can add a <code>cart</code> field on the <code>User</code> by extending it like so:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql"># Checkout subgraph

type User @key(fields: &quot;id&quot;) {
  id: ID!

  &quot;The user&#039;s active cart session&quot;
  cart: Cart
}</code></pre>



<p>As more and more subgraphs extend additional fields on the <code>User</code> type, client developers will be able to see the full representation of the <code>User</code> type which will give them the ability to create intricate queries that span across many subgraphs, such as getting all the <a href="https://studio.apollographql.com/graph/apollo-retail-supergraph/explorer?explorerURLState=N4IgJg9gxgrgtgUwHYBcQC4QGIAEBxBFHAQwBtScBLFBOAZxxQAsEcY6EAnHJ4hiTmC4IwOATgAOMIpSSMWlbrE6dkRKMU4oAOkiy7cAJQQBHGIoQNmrAAYAPALTsuDymBs8ExIZ11muAJ44APJwSJRQvEhICKQAonbEcBKkrMC6OGwc3OlymVRgGfkaWji5%2BfnUtAzlFZWFeXWSnBEIRU0SnBBgMFBEtU2ZKNSp7XUAvmOZk404MxUCPjVTVDT0ZSuZbpvNrTud3b39O5k78xNj5zPjIONAA&amp;variant=prod">items a user has ordered or put in their cart</a> so we can craft a targeted marketing email.</p>



<h2 class="wp-block-heading"><a href="#loyalty-across-channels" aria-hidden="true" class="aal_anchor" id="loyalty-across-channels"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Loyalty across channels</h2>



<p>An effective omnichannel strategy involves tracking when a user is moving across all your channels and which actions they take in each one. Creating a federated supergraph allows each channel to operate independently to report user actions and scale out based on their runtime or development needs. </p>



<p>A common strategy usually involves offering rewards or discounts to users for shopping in different channels or tracking where they have previously purchased products. We could try to calculate this information in each client by looking at previous orders, but with a supergraph architecture we can add this functionality to our existing API without breaking our current clients:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql"># Users subgraph

type User @key(fields: &quot;id&quot;) {
  id: ID!
  loyalty:LoyaltyProgram
}

type LoyaltyProgram {
    activeDiscounts: [Discount]
    joinedDate: Date
    points: Int
}</code></pre>



<p>By adding these new fields we can look at all of our active discounts when querying for user data across all channels. We can even use the graph itself to add more discounts to our users in an offline process, like querying for their loyalty start date and adding a discount on their anniversary or making sure our systems don&#8217;t offer overlapping or duplicate discounts to the users.</p>



<h2 class="wp-block-heading"><a href="#get-started-with-a-retail-supergraph-today" aria-hidden="true" class="aal_anchor" id="get-started-with-a-retail-supergraph-today"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Get started with a retail supergraph today</h2>



<p>Beyond realizing the potential of an omnichannel shopping experience, the best way to see the possibilities of a supergraph is to try one out. <a href="https://studio.apollographql.com/public/apollo-retail-supergraph/explorer?explorerURLState=N4IgzghgbgpgJgYQPYBsUwMYBcCWSB2AknCAFwgCccEADAEYQAsdAtAIwBMcbLjMdrABwUBLOvEZM4jAOwA2AGYKQAGnDR4yNJlwEAoviwAnAJ7EyIOBxqyMAVkEsqdCrw72nEGAGZ23uNxyMIzcbHYgAL5AA&amp;referrer=operation_collections&amp;variant=prod">You can explore a retail supergraph schema and run real queries against it here.</a></p>



<p>We also have additional posts in this <a href="https://www.apollographql.com/blog/platform/retail/how-to-power-modern-retail-apps-with-apollo-graphos" data-type="URL" data-id="https://www.apollographql.com/blog/platform/retail/how-to-power-modern-retail-apps-with-apollo-graphos">series of retail best practices</a> that dive into different elements of this schema to illustrate how Apollo GraphOS help power essential features of modern retail applications.</p>



<p>If you’d like to talk to an Apollo expert about how a supergraph can power your retail experience, <a href="https://www.apollographql.com/contact-sales/?referrer=retail-solutions-page" data-type="URL" data-id="https://www.apollographql.com/contact-sales/?referrer=retail-solutions-page">please reach out to us</a>.</p>


Create an omnichannel shopping experience with GraphQL


<p>This post is a part of our <a href="https://www.apollographql.com/blog/platform/retail/how-to-power-modern-retail-apps-with-apollo-graphos" data-type="URL" data-id="https://www.apollographql.com/blog/platform/retail/how-to-power-modern-retail-apps-with-apollo-graphos">&#8220;How to power modern retail apps with Apollo GraphOS&#8221;</a> series. Also in this series:</p>



<ul class="wp-block-list">
<li><a href="https://www.apollographql.com/blog/platform/retail/unify-your-ecommerce-checkout-with-graphql" data-type="URL" data-id="https://www.apollographql.com/blog/platform/retail/unify-your-ecommerce-checkout-with-graphql">Unify your e-commerce checkout with GraphQL</a></li>



<li><a href="https://www.apollographql.com/blog/platform/retail/create-an-omnichannel-shopping-experience-with-graphql" data-type="URL" data-id="https://www.apollographql.com/blog/platform/retail/create-an-omnichannel-shopping-experience-with-graphql">Creating an omnichannel shopping experience with GraphQL</a></li>



<li><a href="https://www.apollographql.com/blog/platform/retail/manage-time-gated-product-launches-with-graphql" data-type="URL" data-id="https://www.apollographql.com/blog/platform/retail/manage-time-gated-product-launches-with-graphql">Manage time-gated product launches with GraphQL</a></li>



<li><a href="https://www.apollographql.com/blog/platform/retail/how-to-aggregate-and-share-data-with-third-parties-using-graphos" data-type="URL" data-id="https://www.apollographql.com/blog/platform/retail/how-to-aggregate-and-share-data-with-third-parties-using-graphos">How to aggregate and share data with third parties using GraphOS</a></li>
</ul>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<p>Only 42% of e-commerce stores provide a proper mix of alternative and supplementary product recommendations (<a href="https://baymard.com/blog/product-page-suggestions">Baymard Institute</a>). Implementing these product suggestions ultimately requires upgrades to both the backend services that can recommend related products based on metadata or even machine learning models as well as the frontend apps that display the data. </p>



<p>However, requiring teams to upgrade to a new API version or make separate calls to a new recommendation service can slow down the speed at which they can roll these features out in customer-facing apps. Luckily, GraphQL can help with this.</p>



<h2 class="wp-block-heading"><a href="#making-product-recommendations-available" aria-hidden="true" class="aal_anchor" id="making-product-recommendations-available"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Making product recommendations available</h2>



<p>There are many ways you can provide personalized data but the most common is including a list of recommended products on a product page. In a REST-based microservice architecture, you will most likely have some service that takes in a product and user ID and returns a list of suggested product IDs. </p>



<p>It is then usually up to the client app to call the product service again for each recommendation in order to get those products&#8217; details and prices. This makes sense when your primary goal is to maintain separation of concerns in your microservices—you don&#8217;t want to duplicate basic product details in the recommendation service because that service should instead be focused on providing the best suggestions possible.</p>



<p>However, with REST-based approach, each client app would need to duplicate this multi-request business logic and you may end up with the infamous &#8220;N+1 problem&#8221; where each call to resolve recommended product data is a unique call from each client. This is where <a href="https://www.apollographql.com/docs/federation">Apollo Federation</a> can step in and <a href="https://www.apollographql.com/docs/technotes/TN0019-federation-n-plus-1/">help solve our issues</a>.<br><br>Using the federation directives we can link our services together in a new <a href="https://studio.apollographql.com/public/apollo-retail-supergraph/schema/sdl?currentSubgraph=discovery&amp;variant=prod">discovery subgraph</a>:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">extend schema
  @link(url: &quot;https://specs.apollo.dev/federation/v2.0&quot;, import: [&quot;@key&quot;])


type User @key(fields: &quot;id&quot;) {
  id: ID!

  &quot;&quot;&quot;
  Suggest products for this user
  &quot;&quot;&quot;
  recommendedProducts(productId: ID = null): [Product]
}

type Product @key(fields: &quot;id&quot;) {
  id: ID!

  &quot;&quot;&quot;
  Related products for this product
  &quot;&quot;&quot;
  recommendedProducts: [Product]
}</code></pre>



<p>These type definitions in the new discovery schema may look minor, but let&#8217;s dive deeper to understand what&#8217;s going on here.</p>



<h2 class="wp-block-heading"><a href="#federation-2-type-linking" aria-hidden="true" class="aal_anchor" id="federation-2-type-linking"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Federation 2 type linking</h2>



<p>The top of the schema is defining which directive from the <a href="https://www.apollographql.com/docs/federation/subgraph-spec">Federation spec</a> we would like to use</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">extend schema
  @link(url: &quot;https://specs.apollo.dev/federation/v2.0&quot;, import: [&quot;@key&quot;])</code></pre>



<p>Next, we are adding a new field to the <code>User</code> type to get a list of recommended products. This field will be added to any location where a <code>User</code> is returned. That means that we can use the user id to provide more personalized results and we can provide product suggestions on any page we are fetching the user. In the cases where we want to also provide suggestions based on the current product the user is looking at, we will need to allow clients to optionally pass in the product id.<br></p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">type User @key(fields: &quot;id&quot;) {
  id: ID!

  &quot;&quot;&quot;
  Suggest products for this user
  &quot;&quot;&quot;
  recommendedProducts(productId: ID = null): [Product]
}</code></pre>



<p>Finally, we will provide another way to get to the same data using the <code>Product</code> type. This is helpful for the queries where you are not selecting the <code>User</code> directly, (such as on the product details page) but still want to provide suggestions. We could have an optional argument here for the user id to support the same user-based suggestions but our user id is actually already passed to the server through the <code>x-user-id</code> header, so there is no need to include it in the schema.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">type Product @key(fields: &quot;id&quot;) {
  id: ID!

  &quot;&quot;&quot;
  Related products for this product
  &quot;&quot;&quot;
  recommendedProducts: [Product]
}</code></pre>



<h2 class="wp-block-heading"><a href="#linking-to-other-subgraphs" aria-hidden="true" class="aal_anchor" id="linking-to-other-subgraphs"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Linking to Other Subgraphs</h2>



<p>We have also just solved the N+1 problem for free without taking any additional steps. Apollo Federation will take care of figuring out which field is resolved from which subgraph, so when our clients want to make queries that <a href="https://studio.apollographql.com/graph/apollo-retail-supergraph/explorer?explorerURLState=N4IgJg9gxgrgtgUwHYBcQC4QGIAEBxBFHAQxwBsBLAZyIgDMcqYBzZhGhMHABwCcIwMKCioAdJFnG4AKgAtqjCnBhliKdiRy8ExMloRQIcREjBqKEJDmTMKSBDgDuFFLMVxuZAJ76UMXkh2zJq8xKZG5NS0DBCuCLw8-ILCYkgAjjDxPgDKLGwcYAAKSUIiABQAJHwCpQCSYOg4tQAiAIQAlDjA4jiJNcJlFA04VSXC9Z3dVr04Qz0zKC5kCPO92obGyGCcxf0iXaszc9MzOIsoy4e9AG7EvBRh%2B1Onp1QUAF4rJy%2BGZBC8jmIXiuMz4FCgXxeOAAvodYdN4dCQNCgA&amp;variant=prod">fetch all the suggested products and the price of each item</a> the query planner will optimize to use the fewest requests possible.</p>



<h2 class="wp-block-heading"><a href="#whats-next" aria-hidden="true" class="aal_anchor" id="whats-next"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>What&#8217;s next?</h2>



<p>With our schema in place, we can now focus our attention on optimizing the recommendation engine and evolving how we recommend products to our users without ever breaking our existing use cases.</p>



<p>We could add new optional arguments that allow clients to select what type of recommendations they want, like recently viewed or new deals, but the schema can still stay the same. We might even consider making that decision for clients based on who is calling or who the user is so all our business logic lives on the server.</p>



<h2 class="wp-block-heading"><a href="#get-started-with-a-retail-supergraph-today" aria-hidden="true" class="aal_anchor" id="get-started-with-a-retail-supergraph-today"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Get started with a retail supergraph today</h2>



<p>Beyond powering better product recommendations, the best way to see the possibilities of a supergraph is to try one out. <a href="https://studio.apollographql.com/public/apollo-retail-supergraph/explorer?explorerURLState=N4IgzghgbgpgJgYQPYBsUwMYBcCWSB2AknCAFwgCccEADAEYQAsdAtAIwBMcbLjMdrABwUBLOvEZM4jAOwA2AGYKQAGnDR4yNJlwEAoviwAnAJ7EyIOBxqyMAVkEsqdCrw72nEGAGZ23uNxyMIzcbHYgAL5AA&amp;referrer=operation_collections&amp;variant=prod">You can explore a retail supergraph schema and run real queries against it here.</a></p>



<p>We also have additional posts in this <a href="https://www.apollographql.com/blog/platform/retail/how-to-power-modern-retail-apps-with-apollo-graphos" data-type="URL" data-id="https://www.apollographql.com/blog/platform/retail/how-to-power-modern-retail-apps-with-apollo-graphos">series of retail best practices</a> that dive into different elements of this schema to illustrate how Apollo GraphOS help power essential features of modern retail applications.</p>



<p>If you’d like to talk to an Apollo expert about how a supergraph can power your retail experience, <a href="https://www.apollographql.com/contact-sales/?referrer=retail-solutions-page" data-type="URL" data-id="https://www.apollographql.com/contact-sales/?referrer=retail-solutions-page">please reach out to us</a>.</p>


Personalizing the e-commerce shopping experience with GraphQL


<p>This post is a part of our <a href="https://www.apollographql.com/blog/platform/retail/how-to-power-modern-retail-apps-with-apollo-graphos" data-type="URL" data-id="https://www.apollographql.com/blog/platform/retail/how-to-power-modern-retail-apps-with-apollo-graphos">&#8220;How to power modern retail apps with Apollo GraphOS&#8221;</a> series. Also in this series:</p>



<ul class="wp-block-list">
<li><a href="https://www.apollographql.com/blog/platform/retail/personalizing-the-ecommerce-shopping-experience-with-graphql" data-type="URL" data-id="https://www.apollographql.com/blog/platform/retail/personalizing-the-ecommerce-shopping-experience-with-graphql">Personalizing the e-commerce shopping experience with GraphQL</a></li>



<li><a href="https://www.apollographql.com/blog/platform/retail/create-an-omnichannel-shopping-experience-with-graphql" data-type="URL" data-id="https://www.apollographql.com/blog/platform/retail/create-an-omnichannel-shopping-experience-with-graphql">Creating an omnichannel shopping experience with GraphQL</a></li>



<li><a href="https://www.apollographql.com/blog/platform/retail/manage-time-gated-product-launches-with-graphql" data-type="URL" data-id="https://www.apollographql.com/blog/platform/retail/manage-time-gated-product-launches-with-graphql">Manage time-gated product launches with GraphQL</a></li>



<li><a href="https://www.apollographql.com/blog/platform/retail/how-to-aggregate-and-share-data-with-third-parties-using-graphos" data-type="URL" data-id="https://www.apollographql.com/blog/platform/retail/how-to-aggregate-and-share-data-with-third-parties-using-graphos">How to aggregate and share data with third parties using GraphOS</a></li>
</ul>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<p>17% of online shoppers abandon their carts due to long, complicated checkout experiences (<a href="https://baymard.com/blog/perceived-security-of-payment-form">Baymard Institute</a>). GraphQL can help you elevate, modernize, and improve your checkout functionality faster. As a result, you can ensure shoppers are experiencing a frictionless checkout process across all your applications, so you can capitalize on every revenue opportunity.&nbsp;</p>



<p>GraphQL provides a single endpoint that developers can query to get all of the information they need to render a view in a client app by connecting disparate backend data sources and standardizing functionality like authorization. In doing so, client teams can save time rewriting the same code across customer-facing apps and spend more time shipping product features, like enhanced checkout experiences. </p>



<h2 class="wp-block-heading"><a href="#implementing-a-digital-cart-with-graphos" aria-hidden="true" class="aal_anchor" id="implementing-a-digital-cart-with-graphos"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Implementing a digital cart with GraphOS</h2>



<p>Apollo GraphOS—the only end-to-end supergraph platform that unifies all cloud data and services into a single, connected GraphQL schema—can provide a single platform with all the capabilities you need to iterate on your checkout.</p>



<p>When designing checkout functionality, the complexity of implementing this experience tends to land outside a single service. For example, it may require calls to additional services to process credit cards, send invoice orders to warehouses, and create shipping labels.&nbsp;</p>



<p>GraphOS can help your clients by giving them focused operations to perform, so each client team can focus on creating the best UX flow instead of independently writing duplicate logic to call the various services.</p>



<p>Below is a sample schema we created that helps shoppers to view a cart and the payments options they can use:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">type Query {
  user: User
}

type User @key(fields: &quot;id&quot;) {
  id: ID!

  &quot;&quot;&quot;
  Saved payment methods that can be used to submit orders
  &quot;&quot;&quot;
  paymentMethods: [PaymentMethod]

  &quot;&quot;&quot;
  The user&#039;s active cart session. Once the cart items have been purchases, they transition to an Order
  &quot;&quot;&quot;
  cart: Cart
}

&quot;&quot;&quot;
An user&#039;s saved cart session. Only one cart can be active at a time
&quot;&quot;&quot;
type Cart {
  &quot;&quot;&quot;
  Items saved in the cart session
  &quot;&quot;&quot;
  items: [Variant]

  &quot;&quot;&quot;
  The current total of all the items in the cart, before taxes and shipping
  &quot;&quot;&quot;
  subtotal: Float
}

&quot;&quot;&quot;
A saved payment option for an user
&quot;&quot;&quot;
type PaymentMethod {
  id: ID!
  name: String
  description: String
  type: PaymentType!
}

&quot;&quot;&quot;
A fix set of payment types that we accept
&quot;&quot;&quot;
enum PaymentType {
  CREDIT_CARD
  DEBIT_CARD
  BANK_ACCOUNT
}</code></pre>



<p>Lucky for us, the cart is already set up for a few users in our example <a href="https://studio.apollographql.com/public/apollo-retail-supergraph/home?variant=prod">retail supergraph</a>. If you look at the schema for the <code>user</code> query, the user ID is not supplied as a query variable. That&#8217;s by design—the user is pulled from a header. In a real production application, this would come from your auth provider and be extracted from a JWT or something similar. In our case, the user ID is pulled from the header <code>x-user-id</code> for this demo. </p>



<p>We have already created a few example operations that you can try, like <a href="https://studio.apollographql.com/public/apollo-retail-supergraph/explorer?explorerURLState=N4IgzghgbgpgJgYQPYBsUwMYBcCWSB2AknCAFwgCccEADAEYQAsdAtAIwBMcbLjMdrABwUBLOvEZM4jAOwA2AGYKQAGnDR4yNJlwEAoviwAnAJ7EyIOBxqyMAVkEsqdCrw72nEGAGZ23uNxyMIzcbHYgAL5AA&amp;referrer=operation_collections&amp;variant=prod">fetching all the items in a cart</a> or <a href="https://studio.apollographql.com/public/apollo-retail-supergraph/explorer?explorerURLState=N4IgzghgbgpgJgYQPYBsUwMYBcCWSB2AknCAFwgCccEADAEYQAsdAtAIwBMcbLjMdrABwUBLOvEZM4jAOwA2AGYKQAGnDR4yNJlwEAoviwAnAJ7EyIBQFYKjOHPEsrcAMwdeEDu5EUFvBYKCCg4uclZWjCAAvkA&amp;referrer=operation_collections&amp;variant=prod">getting all the user&#8217;s payment methods</a>. </p>



<p>With this data, we should be able to present the user with all of the items in their cart and create a checkout page, but we still need a way to perform our checkout flow actions.</p>



<h2 class="wp-block-heading"><a href="#modifying-our-cart-and-checking-out" aria-hidden="true" class="aal_anchor" id="modifying-our-cart-and-checking-out"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Modifying our cart and checking out</h2>



<p>With a few schema enhancements, we can start describing a basic checkout workflow with <a href="https://www.apollographql.com/docs/apollo-server/schema/schema/#the-mutation-type">GraphQL mutations</a>.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">type Mutation {
  cart: CartMutaitons
}

type CartMutaitons {
  checkout(paymentMethodId: ID!): CheckoutResult
  addVariantToCart(variantId: ID!, quantity: Int = 1): ResultWithMessage
  removeVariantFromCart(variantId: ID!, quantity: Int = 1): ResultWithMessage
}

type ResultWithMessage {
  successful: Boolean
  message: String
}

type CheckoutResult {
  successful: Boolean
  orderID: ID
}</code></pre>



<p>Before we check out, we need to allow users to set up their own cart, including adding and removing cart items. Our schema uses the concepts of <code>Products</code> and <code>Variants</code>, where a <code>Product</code> is a root type that describes the item and it has many <code>Variants</code> which are different sizes, colors, or price options. Since <code>Variants</code> are the items that are actually purchasable, they will be the ones included in our cart. You can try an <a href="https://studio.apollographql.com/public/apollo-retail-supergraph/explorer?explorerURLState=N4IgzghgbgpgJgYQPYBsUwMYBcCWSB2AknCAFwgCccEADAEYQAsdAtAIwBMcbLjMdrABwUBLOvEZM4jAOwA2AGYKQAGnDR4yNJlwEAoviwAnAJ7EyIDhxkK4AZkY0WgmRju8ArHDgsqjDCw0ChQcdHIYdBT%2BJAC%2BQA&amp;referrer=operation_collections&amp;variant=prod">example add-to-cart mutation</a> to add a variant to the cart in Apollo Explorer.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>Note that all mutations in the example supergraph can be run but the example server does not store or modify any state, so it just returns a mock response.</p>
</blockquote>



<p>We have designed our mutations to inform the end user of the result, so instead of returning status codes we have a generic <code>message</code> field that the server can populate with whatever message it wants to show to users. The same idea can be applied when we <a href="https://studio.apollographql.com/public/apollo-retail-supergraph/explorer?explorerURLState=N4IgzghgbgpgJgYQPYBsUwMYBcCWSB2AknCAFwgCccEADAEYQAsdAtAIwBMcbLjMdrABwUBLOvEZM4jAOwA2AGYKQAGnDR4yNJlwEAoviwAnAJ7EyICB0F1BNOXHZsMNXmzauKNaiwCsEGF9BDAVGDAw5NhAAXyA&amp;referrer=operation_collections&amp;variant=prod">remove a variant from the cart</a> or when we go to <a href="https://studio.apollographql.com/public/apollo-retail-supergraph/explorer?explorerURLState=N4IgzghgbgpgJgYQPYBsUwMYBcCWSB2AknCAFwgCccEADAEYQAsdAtAIwBMcbLjMdrABwUBLOvEZM4jAOwA2AGYKQAGnDR4yNJlwEAoviwAnAJ7EyIQRgEYOAZh6CYCmrziCZY6q5oBWCHZ0GBQwgnAygiAAvkA&amp;referrer=operation_collections&amp;variant=prod">checkout with all the items in the cart</a>. With this message, we can display a banner if the mutation was successful or display a warning if it failed, but we don&#8217;t need to update every client to have them use the same logic or message string.</p>



<h2 class="wp-block-heading"><a href="#get-started-with-a-retail-supergraph-today" aria-hidden="true" class="aal_anchor" id="get-started-with-a-retail-supergraph-today"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Get started with a retail supergraph today</h2>



<p>Beyond unifying checkout experiences across client apps, the best way to see the possibilities of a supergraph is to try one out. <a href="https://studio.apollographql.com/public/apollo-retail-supergraph/explorer?explorerURLState=N4IgzghgbgpgJgYQPYBsUwMYBcCWSB2AknCAFwgCccEADAEYQAsdAtAIwBMcbLjMdrABwUBLOvEZM4jAOwA2AGYKQAGnDR4yNJlwEAoviwAnAJ7EyIOBxqyMAVkEsqdCrw72nEGAGZ23uNxyMIzcbHYgAL5AA&amp;referrer=operation_collections&amp;variant=prod">You can explore a retail supergraph schema and run real queries against it here.</a></p>



<p>We also have additional posts in this <a href="https://www.apollographql.com/blog/platform/retail/how-to-power-modern-retail-apps-with-apollo-graphos" data-type="URL" data-id="https://www.apollographql.com/blog/platform/retail/how-to-power-modern-retail-apps-with-apollo-graphos">series of retail best practices</a> that dive into different elements of this schema to illustrate how Apollo GraphOS help power essential features of modern retail applications.</p>



<p>If you’d like to talk to an Apollo expert about how a supergraph can power your retail experience, <a href="https://www.apollographql.com/contact-sales/?referrer=retail-solutions-page" data-type="URL" data-id="https://www.apollographql.com/contact-sales/?referrer=retail-solutions-page">please reach out to us</a>.</p>


Unify your e-commerce checkout with GraphQL


<p>Customers expect a lot from modern online shopping experiences today. Whether they want to place an order from a mobile app, an eCommerce website, or an in-store kiosk, that experience should feel as seamless as possible.</p>



<p>However, providing a consistent, frictionless experience for customers across channels is much easier said than done, especially when product teams need to bring together data from countless internal sources and third-party services to make that happen.</p>



<p>Luckily, a supergraph can unblock frontend developers and help them ship new features faster by unifying all cloud data and services into a single source of truth that they query using GraphQL. At the same time, backend teams can enjoy the flexibility of independently managing relevant portions of a supergraph schema with the safety provided by Apollo GraphOS.</p>



<h2 class="wp-block-heading"><a href="#what-does-a-retail-supergraph-look-like" aria-hidden="true" class="aal_anchor" id="what-does-a-retail-supergraph-look-like"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>What does a retail supergraph look like?</h2>



<p>A supergraph-based architecture ultimately exposes a one-stop shop for frontend developers to get the data that they need and rapidly build out new product features as those capabilities are iteratively exposed by backend engineering teams in the supergraph schema:</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="960" height="540" src="https://wp.apollographql.com/wp-content/uploads/2023/03/Design-Slides-for-Diagrams-2.png" alt="" class="wp-image-20404" srcset="https://wp.apollographql.com/wp-content/uploads/2023/03/Design-Slides-for-Diagrams-2.png 960w, https://wp.apollographql.com/wp-content/uploads/2023/03/Design-Slides-for-Diagrams-2-300x169.png 300w, https://wp.apollographql.com/wp-content/uploads/2023/03/Design-Slides-for-Diagrams-2-768x432.png 768w" sizes="auto, (max-width: 960px) 100vw, 960px" /></figure>



<h2 class="wp-block-heading"><a href="#get-started-with-a-retail-supergraph-today" aria-hidden="true" class="aal_anchor" id="get-started-with-a-retail-supergraph-today"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Get started with a retail supergraph today</h2>



<p>The best way to see the possibilities of a supergraph is to try one out. <a href="https://studio.apollographql.com/public/apollo-retail-supergraph/explorer?explorerURLState=N4IgzghgbgpgJgYQPYBsUwMYBcCWSB2AknCAFwgCccEADAEYQAsdAtAIwBMcbLjMdrABwUBLOvEZM4jAOwA2AGYKQAGnDR4yNJlwEAoviwAnAJ7EyIOBxqyMAVkEsqdCrw72nEGAGZ23uNxyMIzcbHYgAL5AA&amp;referrer=operation_collections&amp;variant=prod">You can explore a retail supergraph schema and run real queries against it here.</a></p>



<p>We also have a series of retail best practices that dive into different elements of this schema to illustrate how Apollo GraphOS helps power essential features of modern retail applications:</p>



<ul class="wp-block-list">
<li><a href="https://www.apollographql.com/blog/platform/retail/unify-your-ecommerce-checkout-with-graphql" data-type="URL" data-id="https://www.apollographql.com/blog/platform/retail/unify-your-ecommerce-checkout-with-graphql">Unify your e-commerce checkout with GraphQL</a></li>



<li><a href="https://www.apollographql.com/blog/platform/retail/personalizing-the-ecommerce-shopping-experience-with-graphql" data-type="URL" data-id="https://www.apollographql.com/blog/platform/retail/personalizing-the-ecommerce-shopping-experience-with-graphql">Personalizing the e-commerce shopping experience with GraphQL</a></li>



<li><a href="https://www.apollographql.com/blog/platform/retail/create-an-omnichannel-shopping-experience-with-graphql" data-type="URL" data-id="https://www.apollographql.com/blog/platform/retail/create-an-omnichannel-shopping-experience-with-graphql">Creating an omnichannel shopping experience with GraphQL</a></li>



<li><a href="https://www.apollographql.com/blog/platform/retail/manage-time-gated-product-launches-with-graphql" data-type="URL" data-id="https://www.apollographql.com/blog/platform/retail/manage-time-gated-product-launches-with-graphql">Manage time-gated product launches with GraphQL</a></li>



<li><a href="https://www.apollographql.com/blog/platform/retail/how-to-aggregate-and-share-data-with-third-parties-using-graphos" data-type="URL" data-id="https://www.apollographql.com/blog/platform/retail/how-to-aggregate-and-share-data-with-third-parties-using-graphos">How to aggregate and share data with third parties using GraphOS</a></li>
</ul>



<p>You can also <a href="https://www.apollographql.com/blog/community/graphql-champions/volvo-cars-drives-into-the-future-of-online-car-shopping-with-the-supergraph/">learn more about how Volvo has leveraged Apollo GraphOS</a> to streamline its online car shopping experience, improve frontend developer experience, and application performance.</p>



<p>If you’d like to talk to an Apollo expert about how a supergraph can power your retail experience, <a href="https://www.apollographql.com/contact-sales/?referrer=retail-solutions-page" data-type="URL" data-id="https://www.apollographql.com/contact-sales/?referrer=retail-solutions-page">please reach out to us</a>.</p>


GraphOS

How to aggregate and share data with third parties using GraphOS

Manage time-gated product launches with GraphQL

Create an omnichannel shopping experience with GraphQL

Personalizing the e-commerce shopping experience with GraphQL

Unify your e-commerce checkout with GraphQL

How to power modern retail apps with Apollo GraphOS

Stay in our orbit