Enhance customer experiences with Apollo GraphOS


<p>Apollo’s GraphOS API orchestration platform now offers a forever-free plan.&nbsp; Whether you’re already using GraphQL or are just getting started, this free plan is designed for anyone learning, exploring, or prototyping with Apollo GraphQL. You can begin immediately without needing a credit card. In this article, you’ll learn:</p>



<ul class="wp-block-list">
<li>What the GraphOS API orchestration platform is<br></li>



<li>What is included in the free plan (and its limitations)<br></li>



<li>How to get started with your first GraphQL query using the free plan</li>
</ul>



<h2 class="wp-block-heading"><a href="#what-is-the-graphos-api-orchestration-platform" aria-hidden="true" class="aal_anchor" id="what-is-the-graphos-api-orchestration-platform"><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 is the GraphOS API orchestration platform?</h2>



<p>The GraphOS API orchestration platform from Apollo GraphQL is a collection of services and tools that help you build, manage, and orchestrate APIs at any scale. Apollo Studio is the UI for the control plane and includes:</p>



<ul class="wp-block-list">
<li><strong>GraphOS Explorer IDE</strong> for interactive query development<br></li>



<li><strong>GraphOS Registry</strong> for schema management and versioning<br></li>



<li><strong>GraphOS Insights</strong> for performance monitoring and analytics&nbsp;</li>
</ul>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1440" height="570" src="https://wp.apollographql.com/wp-content/uploads/2025/04/AD_4nXdETHv3MQt_PCbPvKtBYu-lPseiJQyOba2QU1EYGvXAm3fDM0tPosyj-k7OigfvlandjZ4WXsA3W_zJYRpsLI9wHhS3oVaYR4qO_ss6QSE8ILKJc7jrM-GnX8kT6pafbeg76j6VyQ.png" alt="" class="wp-image-24256" srcset="https://wp.apollographql.com/wp-content/uploads/2025/04/AD_4nXdETHv3MQt_PCbPvKtBYu-lPseiJQyOba2QU1EYGvXAm3fDM0tPosyj-k7OigfvlandjZ4WXsA3W_zJYRpsLI9wHhS3oVaYR4qO_ss6QSE8ILKJc7jrM-GnX8kT6pafbeg76j6VyQ.png 1440w, https://wp.apollographql.com/wp-content/uploads/2025/04/AD_4nXdETHv3MQt_PCbPvKtBYu-lPseiJQyOba2QU1EYGvXAm3fDM0tPosyj-k7OigfvlandjZ4WXsA3W_zJYRpsLI9wHhS3oVaYR4qO_ss6QSE8ILKJc7jrM-GnX8kT6pafbeg76j6VyQ-300x119.png 300w, https://wp.apollographql.com/wp-content/uploads/2025/04/AD_4nXdETHv3MQt_PCbPvKtBYu-lPseiJQyOba2QU1EYGvXAm3fDM0tPosyj-k7OigfvlandjZ4WXsA3W_zJYRpsLI9wHhS3oVaYR4qO_ss6QSE8ILKJc7jrM-GnX8kT6pafbeg76j6VyQ-1024x405.png 1024w, https://wp.apollographql.com/wp-content/uploads/2025/04/AD_4nXdETHv3MQt_PCbPvKtBYu-lPseiJQyOba2QU1EYGvXAm3fDM0tPosyj-k7OigfvlandjZ4WXsA3W_zJYRpsLI9wHhS3oVaYR4qO_ss6QSE8ILKJc7jrM-GnX8kT6pafbeg76j6VyQ-768x304.png 768w, https://wp.apollographql.com/wp-content/uploads/2025/04/AD_4nXdETHv3MQt_PCbPvKtBYu-lPseiJQyOba2QU1EYGvXAm3fDM0tPosyj-k7OigfvlandjZ4WXsA3W_zJYRpsLI9wHhS3oVaYR4qO_ss6QSE8ILKJc7jrM-GnX8kT6pafbeg76j6VyQ-1200x475.png 1200w" sizes="auto, (max-width: 1440px) 100vw, 1440px" /><figcaption class="wp-element-caption">&nbsp;Figure 1: GraphOS control and runtime planes</figcaption></figure>



<p>The runtime plane contains the GraphOS Router (Router) and Apollo Server.&nbsp; These components fulfill GraphQL query requests for both single-server graphs and federated supergraph deployments.&nbsp; For example, in a federated use case, clients send queries to the Router, which intelligently determines which back-end subgraphs contain the necessary data, orchestrates the data exchange, and returns precisely what the client requested.</p>



<p>GraphOS is a complete API orchestration solution that enables you to:&nbsp;</p>



<ul class="wp-block-list">
<li>Filter and transform data&nbsp;<br></li>



<li>Execute operations synchronously and in parallel<br></li>



<li>Manage authentication and authorization<br></li>



<li>Integrate diverse data sources seamlessly</li>
</ul>



<h2 class="wp-block-heading"><a href="#what-is-the-apollo-graphos-free-plan" aria-hidden="true" class="aal_anchor" id="what-is-the-apollo-graphos-free-plan"><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 is the Apollo GraphOS free plan?</h2>



<p>The free plan replaced the enterprise trial plan that was limited to 90 days. This free plan has no time restrictions, making it easy to get started with GraphQL and prototype your next project.&nbsp;</p>



<p>It also offers access to Apollo Connectors, which integrates REST API data into a graph without writing complex procedural code. The free plan includes the same functionalities as the enterprise plan, with the following limitations:</p>



<ul class="wp-block-list">
<li>Self-hosted routers are rate-limited to 60 requests per minute<br></li>



<li>Organizations are limited to 3 team members<br></li>



<li>Insights, checks, and traces for graphs of all types (not just those using GraphOS Router), with data retention limited to one day</li>
</ul>



<p>Support is available through the <a href="https://community.apollographql.com/">Apollo Community</a>.</p>



<p>The free plan is ideal for personal projects and exploring GraphOS, providing all the essentials to learn, experiment, and create at no cost. When your API orchestration needs expand, Apollo’s paid plans immediately remove the free plan&#8217;s rate limits, allowing you to scale your workload to any level of request volume.&nbsp; Depending on your paid plan, you may also use features such as:</p>



<ul class="wp-block-list">
<li><strong>Single Sign-On (SSO)</strong> support<br></li>



<li><strong>GraphOS Router extensibility</strong>, such as external coprocessors<br></li>



<li><strong>Advanced collaboration tools</strong>, such as schema proposals or configurable linting<br></li>



<li>Comprehensive <strong>Audit History</strong></li>
</ul>



<h2 class="wp-block-heading"><a href="#get-started-with-your-free-plan" aria-hidden="true" class="aal_anchor" id="get-started-with-your-free-plan"><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 your free plan</h2>



<p>Anyone can create an organization on the free plan by:</p>



<ol class="wp-block-list">
<li>Signing up for <a href="https://studio.apollographql.com/signup?utm_campaign=Unlock%20the%20Power%20of%20API%20Orchestration&amp;utm_medium=blog&amp;utm_source=website">GraphOS</a>, or</li>



<li>Logging into Apollo Studio with your existing account and creating a new organization.</li>
</ol>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1600" height="949" src="https://wp.apollographql.com/wp-content/uploads/2025/04/AD_4nXeTzXGT4_GJJY58eM78S03CiVrcXwlLRntcNPBTYEgTjX_oDHZ9oo8MhYJuLjYlFW2S7tbr2ztEq2pzD9y087BO9hVcxJWX9xE0LpWyVA23A0lGwKSj1-Xs86wfzMhqjw-t4oXigw.png" alt="" class="wp-image-24258" srcset="https://wp.apollographql.com/wp-content/uploads/2025/04/AD_4nXeTzXGT4_GJJY58eM78S03CiVrcXwlLRntcNPBTYEgTjX_oDHZ9oo8MhYJuLjYlFW2S7tbr2ztEq2pzD9y087BO9hVcxJWX9xE0LpWyVA23A0lGwKSj1-Xs86wfzMhqjw-t4oXigw.png 1600w, https://wp.apollographql.com/wp-content/uploads/2025/04/AD_4nXeTzXGT4_GJJY58eM78S03CiVrcXwlLRntcNPBTYEgTjX_oDHZ9oo8MhYJuLjYlFW2S7tbr2ztEq2pzD9y087BO9hVcxJWX9xE0LpWyVA23A0lGwKSj1-Xs86wfzMhqjw-t4oXigw-300x178.png 300w, https://wp.apollographql.com/wp-content/uploads/2025/04/AD_4nXeTzXGT4_GJJY58eM78S03CiVrcXwlLRntcNPBTYEgTjX_oDHZ9oo8MhYJuLjYlFW2S7tbr2ztEq2pzD9y087BO9hVcxJWX9xE0LpWyVA23A0lGwKSj1-Xs86wfzMhqjw-t4oXigw-1024x607.png 1024w, https://wp.apollographql.com/wp-content/uploads/2025/04/AD_4nXeTzXGT4_GJJY58eM78S03CiVrcXwlLRntcNPBTYEgTjX_oDHZ9oo8MhYJuLjYlFW2S7tbr2ztEq2pzD9y087BO9hVcxJWX9xE0LpWyVA23A0lGwKSj1-Xs86wfzMhqjw-t4oXigw-768x456.png 768w, https://wp.apollographql.com/wp-content/uploads/2025/04/AD_4nXeTzXGT4_GJJY58eM78S03CiVrcXwlLRntcNPBTYEgTjX_oDHZ9oo8MhYJuLjYlFW2S7tbr2ztEq2pzD9y087BO9hVcxJWX9xE0LpWyVA23A0lGwKSj1-Xs86wfzMhqjw-t4oXigw-1536x911.png 1536w, https://wp.apollographql.com/wp-content/uploads/2025/04/AD_4nXeTzXGT4_GJJY58eM78S03CiVrcXwlLRntcNPBTYEgTjX_oDHZ9oo8MhYJuLjYlFW2S7tbr2ztEq2pzD9y087BO9hVcxJWX9xE0LpWyVA23A0lGwKSj1-Xs86wfzMhqjw-t4oXigw-1200x712.png 1200w" sizes="auto, (max-width: 1600px) 100vw, 1600px" /><figcaption class="wp-element-caption">Figure 2: Apollo Studio showing free plan organization&nbsp;</figcaption></figure>



<p>Self-hosted routers can be hosted on the cloud provider of your choice.&nbsp; The Free plan limits requests to 60 per minute. Exceeding this limit will return an HTTP 503 (Service Unavailable) error, and you’ll receive upgrade instructions via email if this occurs.</p>



<p><strong>Important Note</strong>: If you have an existing enterprise trial, you’ll need to create a new organization to migrate to the free plan, then <a href="https://www.apollographql.com/docs/graphos/platform/graph-management/transfers">transfer</a> your existing GraphQL APIs and schemas to that new organization.&nbsp;</p>



<p>For more information, check out the <a href="https://www.apollographql.com/pricing">https://www.apollographql.com/pricing</a> page and <a href="https://support.apollographql.com/space/ETKB/1297809476/Free+plan+FAQs">Apollo GraphOS Free plan FAQs</a>.</p>



<p></p>


Apollo GraphOS Free Plan: Unlock the Power of API Orchestration


<p>We&#8217;re announcing an important update: starting with the 1.60 release of <a href="https://www.apollographql.com/graphos-router">Apollo GraphOS Router</a> and Apollo Router Core coming in the next few weeks, <a href="https://www.apollographql.com/federation">Apollo Federation</a> 1.0 supergraphs will no longer be supported. This update accompanies the introduction of a <a href="https://www.apollographql.com/docs/graphos/routing/query-planning/native-query-planner">new native query planner</a> in these Apollo Router versions, marking a significant advancement in our technology. <a href="https://www.apollographql.com/docs/graphos/reference/migration/to-federation-version-2">Upgrading to Apollo Federation 2.0</a> is essential to leverage these improvements fully, and as Federation and Apollo Router are mission-critical infrastructure for your API workloads, we are here to guide you through every step of this transition to confidently operating your GraphQL platform.</p>



<p><strong>Understanding the importance of upgrading</strong></p>



<p>The next Apollo Router versions, 1.60 and beyond, include a new native query planner with significant performance enhancements. Our extensive testing of over 620 million operations showed a median 10x improvement in query planning time, a 2.9x reduction in CPU utilization, and a 2.2x reduction in memory consumption. Designed specifically for Federation 2.0 supergraphs, this new query planner simplifies maintenance and enhances security by eliminating dependencies, including the need for a JavaScript execution engine within the Apollo Router process.</p>



<p><strong>Timeline and planning</strong></p>



<p>Federation 1.0 supergraphs have been marked as deprecated in our <a href="https://www.apollographql.com/graphos/studio">GraphOS Studio</a> UI and users have not been able to create them since Q3 2023. With the upcoming new Apollo Router versions, support for Federation 1.0 supergraphs will end across all Apollo products, including Apollo Gateway. We strongly recommend you upgrade to Apollo Router and Federation 2.0 to ensure continued compatibility with our latest innovations.</p>



<p>If you are still operating your GraphQL deployment without having yet migrated to Federation 2.0, upgrading to the new query planner in Apollo Router 1.60 and beyond will introduce a breaking change.&nbsp;</p>



<p>Migration to Federation 2.0 is simple and focuses on the composition layer, without requiring changes to existing subgraphs in most cases. You only need to compose a supergraph with Federation 2.0 and typically your subgraphs can continue using Federation 1.0 until they need 2.0 features. Our<a href="https://www.apollographql.com/docs/graphos/reference/migration/to-federation-version-2"> migration guide</a> details how you can update just your Federation composition step to compile a compatible supergraph.</p>



<p><strong>Available resources and ongoing support</strong></p>



<p>We recognize that transitioning from Federation 1.0 to Federation 2.0 is a significant step for some of our users. This decision reflects our commitment to eliminating the complexities of outdated technology and ensuring our offerings meet the evolving needs of modern API infrastructures. We are dedicated to transparent communication and improving our deprecation processes to help maintain the robustness, efficiency, and security of your systems.&nbsp;</p>



<p>Apollo values your partnership and trust as we continue to innovate. We are here to support you through this transition to keep your API infrastructure powerful and future-proof. For additional support, please visit our <a href="https://community.apollographql.com/t/migrate-apollo-federation-1-0-supergraphs-to-apollo-federation-2-0/8125">Apollo Community</a> or, for GraphOS users, contact our Technical Support team at <a href="mailto:support@apollographql.com">support@apollographql.com</a>. </p>



<p></p>


Migrate Apollo Federation 1.0 Supergraphs to Apollo Federation 2.0


<p>Writing resolvers for REST APIs has been a rite of passage for developers working with GraphQL, but what if there were an easier way? Meet Apollo Connectors.&nbsp;&nbsp;</p>



<p>As shown in Figure 1, Apollo Connectors mitigate the need to write code that connects to and returns data from REST APIs, reducing code surface area and time so you can focus on the business problem you&#8217;re trying to solve.</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdJZU6oZN7MiGs9r1tQQXZkwJJpcuPFikCrKor3lk6x3MroNldHwChst6pbHyV0h2d8fx0bdhmW7xxntWRZCNWhxOe3ZrMe-lt0P1_MZQ16jxNuOmPkQdayuZT_XW9cF_69YpmiEA?key=Tfq51hg4_0CBkUiIKxkXplEo" alt=""/></figure>



<p><em>Figure 1: Data flow showing Apollo Connector for REST APIs</em></p>



<p>In this article, we will walk through a React client web application that leverages the Apollo GraphQL client to call a public <a href="https://currencyapi.com/">CurrencyAPI</a> web service using the REST API Apollo Connector for REST APIs.&nbsp; A screenshot of the UI is seen in the following figure:&nbsp;&nbsp;</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdmYwlhbO07vkGGfTIugVC2usLpczle-KJMiJoGsGgE53FYx4zzzo3TFsFiMJ5InCSTzJ7HA7cSxtF9HRXJLQ7j6zhZ1jatfDn1WGDFQ2sY-ixRi7Fmpz-HNH2TQPQiOOmat7an?key=Tfq51hg4_0CBkUiIKxkXplEo" alt=""/></figure>



<p><em>Figure 2: Screenshot of the Currency Converter</em></p>



<p>Under the covers, the React app uses the GraphQL Client as usual and issues the query statement.&nbsp; There are no changes there.&nbsp; On the backend, you simply define the GraphQL schema file and that’s it. There is no need to create resolvers to fetch the data from the REST API.&nbsp; In the following sections, you will learn how to set up and configure the Apollo Connector for REST APIs.</p>



<h1 class="wp-block-heading"><a href="#getting-started" aria-hidden="true" class="aal_anchor" id="getting-started"><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>Getting Started</h1>



<p>In this article we will use a third party service called CurrencyAPI to fetch real-time currency exchange rates.&nbsp; At the time of this writing (Nov 2024), CurrencyAPI offers a free API key.&nbsp; If you wish to follow along, create an API key from <a href="https://currencyapi.com/">https://currencyapi.com/</a> and copy it down, as you will need it later.</p>



<p>You will also need an Apollo account and the latest version of Apollo Rover CLI.&nbsp; See sections 1 and 2 of the following Apollo Connector tutorial for installation instructions:</p>



<p><a href="https://www.apollographql.com/tutorials/connectors-intro-rest/02-setup">https://www.apollographql.com/tutorials/connectors-intro-rest/02-setup</a></p>



<p>Next, clone the repository.</p>



<p><code>git clone https://github.com/RWaltersMA/CurrencyConverter.git</code></p>



<h2 class="wp-block-heading"><a href="#obtain-api-keys-and-configure-demo" aria-hidden="true" class="aal_anchor" id="obtain-api-keys-and-configure-demo"><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>Obtain API keys and configure demo</h2>



<p>At the time of this writing, Apollo Connectors is in preview with an anticipated general availability in early 2025.&nbsp; This blog will be updated as this feature evolves.</p>



<p>Now, we are ready to configure Apollo Studio and obtain our API Key.&nbsp; Navigate to <a href="http://studio.apollographql.com/?_gl=1*tm0r8z*_gcl_aw*R0NMLjE3MzE3MDM4ODQuQ2owS0NRaUFfOXU1QmhDVUFSSXNBQmJNU1BzRm5OM1NIXzRWQWN2VHJGRFBrQkctcVltVk9ncU1iLUJjczh4YkpBOVlUZzFGQ3MyWngwZ2FBaHBfRUFMd193Y0I.*_gcl_au*MTM2NzI4NDM4Ny4xNzMwMjIwNjQ0">Apollo Studio</a> and click “Create a new Graph.”&nbsp; In the “Publish your schema using Federation” dialog, you will see toward the bottom the API Key to be used with Rover.</p>



<p>Below is a sample:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-shell-session">APOLLO_KEY=service:Currency-02wxjh:xxxxxxxxxxxxxxx \
  rover subgraph publish Currency-02wxjh@current \
  --schema ./products-schema.graphql \
  --name your-subgraph-name \
  --routing-url http://products.prod.svc.cluster.local:4001/graphql</code></pre>



<p>Copy the value for <code>APOLLO_KEY</code>.&nbsp; Open the <code>rover-dev.md file</code> and update the section with your personalized <code>APOLLO_KEY</code>.&nbsp; Copy the service name to <code>APOLLO_GRAPH_REF</code> and save the file.</p>



<p>Next, update the <code>router-config.yaml</code> file and replace the placeholders “&lt;&lt;REPLACE&gt;&gt;” with the API Key you obtained from currencyAPI and save this file.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-yaml">preview_connectors:
  subgraphs:
    currency:
      $config:
        # Replace this value with your currencyAPI key
        apikey: &lt;&lt;REPLACE&gt;&gt;</code></pre>



<p>Now, we are ready to start a local Apollo instance.&nbsp; Copy and paste into a terminal the <code>rover dev</code> statement that is within your <code>rover-dev.md </code>file.&nbsp; For example, the command for <code>sh</code> looks like the following:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-shell-session">APOLLO_KEY=&quot;service:Currency-02wxjh:xxxxxxxxxx&quot; \
APOLLO_GRAPH_REF=&quot;Currency-02wxjh@current&quot; \
APOLLO_ROVER_DEV_ROUTER_VERSION=2.0.0-preview.1 \
rover dev --supergraph-config supergraph.yaml --router-config router-config.yaml</code></pre>



<p>If successful, the console will display the following:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-">supergraph config loaded successfully
warning: Do not run this command in production! It is intended for local development only.
==&gt; Watching /Users/robwalters/Code/CurrencyConverter/currency.graphql for changes
WARN: Connector debugging is enabled, this may expose sensitive information.
==&gt; your supergraph is running! head to http://localhost:4000 to query your supergraph
successfully composed with version =2.10.0-preview.0
successfully composed with version =2.10.0-preview.0 after updating the &#039;currency&#039; subgraph</code></pre>



<div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained">
<p>A note about <code>router-config.yaml</code>:&nbsp; In this example, we are launching a react client on the same machine as Rover.&nbsp; Since these are operating on different ports, the client on localhost:4000 and Rover on localhost:3000, the server needs to address CORS (Cross origin resource sharing).&nbsp; To do this, we added the following configuration to the <code>router-config.yaml </code>file:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-yaml">cors:
  allow_any_origin: true</code></pre>
</div></div>



<p>Note that setting CORS to allow any origin option is not recommended for production use unless necessary.&nbsp; For more information on configuration parameters in the router, check out the <a href="https://www.apollographql.com/docs/graphos/reference/router/configuration#yaml-config-file">online documentation</a>.</p>



<h1 class="wp-block-heading"><a href="#starting-the-client" aria-hidden="true" class="aal_anchor" id="starting-the-client"><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>Starting the client</h1>



<p>Navigate to the <strong>client</strong> folder and issue:</p>



<p><code>npm install</code></p>



<p>Then</p>



<p><code>npm start</code></p>



<p>Once launched, a web browser will open to localhost:3000 and display the UI shown in Figure 2.</p>



<p>Enter any value into the amount and select your favorite base and desired currency.&nbsp; Press Convert to see the most current amount in your desired currency.</p>



<p>Let’s take a look at what is happening under the covers.&nbsp; First let’s look at the client code, specifically the <code>convert.js</code> file within the <strong>src/components </strong>folder.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-typescript">// GraphQL query to fetch currencyList and listExchangeRate
const GET_currencyList = gql`
  query Query {
    currencyList {
      symbol
      name
    }
    listExchangeRate {
      symbol
      rate
    }
  }
`;</code></pre>



<p>Our simple example has two queries <code>currencyList</code><strong>,</strong> which returns the complete list of symbols and names for the currency, and <code>listExchangeRate</code><strong>,</strong> which returns the current rate for each symbol.&nbsp; These data are used to populate the drop-downs in the UI.&nbsp; When using Apollo Connectors, the client does not need to make any changes.&nbsp; It is business as usual for your front-end folks.&nbsp; The real magic is in the back end.</p>



<h1 class="wp-block-heading"><a href="#taking-a-closer-look-at-the-apollo-connector" aria-hidden="true" class="aal_anchor" id="taking-a-closer-look-at-the-apollo-connector"><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>Taking a closer look at the Apollo Connector</h1>



<p>Open the <code>currency.graphql</code> file.&nbsp; This file contains the configuration for the REST Apollo Connector.&nbsp;&nbsp;</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">extend schema
  @link(
    url: &quot;https://specs.apollo.dev/federation/v2.10&quot;
    import: [&quot;@key&quot;]
  )
  @link(
    url: &quot;https://specs.apollo.dev/connect/v0.1&quot;
    import: [&quot;@source&quot;, &quot;@connect&quot;]
  )
  @source(
    name: &quot;v1&quot;
    http: {
      baseURL: &quot;https://api.currencyapi.com/v3/&quot;
      headers: [{ name: &quot;apikey&quot;, value: &quot;{$config.apikey}&quot; }]
    }
  )

type Query {
  &quot;A list of currencies&quot;
  currencyList: [Currency]
    @connect(
      source: &quot;v1&quot;
      http: { GET: &quot;/currencies&quot; }
      selection: &quot;&quot;&quot;
        data-&gt;entries {
          symbol: key
          name: value.name
        }
      &quot;&quot;&quot;
    )

  &quot;List exchange rates&quot;
  listExchangeRate: [ExchangeRate]
    @connect(
      source: &quot;v1&quot;
      http: { GET: &quot;/latest&quot; }
      selection: &quot;&quot;&quot;
        data-&gt;entries {
          symbol: key
          rate: value.value
        }
      &quot;&quot;&quot;
    )
}

type Currency {
   symbol: String
   name: String
}

type ExchangeRate {
   symbol: String
   rate: Float
}</code></pre>



<p>This is all that is needed for your Apollo Server to connect to a REST API, no extra resolver code!&nbsp; Looking at the GraphQL query, you’ll see an <code>@link</code> statement referencing Apollo Connector.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">@link(
  url: &quot;https://specs.apollo.dev/connect/v0.1&quot;
  import: [&quot;@source&quot;, &quot;@connect&quot;]
)</code></pre>



<p>Here, we are importing the <code>@source</code> and <code>@connect</code> directives.&nbsp; The <code>@connect</code> requires additional configuration parameters such as the details about the HTTP request, any headers, and a parameter called “selection” which filters the data from the REST API results.&nbsp; Here is the <code>currencyList</code> field in our example:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">  &quot;A list of currencies&quot;
  currencyList: [Currency]
    @connect(
      source: &quot;v1&quot;
      http: { GET: &quot;/currencies&quot; }
      selection: &quot;&quot;&quot;
        data-&gt;entries {
          symbol: key
          name: value.name
        }
      &quot;&quot;&quot;
    )</code></pre>



<p>In this query, the Apollo Connector will use the base url defined in the <code>@link</code> and append the string defined as part of the HTTP request type in this case is GET.&nbsp; Since our currencyAPI endpoint requires an authentication header, we add the <strong>headers</strong> field and add a key-value pair referencing the API Key and value we defined earlier in the <code>router-config.yaml </code>file.&nbsp; Next, we need to tell the connector what data to extract from the API results.&nbsp; We define this in the <strong>selection</strong> parameter.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-perl">data-&gt;entries {
  symbol: key
  name: value.name
}</code></pre>



<p>For reference, the data that returns from the CurrencyAPI is similar to the following:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-json">{
  &quot;data&quot;: {
    &quot;AED&quot;: {
      &quot;symbol&quot;: &quot;AED&quot;,
      &quot;name&quot;: &quot;United Arab Emirates Dirham&quot;,
      &quot;symbol_native&quot;: &quot;د.إ&quot;,
      &quot;decimal_digits&quot;: 2,
      &quot;rounding&quot;: 0,
      &quot;code&quot;: &quot;AED&quot;,
      &quot;name_plural&quot;: &quot;UAE dirhams&quot;,
      &quot;type&quot;: &quot;fiat&quot;,
      &quot;countries&quot;: [
        &quot;AE&quot;
      ]
    },
    ...
  }
}</code></pre>



<p>For our client we want to return just the symbol and name of each of the currencies.&nbsp; Since our return result has all our data under the “data” field, we start with data and iterate through each subdocument using the <strong>entities</strong> keyword.&nbsp; For each of these <strong>entities,</strong> we return the key, which in this example result is “AED” and add that value to a “symbol” field.&nbsp; We give the field “name” the value of the name field in the result. For a complete discussion and more examples of selection parameters, see the <a href="https://www.apollographql.com/docs/graphos/schema-design/connectors/selection">online documentation</a>.</p>



<h1 class="wp-block-heading"><a href="#summary" aria-hidden="true" class="aal_anchor" id="summary"><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>Summary</h1>



<p>Building resolvers for REST APIs can be a complex yet essential task for developers working with GraphQL. However, Apollo Connectors now provide a simpler, more efficient way to integrate REST APIs into your GraphQL schema, eliminating the need for custom resolver code. In this article, you learned how to setup and configure an Apollo Connector for REST APIs that query data from the CurencyAPI public API endpoint.&nbsp; Apollo Connectors is currently in preview, for more information, check out the <a href="https://www.apollographql.com/graphos/apollo-connectors">Apollo Connectors</a> website.</p>



<h1 class="wp-block-heading"><a href="#call-to-action" aria-hidden="true" class="aal_anchor" id="call-to-action"><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>Call to action</h1>



<p>Curious how Apollo Connectors can streamline your GraphQL workflows? Sign up for a <a href="https://www.apollographql.com/connectors-demo">demo</a> or join our upcoming webinar on December 12th, 2024: <a href="https://www.apollographql.com/events/api-orchestration-in-30-minutes-a-stripe-checkout-workflow-with-apollo-connectors">API Orchestration in 30 Minutes: A Stripe Checkout Workflow with Apollo Connectors</a>.&nbsp; After attending this webinar, you will have a solid understanding of orchestrating API calls with Apollo Connectors in the context of real-world use cases.&nbsp; If you are reading this after the event date, the webinar will be available on-demand.</p>


Effortless Data Fetching: Introducing Apollo Connectors for REST APIs


<p>Good API programs promote agility and can evolve APIs according to the needs of the business. While it’s important to roll out changes quickly, it cannot come at the expense of reliability. Apollo GraphOS provides workflows to evolve a supergraph safely, including schema checks and insights. These popular features enable API teams to test for breaking changes before rolling out schema updates, allowing them to deliver changes quickly without impacting reliability downstream. We’ve recently shipped significant reliability and usability improvements to schema checks and insights that benefit GraphOS customers. Users now benefit from improved reliability and usability related to input objects, enum types, union types, and interface types.</p>



<h2 class="wp-block-heading" id="Improved-operation-checks-for-interface-and-union-types"><a href="#improved-operation-checks-for-interface-and-union-types" aria-hidden="true" class="aal_anchor" id="improved-operation-checks-for-interface-and-union-types"><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>Improved operation checks for interface and union types</h2>



<p>Previously, any time a user removed an interface from a type, or a type was removed for a union, a schema check would fail for any operation that used that interface or union type, even if the specific type that was removed was not used in the operation. We now do more detailed checks to ensure that we only consider the change as breaking if the operation uses the specific type that was removed.</p>



<h2 class="wp-block-heading" id="Ignore-potentially-breaking-changes-and-default-value-changes"><a href="#ignore-potentially-breaking-changes-and-default-value-changes" aria-hidden="true" class="aal_anchor" id="ignore-potentially-breaking-changes-and-default-value-changes"><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>Ignore potentially breaking changes and default value changes</h2>



<p>In the past, when you ran an operation check against a variant with no traffic, we would fail the check if we saw any potentially breaking changes. Similarly, a change to a default value of an argument was always considered a breaking change for any operation that used the default. API platform teams now have some additional configuration available to override this default behavior, so that checks run against can be run against variants with no traffic without errors, and default value changes are not considered breaking. Like the other checks configuration, these new options can be enabled per-variant or per-graph.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="239" src="https://wp.apollographql.com/wp-content/uploads/2024/07/image-1024x239.png" alt="" class="wp-image-23822" srcset="https://wp.apollographql.com/wp-content/uploads/2024/07/image-1024x239.png 1024w, https://wp.apollographql.com/wp-content/uploads/2024/07/image-300x70.png 300w, https://wp.apollographql.com/wp-content/uploads/2024/07/image-768x179.png 768w, https://wp.apollographql.com/wp-content/uploads/2024/07/image-1200x280.png 1200w, https://wp.apollographql.com/wp-content/uploads/2024/07/image.png 1255w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<h2 class="wp-block-heading" id="Improved-usability-of-the-operation-checks-page"><a href="#improved-usability-of-the-operation-checks-page" aria-hidden="true" class="aal_anchor" id="improved-usability-of-the-operation-checks-page"><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>Improved usability of the operation checks page</h2>



<p>The operation check page has been a bit difficult to use in the past, especially when a check is run against a lot of operations. To fix this, we’ve given the page a fresh coat of paint, and the checked operations are now shown in a paginated table that can be filtered by status or by operation name or ID. The details of the operation are still just a click away, and they have been given some more real estate to allow you to more easily see the operation details. We have also made some other usability improvements, such as always showing operations that have been checked even if they were previously marked as safe or ignored, as well as providing more details about what was changed in the schema.</p>



<figure class="wp-block-video"><video controls src="https://wp.apollographql.com/wp-content/uploads/2024/07/video_1280.mp4"></video></figure>



<h2 class="wp-block-heading" id="Enhanced-signature-reporting-in-Apollo-Router"><a href="#enhanced-signature-reporting-in-apollo-router" aria-hidden="true" class="aal_anchor" id="enhanced-signature-reporting-in-apollo-router"><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>Enhanced signature reporting in Apollo Router</h2>



<p>In older versions of Apollo Router, operation signatures that appeared in GraphOS had aliases removed and inline input objects replaced with a placeholder empty object. This meant that some operations could not be executed when they were opened in Explorer, and it also hid some useful information. Starting from v1.49.0, you can enable a new experimental config in your router: <code>telemetry.apollo.experimental_apollo_signature_normalization_algorithm: enhanced</code> which configures the router to send aliases and the shape of inline input objects to GraphOS. We still redact all values from the inline input objects, but now you should be able to run operations from the insights page more reliably.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="691" src="https://wp.apollographql.com/wp-content/uploads/2024/07/image-1-1024x691.png" alt="" class="wp-image-23826" srcset="https://wp.apollographql.com/wp-content/uploads/2024/07/image-1-1024x691.png 1024w, https://wp.apollographql.com/wp-content/uploads/2024/07/image-1-300x203.png 300w, https://wp.apollographql.com/wp-content/uploads/2024/07/image-1-768x519.png 768w, https://wp.apollographql.com/wp-content/uploads/2024/07/image-1-1200x810.png 1200w, https://wp.apollographql.com/wp-content/uploads/2024/07/image-1.png 1336w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<h2 class="wp-block-heading" id="Enhanced-checks-and-better-insights-on-input-object-fields-and-enum-values"><a href="#enhanced-checks-and-better-insights-on-input-object-fields-and-enum-values" aria-hidden="true" class="aal_anchor" id="enhanced-checks-and-better-insights-on-input-object-fields-and-enum-values"><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>Enhanced checks and better insights on input object fields and enum values</h2>



<p>Until now, GraphOS has not shown insights on any input object fields or enum values used in operations, and there have been some limitations on operation checks related to enum values and input object types. In Apollo Router v1.50.0 we have introduced a new configuration option for GraphOS Enterprise customers: <code>telemetry.apollo.experimental_apollo_metrics_reference_mode: enhanced</code>. With this option enabled, you will now see insights on all input object fields and enum values that are used in your operations. And with this new data, we are able to mark schema checks as passing if an unused enum value or input object field is removed, or the nullability or default value of an input object field is changed in a safe way.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="514" src="https://wp.apollographql.com/wp-content/uploads/2024/07/image-2-1024x514.png" alt="" class="wp-image-23828" srcset="https://wp.apollographql.com/wp-content/uploads/2024/07/image-2-1024x514.png 1024w, https://wp.apollographql.com/wp-content/uploads/2024/07/image-2-300x151.png 300w, https://wp.apollographql.com/wp-content/uploads/2024/07/image-2-768x386.png 768w, https://wp.apollographql.com/wp-content/uploads/2024/07/image-2.png 1165w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>We hope you can give all these new features a try soon, and if you have any feedback you’d like to provide on them, please let us know!</p>


Enhanced Checks and Observability in GraphOS


<p><em>Caching, Native Cost Calculation and Limiting, and Telemetry Capabilities Revolutionize API Management and Streamline Building Cross-Platform Digital Application Experiences</em></p>



<p>Today at PlatformCon, <a href="https://apollographql.com">Apollo GraphQL</a>, the creator of GraphQL federation, announced new features in <a href="https://www.apollographql.com/graphos/">Apollo GraphOS</a> are now generally available to better leverage GraphQL’s developer productivity and performance benefits at any scale. This release provides API platform teams with visibility, usability, and performance benefits for GraphQL federation, enabling the engineering teams they serve to maximize the value of their APIs across their business.</p>



<p>As the leading GraphQL federation platform, GraphOS provides an abstraction layer for API complexity, enabling product engineering teams to rapidly build and iterate features based on customer demand. <a href="https://www.apollographql.com/resources/gartner-when-to-use-graphql-to-accelerate-api-delivery">Gartner® predicts that </a>30% of enterprises using GraphQL will utilize GraphQL federation by 2027, up from less than 5% in 2024.<sup>1 </sup>Apollo believes this trend suggests the number of enterprises using GraphQL federation as their API access layer will increase by 12x. GraphOS provides everything enterprise teams need to deliver GraphQL federation at any scale.&nbsp;</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>“GraphQL federation removes the friction between the frontend and backend that we see in distributed architectures,” said Matt DeBergalis, Chief Technology Officer and co-founder at Apollo GraphQL. “This latest GraphOS release enables API platform teams to operationalize GraphQL federation’s benefits faster, so they can focus less on building custom tooling and more on their customers’ needs.”</p>
</blockquote>



<p>This latest GraphOS release includes significant improvements around observability, usability, and performance, enabling API platform teams to operate GraphQL federation more easily than ever before.&nbsp; “At enterprise-scale, every millisecond of latency in your consumer’s digital experiences impacts the bottom line,” said Rob Brazier, VP of Product at Apollo GraphQL. “With this release of Apollo GraphOS, we’ve made it even easier for API platform teams to observe and optimize the performance of federated graphs.”&nbsp;</p>



<p><strong>Apollo’s latest release provides operational excellence for GraphQL federation</strong></p>



<p>GraphQL federation is becoming a de facto architecture for platform engineering teams to simplify API governance across distributed architectures. Client teams can fetch all the data they need from a single endpoint, and this paradigm enables API platform teams to enforce better governance, provide better visibility into service usage, as well as use standardized tools for performance. GraphOS provides a complete solution for delivering GraphQL federation at any scale:</p>



<div class="wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-2 wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li><strong>Better application performance</strong> – Apollo introduces an improved and simplified form of API caching built for GraphQL federation. GraphOS’s caching layer spans any number of APIs and now, in public preview, supports entity caching. Entities are object types that are composed from multiple GraphQL APIs and are the business objects or “nouns of every business.” API platform teams can store entities such as their inventory, products, or user records in a Redis data store. API platform teams can set how long these entities are cached in the data store, enabling API platform teams to significantly improve performance across an entire fleet of applications. &#8220;We&#8217;ve rolled out entity caching in production and are observing a decrease in median response time,&#8221; said Nimit Barochia, Senior Principal Software Engineer at Dow Jones. &#8220;The major improvement is how much less traffic we send to our subgraphs. Like a 8-10x decrease in some cases.&#8221;</li>
</ul>



<ul class="wp-block-list">
<li><strong>Cost control </strong>– API platform teams need a means to ensure that costly GraphQL operations don’t slow performance or create a denial of service. Platform teams need a means to limit cost of GraphQL operations processed by the GraphOS Router. Apollo is adding in public preview native cost calculation and limiting to GraphOS to make it easy for platform teams to centrally implement this, rather than relying on underlying services.</li>



<li><strong>Stronger support and improved performance</strong> – Micro-frontends provide a frontend architecture that refines performance and composability across mobile and web applications. To improve performance, micro-frontend UIs typically batch multiple client operations, issued close together, into a single API request. GraphOS is adding better support for these use cases, enabling GraphOS to handle batched requests from clients to a supergraph. It also further augments performance by ensuring that batches are kept intact when processed and passed on to the required subgraphs.</li>



<li><strong>Enhanced telemetry</strong> – API platform teams need both standardized and custom metrics to better optimize federated graphs for performance and business objectives. GraphOS now provides unparalleled visibility to debug and optimize federated graphs, enabling these teams to import these metrics into their Application Performance Monitoring tool of choice for better decision-making.&nbsp;</li>



<li><strong>Significant improvements to the GraphOS management plane</strong> – In Apollo Studio, schema checks and insights enable API teams to build, test, and ship changes to their federated graph with confidence. This release features significant UX improvements and better insights, enabling API teams to ship changes faster without introducing breaking changes to downstream clients.</li>
</ul>
</div>



<p><strong>Apollo customers to focus on innovation instead of API aggregation or orchestration</strong></p>



<p>AI is driving rapid innovation across industries, making the API layer critical for delivering competitive, personalized applications. Apollo aims to help API platform teams leverage GraphQL federation’s benefits across engineering organizations, empowering their teams to lead their organizations into the AI era.&nbsp;</p>



<p><strong>Learn more with Apollo&nbsp;</strong></p>



<ul class="wp-block-list">
<li><a href="https://www.apollographql.com/events/apollo-graphos-summer-update-operational-excellence-for-graphql-federation?utm_campaign=2024-06-12_Webinar_Apollo-GraphOS-Summer-Update-Operational-Excellence&amp;utm_medium=email&amp;utm_source=sales">Attend a webinar</a> on June 12 to learn more about what’s new in GraphOS and see new features demoed.&nbsp;</li>



<li>Join Apollo <a href="https://lu.ma/platformcon-watch-party-apollo">live on June 13 </a>in NYC as it celebrates the largest conference for platform engineering, PlatformCon, and hear from customers COX Automotive, The New York Times, and Wayfair on how they’re finding success with Apollo’s federated GraphQL technology.</li>



<li>And the largest gathering of GraphQL enthusiasts and API platform teams is coming. Join Apollo at <a href="https://summit.graphql.com/">GraphQL Summit</a>, October 8-10, where engineering teams can learn from industry leaders spearheading successful GraphQL deployments at scale.</li>
</ul>



<p><sup>1</sup>Gartner, When to Use GraphQL to Accelerate API Delivery, By Shameen Pillai, et al, March 7, 2024. GARTNER is a registered trademark and service mark of Gartner, Inc. and/or its affiliates in the U.S. and internationally and is used herein with permission. All rights reserved.</p>



<h1 class="wp-block-heading"><a href="#about-apollo-graphql" aria-hidden="true" class="aal_anchor" id="about-apollo-graphql"><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>About Apollo GraphQL</h1>



<p><a href="https://apollographql.com">Apollo GraphQL </a>helps developers help the world by providing a better API platform across teams. Apollo’s open-source software is downloaded 25M times per month and its commercial GraphQL technologies power the most innovative brands today. Teams at Netflix, Snap, and the New York Times ship personalized, omnichannel experiences faster with a supergraph – a self-service GraphQL platform that spans any number of backend services. Serving over 5T requests in 2023, the Apollo GraphOS<sup>TM</sup> platform simplifies API development with workflows and infrastructure to build, test, and ship supergraphs at any scale. Based in San Francisco, Apollo is backed by Insight Partners, Andreessen Horowitz, Matrix Partners, and Trinity Ventures. Learn more at: <a href="https://www.apollographql.com">https://www.apollographql.com</a>.</p>


Apollo GraphQL Announces Major GraphOS Update, Enhancing Observability and Performance for Enterprise-Scale GraphQL Federation


<p>GraphQL’s secret sauce is its ability to act as an abstraction layer for service-oriented backends, translating a sea of microservices into a more human-friendly representation of an organization’s data and capabilities. However, as a graph inevitably expands across more and more of the backend, it becomes increasingly difficult for the platform and backend teams that own it to fully understand its structure.&nbsp;</p>



<p>This pain is particularly acute at organizations deploying a federated GraphQL API (also known as a supergraph) at a massive scale with <a href="https://apollographql.com/docs/federation">GraphQL Federation</a>. The distributed nature of developing supergraphs makes it possible to scale them across many independent backend teams and domains, but it also significantly increases the complexity of the relationships in the schema and makes it difficult to find value in existing schema visualization tools which are designed for traditional monolithic graphs.&nbsp;</p>



<p>As the creators of Federation, we want to give API developers a better way to visually explore their supergraph. Today, we’re excited to release native schema visualization in Apollo GraphOS Studio, <strong>free</strong> ( 🎉) for all users. API architects and developers can now use <a href="https://www.apollographql.com/graphos">Apollo GraphOS</a> to visually explore the types, fields, and connections in their graph without running their graph locally, enabling introspection, or spinning up a separate visualization tool.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1493" height="814" src="https://wp.apollographql.com/wp-content/uploads/2024/03/graph-vis.png" alt="" class="wp-image-23493" srcset="https://wp.apollographql.com/wp-content/uploads/2024/03/graph-vis.png 1493w, https://wp.apollographql.com/wp-content/uploads/2024/03/graph-vis-300x164.png 300w, https://wp.apollographql.com/wp-content/uploads/2024/03/graph-vis-1024x558.png 1024w, https://wp.apollographql.com/wp-content/uploads/2024/03/graph-vis-768x419.png 768w, https://wp.apollographql.com/wp-content/uploads/2024/03/graph-vis-1200x654.png 1200w" sizes="auto, (max-width: 1493px) 100vw, 1493px" /></figure>



<h2 class="wp-block-heading"><a href="#centrally-explore-your-federated-graph" aria-hidden="true" class="aal_anchor" id="centrally-explore-your-federated-graph"><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>Centrally explore your federated graph</h2>



<p>Historically, generating a schema visualization for a federated graph required jumping through some hoops. You either had to run the graph with introspection enabled (<a href="https://www.apollographql.com/blog/why-you-should-disable-graphql-introspection-in-production">generally not recommended</a> for production graphs) or copy-paste the supergraph SDL into a hosted visualization tool. For extra points, you could spin up your own visualization service and integrate it with your graph’s deployment pipeline, but even then you would probably experience limited returns as most out-of-the-box graph visualization libraries aren’t equipped to handle the scale and complexity of a supergraph.</p>



<p>With GraphOS Studio, you and your team can explore an always-up-to-date visualization of your graph with integrated capabilities like subgraph filtering and entity highlighting that simplify navigation for supergraphs. You can also copy and share a direct link to any view within the visualization to help other developers, product managers, and non-technical contributors understand the structure of the graph.</p>



<figure class="wp-block-video"><video autoplay controls loop muted src="https://wp.apollographql.com/wp-content/uploads/2024/03/vis-highlight-entities-1.mp4" playsinline></video></figure>



<h2 class="wp-block-heading"><a href="#visualize-graph-performance" aria-hidden="true" class="aal_anchor" id="visualize-graph-performance"><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>Visualize graph performance</h2>



<p>In addition to making large graphs more intelligible, the schema visualizer in GraphOS Studio also helps you uncover more actionable information by integrating metrics for your graph. From the Highlight drop-down in the UI, you can choose to highlight fields by error rate, request rate, and P95 latency, helping you understand which parts of the graph may need to be debugged or optimized.</p>



<figure class="wp-block-video"><video autoplay controls loop muted src="https://wp.apollographql.com/wp-content/uploads/2024/03/vis-highlight-usage-1.mp4" playsinline></video></figure>



<p>To dig further into errors and performance, you can navigate to the insights page for any field directly from the schema visualization UI.</p>



<figure class="wp-block-video"><video autoplay controls loop muted src="https://wp.apollographql.com/wp-content/uploads/2024/03/vis-to-insights.mp4" playsinline></video></figure>



<h2 class="wp-block-heading"><a href="#get-started" aria-hidden="true" class="aal_anchor" id="get-started"><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</h2>



<p>Schema visualization is available today for all GraphOS users! To get started, log in or create a graph in <a href="https://studio.apollographql.com">GraphOS Studio</a>, and navigate to Schema &gt; Visualization. As always, we would love to hear your feedback so we can improve our visualization tools in future iterations. Don’t hesitate to drop us a question or comment in our community <a href="https://discord.gg/graphos">Discord</a>.</p>



<p>Happy visualizing!</p>


Visualizing federated GraphQL APIs with GraphOS Studio


<p>As an engineering organization grows, the quality of its internal developer platforms directly influences its ability to execute. It’s why <a href="https://www.gartner.com/en/articles/what-is-platform-engineering">80% of large software organizations are expected to establish platform engineering teams by 2026</a> and why many existing platform teams are turning to federated GraphQL APIs, known as <a href="https://www.apollographql.com/docs/resources/glossary/#supergraph">supergraphs</a>, to build self-service API platforms. Client teams leverage these platforms to quickly build features without orchestrating APIs, and backend teams autonomously contribute services from their respective domains via modules called subgraphs.</p>



<p>However, contributions that affect the <em>shape</em> of your supergraph (i.e. the schema) still require cross-team coordination to ensure (1) we are designing the schema in a way that continues to benefit developer velocity, (2) that we don’t break client apps, and (3) that our changes don’t conflict with other backend teams’ subgraph schemas. The modularity of the supergraph can make this coordination tricky since each subgraph schema may live in a different codebase, and not every required contributor or approver may have access to each of those codebases.</p>



<p>Apollo aims to make it easy for any number of teams to better collaborate and contribute to a supergraph. Today, we are excited to announce general availability of <a href="https://www.apollographql.com/docs/graphos/delivery/schema-proposals">GraphOS Schema Proposals</a> – a new centralized change management workflow in GraphOS Studio that streamlines the process of proposing, reviewing, and approving schema changes to a supergraph.</p>



<h2 class="wp-block-heading"><a href="#centrally-manage-changes-with-integrated-checks" aria-hidden="true" class="aal_anchor" id="centrally-manage-changes-with-integrated-checks"><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>Centrally manage changes with integrated checks</h2>



<p>Developers contributing to a supergraph are typically distributed across multiple teams, making it difficult to take advantage of traditional change management workflows that application teams use across a particular codebase. Although these workflows provide the right tooling, they are implemented at too granular of a level, failing to provide the visibility into the overall impact to the supergraph that platform teams require.&nbsp;</p>



<p>GraphOS Schema Proposals provide a purpose-built change management workflow for the API platform layer, allowing developers and platform engineers across multiple teams to propose, review, and approve schema changes.</p>



<h3 class="wp-block-heading"><a href="#propose-and-test-schema-changes" aria-hidden="true" class="aal_anchor" id="propose-and-test-schema-changes"><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>Propose and test schema changes</h3>



<p>Proposing a schema change in GraphOS is the first step to making a change to a supergraph. GraphOS Studio now has an integrated schema editor that subgraph developers can use to make changes to existing subgraph schemas or even create new subgraph schemas from scratch.&nbsp;</p>



<p>The schema editor is integrated with all of the other great features of GraphOS Studio, allowing authors to see GraphQL-aware diffing in real time and run linter checks as they work.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1600" height="820" src="https://wp.apollographql.com/wp-content/uploads/2024/02/proposals-editor.png" alt="" class="wp-image-23342" srcset="https://wp.apollographql.com/wp-content/uploads/2024/02/proposals-editor.png 1600w, https://wp.apollographql.com/wp-content/uploads/2024/02/proposals-editor-300x154.png 300w, https://wp.apollographql.com/wp-content/uploads/2024/02/proposals-editor-1024x525.png 1024w, https://wp.apollographql.com/wp-content/uploads/2024/02/proposals-editor-768x394.png 768w, https://wp.apollographql.com/wp-content/uploads/2024/02/proposals-editor-1536x787.png 1536w, https://wp.apollographql.com/wp-content/uploads/2024/02/proposals-editor-1200x615.png 1200w" sizes="auto, (max-width: 1600px) 100vw, 1600px" /></figure>



<p>Whenever someone saves a revision on a proposal, GraphOS Studio will automatically run <a href="https://www.apollographql.com/docs/graphos/delivery/schema-checks/">schema checks</a> to validate that the proposed schema changes will compose with other existing subgraphs and won’t break client operations.</p>



<h3 class="wp-block-heading"><a href="#review-and-approve-schema-changes" aria-hidden="true" class="aal_anchor" id="review-and-approve-schema-changes"><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>Review and approve schema changes</h3>



<p>Once someone on your team has drafted a schema proposal, the author can mark it as <code>OPEN FOR FEEDBACK</code><em> </em>to make it visible to other subgraph, platform, and client developers with the proper permissions. If the proposal needs approval from specific reviewers like a team lead or a potentially affected client developer, the author can request a review from those users.&nbsp;</p>



<p>If your organization has a governance policy that requires certain users to approve every schema change for a graph – a platform team lead, for example – graph admins can add those users as <em>default</em> reviewers from the graph settings page. Admins can also set a minimum number of reviewers required for a proposal to be <code>APPROVED</code>.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1600" height="662" src="https://wp.apollographql.com/wp-content/uploads/2024/02/proposals-review-request.png" alt="" class="wp-image-23344" srcset="https://wp.apollographql.com/wp-content/uploads/2024/02/proposals-review-request.png 1600w, https://wp.apollographql.com/wp-content/uploads/2024/02/proposals-review-request-300x124.png 300w, https://wp.apollographql.com/wp-content/uploads/2024/02/proposals-review-request-1024x424.png 1024w, https://wp.apollographql.com/wp-content/uploads/2024/02/proposals-review-request-768x318.png 768w, https://wp.apollographql.com/wp-content/uploads/2024/02/proposals-review-request-1536x636.png 1536w, https://wp.apollographql.com/wp-content/uploads/2024/02/proposals-review-request-1200x497.png 1200w" sizes="auto, (max-width: 1600px) 100vw, 1600px" /></figure>



<p>Once the minimum number of approvals has been reached and any mandatory default reviewers have approved the proposal, the proposal is marked as <code>APPROVED</code> and is ready for publishing.</p>



<h2 class="wp-block-heading"><a href="#publish-approved-changes" aria-hidden="true" class="aal_anchor" id="publish-approved-changes"><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>Publish approved changes</h2>



<p>In addition to editing and reviews, GraphOS Schema Proposals also provides developers with a streamlined workflow for implementing approved changes locally and safeguards to prevent unapproved changes from being published.</p>



<p>Once a developer has created a proposal, subgraph developers can use Apollo’s Rover CLI to quickly <a href="https://www.apollographql.com/docs/graphos/delivery/schema-proposals/implementation#pull-proposed-schemas-with-rover">pull associated subgraph schemas</a> with rover subgraph fetch. From this point, subgraph developers can then follow the standard steps for developing and delivering changes to their subgraph:</p>



<ol class="wp-block-list">
<li>Make local changes to subgraph server code, including updating or writing new resolvers</li>



<li>Run GraphOS schema checks locally using the Rover CLI (including a new Proposals task to verify that schema changes have a matching approved proposal in GraphOS)</li>



<li>Publish the subgraph schema to GraphOS</li>



<li>Deploy changes to your subgraph server</li>
</ol>



<p><em>(Note: the Schema Proposals workflow </em><strong><em>does not</em></strong><em> automate the above steps, but </em><a href="https://www.apollographql.com/docs/rover/ci-cd/"><em>they can be automated in your CI/CD pipelines using the Rover CLI</em></a><em>)</em></p>



<h3 class="wp-block-heading"><a href="#preventing-publishing-of-unapproved-changes" aria-hidden="true" class="aal_anchor" id="preventing-publishing-of-unapproved-changes"><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>Preventing publishing of unapproved changes</h3>



<p>Although the proposals workflow does not automate the deployment process for schema changes, the new Proposal task in the schema checks workflow does provide a safeguard against publishing unapproved changes. Graph Admins can enable or disable the Proposal task in graph settings, and they can also configure the severity of the check to <code>Error</code> or <code>Warn</code>.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1600" height="797" src="https://wp.apollographql.com/wp-content/uploads/2024/02/proposals-diff.png" alt="" class="wp-image-23346" srcset="https://wp.apollographql.com/wp-content/uploads/2024/02/proposals-diff.png 1600w, https://wp.apollographql.com/wp-content/uploads/2024/02/proposals-diff-300x149.png 300w, https://wp.apollographql.com/wp-content/uploads/2024/02/proposals-diff-1024x510.png 1024w, https://wp.apollographql.com/wp-content/uploads/2024/02/proposals-diff-768x383.png 768w, https://wp.apollographql.com/wp-content/uploads/2024/02/proposals-diff-1536x765.png 1536w, https://wp.apollographql.com/wp-content/uploads/2024/02/proposals-diff-1200x598.png 1200w" sizes="auto, (max-width: 1600px) 100vw, 1600px" /></figure>



<p>Setting the Proposal task severity to <code>Error</code> will cause schema checks to fail if any schema changes do not have a matching approved proposal. This includes schema checks that are run locally as well as when a schema is published to GraphOS, ensuring that unapproved changes are never published to the supergraph.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1600" height="488" src="https://wp.apollographql.com/wp-content/uploads/2024/02/proposals-check-severity.png" alt="" class="wp-image-23348" srcset="https://wp.apollographql.com/wp-content/uploads/2024/02/proposals-check-severity.png 1600w, https://wp.apollographql.com/wp-content/uploads/2024/02/proposals-check-severity-300x92.png 300w, https://wp.apollographql.com/wp-content/uploads/2024/02/proposals-check-severity-1024x312.png 1024w, https://wp.apollographql.com/wp-content/uploads/2024/02/proposals-check-severity-768x234.png 768w, https://wp.apollographql.com/wp-content/uploads/2024/02/proposals-check-severity-1536x468.png 1536w, https://wp.apollographql.com/wp-content/uploads/2024/02/proposals-check-severity-1200x366.png 1200w" sizes="auto, (max-width: 1600px) 100vw, 1600px" /></figure>



<h2 class="wp-block-heading"><a href="#get-started" aria-hidden="true" class="aal_anchor" id="get-started"><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</h2>



<p>Schema Proposals are generally available today for all <a href="https://apollographql.com/pricing">GraphOS Enterprise</a> customers. To create a proposal, navigate to your graph in GraphOS Studio, and open the Proposals page from the left navigation. For a full walkthrough of creating and managing proposals, head over to the <a href="https://www.apollographql.com/docs/graphos/delivery/schema-proposals/">Schema Proposals documentation</a>.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1600" height="429" src="https://wp.apollographql.com/wp-content/uploads/2024/02/proposals-nav.png" alt="" class="wp-image-23350" srcset="https://wp.apollographql.com/wp-content/uploads/2024/02/proposals-nav.png 1600w, https://wp.apollographql.com/wp-content/uploads/2024/02/proposals-nav-300x80.png 300w, https://wp.apollographql.com/wp-content/uploads/2024/02/proposals-nav-1024x275.png 1024w, https://wp.apollographql.com/wp-content/uploads/2024/02/proposals-nav-768x206.png 768w, https://wp.apollographql.com/wp-content/uploads/2024/02/proposals-nav-1536x412.png 1536w, https://wp.apollographql.com/wp-content/uploads/2024/02/proposals-nav-1200x322.png 1200w" sizes="auto, (max-width: 1600px) 100vw, 1600px" /></figure>



<p>To learn more about GraphOS Schema Proposals and agile API platform development, <a href="https://bit.ly/42E9vd9">join Apollo’s webinar</a> on February 22, 2024 with Parul Schroff, product manager for GraphOS Schema Proposals! Here are a few things the talk will cover:</p>



<ul class="wp-block-list">
<li>How federated GraphQL enables platform engineering teams to build a self-serve API platform</li>



<li>How Apollo GraphOS can help your team operationalize delivering a federated graph</li>



<li>How to leverage GraphOS Schema proposals to streamline federated schema design, review, and implementation</li>
</ul>



<p>We hope to see you there!</p>


GraphOS Schema Proposals: a principled development workflow for GraphQL API platforms


<p>GraphQL provides a self-service developer experience by enabling client teams to fetch all of the data they need with a single query. When implementing GraphQL at scale, it’s important to balance its flexibility with security measures that prevent bad actors from exploiting its self-serve nature.</p>



<p>A supergraph provides a unified but modular approach to GraphQL at scale. Not only does this simplify data fetching for client teams – it has immense benefits around visibility, security, and scalability for the platform teams who support these APIs. By using GraphOS, platform teams can block malicious traffic at the edge of the graph, define both cross-cutting and fine-grained security policies across any number of services, and provide defense in depth.</p>



<p>If you’re running a supergraph with Apollo GraphOS Enterprise, here are three ways you can use GraphOS to better secure the services in your GraphQL API:</p>



<h2 class="wp-block-heading"><a href="#centralize-authorization-in-the-router" aria-hidden="true" class="aal_anchor" id="centralize-authorization-in-the-router"><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>Centralize authorization in the router</h2>



<p>The Apollo Router provides client teams with a central access point for any number of GraphQL services.&nbsp; This isn’t just convenient for client teams – it also provides a policy enforcement point (PEP) for security teams. </p>



<p>Rather than relying on your services to block unauthorized access, GraphOS allows you to proactively and declaratively enforce authentication and authorization centrally in the router for your supergraph. Enforcing authorization in the router reduces the request load on your services by blocking unauthorized requests at the edge of the API stack and eliminates the need for any custom APIM code used to centralize enforcement.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="512" src="https://wp.apollographql.com/wp-content/uploads/2023/10/GraphOS-Authorization-unauthorized-1024x512.png" alt="" class="wp-image-22690" srcset="https://wp.apollographql.com/wp-content/uploads/2023/10/GraphOS-Authorization-unauthorized-1024x512.png 1024w, https://wp.apollographql.com/wp-content/uploads/2023/10/GraphOS-Authorization-unauthorized-300x150.png 300w, https://wp.apollographql.com/wp-content/uploads/2023/10/GraphOS-Authorization-unauthorized-768x384.png 768w, https://wp.apollographql.com/wp-content/uploads/2023/10/GraphOS-Authorization-unauthorized-1536x768.png 1536w, https://wp.apollographql.com/wp-content/uploads/2023/10/GraphOS-Authorization-unauthorized-1200x600.png 1200w, https://wp.apollographql.com/wp-content/uploads/2023/10/GraphOS-Authorization-unauthorized.png 1600w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>To set up authz enforcement in your router:</p>



<ol class="wp-block-list">
<li>Ensure that your router is <a href="https://www.apollographql.com/docs/router/enterprise-features/#enabling-enterprise-features">authenticated with your GraphOS Enterprise credentials</a></li>



<li>Configure your router to add claims to requests’ contexts with the Apollo Router’s built-in support for <a href="https://www.apollographql.com/docs/router/configuration/authn-jwt">JWT authentication</a> or with an <a href="https://www.apollographql.com/docs/router/customizations/coprocessor#adding-authorization-claims-via-coprocessor">external coprocessor</a>.</li>



<li>Create a declarative access control model in your schema with the <code>@requiresScopes</code> and <code>@authenticated</code> directives</li>
</ol>



<h2 class="wp-block-heading"><a href="#safelist-registered-operations" aria-hidden="true" class="aal_anchor" id="safelist-registered-operations"><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>Safelist registered operations</h2>



<p>One of the most common objections to GraphQL is that it allows unbounded operations — a trait that can degrade performance or result in denial-of-service if too many complex queries are sent to the endpoint. But in the case that your GraphQL endpoint only serves first-party apps, there is no need for it to allow unbounded operations. Instead, you should reduce the surface area of your graph by only allowing the exact operations required by your applications.&nbsp;</p>



<p>GraphOS allows you to do exactly that by registering and safelisting operations that you trust. Create a list of registered operations in GraphOS Studio, and turn on safelisting in your router to block any non-registered operations. To further improve performance, you can also generate unique IDs for each operation and send only the ID in the request to your router rather than the full query string.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="512" src="https://wp.apollographql.com/wp-content/uploads/2023/10/PQs_new-1-1024x512.png" alt="" class="wp-image-22696" srcset="https://wp.apollographql.com/wp-content/uploads/2023/10/PQs_new-1-1024x512.png 1024w, https://wp.apollographql.com/wp-content/uploads/2023/10/PQs_new-1-300x150.png 300w, https://wp.apollographql.com/wp-content/uploads/2023/10/PQs_new-1-768x384.png 768w, https://wp.apollographql.com/wp-content/uploads/2023/10/PQs_new-1-1536x768.png 1536w, https://wp.apollographql.com/wp-content/uploads/2023/10/PQs_new-1-1200x600.png 1200w, https://wp.apollographql.com/wp-content/uploads/2023/10/PQs_new-1.png 1600w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<h2 class="wp-block-heading"><a href="#limit-operation-complexity" aria-hidden="true" class="aal_anchor" id="limit-operation-complexity"><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>Limit operation complexity</h2>



<p>In addition to safelisting operations, it’s also prudent to enforce general complexity limits on operations to prevent any intentional or unintentional misuse of your graph. For example, allowing operations with thousands of root fields or aliases is neither efficient nor necessary.&nbsp;</p>



<p>With GraphOS, you can implement simple limits on operation depth, height, aliases, and root fields to prevent malformed operations from degrading performance.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="512" src="https://wp.apollographql.com/wp-content/uploads/2023/10/operation_limits_new-1024x512.png" alt="" class="wp-image-22698" srcset="https://wp.apollographql.com/wp-content/uploads/2023/10/operation_limits_new-1024x512.png 1024w, https://wp.apollographql.com/wp-content/uploads/2023/10/operation_limits_new-300x150.png 300w, https://wp.apollographql.com/wp-content/uploads/2023/10/operation_limits_new-768x384.png 768w, https://wp.apollographql.com/wp-content/uploads/2023/10/operation_limits_new-1536x768.png 1536w, https://wp.apollographql.com/wp-content/uploads/2023/10/operation_limits_new-1200x600.png 1200w, https://wp.apollographql.com/wp-content/uploads/2023/10/operation_limits_new.png 1600w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<h2 class="wp-block-heading"><a href="#learn-security-best-practices-at-graphql-summit" aria-hidden="true" class="aal_anchor" id="learn-security-best-practices-at-graphql-summit"><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>Learn security best practices at GraphQL summit</h2>



<p>Join API architects, engineers, and experts from Apollo at <a href="https://summit.graphql.com/event/c51538f6-4b76-44e3-871e-54180c77cad8/websitePage:aa37bf00-dba5-4e19-912a-01aad46f7426">GraphQL Summit</a> October 9-12, 2023 to discuss real-world GraphQL security challenges and best practices. If GraphQL security is your thing, these are a few sessions you won’t want to miss:</p>



<h3 class="wp-block-heading"><a href="#free-graphql-security-consultations-with-doyensec" aria-hidden="true" class="aal_anchor" id="free-graphql-security-consultations-with-doyensec"><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>Free GraphQL security consultations with Doyensec</h3>



<p>Doyensec, the premier GraphQL security consultancy, will be onsite at GraphQL Summit! Stop by on Wednesday, October 11 and Thursday, October 12 for a free consultation to discuss technical security recommendations and engineering best practices with the experts who led the Apollo Router security audits.</p>



<h3 class="wp-block-heading"><a href="#graphql-security-best-practices-and-hardening" aria-hidden="true" class="aal_anchor" id="graphql-security-best-practices-and-hardening"><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>GraphQL Security Best Practices and Hardening</h3>



<p>This talk will discuss, in depth, how to defend against hackers conducting Reconnaissance, Denial of Service, Information Disclosure, Authentication and Authorization Bypass, Injection, Request Forgery and Hijacking, XSS, SQLi and Code Execution.</p>



<h3 class="wp-block-heading"><a href="#understanding-graphql-security-protecting-your-server-from-abuse" aria-hidden="true" class="aal_anchor" id="understanding-graphql-security-protecting-your-server-from-abuse"><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>Understanding GraphQL Security: Protecting Your Server from Abuse</h3>



<p>GraphQL&#8217;s &#8220;ask for what you need and get exactly that&#8221; is great, but it can also be exploited to &#8220;get what they want without your permission and crash your app&#8221;. To protect your GraphQL server, it is important to understand the different ways in which it can be abused.</p>



<h3 class="wp-block-heading"><a href="#supergraph-authz-security-in-apollo-gateway-and-router-with-external-co-processing" aria-hidden="true" class="aal_anchor" id="supergraph-authz-security-in-apollo-gateway-and-router-with-external-co-processing"><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>Supergraph AuthZ Security in Apollo Gateway and Router with External Co-processing</h3>



<p>In an enterprise supergraph like T-Mobile&#8217;s, clients will require fine-grained permissions for different operations and fields. With the flexibility in Apollo Gateway and Router to add external co-processing of requests, attribute-based access control (ABAC) and other customizations can control client traffic at the supergraph entry point.</p>



<h3 class="wp-block-heading"><a href="#observability-and-graphql" aria-hidden="true" class="aal_anchor" id="observability-and-graphql"><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>Observability and GraphQL</h3>



<p>This lab will provide a hands-on tour of observability tools that can be configured in a supergraph. You&#8217;ll learn how to observe the behavior and performance of your supergraph using both GraphOS reporting and cloud-native telemetry.</p>



<p><strong>For a full list of talks on GraphQL security and more, check out the </strong><a href="https://summit.graphql.com/event/c51538f6-4b76-44e3-871e-54180c77cad8/websitePage:aa37bf00-dba5-4e19-912a-01aad46f7426"><strong>GraphQL Summit agenda</strong></a><strong>. We hope to see you there!</strong></p>


Enforcing GraphQL security best practices with GraphOS


<p>Travel companies like <a href="https://www.apollographql.com/customers/expediagroup">Expedia Group</a>, <a href="https://www.apollographql.com/customers/booking">Booking.com</a>, and <a href="https://www.apollographql.com/blog/backend/architecture/how-priceline-com-manages-pci-compliance-with-graphql/">Priceline</a> have unique opportunities to connect their customers with the rest of the world. Unlike other consumer industries, travel companies are not just another e-commerce store; They provide opportunities to customers that we all wish we had more time in life to experience, and unique opportunities require unique technology solutions.</p>



<p>Luckily, a supergraph can increase product engineering teams’ development velocity and help them ship new features faster by providing a singular and consistent API that can be used across different devices in the traveler&#8217;s journey. At the same time, backend teams can enjoy the flexibility of independently managing relevant portions of a schema with the safety provided by Apollo GraphOS.</p>



<h2 class="wp-block-heading"><a href="#what-does-a-travel-supergraph-look-like" aria-hidden="true" class="aal_anchor" id="what-does-a-travel-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 travel 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="720" height="405" src="https://wp.apollographql.com/wp-content/uploads/2023/06/Travel-Supergraph-Diagram.jpg" alt="" class="wp-image-21659" srcset="https://wp.apollographql.com/wp-content/uploads/2023/06/Travel-Supergraph-Diagram.jpg 720w, https://wp.apollographql.com/wp-content/uploads/2023/06/Travel-Supergraph-Diagram-300x169.jpg 300w" sizes="auto, (max-width: 720px) 100vw, 720px" /></figure>



<h2 class="wp-block-heading"><a href="#get-started-with-a-travel-supergraph-today" aria-hidden="true" class="aal_anchor" id="get-started-with-a-travel-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 travel supergraph today</h2>



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



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



<ul class="wp-block-list">
<li><a href="https://www.apollographql.com/blog/platform/travel/ship-products-faster-with-sdui/">Ship products faster with SDUI</a></li>



<li><a href="https://www.apollographql.com/blog/platform/travel/seamlessly-integrate-with-partners-to-enhance-the-travel-experience/">Seamlessly integrate with partners to enhance the travel experience</a></li>



<li><a href="https://www.apollographql.com/blog/platform/travel/delivering-personalized-travel-experiences-with-graphql/">Delivering personalized travel experiences with GraphQL</a></li>



<li><a href="https://www.apollographql.com/blog/platform/travel/mitigate-scraping-and-bot-attacks-with-graphos/" data-type="URL" data-id="https://www.apollographql.com/blog/platform/travel/mitigate-scraping-and-bot-attacks-with-graphos/">Mitigate scraping and bot attacks with GraphOS</a></li>
</ul>



<p>If you’d like to talk to an Apollo expert about how a supergraph can power your financial services,&nbsp;<a href="https://www.apollographql.com/contact-sales/?referrer=travel-solutions-page">please reach out to us</a>.</p>


How to build connected travel apps with Apollo GraphOS


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



<ul class="wp-block-list">
<li><a href="https://www.apollographql.com/blog/platform/travel/delivering-personalized-travel-experiences-with-graphql/">Delivering personalized travel experiences with GraphQL</a></li>



<li><a href="https://www.apollographql.com/blog/platform/travel/ship-products-faster-with-sdui/">Ship products faster with SDUI</a></li>



<li><a href="https://www.apollographql.com/blog/platform/travel/seamlessly-integrate-with-partners-to-enhance-the-travel-experience/">Seamlessly integrate with partners to enhance the travel experience</a></li>
</ul>



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



<p>In this digital age, where data and connectivity are a vital part of a company&#8217;s business, APIs have become essential tools for developers to enhance their applications. GraphQL is also becoming the leader for powering the API layer exposed to user-facing apps, providing access to all the data needed to power customer experiences.</p>



<p>However, this accessibility also invites malicious actors like bots to exploit these APIs, including data scraping, spamming, and executing custom queries. To strike a balance between security and utility, it is crucial to implement measures to block abusive bots from consuming your GraphQL API while allowing legitimate ones like search engines to scrape your websites for indexing purposes.</p>



<h2 class="wp-block-heading"><a href="#shielding-a-graphql-api-from-bots" aria-hidden="true" class="aal_anchor" id="shielding-a-graphql-api-from-bots"><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>Shielding a GraphQL API from bots</h2>



<p>GraphQL is a powerful technology but its <a href="https://spec.graphql.org/">specification</a> is intentionally limited to describe just the schema types and operation definitions to define how the API should be run. If you want to add additional security features, you will either need to implement these measures from scratch in your GraphQL server or use <a href="https://www.apollographql.com/graphos">Apollo GraphOS</a>, an all-in-one solution to build, monitor, and secure your GraphQL API. GraphOS also provides a number of built-in runtime security features that can help travel companies from malicious bots as travel data is a primary target for scraping.</p>



<p>In order for your front end to use your API from a web browser or mobile app it needs to be exposed on the public internet, but if the API is accessible from the public internet that means anyone can view the requests and responses being sent over the wire. If you have not <a href="https://www.apollographql.com/docs/technotes/TN0008-production-readiness-checklist/#server-side">turned off introspection</a> malicious actors can retrieve the full schema info from your public endpoint and use that knowledge to make additional custom requests to extract custom data sets. You can also add <a href="https://www.apollographql.com/docs/router/configuration/authn-jwt">authentication</a> to your Apollo Router so that requests have to be made with a valid user tokens, but malicious bots can also simulate real users or use multiple accounts.</p>



<p>Ultimately, you need to strike the right balance between limiting the execution of random, authenticated requests while still allowing the developers of known client applications to craft their unique operations and iterate the shape of those operations over time to accommodate new features.</p>



<h2 class="wp-block-heading"><a href="#extracting-your-operations" aria-hidden="true" class="aal_anchor" id="extracting-your-operations"><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>Extracting your operations</h2>



<p>Most of the time, front-end developers build their components with the queries already defined in the UI code. As a result, anyone navigating through a web app’s source code or network requests using a browser’s developer tools could parse your schema and perform the custom operations by tweaking the request made or implementing a custom call. If we could extract all the operations from our known clients in advance, then we could know ahead of time what operations are the “real” ones versus potentially malicious ones from other sources.</p>



<p>Using <a href="https://www.npmjs.com/package/@apollo/generate-persisted-query-manifest">@apollo/generate-persisted-queries</a> enables your clients to extract their operations ahead of time. You can then assign a specific id to each operation and have an id to reference at runtime. This also gives you the ability to discuss with your client teams when they want to build new operations or change existing ones when they are building new features, if the change they want to make are appropiate</p>



<h2 class="wp-block-heading"><a href="#blocking-unknown-operations" aria-hidden="true" class="aal_anchor" id="blocking-unknown-operations"><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>Blocking Unknown Operations</h2>



<p>Once you have your operations extracted, you can then register them in GraphOS with <a href="https://www.apollographql.com/blog/announcement/platform/secure-your-graphql-platform-by-safelisting-known-queries/">Persisted Queries Safelisting</a>. The allow the Apollo Router to get the list of approved operations and run in a few different modes, like <a href="https://www.apollographql.com/docs/graphos/operations/persisted-queries/#audit-mode-dry-run">auditing the unknown operations</a>:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-yaml"># router.yaml
preview_persisted_queries:
  enabled: true
  log_unknown: true</code></pre>



<p>Or blocking any operations at all that are <a href="https://www.apollographql.com/docs/graphos/operations/persisted-queries/#safelisting-ids-only">not sent by their registered id</a>:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-yaml"># router.yaml
preview_persisted_queries:
  enabled: true
  log_unknown: true</code></pre>



<h2 class="wp-block-heading"><a href="#security-in-obscure-environments" aria-hidden="true" class="aal_anchor" id="security-in-obscure-environments"><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>Security in obscure environments</h2>



<p>Safelisting works well in situations where you can communicate with your clients teams and provide them access to register their operations, but their are other scenarios where that might not be possible. Travel companies often provide a partner API so other businesses can extract the data they need or upload their company data to display on the travel apps. For these third-party uses cases you still want to protect your API, so using Apollo Router features like <a href="https://www.apollographql.com/docs/router/configuration/operation-limits">Operation Limits</a>, <a href="https://www.apollographql.com/docs/router/configuration/traffic-shaping">Traffic Shaping </a>, and <a href="https://www.apollographql.com/docs/router/customizations/coprocessor">Coprocessor</a> will allow you to limit the request rate per client. You can even introspect the incoming operation and dynamically calculate the <a href="https://ibm.github.io/graphql-specs/cost-spec.html">operation cost</a> to have more granular control on how much data partners can query for in a given time-period.</p>



<h1 class="wp-block-heading"><a href="#get-started-with-a-travel-supergraph-today" aria-hidden="true" class="aal_anchor" id="get-started-with-a-travel-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 travel supergraph today</h1>



<p>Beyond protecting your API from scraping attacks and securing access to your data, the best way to see the possibilities of a supergraph is to try one out. <a href="https://studio.apollographql.com/public/apollo-travel-supergraph/variant/prod/explorer?explorerURLState=N4IgzghgbgpgJgYQPYBsUwMYBcCWSB2AknCAFwgDMcAZgJwAsATBRALQQCsADB6-T7Va0OANhisAjBmqcA7ACNZMLhUYgANOGjxkaTLgIBRfFgBOAT2JkQMWRDhcMGCawwQYIvhAAcvCPW9PWThaWQ55DHlbRlkQAF8gA&amp;referrer=operation_collections">You can explore a travel 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/travel/how-to-build-connected-travel-apps-with-apollo-graphos/" data-type="URL" data-id="how-to-build-connected-travel-apps-with-apollo-graphos">series of travel best practices</a> that dive into different elements of this schema to illustrate how Apollo GraphOS help power essential features of modern travel applications.</p>



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


Mitigate scraping and bot attacks with GraphOS


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



<ul class="wp-block-list">
<li><a href="https://www.apollographql.com/blog/platform/travel/delivering-personalized-travel-experiences-with-graphql/">Delivering personalized travel experiences with GraphQL</a></li>



<li><a href="https://www.apollographql.com/blog/platform/travel/ship-products-faster-with-sdui/">Ship products faster with SDUI</a></li>



<li><a href="https://www.apollographql.com/blog/platform/travel/mitigate-scraping-and-bot-attacks-with-graphos/" data-type="URL" data-id="https://www.apollographql.com/blog/platform/travel/mitigate-scraping-and-bot-attacks-with-graphos/">Mitigate scraping and bot attacks with GraphOS</a></li>
</ul>



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



<p>Travel companies often strive to enhance their services by collaborating with third-party providers through API integrations. These integrations enable seamless interactions between different platforms, facilitating a more comprehensive and personalized travel experience for customers. For instance, airlines may partner with ride-share services to share loyalty points or collaborate with hotel booking sites to offer a wide range of accommodation options.</p>



<p>Traditionally, these integrations have been implemented using RESTful APIs. However, REST has limitations when it comes to the visibility of individual field usage and the clients accessing them. Conversely, traditional GraphQL approaches have their own challenges, such as the need to manage multiple GraphQL APIs for different use cases or maintaining a single GraphQL API for both internal and external users.</p>



<p>Fortunately, Apollo GraphOS comes to the rescue, streamlining the entire process of integrating third-party services in the travel industry. With GraphOS, travel companies can leverage the power of <a href="https://www.apollographql.com/blog/announcement/platform/contracts-are-now-generally-available/">Contracts</a>, demand control features, and field-level metrics to create a seamless and secure integration experience.</p>



<h2 class="wp-block-heading"><a href="#supporting-third-party-clients-with-schema-contracts" aria-hidden="true" class="aal_anchor" id="supporting-third-party-clients-with-schema-contracts"><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>Supporting third-party clients with schema contracts</h2>



<p><a href="https://www.apollographql.com/blog/platform/travel/delivering-personalized-travel-experiences-with-graphql/">In another post</a> we explored how Apollo Federation allows services to extend types to provide personalized recommendations for hotels and flights. While exposing certain parts of the schema to third-party APIs can be advantageous, there may be instances where we want to exclude specific details, such as user-specific details, from these integrations.&nbsp;</p>



<p>We can leverage Apollo Federation’s <code>@tag</code> directive and <a href="https://www.apollographql.com/docs/graphos/delivery/contracts">GraphOS Contracts</a> to enable us to selectively exclude sensitive data from third-party APIs. However, before we discuss Contracts, it&#8217;s important to understand what <a href="https://www.apollographql.com/docs/graphos/graphs/#variants">graph variants</a> are. A GraphQL service is typically deployed in multiple contexts, such as different deployment stages or configurations (production, development, etc.).&nbsp;</p>



<p>In GraphOS, each graph is designed to have one or more variants, where each variant represents a specific context or configuration of the service. Contracts are a special variant of the graph that’s derived from another variant, known as the source variant. The source variant is a supergraph and Contract variants can be used to create subsets of the overall supergraph. This provides several advantages such as being able to maintain a single source supergraph implementation while also serving different applicable versions of your supergraph to different clients.</p>



<p>Additionally, Apollo Studio&#8217;s observability tools such as client awareness and field level usage facilitate tracking and analysis of client usage for these integrations, providing deeper insights into each integration.&nbsp;</p>



<h2 class="wp-block-heading"><a href="#implementing-a-contract-variant" aria-hidden="true" class="aal_anchor" id="implementing-a-contract-variant"><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 contract variant</h2>



<p>Our supergraph source variant defines a <code>User</code> type with the following fields:</p>



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



<p>This <code>User</code> type is required to fetch a list of trips that the given user is on, however providing access to our supergraph to any third party users would enable them to not only fetch a user by their <code>id</code> they would be able to fetch any of the given user’s personal information such as their email or phone number.</p>



<p>&nbsp;Even if access to these fields are restricted by our underlying service layer, merely knowing the existence of these fields can constitute data leakage. Ideally, our third party integrations should only be able to fetch a user’s <code>id</code> in order to fetch a list of available trips for the user while being unaware of any other details. Without Contracts, you would need to maintain multiple supergraphs for each use case, which drastically complicates the management of your overall graph service.</p>



<p>A much more effective approach involving Contracts can alleviate all these issues. Contracts rely on the <code>@tag</code> directive which was introduced as part of a set of <a href="https://www.apollographql.com/docs/federation/federated-types/federated-directives/#tag">Federation-specific directives</a>. This directive only takes in a single argument, the <code>name</code> field and can be used to tag any types and fields in the schema. An annotated version of the <code>User</code> type looks like this:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">type User @key(fields: &quot;id&quot;) {
  id: ID!
  name: String @tag(name: &quot;internal&quot;)
  email: String @tag(name: &quot;internal&quot;)
  phoneNumber: Int @tag(name: &quot;internal&quot;)
}</code></pre>



<p>Now, we can leverage GraphOS contracts to automatically create a new variant from our source variant to selectively exclude any types marked with the tag “internal”.&nbsp;</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="664" src="https://wp.apollographql.com/wp-content/uploads/2023/07/contracts-demo-gif-1024x664.webp" alt="" class="wp-image-21941" srcset="https://wp.apollographql.com/wp-content/uploads/2023/07/contracts-demo-gif-1024x664.webp 1024w, https://wp.apollographql.com/wp-content/uploads/2023/07/contracts-demo-gif-768x498.webp 768w, https://wp.apollographql.com/wp-content/uploads/2023/07/contracts-demo-gif-1200x778.webp 1200w, https://wp.apollographql.com/wp-content/uploads/2023/07/contracts-demo-gif.webp 1512w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>Once done, our contract variant will have all of the sensitive fields removed. Comparing the API schemas between the supergraph schema on the left and the contract schema on the right we can see these changes applied to our contract variant:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql"># Source Variant
type User @key(fields: &quot;id&quot;) {
  id: ID!
  name: String
  email: String
  phoneNumber: Int
}

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



<p>This process has several advantages. First, we retain our original supergraph schema in the source variant and can automatically generate any downstream variants when our source schema changes, providing a single management plane for all our graphs. Secondly, this gives us the ability to ensure that any changes to our supergraph are automatically checked against our Contract variant as well, providing a safety mechanism to prevent any service disruption to any external integrations.</p>



<p>We can also lean on GraphOS’s available observability tooling such as <a href="https://www.apollographql.com/docs/graphos/metrics/field-usage">field level usage</a> and <a href="https://www.apollographql.com/docs/graphos/metrics/client-awareness">client awareness</a>, to manage the third party consumers of Contract variant. This allows us to manage deprecations and schema updates with the same mechanisms used for the internal use case.&nbsp;</p>



<p>Finally, having created a partner-specific variant, we can scale it independently from the source variant to cater to specific consumer needs. This enables us to implement personalized authentication, rate limits, and telemetry, ensuring a tailored approach for our partner-specific operations.</p>



<h2 class="wp-block-heading"><a href="#get-started-with-a-travel-supergraph-today" aria-hidden="true" class="aal_anchor" id="get-started-with-a-travel-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 travel supergraph today</h2>



<p>Beyond integrating with third-party partners, the best way to see the possibilities of a supergraph is to try one out. <a href="https://studio.apollographql.com/public/apollo-travel-supergraph/variant/prod/explorer?explorerURLState=N4IgzghgbgpgJgYQPYBsUwMYBcCWSB2AknCAFwgDMcAZgJwAsATBRALQQCsADB6-T7Va0OANhisAjBmqcA7ACNZMLhUYgANOGjxkaTLgIBRfFgBOAT2JkQMWRDhcMGCawwQYIvhAAcvCPW9PWThaWQ55DHlbRlkQAF8gA&amp;referrer=operation_collections">You can explore a travel 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/travel/how-to-build-connected-travel-apps-with-apollo-graphos/" data-type="URL">series of travel best practices</a> that dive into different elements of this schema to illustrate how Apollo GraphOS help power essential features of modern travel applications.</p>



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


Seamlessly integrate with partners to enhance the travel experience


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



<ul class="wp-block-list">
<li><a href="https://www.apollographql.com/blog/platform/travel/ship-products-faster-with-sdui/">Ship products faster with SDUI</a></li>



<li><a href="https://www.apollographql.com/blog/platform/travel/mitigate-scraping-and-bot-attacks-with-graphos/" data-type="URL" data-id="https://www.apollographql.com/blog/platform/travel/mitigate-scraping-and-bot-attacks-with-graphos/">Mitigate scraping and bot attacks with GraphOS</a></li>



<li><a href="https://www.apollographql.com/blog/platform/travel/seamlessly-integrate-with-partners-to-enhance-the-travel-experience/">Seamlessly integrate with partners to enhance the travel experience</a></li>
</ul>



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



<p>In the ever-evolving travel industry, companies are recognizing the value of <a href="https://medium.com/expedia-group-tech/ai-personalization-and-openness-exploring-the-definitive-tech-trends-of-2023-d5ba45875c80">delivering personalized experiences</a> to their customers. To achieve this, travel companies are investing in a unified data source that offers a consolidated view of a user&#8217;s journey. However, this data consolidation must be achieved while still accommodating the existing microservice architectures that enable separation of concerns.</p>



<p>Traditional approaches often fall short in providing a comprehensive and aggregated view of a customer&#8217;s data from multiple sources. Data duplication and fragmentation across services hinder the ability to create a holistic and personalized travel experience.</p>



<p>Fortunately, Apollo GraphOS and Apollo Federation come to the forefront, offering a solution that combines the benefits of a federated model with the flexibility required for service decomposition. This powerful combination enables travel companies to maintain a single unified view of their data while still leveraging the advantages of microservice architectures.</p>



<p>In this post, we will delve into the transformative potential of GraphOS and Apollo Federation in revolutionizing the travel industry by enabling highly personalized experiences. We will delve into the concept of a unified data source as the single source of truth, providing a consolidated view of a traveler’s journey, and&nbsp; discuss the advantages of using a federated model that allows service decomposition while maintaining data unity.</p>



<h2 class="wp-block-heading"><a href="#a-unified-interface" aria-hidden="true" class="aal_anchor" id="a-unified-interface"><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>A unified interface</h2>



<p>In traditional approaches like REST APIs, constructing a complete view of a customer&#8217;s travel journey requires clients to make multiple requests, tracking various data dependencies and associated business logic.&nbsp;</p>



<p>For example, in order to generate recommendations for a traveler&#8217;s journey, the service responsible for generating these recommendations needs to be aware of the current state of the traveler’s journey (e.g. whether the traveler is on the trip, or is looking for recommendations prior to booking a trip) as well as specifics on which products the traveler has purchased in the past. Service teams would need to ensure they’re managing these dependencies appropriately, and clients would have to know which fields are required to generate these recommendations and forward them to the appropriate endpoints. A typical REST-workflow for a client may look like this:</p>



<pre class="wp-block-code"><code>GET user/{id}/trip # Fetch a list of trips for the user
GET recommendations/trip/{id} # Fetch recommendations for the trip
# Fetch details for each recommendation, either hotel or flight based on 
# the type
GET hotels/{hotel_id} # Fetch hotel details
GET flights/{flight_id} # Fetch flight details</code></pre>



<figure class="wp-block-image size-large is-resized"><img loading="lazy" decoding="async" src="https://wp.apollographql.com/wp-content/uploads/2023/07/REST-vs-GraphQL-2-edited.png" alt="" class="wp-image-22146" width="613" height="220" srcset="https://wp.apollographql.com/wp-content/uploads/2023/07/REST-vs-GraphQL-2-edited.png 3505w, https://wp.apollographql.com/wp-content/uploads/2023/07/REST-vs-GraphQL-2-edited-300x108.png 300w, https://wp.apollographql.com/wp-content/uploads/2023/07/REST-vs-GraphQL-2-edited-1024x368.png 1024w, https://wp.apollographql.com/wp-content/uploads/2023/07/REST-vs-GraphQL-2-edited-768x276.png 768w, https://wp.apollographql.com/wp-content/uploads/2023/07/REST-vs-GraphQL-2-edited-1536x552.png 1536w, https://wp.apollographql.com/wp-content/uploads/2023/07/REST-vs-GraphQL-2-edited-2048x736.png 2048w, https://wp.apollographql.com/wp-content/uploads/2023/07/REST-vs-GraphQL-2-edited-1200x431.png 1200w, https://wp.apollographql.com/wp-content/uploads/2023/07/REST-vs-GraphQL-2-edited-1980x712.png 1980w" sizes="auto, (max-width: 613px) 100vw, 613px" /><figcaption class="wp-element-caption">REST Based Approach requiring chaining of API calls</figcaption></figure>



<p>One of the key benefits of GraphQL federation is its ability to manage dependencies between services. By using federation-specific directives like <code>@key</code>, services can mark up their schemas to indicate the fields they depend on or provide to other services. This allows the graph to intelligently track and resolve these dependencies, ensuring a complete and accurate customer view.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="2990" height="1656" src="https://wp.apollographql.com/wp-content/uploads/2023/07/REST-vs-GraphQL-3-edited.png" alt="" class="wp-image-22150" srcset="https://wp.apollographql.com/wp-content/uploads/2023/07/REST-vs-GraphQL-3-edited.png 2990w, https://wp.apollographql.com/wp-content/uploads/2023/07/REST-vs-GraphQL-3-edited-300x166.png 300w, https://wp.apollographql.com/wp-content/uploads/2023/07/REST-vs-GraphQL-3-edited-1024x567.png 1024w, https://wp.apollographql.com/wp-content/uploads/2023/07/REST-vs-GraphQL-3-edited-768x425.png 768w, https://wp.apollographql.com/wp-content/uploads/2023/07/REST-vs-GraphQL-3-edited-1536x851.png 1536w, https://wp.apollographql.com/wp-content/uploads/2023/07/REST-vs-GraphQL-3-edited-2048x1134.png 2048w, https://wp.apollographql.com/wp-content/uploads/2023/07/REST-vs-GraphQL-3-edited-1200x665.png 1200w, https://wp.apollographql.com/wp-content/uploads/2023/07/REST-vs-GraphQL-3-edited-1980x1097.png 1980w" sizes="auto, (max-width: 2990px) 100vw, 2990px" /><figcaption class="wp-element-caption">A simplified approach with the Apollo Router and federation using a single GraphQL request</figcaption></figure>



<h2 class="wp-block-heading"><a href="#leveraging-federation-for-enhanced-traveler-experience" aria-hidden="true" class="aal_anchor" id="leveraging-federation-for-enhanced-traveler-experience"><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>Leveraging Federation for enhanced traveler experience</h2>



<p>Apollo Federation enables service owners to expose the GraphQL fields that they’re responsible for and using GraphOS and composition, ensure that their changes will be composed into a single unified graph.&nbsp;</p>



<p>A service team responsible for providing recommendations then, can contribute a schema like so:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">type TripSuggestion @key(fields: &quot;trip { id }&quot;) {
  trip: Trip
  suggestions: [Product]
}
union Product = Hotel | Flight</code></pre>



<p>The <code>TripSuggestion</code> type utilizes Federation&#8217;s <code>@key</code> directive to indicate its dependency on a trip, specifically referencing the <code>id</code> of the trip. By doing so, the field resolvers for this type can assume that the <code>id</code> of the trip will always be available.</p>



<p>Note that the suggestions field of this type is a list of <code>Product</code>&#8216;s, which itself is a union of the <code>Hotel</code> and <code>Flight</code> types. This schema design significantly simplifies the client logic required to fetch and display a user&#8217;s suggestions. Client developers can leverage fragments to specify the particular types they are interested in and handle them accordingly. For example, a client can fetch the recommendations along with the they need with a single request:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">query CurrentTrip($userId: ID!) {
  currentTrip(userId: $userId) {
    products {
      ... on TripSuggestion {
        suggestions {
          ... on Hotel {
            id
            name
          }
          ... on Flight {
            id
            origin {
              airportCode
            }
          }
        }
      }
    }
  }
}</code></pre>



<p>By using the fragments <code>... on Hotel</code> and <code>... on Flight</code>, client developers can independently handle each case while making a single request to fetch all the necessary fields specific to hotels and flights.&nbsp;</p>



<p>This idea of using fragments to handle each case can be taken a step further, such as <a href="https://www.apollographql.com/blog/platform/travel/ship-products-faster-with-sdui">when deploying server-driven UI</a>.</p>



<h2 class="wp-block-heading"><a href="#get-started-with-a-travel-supergraph-today" aria-hidden="true" class="aal_anchor" id="get-started-with-a-travel-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 travel supergraph today</h2>



<p>Beyond delivering highly personalized recommendations, the best way to see the possibilities of a supergraph is to try one out. <a href="https://studio.apollographql.com/public/apollo-travel-supergraph/variant/prod/explorer?explorerURLState=N4IgzghgbgpgJgYQPYBsUwMYBcCWSB2AknCAFwgDMcAZgJwAsATBRALQQCsADB6-T7Va0OANhisAjBmqcA7ACNZMLhUYgANOGjxkaTLgIBRfFgBOAT2JkQMWRDhcMGCawwQYIvhAAcvCPW9PWThaWQ55DHlbRlkQAF8gA&amp;referrer=operation_collections">You can explore a travel 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/travel/how-to-build-connected-travel-apps-with-apollo-graphos/" data-type="URL">series of travel best practices</a> that dive into different elements of this schema to illustrate how Apollo GraphOS help power essential features of modern travel applications.</p>



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


Delivering personalized travel experiences with GraphQL


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



<ul class="wp-block-list">
<li><a href="https://www.apollographql.com/blog/platform/media/render-frontends-faster">Render frontends faster</a></li>



<li><a href="https://www.apollographql.com/blog/platform/media/enable-omnichannel-experiences">Enable omnichannel experiences</a></li>



<li><a href="https://www.apollographql.com/blog/platform/media/provide-real-time-data-for-consumers">Providing real-time data for consumers</a></li>
</ul>



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



<p>The ability to consume media on-demand from virtually any device with a screen is something that we often take for granted today. As a result, the volume of data that needs to be supplied by media companies providing this content has also increased dramatically.</p>



<p>As media companies have inevitably grown as enterprises, it has become increasingly apparent that having a unified understanding of their APIs and data sources is incredibly powerful, and it is exactly this that GraphQL enables by providing a singular entrypoint to all data within an organization.</p>



<p>However, building and scaling GraphQL schemas has also historically come with its own challenges as teams try to consolidate data from multiple services behind a single API endpoint for front-end developers to query. This situation can become even more complicated when you also need to expose a subset of that data to third-party client applications.&nbsp;</p>



<p>Luckily, with GraphOS, you can have the best of all worlds where you unify your data behind a single endpoint, allow service owners to manage relevant portions of GraphQL schema independently, and also expose the right amount of data to different kinds of clients.</p>



<h2 class="wp-block-heading"><a href="#benefits-of-federating-your-graph" aria-hidden="true" class="aal_anchor" id="benefits-of-federating-your-graph"><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>Benefits of federating your graph</h2>



<p>Leveraging Apollo Federation with Apollo GraphOS helps alleviate these pain points as it enables independent teams to own and develop their subgraph – empowering engineering teams to have the autonomy to contribute to their Subgraphs independently, while also providing the toolsets and controls that enable well managed composition of the supergraph, which can then be exposed to clients via an instance of Apollo Router as pictured below:</p>



<p><img loading="lazy" decoding="async" src="https://lh5.googleusercontent.com/Fpvp3JZvIppXdBvif6iZbtmuQyr9zU1GKyBj_psLuAyvSxbV7MyR2wl_xhtUW6ARPVgDVArLvkbI0QDMilmcrxUU-Uv4a-4haGltxloEDz70aM2-xTzhCRCbDzJFzRU9yyLXMFm_cQXcSu6kh8djvX8" width="624" height="351">Due to numerous disparate data sources, as well as the requirement for a consolidated entry point across channels, Apollo Federation is a compelling architectural approach for media companies that need to modernize their API strategy and increase developer efficiency.</p>



<p>However, despite the benefits that come with adopting Apollo Federation, it alone does not provide all of the answers when you need to provide multiple variations of your graph. For example, consider the need for an internal or externally facing subset of your schema. More specifically, as is often the case for media companies, the need to provide a subset of a supergraph schema to third parties while hiding possibly confidential internal fields.&nbsp;</p>



<p>Historically, the only way to accomplish this was to manage multiple graphs with all of the governance and deployment overheads that came with it. Thankfully, Apollo GraphOS provides an answer to this as well through <a href="https://www.apollographql.com/docs/graphos/delivery/contracts">contract variants</a>.</p>



<h2 class="wp-block-heading"><a href="#contracts-with-graphos" aria-hidden="true" class="aal_anchor" id="contracts-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>Contracts with GraphOS</h2>



<p>Contracts provide the ability to pick and choose types, fields, and field arguments from your supergraph schema to create multiple different variations of your graph from a single source of truth, as pictured below:</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh5.googleusercontent.com/eevkFkfTY8pFLRgoqj93u58Tw11IRjEOYKbrB0fqK52E80lMdvLpNsOGU5asJaDZicg5kaXelyHrBnGhRT85x9ZJEL9VEi-yA8axFo27shpgjeUtrh6VXWK7eHoKhfFcwqrET0y9hQ0RckKpsH3xt0Q" alt=""/></figure>



<p>As can be seen from the diagram above, contracts provide bespoke subsets of your schema driven from a single, shared supergraph.</p>



<p>Contracts enable you to create logically separated views of your single source of truth – the supergraph – which means that you only need to maintain a single unified graph. This powerful feature of GraphOS allows you to avoid huge additional maintenance overheads, while still being able to provide your known first-party clients or other third parties consumers with a tailored variation of the graph.&nbsp;</p>



<p>In addition to removing the need for duplication of effort across teams, deriving contract variants from a single supergraph helps prevent inconsistencies and divergence between versions that may have occurred as subgraph-owning teams iterate their portions of the overall schema over time.</p>



<h2 class="wp-block-heading"><a href="#applying-tags-for-third-parties" aria-hidden="true" class="aal_anchor" id="applying-tags-for-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>Applying tags for Third Parties</h2>



<p>Creating a contract variant only requires the application of a special directive in a subgraph schema and a small amount of configuration in Apollo Studio.&nbsp;</p>



<p>In order to enable Apollo Studio to detect fields that should be either included or excluded from a new contract, you can apply the @tag directive where required in your schema. Consider the case where a subgraph has the following type definitions:&nbsp;</p>



<pre class="wp-block-code"><code>type Media @key(fields: &quot;id&quot;) {
&nbsp;&nbsp;id: ID!
&nbsp;&nbsp;title: String
&nbsp;&nbsp;description: String
&nbsp;&nbsp;mediaUrl: String
&nbsp;&nbsp;releaseDate: String
&nbsp;&nbsp;internalClassification: String!
}

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



<p>Here you can see we have the definition of an object type called Media and User. However, the Media type includes an internalClassification field and the User type also includes an accountId field, both of which shouldn’t be exposed to third party applications that consume the GraphQL API. Let’s introduce the tag directive as follows in order to label the fields appropriately:</p>



<pre class="wp-block-code"><code>type Media @key(fields: &quot;id&quot;) {
&nbsp;&nbsp;id: ID!
&nbsp;&nbsp;title: String
&nbsp;&nbsp;description: String
&nbsp;&nbsp;mediaUrl: String
&nbsp;&nbsp;releaseDate: String
&nbsp;&nbsp;internalClassification: String! @tag(name:&quot;internal&quot;)
}

type User @key(fields: &quot;id&quot;) {
&nbsp;&nbsp;id: ID!
&nbsp;&nbsp;username: String
&nbsp;&nbsp;accountId: String @tag(name:&quot;internal&quot;)
}</code></pre>



<p>As you can see above, the @tag directive has been applied to the field and given a name of `internal`. Once this updated schema has been published&nbsp; to Apollo Studio, the tag is detected and it is possible to create a contract that filters this field:</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh5.googleusercontent.com/spRhf-rMvpPgDivkb1VO0Lz_gORGWpfka9-GUsd2dLEaD2jSN7xE5YRp0gd5-JiFheCvVQ6MJ0fjewsrMKnlP5I5Gw8klhU3-j1dvwaBDAYsEDF9_YF5kR34X2yHM0ivISaGIi_jorC2qRfLej99-D8" alt=""/></figure>



<p>Here the contract has been given a name of “external-api” as the intention for this contract is to provide a subset of the source graph that excludes the internally tagged fields, thus making it suitable for external users. It is then possible to select the method of filtering, which in this case is an excludes filter, as the goal is to simply exclude the tagged fields:</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh4.googleusercontent.com/NwMbulm3wRy2OpHLnbeQwNYUeIRzM6Vpwww9slxnQVhQUAUWhw2fL8QHsLvgv_lE6u9s1WEy8YdNht_Dt9ke-VRk0BA99hiUOSyWYvtfik7TALEzniySNty8WY4ocWQK1UrSbXubA71pLNvJeH7shtY" alt=""/></figure>



<p>As shown above, Apollo Studio then provides a preview of the proposed contract schema, which as shown above is successfully removing the two fields as intended. Once reviewed and created we will be able to see the resulting schema which has sensitive fields removed for that specific contract variant:&nbsp;</p>



<pre class="wp-block-code"><code>type Media @key(fields: &quot;id&quot;) {
&nbsp;&nbsp;id: ID!
&nbsp;&nbsp;title: String
&nbsp;&nbsp;description: String
&nbsp;&nbsp;mediaUrl: String
&nbsp;&nbsp;releaseDate: String
}

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



<p>As seen in the resulting schema, the contract has been created hiding the sensitive fields from third-party consumers. However, It is important to consider the method of filtering when creating contracts as, in practice, leveraging an “excludes” filter does come with the risk of possibly leaking fields because it requires very careful management of which fields external users can see and all fields are included in the resultant schema if no tag is provided.&nbsp;</p>



<p>Generally speaking an “includes” filter is the recommended approach as it requires an explicit “Allow” of fields to be included in externally facing APIs. Every use case will differ and the most appropriate filtering approach will be dependent on the intention for the contract. Note that both filtering approaches can be used simultaneously, so the nuances of your use case should be carefully evaluated when determining how to best implement contract variants.</p>



<p>It is also important to note that each contract requires a separate instance of Apollo Router that is connected to the specific contract variant. As a result, it is not possible for a client to query internal fields on the exposed contract as those fields are marked as inaccessible and are genuinely unavailable on that instance of Apollo Router, meaning they cannot be resolved.</p>



<h2 class="wp-block-heading"><a href="#deploying-new-contracts" aria-hidden="true" class="aal_anchor" id="deploying-new-contracts"><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>Deploying new Contracts</h2>



<p>Because each contract variant will run on a unique instance of Apollo Router, you have the ability to separately manage the CI/CD workflows for that contract variant with independent checks. Any required updates to the schema are managed via the “source variant”, which is the variant of your graph that the contract filters were applied to.</p>



<p>This ensures that there is only a single source of truth that needs to be managed, removing the need to govern multiple graphs or any risk of divergence. Therefore, all changes are pushed to the source variant and Apollo Studio introduces the concept of “downstream variants.” Contracts are considered downstream variants of your graph, meaning that the updates are first applied to the source variant as it might be serving additional contracts or clients directly, and once that is complete, downstream checks are run to control any potential breaking changes to the contract specifically:</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh3.googleusercontent.com/Ij7e_S8_qAq07HW9wShRNE0Q6u5rXfk56EaVTxQkq-hofWmeowYas_C9Sqw-LP6y5Jvbt_eM6qaKumsB8lbgC9lcP8kMpJM30SsnvfjHqlr-KY3mSkY6sswiVREN0-cH10_OgJMk7L1YHN0eAGXkGxI" alt=""/></figure>



<p>It’s worth noting that by default, issues with the downstream variants <strong>don’t</strong> block the source variant. This is important as source variants might be serving multiple other downstream variants or clients themselves.</p>



<p>However, it is possible to configure downstream checks to be blocked if required, which may be beneficial to ensure consistency across variants. Ultimately, Apollo Studio provides not only the ability to create contract variants in a simple way, but also the ability to test and check these new variants as part of the overall CI/CD process, providing increased governance, security and critically predictability to the graph.&nbsp;</p>



<h2 class="wp-block-heading"><a href="#summary" aria-hidden="true" class="aal_anchor" id="summary"><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>Summary</h2>



<p>Overall, contract variants in GraphOS are a powerful way to manage multiple unrelated&nbsp; logical views of your graph from a single source of truth. Contracts help organizations easily provide an external API securely and simply with a low maintenance overhead.&nbsp;</p>



<p>It is crucial to consider the filtering approach used to create the contracts, whether include or exclude and the risks of possibly leaking fields, but of course, there is no right or wrong answer as the best approach will be dependent on use case and context.&nbsp;</p>



<p>Ultimately, contracts remove the need to manage multiple supergraphs tailored to a fixed experience requirements, and provide a simple method of creating and managing multiple variations which can be best hosted and provided via GraphOS.</p>



<h2 class="wp-block-heading"><a href="#get-started-with-a-media-supergraph-today" aria-hidden="true" class="aal_anchor" id="get-started-with-a-media-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 media 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/graph/Media-Demo-Graph/variant/current/explorer">You can explore a media supergraph and run real queries against it here.</a></p>



<p>We also have a series of case studies and blogs that dive into different elements of a typical media organization’s schema to illustrate how Apollo GraphOS help power essential features of modern media applications:</p>



<ul class="wp-block-list">
<li><a href="https://www.apollographql.com/blog/platform/media/enable-omnichannel-experiences">Enable omnichannel experiences</a></li>



<li><a href="https://www.apollographql.com/blog/platform/media/render-frontends-faster">Render frontends faster</a></li>



<li><a href="https://www.apollographql.com/blog/platform/media/provide-real-time-data-for-consumers">Provide real-time data for consumers</a></li>
</ul>



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


Manage versions of your API for third-parties Title

Manage versions of your API for third-parties


<p>For today’s media companies, consumers are expecting increasingly richer, more dynamic web and mobile clients. As a result, there are increasingly higher demands on media companies&#8217; architecture and ability to provide a deeper customer engagement across the board. This demand now requires media companies to provide more tailored, aggregated views of their data for their customers as well as being able to capture more bespoke user inputs to further tailor the experiences.</p>



<p>However, providing a consistent experience to end users can require significant architectural change or overhead especially when data is required from both internal and external sources.</p>



<p>Fortunately, a supergraph can provide the consolidated, and tailored view of required data that media company engineering teams need. Providing this singular, consistent API for all required data sets can enable frontend engineering teams to ship new features faster, provide more bespoke user experiences while reducing possible performance overheads on the client.&nbsp;</p>



<p>Similarly, leveraging a supergraph enables the backend teams the freedom and autonomy to manage relevant portions of the schema independently with the safety provided by Apollo GraphOS.</p>



<h2 class="wp-block-heading"><a href="#what-does-a-media-supergraph-look-like" aria-hidden="true" class="aal_anchor" id="what-does-a-media-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 media 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/07/FAF5A26D-42A2-48B0-BAAE-6571A402D567.png" alt="" class="wp-image-22025" srcset="https://wp.apollographql.com/wp-content/uploads/2023/07/FAF5A26D-42A2-48B0-BAAE-6571A402D567.png 960w, https://wp.apollographql.com/wp-content/uploads/2023/07/FAF5A26D-42A2-48B0-BAAE-6571A402D567-300x169.png 300w, https://wp.apollographql.com/wp-content/uploads/2023/07/FAF5A26D-42A2-48B0-BAAE-6571A402D567-768x432.png 768w" sizes="auto, (max-width: 960px) 100vw, 960px" /></figure>



<h2 class="wp-block-heading"><a href="#get-started-with-a-media-supergraph-today" aria-hidden="true" class="aal_anchor" id="get-started-with-a-media-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 media 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/graph/Media-Demo-Graph/variant/current/explorer">You can explore a media supergraph and run real queries against it here.</a></p>



<p>We also have a series of case studies and blogs that dive into different elements of a typical media organization’s schema to illustrate how Apollo GraphOS help power essential features of modern media applications:</p>



<ul class="wp-block-list">
<li><a href="https://www.apollographql.com/blog/platform/media/render-frontends-faster">Render frontends faster</a></li>



<li><a href="https://www.apollographql.com/blog/platform/media/enable-omnichannel-experiences">Enable omnichannel experiences</a></li>



<li><a href="https://www.apollographql.com/blog/platform/media/manage-versions-of-your-api-for-third-parties">Manage versions of your API for third-parties</a></li>



<li><a href="https://www.apollographql.com/blog/platform/media/provide-real-time-data-for-consumers">Providing real-time data for consumers</a></li>
</ul>



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


How to power modern media apps with Apollo GraphOS


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



<ul class="wp-block-list">
<li><a href="https://www.apollographql.com/blog/platform/media/enable-omnichannel-experiences">Enable omnichannel experiences</a></li>



<li><a href="https://www.apollographql.com/blog/platform/media/manage-versions-of-your-api-for-third-parties">Manage versions of your API for third-parties</a></li>



<li><a href="https://www.apollographql.com/blog/platform/media/provide-real-time-data-for-consumers">Providing real-time data for consumers</a></li>
</ul>



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



<p>For nearly all media companies, performance is a critical feature. Providing a user experience which comes as close to instant as the holy grail. At the same time, users expect more sophisticated media consumption experiences like recommendations and reviews based on their own individual habits and historical choices, and this data often needs to be retrieved from multiple services.</p>



<p>In practice, this means striking a careful balance of what minimum data requirements must be met for the current user request to allow them to engage with content as quickly as possible, and &#8211; then progressive rendering of components not critical to the users initial request.&nbsp;</p>



<p>Fortunately for those who expose a GraphQL API to their front-end clients, GraphOS supports the @defer directive so that client developers can declaratively mark fields in a GraphQL queries to indicate “I want this data immediately” and “I can wait for this data, give it to me when you get it”. This powerful feature of Apollo Router allows client developers to exercise a new level of control over their requests and determine what data is most important to render first while also eliminating the need for service owners to draw awkward boundaries around slower-to-retrieve data so that clients may query them separately.</p>



<h2 class="wp-block-heading"><a href="#seeing-defer-in-action" aria-hidden="true" class="aal_anchor" id="seeing-defer-in-action"><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>Seeing @defer in action&nbsp;</h2>



<p>The @defer directive can play a transformative role in enhancing user experience within a media streaming application. A media streaming application typically loads multiple pieces of data when a user opens a movie or a show&#8217;s detailed view — for example,. the core details, user ratings, reviews, and recommendations for similar content. The primary data for immediate user engagement could be these core details (like movie/show title, description, and a play button), while the other data (like user ratings, reviews, and recommendations) may be less critical for initial interaction.&nbsp;</p>



<p>Without @defer, the client must wait for all data to load before rendering the page, which will block the rendering of the page until all data is returned. However, with @defer, the application can load and display essential data swiftly, then progressively load and display the non-critical data as it becomes available, without async logic needing to be created by the engineer.</p>



<p>This approach not only reduces the perceived loading time, but also creates a more seamless and responsive user experience by allowing users to interact with the content faster. This also provides the added advantage of no longer needing to create this behavior manually in order to handle slow data boundaries.</p>



<p>Consider the following query.</p>



<pre class="wp-block-code"><code>query GetMovieDetails($id: ID!) {
&nbsp;&nbsp;# I need movie immediately it is critical to the create intial&nbsp;
&nbsp;&nbsp;# rendering requirement for client

&nbsp;&nbsp;movie(id: $id) {
&nbsp;&nbsp;&nbsp;&nbsp;id
&nbsp;&nbsp;&nbsp;&nbsp;title
&nbsp;&nbsp;&nbsp;&nbsp;director {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name
&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;# I need this in the future its not critical to intial rendering
&nbsp;&nbsp;&nbsp;&nbsp;# can you deal with this automatically and return to me when ready
&nbsp;&nbsp;&nbsp;&nbsp;... @defer {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;     reviews {&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;        user {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;         name
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;         avatar
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;        }
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;        rating
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;        comment
&nbsp;&nbsp;&nbsp;&nbsp;       }
&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;# I need this in the future its not critical to intial rendering
&nbsp;&nbsp;&nbsp;&nbsp;# can you deal with this automatically and return to me when ready

&nbsp;&nbsp;&nbsp;&nbsp;... @defer {
       relatedMovies {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    id
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    title
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    coverImage
       }
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;}
}</code></pre>



<p>In the above query, the customer selects a movie to view more details, the server will then initially respond with the basic movie details like title, description, duration, release date, cover image, genres, and director&#8217;s name which will allow the application to immediately render these details on the screen.&nbsp;</p>



<p>Meanwhile, the cast information, reviews, and similar movie recommendations, marked with the @defer directive, are not critical for the initial rendering of the page. They will be awaited in the background by Apollo Router, and once ready, they will be sent to the client in a subsequent response and can then be rendered on the page. This optimizes the user&#8217;s experience by allowing them to start interacting with the movie&#8217;s main details quickly, while other, less critical information loads progressively.</p>



<h2 class="wp-block-heading"><a href="#get-started-with-a-media-supergraph-today" aria-hidden="true" class="aal_anchor" id="get-started-with-a-media-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 media 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/graph/Media-Demo-Graph/variant/current/explorer">You can explore a media supergraph and run real queries against it here.</a></p>



<p>We also have a series of case studies and blogs that dive into different elements of a typical media organization’s schema to illustrate how Apollo GraphOS help power essential features of modern media applications:</p>



<ul class="wp-block-list">
<li><a href="https://www.apollographql.com/blog/platform/media/enable-omnichannel-experiences">Enable omnichannel experiences</a></li>



<li><a href="https://www.apollographql.com/blog/platform/media/manage-versions-of-your-api-for-third-parties">Manage versions of your API for third-parties</a></li>



<li><a href="https://www.apollographql.com/blog/platform/media/provide-real-time-data-for-consumers">Provide real-time data for consumers</a></li>
</ul>



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


Image showing Render frontends faster topic

Render frontends faster


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



<ul class="wp-block-list">
<li><a href="https://www.apollographql.com/blog/platform/media/render-frontends-faster">Render frontends faster</a></li>



<li><a href="https://www.apollographql.com/blog/platform/media/manage-versions-of-your-api-for-third-parties">Manage versions of your API for third-parties</a></li>



<li><a href="https://www.apollographql.com/blog/platform/media/provide-real-time-data-for-consumers">Providing real-time data for consumers</a></li>
</ul>



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



<p>“Omnichannel” has become the go-to term to describe how data is shared across a company so that customers will have a unified experience interacting with all parts of a business. </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 to a supergraph, it’s the perfect fit for creating omnichannel experiences. Let’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, TVs or tablets — can all use the same API to accomplish their specific goals.</p>



<p>Omnichannel therefore requires the ability to map data across all channels via a common data model. In the case of a media organization, this could be represented by a common Media type, which would mean you have an`id` field that can be used across all channels, or a way of converting it in each channel.&nbsp;</p>



<p>We could define that Media type in a subgraph schema as follows:</p>



<pre class="wp-block-code"><code># Media subgraph -----------------------------------------
type Media @key(fields: &quot;id&quot;) {
&nbsp;&nbsp;id: ID!
&nbsp;&nbsp;title: String
&nbsp;&nbsp;description: String
&nbsp;&nbsp;mediaUrl: String
&nbsp;&nbsp;releaseDate: String
}</code></pre>



<p>For example, in the separate subgraph for a reviews service, we could add a review field to the Media type&nbsp; by extending it like so:</p>



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



<pre class="wp-block-code"><code># Review subgraph ----------------------------------------
type Media @key(fields: &quot;id&quot;) {
&nbsp;&nbsp;id: ID!
&nbsp;&nbsp;&quot;The reviews attached to this Media item&quot;
&nbsp;&nbsp;reviews: &#091;Review]
}</code></pre>



<p>As more and more subgraphs extend additional fields on the Media type, client developers will be able to see the full representation of the Media type which will give them the ability to create intricate queries that span across many subgraphs, such as fetching reviews or even comments for the given piece of media as long as the backing services are aware of its unique ID value.&nbsp;</p>



<h2 class="wp-block-heading"><a href="#consistency-across-channels" aria-hidden="true" class="aal_anchor" id="consistency-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>Consistency across channels</h2>



<p>An effective omnichannel strategy involves tracking a user&#8217;s movements across all your channels, such as web, iOS, Android, and TVs, along with the actions they take on each one. By creating a federated supergraph, each channel can operate independently while reporting to and consuming data from a single, reliable source.&nbsp;</p>



<p>This means that if a user starts streaming a show on one device and then switches to another one, they can pick up their interaction seamlessly from where they left off. This is a powerful concept and a key benefit to media organizations when working with a supergraph.</p>



<p>Another common strategy involves personalisation across all channels. For instance, if a user favorites a specific media item on one device, they might want that favorite item to be accessible wherever they go. Moreover, a collection of favorite items could activate the personalisation engine, which consistently makes recommendations across any channel your business operates. This approach results in a reliable and enjoyable experience for your customer.</p>



<p>To model that data in a GraphQL schema, we can see below that a User type (that was defined in a separate user subgraph that is owned by another team) can be extended by a recommendations subgraph to include a field that will return that user’s customized recommendations:</p>



<pre class="wp-block-code"><code># The Recommendation subgraph ----------------------------
type User @key(fields: &quot;id&quot;) {
&nbsp;&nbsp;id: ID!
&nbsp;&nbsp;recommendations: Recommendation
}

type Recommendation {
&nbsp;&nbsp;&nbsp;&nbsp;media: &#091;Media]
&nbsp;&nbsp;&nbsp;&nbsp;favorites: &#091;Favorites]
}

# The User subgraph --------------------------------------
type User @key(fields: &quot;id&quot;) {
&nbsp;&nbsp;id: ID!
&nbsp;&nbsp;email: String
&nbsp;&nbsp;username: String
&nbsp;&nbsp;firstName: String
&nbsp;&nbsp;surname: String
&nbsp; address: Address
}</code></pre>



<p>Using the preceding schema we can leverage Apollo Federation to fetch recommendations for a specific user across all possible channels in a consistent manner. What’s more, the recommendation service doesn’t need to know anything about a specific user expect for the user’s unique ID.&nbsp;</p>



<p>In turn, the users service doesn’t need to know anything about the recommendations that are returned in the extended recommendations field because Apollo Router will take care of querying all of the data required by the client from the different subgraphs and assembling it the shape that the client is expecting. And because all front-end clients can query data from this unified API, media consumers can expect a consistent experience across all of their devices.</p>



<h2 class="wp-block-heading"><a href="#summary" aria-hidden="true" class="aal_anchor" id="summary"><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>Summary</h2>



<p>Apollo Federation provides a huge boost in the way you can simplify your data fetching, by breaking up the larger problem into smaller more manageable bits and letting specialized teams own them. Here we demonstrated how you can use it to work with a media focused use case, we have shown you how you can have a centralized entity like Media and have multiple fields contributed by other teams without the Media domain team being the implementational bottleneck.</p>



<p>In this example we demonstrated how multiple domains in a media company use case can be easily brought together in a cohesive and maintainable fashion,. allowing the business to organically grow its business and respond to customer feature requests while maintaining experience parity across all channels.</p>



<h2 class="wp-block-heading"><a href="#get-started-with-a-media-supergraph-today" aria-hidden="true" class="aal_anchor" id="get-started-with-a-media-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 media 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/graph/Media-Demo-Graph/variant/current/explorer">You can explore a media supergraph and run real queries against it here.</a></p>



<p>We also have a series of case studies and blogs that dive into different elements of a typical media organization’s schema to illustrate how Apollo GraphOS help power essential features of modern media applications:</p>



<ul class="wp-block-list">
<li><a href="https://www.apollographql.com/blog/platform/media/render-frontends-faster">Render frontends faster</a></li>



<li><a href="https://www.apollographql.com/blog/platform/media/manage-versions-of-your-api-for-third-parties">Manage versions of your API for third-parties</a></li>



<li><a href="https://www.apollographql.com/blog/platform/media/provide-real-time-data-for-consumers">Provide real-time data for consumers</a></li>
</ul>



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



<p></p>


Image showing Enable omnichannel experiences

Enable omnichannel experiences


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



<ul class="wp-block-list">
<li><a href="https://www.apollographql.com/blog/platform/media/render-frontends-faster">Render frontends faster</a></li>



<li><a href="https://www.apollographql.com/blog/platform/media/enable-omnichannel-experiences">Enable omnichannel experiences</a></li>



<li><a href="https://www.apollographql.com/blog/platform/media/manage-versions-of-your-api-for-third-parties">Manage versions of your API for third-parties</a></li>
</ul>



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



<p>To meet consumer demand, media companies continuously strive to provide immersive and dynamic experiences across their platforms. A crucial aspect of powering these types of experiences is being able to stream real time updates to users. </p>



<p>There are almost always interesting technical and architectural implications at play when dealing with real-time data, particularly regarding how that functionality will be implemented at scale.</p>



<p>For instance, WebSocket connections are often the de-facto solution for simple use cases and often been used for implementing subscriptions operations in GraphQL APIs. However, simply implementing traditional WebSockets can also create limitations and architectural issues when you then need to provide the experience to millions of end users. What then happens in the common scenario where the subscription operation needs to return data from numerous data sources? It is exactly these challenges that federated subscriptions in Apollo GraphOS are able to solve for.</p>



<h2 class="wp-block-heading"><a href="#federated-subscriptions-with-graphos" aria-hidden="true" class="aal_anchor" id="federated-subscriptions-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>Federated subscriptions with GraphOS</h2>



<p>Subscriptions with GraphOS offer an alternative to traditional WebSocket connections by leveraging a new transport protocol based on HTTP between the client and Apollo Router. Additionally, federated subscriptions provide WebSocket deduplication to enable the solution to scale, as well as improved query planning enabling the subscription to provide data from multiple sources.</p>



<p>The ability to provide federated subscriptions can unlock new opportunities for media companies that wish to leverage a single subscription call from a client that needs to receive data in real-time from a large number of data sources. One of the most powerful features unique to Apollo federated subscriptions is that an individual subgraph can initiate real time updates, and after which, the Apollo Router can then contribute additional fields from other services to the payload returned to the client. This approach allows you to reap all of the benefits of Apollo Federation that have been available for query and mutation operations while streaming real-time data that can provide more responsive and personalized experiences for media consumers.</p>



<p>The transport protocol used by federated subscriptions is the new <a href="https://github.com/graphql/graphql-over-http/blob/main/rfcs/IncrementalDelivery.md">multipart-subscriptions protocol</a>. This protocol provides similar end results to subscriptions over WebSockets without being limited to a low number of open connections as it is based on the <a href="https://github.com/graphql/graphql-over-http/blob/main/rfcs/IncrementalDelivery.md">Incremental delivery over HTTP</a> spec. Real-time communication between Apollo Router and any applicable subgraphs is carefully implemented and performed over WebSockets because it enables maximum compatibility between existing subgraph servers that use subscriptions via protocols such as <a href="https://github.com/enisdenjo/graphql-ws">graph-ws</a> (currently the default for Apollo Router).&nbsp;</p>



<p>In order to help operate at scale, Apollo Router also provides a deduplication mechanism that allows multiple subscription requests from multiple clients to a single Router instance to be serviced by a single WebSocket connection to the required subgraph(s), instead of opening a new websocket to serve the same data to individual clients.</p>



<h2 class="wp-block-heading"><a href="#getting-started-with-federated-subscriptions" aria-hidden="true" class="aal_anchor" id="getting-started-with-federated-subscriptions"><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>Getting Started with Federated Subscriptions</h2>



<p>The experience for front-end developers that consume subscription operations that span multiple subgraphs will be much the same as consuming them through any GraphQL API. Subscription operations can be tested in Apollo Studio using Explorer just as queries and mutations can:</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh5.googleusercontent.com/qh0kwL-FQLuEF4gBBlvOJw3iu7mkLu2TM02vefRHaJ4f0fQ5a9Pk9JMWxy1iO6zbyLxjAu5imCYsHv7J-jExvPlS1As_-4YNzpkulmD3iw-qC4iLXaGiVoMiKYbgn3krZLkCKjkBfVaFRCRYNs7Shxs" alt=""/></figure>



<p>It’s important to note though that from Explorer, subscriptions can technically be configured for both WebSockets and multi-part HTTP for testing purposes. However, they can only be retrieved over HTTP for connections to Apollo Router. This can be easily configured via Apollo Studio, demonstrated in the following screenshot:</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh5.googleusercontent.com/1j7GV3nQajFZma-jxsju6Khrg7P4tTdYfiSxlQQ5dqoamWj0hKrDsHePl0_lr8Za3rzHCYBODnzcQQyAQGqw2pUpc-LUdChcTIBbc6gcZQXaah1Qx8IAjDUiuEgr4UvhQY6e_ZcCXubrCMcZlhWRgVY" alt=""/></figure>



<p>When initiating an Apollo Router instance with subscription support, there are a number of options that can be set in the YAML configuration file. Below is an example Apollo Router configuration for subscriptions in passthrough-mode, which uses long-lived WebSocket connections between Router and Subgraphs that expose a subscriptions endpoint of /subscription.</p>



<pre class="wp-block-code"><code>subscriptions:
&nbsp;&nbsp;&nbsp;mode:
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;passthrough:
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;all:&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;path: /subscription</code></pre>



<p>For more information on all of the configuration options available for subscriptions in Apollo Router, along with all of the pre-requisites, please visit <a href="https://www.apollographql.com/docs/apollo-server/data/subscriptions">our documentation</a>.&nbsp;</p>



<h2 class="wp-block-heading"><a href="#a-new-step-for-real-time-apis" aria-hidden="true" class="aal_anchor" id="a-new-step-for-real-time-apis"><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>A new step for real-time APIs</h2>



<p>Federated subscriptions allow media companies to serve huge numbers of clients with dynamic, personalized real time data originating from any of the data sources that back their supergraphs. This ability to scale and maintain both resilience and performance unlocks huge opportunities for richer experiences for customers and to offer even more bespoke real-time APIs for external users and third parties.&nbsp;</p>



<p>An example media supergraph is also available to explore on <a href="https://github.com/apollosolutions/media-supergraph">Github</a> with a Federated subscription in place to demonstrate its capabilities and the new potential for serving real time data.</p>



<h2 class="wp-block-heading"><a href="#get-started-with-a-media-supergraph-today" aria-hidden="true" class="aal_anchor" id="get-started-with-a-media-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 media 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/graph/Media-Demo-Graph/variant/current/explorer">You can explore a media supergraph and run real queries against it here.</a></p>



<p>We also have a series of case studies and blogs that dive into different elements of a typical media organization’s schema to illustrate how Apollo GraphOS help power essential features of modern media applications:</p>



<ul class="wp-block-list">
<li><a href="https://www.apollographql.com/blog/platform/media/enable-omnichannel-experiences">Enable omnichannel experiences</a></li>



<li><a href="https://www.apollographql.com/blog/platform/media/manage-versions-of-your-api-for-third-parties">Manage versions of your API for third-parties</a></li>



<li><a href="https://www.apollographql.com/blog/platform/media/render-frontends-faster">Render frontends faster</a></li>
</ul>



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


Provide real-time data for consumers Title

Provide real-time data for consumers


<p>This post is a part of our “<a href="https://www.apollographql.com/blog/platform/travel/how-to-build-connected-travel-apps-with-apollo-graphos/">How to build connected travel apps with Apollo GraphOS</a>” series. Also in this series:</p>



<ul class="wp-block-list">
<li><a href="https://www.apollographql.com/blog/platform/travel/delivering-personalized-travel-experiences-with-graphql/">Delivering personalized travel experiences with GraphQL</a></li>



<li><a href="https://www.apollographql.com/blog/platform/travel/mitigate-scraping-and-bot-attacks-with-graphos/">Mitigate scraping and bot attacks with GraphOS</a></li>



<li><a href="https://www.apollographql.com/blog/platform/travel/seamlessly-integrate-with-partners-to-enhance-the-travel-experience/">Seamlessly integrate with partners to enhance the travel experience</a></li>
</ul>



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



<p>When booking a vacation there are many different steps that require very different needs. From browsing and getting inspiration of travel destinations, to booking and enjoying the various experiences, and finally reviewing and posting about your trip and getting excited about your next destination, these all contribute to the <a href="https://maddenmedia.com/travelers-journey/">Traveler’s Journey</a>. A common trend among travel companies today is figuring out how to provide the best experience for all our customers as they move through these phases and how can our technology and data capabilities adapt to serve them. This is where development teams are deploying Server-Driven UI with GraphQL.</p>



<h1 class="wp-block-heading"><a href="#where-should-biz-logic-go" aria-hidden="true" class="aal_anchor" id="where-should-biz-logic-go"><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>Where should biz logic go?</h1>



<p><a href="https://www.apollographql.com/docs/technotes/TN0032-sdui-and-graphql/">Server Driven UI</a> (SDUI) is a design pattern that aims to push business logic from the client side to the server. But how much business logic? That depends on your team’s requirements, but a general rule of thumb is “as much as possible.” </p>



<p>What can be tricky for developers is identifying what is considered business logic. If you ask any developer what business logic is, they may tell you it should include things that revolve around the domain data, like pricing or customer info, and that UI or view logic is meant for the front end apps.</p>



<p>However, we all know that is never a full-proof approach, and over time functions that merge and transform the API responses trickle into the clients. We also tend to have more than one app consuming our APIs and so any logic that needs to be updated across them would take a lot of development effort. This leads us to a state where making a seemingly simple update&nbsp;to a line of text requires considerable work and coordination across many different teams and code bases to get everyone synchronized.</p>



<h1 class="wp-block-heading"><a href="#update-in-one-location" aria-hidden="true" class="aal_anchor" id="update-in-one-location"><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>Update in one location </h1>



<p>If you find that you and your teams are consistently running into these issues it may be time to start adopting a SDUI API. If there is any logic that your product team may want to change, experiment on, or update frequently, it makes sense that it should live on the server side so that you can make updates immediately and not have to wait for all the apps to update or even longer for an app store release.&nbsp;</p>



<p>Every team will have different product requirements and so we view SDUI not as a binary adoption or library, but as a sliding scale of how much logic is moved to the server and you can be on many different parts of the scale:<br><br><img loading="lazy" decoding="async" width="675" height="380" class="wp-image-21697" style="width: 675px;" src="https://wp.apollographql.com/wp-content/uploads/2023/06/SDUI-scale.jpg" alt="" srcset="https://wp.apollographql.com/wp-content/uploads/2023/06/SDUI-scale.jpg 720w, https://wp.apollographql.com/wp-content/uploads/2023/06/SDUI-scale-300x169.jpg 300w" sizes="auto, (max-width: 675px) 100vw, 675px" /></p>



<p>As you continue to discuss among your team what can be controlled by the server you might start with things like all the text for localization and formatting. Next may be images and controlling the scale and size given the device info. Then you might consider whether a particular component or view is shown to a given customer which can be controlled by GraphQL nullability. </p>



<p>As you work your way through the app it might make sense to even control what components are used and in what order they are rendered. This is probably most useful in landing pages or pages that have to show many different types of components, like a <a href="https://www.apollographql.com/customers/expediagroup/">trips page for a travel website</a>:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">query TripsPage($userId: ID!) {
  currentTrip(userId: $userId) {
    id
    products {
      ... on Flight {
        ...FlightFragment
      }
      ... on Hotel {
        ...HotelFragment
      }
      ... on TripSuggestion {
        suggestions {
          ... on Flight {
            ...FlightFragment
          }
          ... on Hotel {
            ...HotelFragment
          }
        }
      }
    }
  }
}

fragment HotelFragment on Hotel {
  id
  name
  reviewScore
}

fragment FlightFragment on Flight {
  id
  origin {
    airportCode
  }
  destination {
    airportCode
  }
}</code></pre>



<p>You will notice that we have a generic <code>product</code> query above. We had to discuss with our design and product team what types of travel products we might want to render, the different designs we might want to display, and if there were any changes in the future they wanted to make. </p>



<p>This query might seem overly simple, but that’s by design. What’s not shown here is that now on the server side, we can control which order they come from the server, when we render suggestions, and what products are inside of them. Using <a href="https://www.apollographql.com/docs/federation">Federation</a>, we can also split up the data resolution so that all the trips API needs to track is the product IDs. If we want to make a change to this logic we just need to update the server and deploy and our customers will start seeing the new data without having to update their app, which they probably won’t be doing while on vacation.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">type Query {
  currentTrip(userId: ID!): Trip
}

type Trip @key(fields: &quot;id&quot;) {
  id: ID!
  # The logic to decide what products to show lives here and is easily updated but we only need to store the IDs
  products: [TripsPageResult]
}

union TripsPageResult = TripSuggestion | Hotel | Flight

type TripSuggestion @key(fields: &quot;trip { id }&quot;) { trip: Trip }
type Hotel @key(fields: &quot;id&quot;, resolvable: false) { id: ID! }
type Flight @key(fields: &quot;id&quot;, resolvable: false) { id: ID! }
type User @key(fields: &quot;id&quot;, resolvable: false) { id: ID! }</code></pre>



<p>Building an SDUI app requires synchronization between the backend and frontend teams to agree on the components we want to use. Using a design system and a component library makes this process easier, but more importantly, taking a <a href="https://www.apollographql.com/events/tech-talk/schema-design-best-practices-with-apollo-federation-3/">demand-driven schema design approach</a> will lead to the schema that works best for your clients that use it.</p>



<h1 class="wp-block-heading"><a href="#get-started-with-a-travel-supergraph-today" aria-hidden="true" class="aal_anchor" id="get-started-with-a-travel-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 travel supergraph today</h1>



<p>Beyond using SDUI as a powerful to design, develop, and secure your GraphQL APIs, the best way to see the possibilities of a supergraph is to try one out. <a href="https://studio.apollographql.com/public/apollo-travel-supergraph/variant/prod/explorer?explorerURLState=N4IgzghgbgpgJgYQPYBsUwMYBcCWSB2AknCAFwgDMcAZgJwAsATBRALQQCsADB6-T7Va0OANhisAjBmqcA7ACNZMLhUYgANOGjxkaTLgIBRfFgBOAT2JkQMWRDhcMGCawwQYIvhAAcvCPW9PWThaWQ55DHlbRlkQAF8gA&amp;referrer=operation_collections">You can explore a travel 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/travel/how-to-build-connected-travel-apps-with-apollo-graphos/" data-type="URL">series of travel best practices</a> that dive into different elements of this schema to illustrate how Apollo GraphOS help power essential features of modern travel applications.</p>



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


Ship products faster with SDUI


<p>Apollo’s largest customers like Indeed and Expedia are embracing a platform engineering approach to GraphQL. This enables individual GraphQL API teams to publish changes to a schema in a self-service fashion without manual review. A build pipeline composes each team-level schema into a unified supergraph with policies that can be enforced by the Router at runtime. A platform approach enables organizations to efficiently scale their graph while providing enhanced security, performance, and governance.</p>



<p>Two of the key components in these platforms are Apollo Federation &#8211; an industry standard for API composability, and Apollo Router &#8211; the most performant runtime for federated graphs. While many Router features are available for free, some are only available with a GraphOS subscription. We want to make it clear to our community where we stand on our commercialization strategy to ensure you can make an informed decision on when to use each one. We also intend for this process to be a collaborative effort with our community. So we’d like to outline our approach to developing Apollo Router as well as how your organization can use it.</p>



<h3 class="wp-block-heading"><a href="#the-path-ahead-for-the-free-and-open-router" aria-hidden="true" class="aal_anchor" id="the-path-ahead-for-the-free-and-open-router"><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>The path ahead for the free and open Router</h3>



<p>Apollo believes in developing in the open. Apollo Router is source available, so you are free to evaluate <a href="https://github.com/apollographql/router">Apollo Router’s codebase</a> yourself and determine if it is a worthwhile part of your API stack. Once a Router feature has been released as part of our free kit, we are committed to keeping it free, forever. As with Apollo Federation, the core of the Router is also free and open should you want to experiment and contribute. We intend to keep both Federation and the core Router free and open, along with core GraphQL projects like <a href="https://github.com/apollographql/apollo-rs">apollo-rs</a>, so you have the building blocks for modern APIs and can run supergraphs in production for free.</p>



<p>A lot of customers were under the impression that because the Router was built in Rust, they had to learn to write Rust to use it. To make it easier to deploy and maintain, the Router’s functionality can be <a href="https://www.apollographql.com/docs/router/configuration/overview#yaml-config-file" target="_blank" rel="noreferrer noopener">configured in YAML</a>. The free Router also provides a well-defined extensibility model with lifecycle hooks that offer parity with Apollo Gateway middleware and plugin hooks beyond its built-in functionality. The Router supports <a href="https://www.apollographql.com/docs/router/customizations/rhai" target="_blank" rel="noreferrer noopener">Rhai scripting</a> (like Lua scripts in NGINX) for in-memory manipulation of headers, cookies, and Router context. The free Router also supports <a href="https://www.apollographql.com/docs/router/customizations/native" target="_blank" rel="noreferrer noopener">native Rust plugins</a> for advanced customizations. However, our goal is to provide built-in support for the free features needed to run the Router in production. If you have a common use case that you think should be supported, please <a href="https://github.com/apollographql/router/issues">open an issue</a>.</p>



<h3 class="wp-block-heading"><a href="#why-elastic-license-v2" aria-hidden="true" class="aal_anchor" id="why-elastic-license-v2"><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>Why Elastic License v2?</h3>



<p>The Apollo developer community is at the heart of everything we do. As stewards of our community, we want to continue serving you by funding the development of the Router. The ELv2 license enables us to do that – to remain commercially viable while facilitating open and collaborative development on the project.</p>



<h3 class="wp-block-heading"><a href="#extending-the-free-and-open-kit-with-graphos" aria-hidden="true" class="aal_anchor" id="extending-the-free-and-open-kit-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>Extending the free and open kit with GraphOS</h3>



<p>There is a difference between running Apollo Router in production and relying on it as a vital part of your business. Security, performance, and governance concerns become more complex – and a small platform team often can’t scale effectively as more subgraph teams join the graph. Enforcing policies becomes more complex as well. To remain agile, platform teams often distribute the responsibility for authoring policy to each subgraph team while having the Router enforce them at runtime.&nbsp;</p>



<p>Apollo GraphOS focuses on solving these problems. It’s a turnkey, self-service GraphQL API platform that will support additional defense-in-depth, faster performance at scale, scalable real-time data, faster onboarding of existing data and services, and build-time governance policies that ensure best practices.</p>



<ul class="wp-block-list">
<li><strong>Supergraph CI</strong> provides an integrated build pipeline with composition, schema checks, and breaking change prevention. Platform teams define build-time policies (custom approval workflows, linting, etc) to ensure best practices are followed while supporting developer self-service.</li>



<li><strong>Supergraph CD</strong> safely deploys supergraph updates without downtime to the Router fleets serving your dev, UAT, and prod environments.</li>



<li><strong>GraphOS runtime features of Apollo Router</strong> provide improved defense-in-depth, faster performance at scale, scalable real-time data, and the like. Security and caching policies authored by subgraph teams are enforced by the Router at runtime.</li>



<li><strong>Graph-native observability &amp; developer decision support</strong> help you understand graph performance, field usage by specific app versions, and the impact of proposed schema changes.</li>
</ul>



<p>While you could build, maintain, and operate all of this yourself on top of the free building blocks we provide in Federation and the Router, it’s a lot of undifferentiated heavy lifting. We think GraphOS will provide a compelling value for most users, especially as we roll out these GraphOS features across our paid plans (Serverless, Dedicated, and Enterprise) to ensure there’s a suitable pricing model for all organizations — with Apollo standing behind the fully integrated stack.</p>



<h3 class="wp-block-heading"><a href="#the-future-of-apollo-router" aria-hidden="true" class="aal_anchor" id="the-future-of-apollo-router"><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>The Future of Apollo Router</h3>



<p>Apollo Router serves billions of operations a day across applications used by millions of people around the world. We also intend to earn our customers’ business every day with compelling features in GraphOS, built on top of our free kit. Our goal is to be fully transparent about the differences between our free and paid kit, and we would like to involve our community as much as possible to shape the future of Apollo Router. Apollo aims to be open about this process. We encourage you to <a href="https://discord.gg/graphos" data-type="URL" data-id="https://discord.gg/graphos">ask any questions or surface any concerns directly with our team in our <code>#apollo-router</code> Discord channel</a>. We’ll be publishing more information in the coming months about graph routing, and look forward to going on this journey with you, together.</p>


Evaluating Apollo Router: Understanding Free and Open vs Commercial Features


<p>A GraphQL API with the power to give app developers everything they need in a single query is excellent for delivery velocity, but it also could have the potential to enable improper access to data if not secured correctly.&nbsp;</p>



<p>With supergraph architecture, you can mitigate this risk by implementing the proper security controls in each subgraph, but Apollo GraphOS is helping platform teams add an additional layer of security in front of subgraphs by building controls into the graph router itself.</p>



<p>Router security is one of the key themes in our 2023 GraphOS roadmap, and today we’re excited to ship a preview of our newest router security feature for GraphOS Enterprise: operation size and complexity limiting.</p>



<h2 class="wp-block-heading"><a href="#centralized-protection-from-misuse" aria-hidden="true" class="aal_anchor" id="centralized-protection-from-misuse"><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>Centralized protection from misuse</h2>



<p>For production graphs, preventing accidental or intentional misuse is a key requirement. If not protected properly, client apps can issue expensive queries that cause excessive load on the server potentially resulting in denial of service. Even in less extreme cases, poorly formed queries can still impact the performance of client apps and lead to a slower user experience.</p>



<p>There are a variety of packages designed to limit operation complexity and cost at the server level; however, as a federated graph grows, it can become increasingly difficult to set, standardize, and maintain these limits across many subgraphs owned by different teams. Luckily, supergraph architecture presents us with the unique opportunity to centralize control in a single point: the router.</p>



<p>Enforcing operation size and complexity limits in the graph router makes it far easier to standardize policies for a large graph and alleviates the burden of coordinating limits across every subgraph.</p>



<h2 class="wp-block-heading"><a href="#limit-depth-height-root-fields-and-aliases" aria-hidden="true" class="aal_anchor" id="limit-depth-height-root-fields-and-aliases"><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>Limit depth, height, root fields, and aliases</h2>



<p>Just like it sounds! With GraphOS Enterprise, you can now configure your router to limit the depth, height, number of root fields, and number of aliased fields of any incoming GraphQL operation. If an operation exceeds any of the set limits, the router will reject it before attempting to resolve the request with a <code>400 BAD_REQUEST</code> status code.</p>



<p>All of these limits can be configured in the <code>router.yaml</code> file for any router authenticated with your GraphOS Enterprise credentials:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-yaml">preview_operation_limits:
  max_depth: 100
  max_height: 200
  max_root_fields: 40
  max_aliases: 30</code></pre>



<p>Optionally, you can also configure the router to only log a warning message for operations that exceed the set limits rather than rejecting the operation outright:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-yaml">preview_operation_limits:
  # some limits
  warn_only: TRUE</code></pre>



<p><code>warn_only</code> defaults to <code>FALSE</code>, but it can be useful to set it to <code>TRUE</code> in development environments for testing purposes.</p>



<h2 class="wp-block-heading"><a href="#getting-started" aria-hidden="true" class="aal_anchor" id="getting-started"><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>Getting started</h2>



<p>The feature preview for operation size and complexity limits is available now for all users with a GraphOS Enterprise plan. To get started, make sure that your router is authenticated with your GraphOS Enterprise credentials and is running the <a href="https://github.com/apollographql/router/releases" target="_blank" rel="noreferrer noopener">latest version of Apollo Router</a>. Then, head to <a rel="noreferrer noopener" href="https://www.apollographql.com/docs/router/configuration/operation-limits" target="_blank">the documentation</a> for detailed information about configuring limits in your <code>router.yaml</code> file.</p>



<p>If you&#8217;re not a GraphOS Enterprise customer yet, <a href="https://www.apollographql.com/contact-sales">get in touch with us</a> to learn more and start a trial!</p>



<p>We’re excited for you to start setting some limits and to hear what you think! If you encounter any problems or have feedback, feel free to <a href="https://github.com/apollographql/router/issues">open an issue</a>. That being said, this feature is still in preview, so there may be some final adjustments before we mark it as GA. To stay up to date, be sure to bookmark the <a href="https://github.com/apollographql/router/blob/dev/CHANGELOG.md">Apollo Router changelog</a>.</p>



<p>Happy querying!</p>


Prevent graph misuse with operation size and complexity limits


<p>In today&#8217;s FinTech world, customers have high expectations for their online experiences. However, providing a consistent, frictionless experience for customers across all channels is much easier said than done, especially when integrating various internal and external data sources to develop captivating experiences that enhance customer satisfaction.</p>



<p>Luckily, a supergraph can increase client engineering teams’ development velocity and help them ship new features faster by providing a singular and consistent API that can be used across different platforms. At the same time, backend teams can enjoy the flexibility of independently managing relevant portions of a schema with the safety provided by Apollo GraphOS.</p>



<h2 class="wp-block-heading"><a href="#what-does-a-financial-services-supergraph-look-like" aria-hidden="true" class="aal_anchor" id="what-does-a-financial-services-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 financial services 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-1.png" alt="" class="wp-image-20399" srcset="https://wp.apollographql.com/wp-content/uploads/2023/03/Design-Slides-for-Diagrams-1.png 960w, https://wp.apollographql.com/wp-content/uploads/2023/03/Design-Slides-for-Diagrams-1-300x169.png 300w, https://wp.apollographql.com/wp-content/uploads/2023/03/Design-Slides-for-Diagrams-1-768x432.png 768w" sizes="auto, (max-width: 960px) 100vw, 960px" /></figure>



<h2 class="wp-block-heading"><a href="#get-started-with-a-financial-services-supergraph-today" aria-hidden="true" class="aal_anchor" id="get-started-with-a-financial-services-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 financial services 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-financial-supergraph/explorer?explorerURLState=N4IgzghgbgpgJgYQPYBsUwMYBcCWSB2AknCAFwgwQBmEARgJyYC0ArCwIwZMAs8ET9DDADsTDAyoAmdsIDMcYXAwgANOGjxkaTLgIBRfFgBOAT2JkQtbhgAckmPW5MADHG42eLDPSYQYVKiZZSUlaCAA2WRsbdl4QAF8gA&amp;referrer=operation_collections&amp;variant=prod">You can explore a financial services supergraph schema and run real queries against it here.</a></p>



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



<ul class="wp-block-list">
<li><a href="https://www.apollographql.com/blog/platform/financial-services/deliver-a-personalized-customer-experience-with-graphql/" data-type="URL">Deliver a personalized customer experience with GraphQL</a></li>



<li><a href="https://www.apollographql.com/blog/platform/financial-services/directive-based-authorization-for-financial-services/" data-type="URL">Securing APIs declaratively with GraphQL</a></li>



<li><a href="https://www.apollographql.com/blog/platform/financial-services/adopt-a-customer-360-approach-to-prevent-fraud-with-graphql/" data-type="URL">Adopt a Customer 360 approach to prevent fraud with GraphQL</a></li>



<li><a href="https://www.apollographql.com/blog/platform/financial-services/ensure-compliant-and-secure-third-party-access-using-graphos/" data-type="URL">Ensure compliant and secure third-party access using GraphOS</a></li>
</ul>



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


How to power modern financial services apps with Apollo GraphOS


<p>This post is a part of our <a href="https://www.apollographql.com/blog/platform/financial-services/how-to-power-modern-financial-services-apps-with-apollo-graphos/" data-type="URL">&#8220;How to power modern financial services 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/financial-services/directive-based-authorization-for-financial-services/">Securing APIs declaratively with GraphQL</a></li>



<li><a href="https://www.apollographql.com/blog/platform/financial-services/adopt-a-customer-360-approach-to-prevent-fraud-with-graphql/" data-type="URL">Adopt a Customer 360 approach to prevent fraud with GraphQL</a></li>



<li><a href="https://www.apollographql.com/blog/platform/financial-services/ensure-compliant-and-secure-third-party-access-using-graphos/" data-type="URL">Ensure compliant and secure third-party access using GraphOS</a></li>
</ul>



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



<p>Modern customers are increasingly knowledgeable about finance—they demand faster and more personalized services that require financial services organizations to reconsider how they leverage data and technology to offer a holistic customer experience across all digital touch points. Unfortunately, many companies and institutions face obstacles to scaling developer velocity due to legacy architecture decisions and inefficient development processes.&nbsp;</p>



<p>A GraphOS-powered supergraph can be used to aggregate customer data from multiple sources to provide a singular, strongly-typed API that can power all client applications that deliver personalized experiences to customers.</p>



<h2 class="wp-block-heading"><a href="#a-unified-interface" aria-hidden="true" class="aal_anchor" id="a-unified-interface"><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>A unified interface</h2>



<p>Mobile clients—often developed as follow-ups to the original web offering—may require data that are scattered across a complex array of services. These services may expose their data via rigid APIs that, more often than not, return additional data that the clients do not need. By using GraphQL&#8217;s flexible querying capabilities, teams can easily retrieve and combine customer data from different systems and present it in a way that is tailored to specific users&#8217; needs.&nbsp;</p>



<p>Consider the need to show the user all of their accounts on iOS, Android, and web. One approach would be to call all of the necessary backend services to build the UI:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">GET /api/users?userID=123
GET /api/accounts?userID=123
…</code></pre>



<p>Using this approach, we will likely generate many requests, get data that we did not ask for, and ultimately waste time and compute resources. Another approach could be to introduce facades (also called backends-for-frontends or BFFs) in front of the backend services for each client so that a consolidate call can be made like this:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">GET /api/getUserAccounts?client=iOS&amp;userID=123</code></pre>



<p>But, this too introduces challenges, such as the need to maintain duplicate code between discrete facades.</p>



<p>Let&#8217;s take a look at the GraphQL alternative. The <code>GetAllUserAccounts</code> query retrieves specific user and account data. Behind the scenes, the <code>user</code> and <code>accounts</code> objects live in two subgraphs thus encouraging the design principle of separation of concerns.  </p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">query GetAllUserAccounts {
  user {
    id
    name
    accounts {
      id
      name
    }
  }
}</code></pre>



<p>With GraphQL, developers can use a single query to retrieve only the necessary data for a feature, which can significantly reduce the number of requests required and improve the performance of mobile applications. This can help to ensure that all users, regardless of the device they are using, have a consistent and reliable experience.</p>



<h2 class="wp-block-heading"><a href="#smart-resolvers" aria-hidden="true" class="aal_anchor" id="smart-resolvers"><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>Smart resolvers</h2>



<p>In order to respond to client requests, GraphQL servers need to retrieve the relevant data. To achieve this, they leverage <a href="https://www.apollographql.com/docs/apollo-server/data/resolvers/">resolvers</a> that are defined for each field in the schema and are executed in a specific order based on the relationships between fields. A resolver can retrieve data from a database, a REST API, or any other data source.&nbsp;</p>



<p>Resolvers can provide personalized results as well. For example, in this <code>user</code> query, the user ID is accessed via a <code>context</code> object that&#8217;s available as a parameter in all field resolver functions. This ID value would have been exposed in an HTTP header and manually applied to the <code>context</code> object when the GraphQL request initially reached the server. In a real production application, this would come from an auth provider and would be extracted from a JWT or a similar mechanism.</p>



<p>The ID value can then be used to retrieve the user from the relevant data source (or throw and error if the ID is invalid) and a client developer can use the data in the GraphQL response to tailor that user&#8217;s experience in a front-end application:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">export const resolvers = {
  Query: {
    user(_, __, context) {
      const userId = context.headers[&quot;x-user-id&quot;];
      const user = getUserById(userId);

      if (!user) {
        throw new GraphQLError(&quot;Could not locate user by id. Please specify a valid `x-user-id` header like `user:1`&quot;);
      }

      return user;
    },
  },
};</code></pre>



<p>GraphQL resolvers provide a flexible and efficient way to retrieve and aggregate customer data from multiple sources—they don’t always have to return the same data and can be customized with additional functionality.</p>



<h2 class="wp-block-heading"><a href="#get-started-with-a-financial-services-supergraph-today" aria-hidden="true" class="aal_anchor" id="get-started-with-a-financial-services-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 financial services 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-financial-supergraph/explorer?explorerURLState=N4IgzghgbgpgJgYQPYBsUwMYBcCWSB2AknCAFwgwQBmEARgJyYC0ArCwIwZMAs8ET9DDADsTDAyoAmdsIDMcYXAwgANOGjxkaTLgIBRfFgBOAT2JkQtbhgAckmPW5MADHG42eLDPSYQYVKiZZSUlaCAA2WRsbdl4QAF8gA&amp;referrer=operation_collections&amp;variant=prod">You can explore a financial services 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/financial-services/how-to-power-modern-financial-services-apps-with-apollo-graphos/" data-type="URL">series of financial services best practices</a> that dive into different elements of this schema to illustrate how Apollo GraphOS help power essential features of modern financial applications.</p>



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


Deliver a personalized customer experience with GraphQL


<p>This post is a part of our <a href="https://www.apollographql.com/blog/platform/financial-services/how-to-power-modern-financial-services-apps-with-apollo-graphos/" data-type="URL">&#8220;How to power modern financial services 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/financial-services/deliver-a-personalized-customer-experience-with-graphql/" data-type="URL">Deliver a personalized customer experience with GraphQL</a></li>



<li><a href="https://www.apollographql.com/blog/platform/financial-services/directive-based-authorization-for-financial-services/">Securing APIs declaratively with GraphQL</a></li>



<li><a href="https://www.apollographql.com/blog/platform/financial-services/ensure-compliant-and-secure-third-party-access-using-graphos/" data-type="URL">Ensure compliant and secure third-party access using GraphOS</a></li>
</ul>



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



<p>Customers are the cornerstone of any business, but many companies don’t truly know who their customers are. KYC, or Know Your Customer, is an important process for financial institutions and businesses to verify their customers’ identities and assess the associated risk factors. As part of a larger Anti-Money Laundering (AML) program, KYC helps prevent financial crimes.&nbsp;&nbsp;</p>



<p>A single customer view (SCV) provides a complete picture of a customer’s data, including personal and financial information, transaction history, and behavior patterns. SCV can help businesses comply with KYC and AML regulations; however, one of the common challenges associated with implementing SCV is data integration. Aggregating data from multiple sources, such as disparate internal systems and third-party services, can be complex and time-consuming. But GraphQL and Apollo GraphOS can help.</p>



<h2 class="wp-block-heading"><a href="#assigning-a-risk-rating-to-customers" aria-hidden="true" class="aal_anchor" id="assigning-a-risk-rating-to-customers"><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>Assigning a risk rating to customers</h2>



<p>A financial institution often needs to assess the risk associated with each customer. A KYC risk rating is a calculation based on a number of factors, including the customer’s identity. In an organization, basic customer metadata might be owned by the Identity team, while the ownership of risk assessments might be under the remit of the Compliance team. How do you create a holistic view of a customer?</p>



<p>In a federated graph, an entity is an object type that can resolve its fields across multiple subgraphs. Consider a users subgraph owned by the Identity team that contains the following type definition for <code>User</code>:</p>



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

type User @key(fields: “id”) {
  id: ID!
  name: String
}</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 entity so any other subgraph can now add fields to the <code>User</code> type.</p>



<p>We now need to add a <code>riskRating</code> field to the <code>User</code> type. To accommodate this, the Compliance team can create a new subgraph and extend the <code>User</code> like so:</p>



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

type User @key(fields: “id”) {
  id: ID!
  riskRating: Int
}</code></pre>



<p>Once this new subgraph is composed into a GraphOS-powered supergraph, any developer will be able to retrieve the needed customer metadata, including their risk rating. The Compliance team can continue to make improvements to risk assessment without impacting the Identity team or other using the supergraph.</p>



<h2 class="wp-block-heading"><a href="#simplifying-aml-checks" aria-hidden="true" class="aal_anchor" id="simplifying-aml-checks"><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>Simplifying AML checks</h2>



<p>By creating a unified data experience, financial institutions can simplify execution of AML procedures. To create a comprehensive view of the customer’s financial behavior, data such as transactions, credit reports, and public records must be gathered and examined. This data set can then provide insights into the customer’s spending patterns and financial history. Based on the results, appropriate actions can be taken to mitigate risks.&nbsp;</p>



<p><br>Using GraphQL, we are able to craft a single query that retrieves the needed data from three discrete subgraphs (i.e. users, accounts, transactions). Each subgraph is powered by a <a href="https://www.apollographql.com/docs/federation/building-supergraphs/supported-subgraphs">Federation-compatible</a> GraphQL server which in turn can fetch data from any underlying source, such as a legacy REST API or a database. For example:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">query GetAllUserAccountsTransactions {
  user {
    id
    name
    accounts {
      id
      type
      balance
      transactions {
        id
        description
        amount
      }
    }
  }
}</code></pre>



<p>One of the biggest advantages of GraphQL is that it allows developers to specify exactly the data they need. This means that clients avoid overfetching (receiving more data than they need) and underfetching (not receiving enough data to fulfill their needs). The result is increased developer velocity and improvement of network usage.</p>



<h2 class="wp-block-heading"><a href="#get-started-with-a-financial-services-supergraph-today" aria-hidden="true" class="aal_anchor" id="get-started-with-a-financial-services-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 financial services 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-financial-supergraph/explorer?explorerURLState=N4IgzghgbgpgJgYQPYBsUwMYBcCWSB2AknCAFwgwQBmEARgJyYC0ArCwIwZMAs8ET9DDADsTDAyoAmdsIDMcYXAwgANOGjxkaTLgIBRfFgBOAT2JkQtbhgAckmPW5MADHG42eLDPSYQYVKiZZSUlaCAA2WRsbdl4QAF8gA&amp;referrer=operation_collections&amp;variant=prod">You can explore a financial services 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/financial-services/how-to-power-modern-financial-services-apps-with-apollo-graphos/" data-type="URL">series of financial services best practices</a> that dive into different elements of this schema to illustrate how Apollo GraphOS help power essential features of modern financial applications.</p>



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


Adopt a Customer 360 approach to prevent fraud with GraphQL


<p>This post is a part of our <a href="https://www.apollographql.com/blog/platform/financial-services/how-to-power-modern-financial-services-apps-with-apollo-graphos/" data-type="URL">&#8220;How to power modern financial services 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/financial-services/deliver-a-personalized-customer-experience-with-graphql/" data-type="URL">Deliver a personalized customer experience with GraphQL</a></li>



<li><a href="https://www.apollographql.com/blog/platform/financial-services/directive-based-authorization-for-financial-services/" data-type="URL">Securing APIs declaratively with GraphQL</a></li>



<li><a href="https://www.apollographql.com/blog/platform/financial-services/adopt-a-customer-360-approach-to-prevent-fraud-with-graphql/" data-type="URL">Adopt a Customer 360 approach to prevent fraud with GraphQL</a></li>
</ul>



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



<p>In recent years, GraphQL has gained popularity as a powerful alternative to REST APIs for building modern web applications. One area where GraphQL shines is in providing compliant and secure third-party access to data.</p>



<p>Financial services companies gather extremely sensitive information from their customers and must comply with data privacy regulations such as the <a href="https://gdpr-info.eu/">General Data Protection Regulation (GDPR)</a>, the <a href="https://oag.ca.gov/privacy/ccpa">California Consumer Privacy Act (CCPA)</a> and other federal and state privacy laws. In addition, they must protect data from unauthorized access and can do so ensuring compliant and secure third-party access with the help of <a href="https://www.apollographql.com/docs/graphos/">Apollo GraphOS</a>.</p>



<h2 class="wp-block-heading"><a href="#compliance" aria-hidden="true" class="aal_anchor" id="compliance"><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>Compliance</h2>



<p>GraphOS provides out of the box features to help protect against unintended data leaks and can help to narrow the scope of data which can be exposed through the use of schema contracts.</p>



<p><a href="https://www.apollographql.com/docs/graphos/delivery/contracts/" data-type="URL" data-id="https://www.apollographql.com/docs/graphos/delivery/contracts/">Schema contracts</a> allow developers to specify exactly which fields and types within a schema that applications are allowed to access. By using the <code>@tag</code> directive provided by Apollo Federation, developers can expose specific capabilities from the supergraph to individual use cases.</p>



<p>Most often financial companies use contracts to separate functionality between their customer use cases such as web and mobile, internal applications, and external partners.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">type Account {
  id: ID!
  balance: Int @tag(name: &quot;mobile&quot;)
  transactions: [Transaction] @tag(name: &quot;mobile&quot;) @tag(name: &quot;partners&quot;)
  user: User
}</code></pre>



<p>The flexibility of schema contracts allows for fine-grained control over data exposure, which is crucial for compliance. With GraphOS, a schema can be defined that specifies the exact fields and types of data that can be queried or mutated. This means that third-party applications can only access data that is explicitly allowed by the contract, making it easier to comply with regulations such as GDPR&#8217;s &#8220;data minimization&#8221; principle.</p>



<p>GraphOS further enhances the security which can be applied to a schema with Apollo Studio by enforcing user roles, restricting access to protected variants and limiting the visibility of graphs within the  organization.</p>



<h2 class="wp-block-heading"><a href="#graphos-security" aria-hidden="true" class="aal_anchor" id="graphos-security"><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>GraphOS Security</h2>



<p>Security is at the core of GraphOS and leverages built-in enterprise authentication features in Apollo Router and Apollo Studio. </p>



<p>Apollo Router supports multiple identity providers, and JWT (JSON Web Token) verification to ensure that only authenticated clients can access the supergraph. With built-in support for JWT claim extraction which removes the need for subgraphs to be extracting, parsing and validating claims on each subgraph request. </p>



<p>Schema contracts are derived from a source <a href="https://www.apollographql.com/docs/graphos/graphs/overview/#variants">schema variant</a> and enforce inclusion/exclusion policies on the fields and types which are exposed through the contracts. Different authentication configurations can be deployed for each schema contract through its own instance of Apollo Router, which makes GraphOS capable of supporting many different use cases all powered by a single unified 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/FinancialSupergraphContracts-2.png" alt="" class="wp-image-20448" srcset="https://wp.apollographql.com/wp-content/uploads/2023/03/FinancialSupergraphContracts-2.png 960w, https://wp.apollographql.com/wp-content/uploads/2023/03/FinancialSupergraphContracts-2-300x169.png 300w, https://wp.apollographql.com/wp-content/uploads/2023/03/FinancialSupergraphContracts-2-768x432.png 768w" sizes="auto, (max-width: 960px) 100vw, 960px" /></figure>



<p>Enterprise users of GraphOS can enforce user roles within Apollo Studio both at the organization and graph levels which can be used to restrict write access to different graphs by role. While graph variants can also be protected to ensure only authorized users can make changes to the schema. GraphOS Enterprise also enables additional roles for billing managers, technical document writers, and other members of the organization. These features can be used together to provide multiple security layers to your graph for development, management and operations. </p>



<p>GraphOS provides a secure, compliant solution for financial companies to enable third-party access to customer data while remaining compliant with regulations like GDPR and CCPA. GraphOS Enterprise features provide fine-grained control over data exposure through schema contracts and built-in authentication features to protect sensitive data.</p>



<h2 class="wp-block-heading"><a href="#get-started-with-a-financial-services-supergraph-today" aria-hidden="true" class="aal_anchor" id="get-started-with-a-financial-services-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 financial services 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-financial-supergraph/explorer?explorerURLState=N4IgzghgbgpgJgYQPYBsUwMYBcCWSB2AknCAFwgwQBmEARgJyYC0ArCwIwZMAs8ET9DDADsTDAyoAmdsIDMcYXAwgANOGjxkaTLgIBRfFgBOAT2JkQtbhgAckmPW5MADHG42eLDPSYQYVKiZZSUlaCAA2WRsbdl4QAF8gA&amp;referrer=operation_collections&amp;variant=prod">You can explore a financial services 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/financial-services/how-to-power-modern-financial-services-apps-with-apollo-graphos/" data-type="URL">series of financial services best practices</a> that dive into different elements of this schema to illustrate how Apollo GraphOS help power essential features of modern financial applications.</p>



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


Ensure compliant and secure third-party access using GraphOS


<p>This post is a part of our <a href="https://www.apollographql.com/blog/platform/financial-services/how-to-power-modern-financial-services-apps-with-apollo-graphos/" data-type="URL">&#8220;How to power modern financial services 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/financial-services/deliver-a-personalized-customer-experience-with-graphql/" data-type="URL">Deliver a personalized customer experience with GraphQL</a></li>



<li><a href="https://www.apollographql.com/blog/platform/financial-services/adopt-a-customer-360-approach-to-prevent-fraud-with-graphql/" data-type="URL">Adopt a Customer 360 approach to prevent fraud with GraphQL</a></li>



<li><a href="https://www.apollographql.com/blog/platform/financial-services/ensure-compliant-and-secure-third-party-access-using-graphos/" data-type="URL">Ensure compliant and secure third-party access using GraphOS</a></li>
</ul>



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



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<h2 class="wp-block-heading"><a href="#update-auth-now-available-in-apollo-router" aria-hidden="true" class="aal_anchor" id="update-auth-now-available-in-apollo-router"><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>Update: Auth now available in Apollo Router</h2>



<p>Apollo has shipped our new authentication and authorization features as built-in Router features. Checkout the launch post: <a href="https://www.apollographql.com/blog/graphql/security/enforcing-graphql-security-best-practices-with-graphos/">https://www.apollographql.com/blog/graphql/security/enforcing-graphql-security-best-practices-with-graphos/</a></p>
</blockquote>



<p>In the financial services industry, securing access to APIs and data is of the utmost importance. These are not just best practices but regulatory standards enforced by governments across the world. GraphQL helps developers create flexible APIs that allow clients to query for exactly what they need, which may lead to the question of whether GraphQL can be just as secure as other API technologies? </p>



<p>The good news is that you can absolutely secure your data using a declarative approach with GraphQL directives. What&#8217;s more, this approach can be self documenting for API clients and run any at scale to serve all types of FinTech customers.</p>



<h2 class="wp-block-heading"><a href="#what-are-directives-in-graphql" aria-hidden="true" class="aal_anchor" id="what-are-directives-in-graphql"><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 are Directives in GraphQL?</h2>



<p><a href="https://www.apollographql.com/docs/apollo-server/schema/directives/" target="_blank" rel="noreferrer noopener">GraphQL schema directives</a> are special annotations that can be added to a GraphQL schema to modify or add additional logic to the runtime behavior. Directives can be used to control things like data retrieval, schema metadata, and even security. For example:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">directive @myDirective(arg1: String = ‘foo’) on FIELD_DEFINITION

type Query {
  hello: String @myDirective
}</code></pre>



<p>By defining <code>@myDirective</code> in the schema with a valid location of <code>FIELD_DEFINITION</code>, this directive can be applied to an object field like the <code>hello</code> field on the root <code>Query</code> type. At runtime, custom logic can be applied to the <code>hello</code> field now to alter its output. And just like field definitions, directives can accept typed arguments with optional defaults (like <code>arg1</code> above) to further alter the runtime output of any field where it&#8217;s applied.</p>



<h2 class="wp-block-heading"><a href="#authentication" aria-hidden="true" class="aal_anchor" id="authentication"><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>Authentication</h2>



<p>Authentication is the process of verifying that a user is who they claim to be. A schema might have some fields that require authentication and some that do not, so GraphQL directives can be used to enforce authentication for specific fields in the schema. </p>



<p>A common approach to doing this requires the use of a custom type system directive that checks for the presence of a valid token in the request header, typically a <a href="https://jwt.io/">JWT</a>. If a token is present, it can be decoded to determine the user&#8217;s identity, and the request can be processed as normal. If no token is present, the directive can return an error, indicating that an authentication header is required.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">directive @authenticated repeatable on OBJECT | FIELD_DEFINITION

type Query {
  bankAccounts: BankAccountsResponse @authenticated
}
</code></pre>



<h2 class="wp-block-heading"><a href="#authorization" aria-hidden="true" class="aal_anchor" id="authorization"><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>Authorization</h2>



<p>Authorization is the process of determining whether a specific user is allowed to access a specific set of data. GraphQL directives can also be used to enforce authorization for specific fields or types in the schema. </p>



<p>Similar to authentication, a custom schema-defined directive can be used to check the user&#8217;s role and permissions from the user token before executing the field resolver. If the current user&#8217;s role matches the one specified in the directive&#8217;s <code>role</code> argument, then the request will be processed normally, otherwise, the directive can throw an error and indicate that the user is not authorized to access the specific field or type. For example:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">directive @hasRole(role: Role) on FIELD_DEFINITION

enum Role {
  ADMIN
  USER
}

type Query {
  bankAccounts: [BankAccount] @authenticated @hasRole(role: ADMIN)
}</code></pre>



<p>In this example, the <code>@hasRole</code> directive is added to the accounts field and the required role is set to <code>ADMIN</code>. This means that any request to this field must include a valid token in the request header <em>AND</em> the user must have the <code>ADMIN</code> role. If the user is authenticated but their role is less privileged than an <code>ADMIN</code>, then the directive can throw an error.</p>



<p>These directive names are just examples. You can find many other similar implementations or create your own, but if you want to see a working example, check out the Apollo Solutions <a rel="noreferrer noopener" href="https://github.com/apollosolutions/simple-auth-directive" target="_blank">simple-auth-directive GitHub repository</a>.</p>



<h2 class="wp-block-heading"><a href="#benefits-of-a-directive-based-authn-z" aria-hidden="true" class="aal_anchor" id="benefits-of-a-directive-based-authn-z"><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>Benefits of a Directive-Based AuthN/Z</h2>



<p>By using directives to implement authentication and authorization, the security logic is centralized in the same repeatable directive, making it easier to manage, maintain, and enforce across your entire API surface area. Because the logic is abstracted into reusable directives, there&#8217;s no need to replicate it field-by-field where escalated privileges are required to view the resolved data. Securing your API is as simple as annotating the fields that require AuthN/Z. </p>



<p>Implementing a standard directive library in conjunction with a <a href="https://www.apollographql.com/docs/federation">Federated architecture</a> allows teams to implement the same logic across fields in multiple subgraph services that run behind Apollo Router. This means that bug fixes can be shipped faster when security incidents are identified and new capabilities can be added centrally while allowing subgraph teams to incrementally adopt the new requirements when they are ready. This pattern is also generic enough that you can abstract the validation logic to any existing 3rd-party identity provider (IdP) but keep the schema-based annotations as a common abstraction layer.</p>



<h2 class="wp-block-heading"><a href="#self-documenting-policies" aria-hidden="true" class="aal_anchor" id="self-documenting-policies"><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>Self-Documenting Policies</h2>



<p>Using a declarative, schema-based authentication flow also facilitates sharing that policy with other teams. Using the <a href="https://www.apollographql.com/docs/federation/federated-types/federated-directives/#composedirective">@composeDirective</a>, we can expose this metadata to our supergraph so it is visible in Apollo Studio and instead of doing an in-depth code audit, you can bring in other internal teams from Security, IT, or DevOps to view the currently defined rules and invite them to review new additions with much less effort. From the client developer&#8217;s perspective, it also empowers them to understand API access requirements as they work with the schema and without relying on additional internal documentation or meetings.</p>



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



<h2 class="wp-block-heading"><a href="#get-started-with-a-financial-services-supergraph-today" aria-hidden="true" class="aal_anchor" id="get-started-with-a-financial-services-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 financial services supergraph today</h2>



<p>Beyond securing your data, the best way to see the possibilities of a supergraph is to try one out. <a href="https://studio.apollographql.com/public/apollo-financial-supergraph/explorer?explorerURLState=N4IgzghgbgpgJgYQPYBsUwMYBcCWSB2AknCAFwgwQBmEARgJyYC0ArCwIwZMAs8ET9DDADsTDAyoAmdsIDMcYXAwgANOGjxkaTLgIBRfFgBOAT2JkQtbhgAckmPW5MADHG42eLDPSYQYVKiZZSUlaCAA2WRsbdl4QAF8gA&amp;referrer=operation_collections&amp;variant=prod">You can explore a financial services 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/financial-services/how-to-power-modern-financial-services-apps-with-apollo-graphos/" data-type="URL">series of financial services best practices</a> that dive into different elements of this schema to illustrate how Apollo GraphOS help power essential features of modern financial applications.</p>



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


Securing APIs declaratively with GraphQL

Add Rust to your GraphQL API with 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

Add Python to your GraphQL API with GraphOS and Strawberry 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>


How to power modern retail apps with Apollo GraphOS


<p>With Apollo GraphOS, you can improve your client app’s time-to-interactive (TTI) and reduce latency in a few lines of code. Just plug your GraphQL API into the supergraph and add the <code>@defer</code> directive to the slow parts of your GraphQL query. When you mark slow fields with <code>@defer</code>, the supergraph knows it can deliver those parts of the result asynchronously.</p>



<p>The <code>@defer</code> directive is a <a rel="noreferrer noopener" href="https://github.com/graphql/graphql-spec/pull/742" target="_blank">proposal</a> to the GraphQL specification that has been in development since July 2020. We know the GraphQL community has been eager to try it, so <a href="https://www.apollographql.com/events/virtual-event/thank-you/opening-keynote-with-matt-debergalis-cto-cofounder/" target="_blank" rel="noreferrer noopener">we announced full end-to-end support for <code>@defer</code> across Apollo GraphOS</a> at this year’s GraphQL Summit. Even if your GraphQL API doesn’t support <code>@defer</code> yet, you can still use it with GraphOS.</p>



<p>In this tutorial, we’ll show you how to use <code>@defer</code> with <a href="https://github.com/apollographql/hack-the-supergraph" target="_blank" rel="noreferrer noopener">our e-commerce example</a>. If you like what you see, you can follow the same steps to plug your GraphQL API into the supergraph and start using <code>@defer</code> to craft a snappier user experience.</p>



<h2 class="wp-block-heading"><a href="#get-started-with-graphos" aria-hidden="true" class="aal_anchor" id="get-started-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>Get started with GraphOS</h2>



<p>First, we need to connect our GraphQL API to GraphOS, Apollo’s supergraph platform. GraphOS includes a global supergraph runtime, powered by Apollo Router. It’s free to use with 10MM queries/month included. <a href="https://studio.apollographql.com/signup?referrer=blog" target="_blank" rel="noreferrer noopener">Create an account</a> and add your GraphQL endpoint to set up your supergraph.</p>



<p>Here, we’re using <a href="https://hts-products-production.up.railway.app/" target="_blank" rel="noreferrer noopener"><em>https://hts-products-production.up.railway.app/</em></a> as our GraphQL endpoint. When we connect it to the supergraph, our GraphQL API becomes a subgraph.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1920" height="846" src="https://wp.apollographql.com/wp-content/uploads/2022/11/create-supergraph.gif" alt="" class="wp-image-17946"/><figcaption class="wp-element-caption">Creating a new Supergraph in GraphOS using our existing GraphQL endpoint. Make sure to write down your Supergraph ID, we&#8217;ll use it later.</figcaption></figure>



<h2 class="wp-block-heading"><a href="#define-our-first-entities" aria-hidden="true" class="aal_anchor" id="define-our-first-entities"><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>Define our first entities</h2>



<p>Now that we’re connected to the supergraph, let’s dive into our subgraph’s schema to define our first entities. An <strong>entity</strong> is a thing in the graph you can identify. Like a user with an account number, or a product in your catalog. You already have some entities in your schema today!</p>



<p>Why are entities important? Under the hood, the supergraph uses a query plan to determine how to fetch the deferred portions of a query. Apollo Federation builds that query plan with entities. Think of entities as the building blocks for the supergraph. We’re using them to power cool features coming soon to GraphOS, like <a href="https://www.apollographql.com/events/virtual-event/graphql-summit-october-2022/thank-you/the-future-of-real-time-data-in-graphql/" target="_blank" rel="noreferrer noopener">live queries and caching</a>.</p>



<p>To define your first entities:</p>



<ol class="wp-block-list">
<li><a rel="noreferrer noopener" href="https://www.apollographql.com/docs/federation/building-supergraphs/supported-subgraphs/" target="_blank">Install the Apollo Federation package</a> for your subgraph. Ensure your schema is being built with the installed package.</li>



<li>Add the <code>@key</code> directive to any&nbsp;type and define the key fields (typically the <code>id</code> field).</li>



<li>Create the reference resolver for your entities.</li>
</ol>



<p>Here are two examples showing how to add the <code>@key</code> directive to a schema whether you&#8217;re using Schema Definition Language (SDL) or Code-first Schema Development:</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="2544" height="850" src="https://wp.apollographql.com/wp-content/uploads/2022/11/entitySchema.png" alt="" class="wp-image-18014" srcset="https://wp.apollographql.com/wp-content/uploads/2022/11/entitySchema.png 2544w, https://wp.apollographql.com/wp-content/uploads/2022/11/entitySchema-300x100.png 300w, https://wp.apollographql.com/wp-content/uploads/2022/11/entitySchema-1024x342.png 1024w, https://wp.apollographql.com/wp-content/uploads/2022/11/entitySchema-768x257.png 768w, https://wp.apollographql.com/wp-content/uploads/2022/11/entitySchema-1536x513.png 1536w, https://wp.apollographql.com/wp-content/uploads/2022/11/entitySchema-2048x684.png 2048w, https://wp.apollographql.com/wp-content/uploads/2022/11/entitySchema-1200x401.png 1200w, https://wp.apollographql.com/wp-content/uploads/2022/11/entitySchema-1980x662.png 1980w" sizes="auto, (max-width: 2544px) 100vw, 2544px" /><figcaption class="wp-element-caption">On the left, we’re defining <code>Product</code> as an entity with <a href="https://www.apollographql.com/docs/apollo-server">Apollo Server</a> using SDL. On the right, we’re defining a Product entity in <a rel="noreferrer noopener" href="https://strawberry.rocks/" target="_blank">Strawberry</a>, a code-first Python framework. Over 20 languages and frameworks are supported.</figcaption></figure>



<p>Here are two examples showing how to add the reference resolver for the <code>Product</code> entity we defined in step 2:</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="2544" height="850" src="https://wp.apollographql.com/wp-content/uploads/2022/11/resolveReference.png" alt="" class="wp-image-18012" srcset="https://wp.apollographql.com/wp-content/uploads/2022/11/resolveReference.png 2544w, https://wp.apollographql.com/wp-content/uploads/2022/11/resolveReference-300x100.png 300w, https://wp.apollographql.com/wp-content/uploads/2022/11/resolveReference-1024x342.png 1024w, https://wp.apollographql.com/wp-content/uploads/2022/11/resolveReference-768x257.png 768w, https://wp.apollographql.com/wp-content/uploads/2022/11/resolveReference-1536x513.png 1536w, https://wp.apollographql.com/wp-content/uploads/2022/11/resolveReference-2048x684.png 2048w, https://wp.apollographql.com/wp-content/uploads/2022/11/resolveReference-1200x401.png 1200w, https://wp.apollographql.com/wp-content/uploads/2022/11/resolveReference-1980x662.png 1980w" sizes="auto, (max-width: 2544px) 100vw, 2544px" /><figcaption class="wp-element-caption">On the left, we’re defining our <code>Product.__resolveReference</code> resolver using Typescript. On the right, we’re defining our <code>Product.resolve_reference</code> with <code>@classmethod</code> inside the class using Python.</figcaption></figure>



<p>We’ve already completed those steps for you in our products subgraph <a href="https://github.com/apollographql/hack-the-supergraph/blob/main/subgraphs/products/schema.graphql">schema</a> and <a href="https://github.com/apollographql/hack-the-supergraph/blob/main/subgraphs/products/src/resolvers/Product.js">resolvers</a>. Now try it in your graph! The more entities you define, the more places you can start using <code>@defer</code>.</p>



<p><em>Remember that <code>@defer</code> still works even if you have only one subgraph. A deferred query could be re-entrant within the same subgraph</em>! 🤘</p>



<h2 class="wp-block-heading"><a href="#add-another-subgraph" aria-hidden="true" class="aal_anchor" id="add-another-subgraph"><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>Add another subgraph</h2>



<p>If you have several subgraphs, they can be added to a supergraph from the Subgraphs tab in GraphOS. While this step is optional, it’s a best practice to think about separation of concerns when designing your GraphQL schemas. We’ve already split our reviews entity into a separate subgraph for this example, but if you want to follow along, you can follow the instructions displayed in GraphOS and use the reviews deployment located at <a href="https://hts-reviews-production.up.railway.app/"><em>https://hts-reviews-production.up.railway.app/</em></a>.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1918" height="910" src="https://wp.apollographql.com/wp-content/uploads/2022/11/add-subgraph-1.gif" alt="" class="wp-image-17958"/></figure>



<h2 class="wp-block-heading"><a href="#test-defer-with-explorer" aria-hidden="true" class="aal_anchor" id="test-defer-with-explorer"><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>Test <code>@defer</code> with Explorer</h2>



<p>We’ve connected our subgraphs to the supergraph and defined our entities. Let’s test out <code>@defer</code> with Explorer, our GraphQL IDE. You can test out ours <a href="https://studio.apollographql.com/public/hack-the-e-commerce/explorer?variant=main" target="_blank" rel="noreferrer noopener">here</a>.</p>



<ol class="wp-block-list">
<li>Write a query that includes an entity (like products or reviews).</li>



<li>Select the part you want to defer. Right-click to extract a fragment and add <code>@defer</code>.</li>



<li>Execute the query and you can see the data load dynamically</li>
</ol>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1918" height="864" src="https://wp.apollographql.com/wp-content/uploads/2022/11/explorer-defer-1.gif" alt="" class="wp-image-17955"/></figure>



<h2 class="wp-block-heading"><a href="#use-defer-in-a-react-app" aria-hidden="true" class="aal_anchor" id="use-defer-in-a-react-app"><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>Use <code>@defer</code> in a React app</h2>



<p>Since <code>@defer</code> returns multiple responses, the client must support a multipart format. <a href="https://www.apollographql.com/docs/react/data/defer" target="_blank" rel="noreferrer noopener">Apollo Client</a> and <a href="https://www.apollographql.com/docs/kotlin/fetching/defer/" target="_blank" rel="noreferrer noopener">Apollo Kotlin</a> both support <code>@defer</code> today. <a href="https://github.com/apollographql/apollo-ios/issues/2395" target="_blank" rel="noreferrer noopener">Apollo iOS support is coming soon</a>.</p>



<p>Here’s how to use <code>@defer</code> in your React application:</p>



<ol class="wp-block-list">
<li>Install the latest version of Apollo Client (v3.7.0 or later):</li>
</ol>



<pre class="wp-block-prismatic-blocks"><code class="language-bash">npm install @apollo/client@latest</code></pre>



<ol class="wp-block-list" start="2">
<li>Add <code>@defer</code> to your query with a fragment.</li>



<li>Ensure your React component expects the deferred data to be undefined since it might not be available right away.</li>
</ol>



<p><a href="https://www.apollographql.com/docs/graphos/cloud-routing/configuration" target="_blank" rel="noreferrer noopener">Configure your router</a> to secure your subgraph and set up CORS rules for your website. Below is an example of a configuration we used:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-yaml">cors:
  origins:
    - https://studio.apollographql.com
    - https://hack-the-supergraph.netlify.app
headers:
 all:
   request:
     - insert:
         name: &quot;subgraph-token&quot;
         value: &quot;${env.SUBGRAPH_SECRET}&quot;
     - propagate:
          named: &quot;authorization&quot;</code></pre>



<p>You can see <code>@defer</code> in action in our <a href="https://hack-the-supergraph.netlify.app/product/product:1" target="_blank" rel="noreferrer noopener">e-commerce site</a> example. It’s a product details page where we’re deferring the product’s reviews. To increase/decrease the latency for the deferred views, adjust the slider in “Demo Settings.”</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1678" height="828" src="https://wp.apollographql.com/wp-content/uploads/2022/11/website-defer.gif" alt="" class="wp-image-17951"/><figcaption class="wp-element-caption">Notice the product details load first and provide a quicker TTI for the user while the reviews load when the data is available (and it&#8217;s all from one query!)</figcaption></figure>



<h1 class="wp-block-heading"><a href="#defer-graphos-%f0%9f%98%8d" aria-hidden="true" class="aal_anchor" id="defer-graphos-%f0%9f%98%8d"><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>@defer + GraphOS = 😍</h1>



<p>Let’s recap what we learned! By implementing <code>@defer</code> with <a href="https://studio.apollographql.com/signup?referrer=blog">Apollo GraphOS</a>, we can improve our app’s TTI and reduce latency in 3 steps:</p>



<ol class="wp-block-list">
<li>Connect our GraphQL API to the supergraph.</li>



<li>Define entities in our supergraph using <code>@key</code>.</li>



<li>Mark slow fields in our query with <code>@defer</code>.</li>
</ol>



<p>To check out the code powering our example, here’s the <a href="https://github.com/apollographql/hack-the-supergraph/tree/main/website" target="_blank" rel="noreferrer noopener">frontend</a>, the <a href="https://github.com/apollographql/hack-the-supergraph/tree/main/subgraphs" target="_blank" rel="noreferrer noopener">subgraphs</a>, and <a href="https://studio.apollographql.com/public/hack-the-e-commerce" target="_blank" rel="noreferrer noopener">Explorer</a>. We’d love to hear your feedback in our community forums.</p>



<p>Happy querying!</p>


Fullstack GraphQL tutorial: @defer and Apollo GraphOS


<p>Ever faced the conundrum of how to share your GraphQL schema with users outside of your organization, perhaps with partner or vendor developers? If so, Apollo now has a simple solution for you! We recently launched the ability to make graphs in Apollo Studio publicly visible so that you share your graph with anyone, even those without a Studio login.</p>



<h2 class="wp-block-heading"><a href="#how-to-share-graphs-outside-of-your-apollo-organization" aria-hidden="true" class="aal_anchor" id="how-to-share-graphs-outside-of-your-apollo-organization"><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>How to share graphs outside of your Apollo organization</h2>



<p>Making your graph publicly visible is as easy as flipping a switch. Simply navigate to the Settings page for your graph in Apollo Studio and under the Access tab, set <em>a variant of your choosing as “public.” </em>That particular variant of your graph is now publicly visible in Apollo Studio!</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="409" src="https://wp.apollographql.com/wp-content/uploads/2021/10/public-switch-1024x409.png" alt="" class="wp-image-9554" srcset="https://wp.apollographql.com/wp-content/uploads/2021/10/public-switch-1024x409.png 1024w, https://wp.apollographql.com/wp-content/uploads/2021/10/public-switch-300x120.png 300w, https://wp.apollographql.com/wp-content/uploads/2021/10/public-switch-768x307.png 768w, https://wp.apollographql.com/wp-content/uploads/2021/10/public-switch-1536x614.png 1536w, https://wp.apollographql.com/wp-content/uploads/2021/10/public-switch-1200x480.png 1200w, https://wp.apollographql.com/wp-content/uploads/2021/10/public-switch-1980x791.png 1980w, https://wp.apollographql.com/wp-content/uploads/2021/10/public-switch.png 1999w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Toggle a variant to public in Graph Settings → Access</figcaption></figure>



<h2 class="wp-block-heading"><a href="#whats-visible-when-a-graph-is-public" aria-hidden="true" class="aal_anchor" id="whats-visible-when-a-graph-is-public"><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’s visible when a graph is public?</h2>



<p>When a variant of a graph is set to public, anyone can navigate to the public Studio URL for that variant and access the README, schema reference, changelog, and Explorer (this is equivalent to <a href="https://www.apollographql.com/blog/announcement/platform/sharing-your-graph-just-got-a-whole-lot-easier-announcing-unlimited-consumer-seats/">Consumer-level access</a>). You can preview how the public view will appear to external users by clicking the <code>Public ↗︎</code> icon in the top nav.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1426" height="805" src="https://wp.apollographql.com/wp-content/uploads/2021/10/preview-public-view.gif" alt="" class="wp-image-9558"/></figure>



<p>You can share the public link with any user, even outside of the Studio organization to explore and consume your graph!</p>



<p><strong>⚠️ Note:</strong> When a specific graph variant is marked as “public”, any unauthenticated user on the internet with the link to the public variant can access its schema. However, accessing endpoint to query data could require authentication depending on the GraphQL endpoint configuration.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1424" height="853" src="https://wp.apollographql.com/wp-content/uploads/2021/10/copy-public-url.gif" alt="" class="wp-image-9561"/></figure>



<h2 class="wp-block-heading"><a href="#give-all-developers-a-great-ux-for-your-graph" aria-hidden="true" class="aal_anchor" id="give-all-developers-a-great-ux-for-your-graph"><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>Give all developers a great UX for your graph</h2>



<p>You may be wondering, “GraphQL already has introspection, why shouldn’t I just use that?”&nbsp;Well, in addition to the many <a href="https://www.apollographql.com/blog/graphql/security/why-you-should-disable-graphql-introspection-in-production/">security considerations</a> that make disabling introspection in production a good idea, there are also many UX benefits that you miss out on with introspection alone.</p>



<h3 class="wp-block-heading"><a href="#a-better-onboarding-experience-for-new-developers" aria-hidden="true" class="aal_anchor" id="a-better-onboarding-experience-for-new-developers"><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><strong>A better onboarding experience for new developers</strong></h3>



<p>By making your graph public in Apollo Studio, every developer automatically gets access to the README, schema docs, changelog, and Explorer, all in one central location. No more building custom documentation portals and changelogs that have to be manually updated.</p>



<h3 class="wp-block-heading"><a href="#be-specific-about-what-you-share-externally" aria-hidden="true" class="aal_anchor" id="be-specific-about-what-you-share-externally"><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><strong>Be specific about what you share externally</strong></h3>



<p>A key problem with introspection is that it makes your entire graph visible, including things like experimental fields that you may not want external developers to use yet. With Apollo Studio, you can make an approved, production variant public and keep private, pre-production variants to create and test new fields. In the near future, we’ll be adding more features to make sharing even more customizable!</p>



<h2 class="wp-block-heading"><a href="#share-your-graphs-today" aria-hidden="true" class="aal_anchor" id="share-your-graphs-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>Share your graphs today!</h2>



<p>Excited? We hope so! Sharing graphs with a broader audience could not get any easier. And don’t forget to update the <a href="https://www.apollographql.com/blog/announcement/platform/create-a-readme-to-onboard-developers-to-the-graph/">README</a> of your graph before sharing. <a href="https://studio.apollographql.com/sandbox/explorer?endpoint=https%3A%2F%2Fapi.spacex.land%2Fgraphql%2F&amp;explorerURLState=N4IgJg9gxgrgtgUwHYBcQC4QEcYIE4CeABADICGMSUAFggM5HAA6SRRANhVbQ862xy40A%2BgQRk8LAUTgBLOnVkQkwpGURSiAXxZaQAGhAA3CbLIAjdvQwgQWoA">Head over to Studio</a> and get wider adoption of your graph today! And as always, we love hearing from you, so if you have any feedback, please drop a post on the <a href="https://github.com/apollographql/apollo-studio-community/issues">Apollo Studio GitHub Community</a>!</p>


Make your GraphQL schema publicly visible without introspection


<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>Federation Support in Apollo Studio Just Got a Whole Lot Better</p>
</blockquote>



<p><br>Preventing breaking changes when working on a shared data graph is critical. Last year, we launched <a href="https://www.apollographql.com/blog/introducing-the-new-graphql-ci-in-apollo-studio/" target="_blank" rel="noreferrer noopener">schema checks in Apollo Studio</a> to help you collaborate on your graph with confidence. Checks validate your<em> </em>schema changes against historical operations to ensure your changes<em> will not</em> break your clients. However, for <a href="https://www.apollographql.com/docs/federation/" target="_blank" rel="noreferrer noopener">federated</a> graphs, in addition to checking that your operations won&#8217;t break, we also need to check to see whether the <a href="https://www.apollographql.com/docs/rover/supergraphs" target="_blank" rel="noreferrer noopener">supergraph</a> schema is successfully built, meaning that it successfully composed the supergraph schema from the underlying subgraph schemas. Before today, our platform did build checks but didn&#8217;t expose the results in Studio, which required going into the CLI to see why a supergraph build failed.</p>



<p>Here at Apollo, we understand how important it is to have visibility of your federated graph’s composition, and<strong> we’re delighted to announce <a href="https://www.apollographql.com/docs/studio/schema-checks/#federated-composition-checks" target="_blank" rel="noreferrer noopener">build checks</a> and <a href="https://www.apollographql.com/docs/studio/build-status-notification/" target="_blank" rel="noreferrer noopener">webhooks</a> to help you better understand the impact of schema changes, update your data graph faster, and allow more teams to contribute to the graph safely. 🎉</strong></p>



<h2 class="wp-block-heading"><a href="#build-checks-for-federated-graphs" aria-hidden="true" class="aal_anchor" id="build-checks-for-federated-graphs"><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>Build checks for federated graphs</h2>



<p>With the addition of build checks, you will now have better visibility into why a build failed for your subgraph’s schema changes. With this release comes a few additions and improvements:</p>



<ul class="wp-block-list">
<li><strong><strong>Better visibility</strong>: </strong>If the build fails, the build page will display all errors that occurred when trying to compose your changes. You’ll also be able to download or copy the subgraph schema and the resulting supergraph schema when available. Use the downloaded schema for codegen, linting, or mocking!</li>



<li><strong><strong>Better UX</strong>: </strong>The recent checks page now introduces filters. Use these filters to quickly find checks based on the check status, author, subgraph, or branch, helping you find what you’re looking for and surface root cause faster.</li>
</ul>



<figure class="wp-block-image size-large is-resized"><img loading="lazy" decoding="async" src="https://wp.apollographql.com/wp-content/uploads/2021/05/build-errors-1024x571.png" alt="GraphQL build errors example" class="wp-image-7593" width="610" height="340" srcset="https://wp.apollographql.com/wp-content/uploads/2021/05/build-errors-1024x571.png 1024w, https://wp.apollographql.com/wp-content/uploads/2021/05/build-errors-300x167.png 300w, https://wp.apollographql.com/wp-content/uploads/2021/05/build-errors-768x428.png 768w, https://wp.apollographql.com/wp-content/uploads/2021/05/build-errors-1536x857.png 1536w, https://wp.apollographql.com/wp-content/uploads/2021/05/build-errors-2048x1142.png 2048w, https://wp.apollographql.com/wp-content/uploads/2021/05/build-errors-1200x669.png 1200w, https://wp.apollographql.com/wp-content/uploads/2021/05/build-errors-1980x1104.png 1980w" sizes="auto, (max-width: 610px) 100vw, 610px" /><figcaption class="wp-element-caption"><strong>Example of failed build check</strong></figcaption></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="537" src="https://wp.apollographql.com/wp-content/uploads/2021/05/Screen-Shot-2021-05-25-at-12.28.33-PM-1024x537.png" alt="GraphQL successful build " class="wp-image-7595" srcset="https://wp.apollographql.com/wp-content/uploads/2021/05/Screen-Shot-2021-05-25-at-12.28.33-PM-1024x537.png 1024w, https://wp.apollographql.com/wp-content/uploads/2021/05/Screen-Shot-2021-05-25-at-12.28.33-PM-300x157.png 300w, https://wp.apollographql.com/wp-content/uploads/2021/05/Screen-Shot-2021-05-25-at-12.28.33-PM-768x403.png 768w, https://wp.apollographql.com/wp-content/uploads/2021/05/Screen-Shot-2021-05-25-at-12.28.33-PM-1536x806.png 1536w, https://wp.apollographql.com/wp-content/uploads/2021/05/Screen-Shot-2021-05-25-at-12.28.33-PM-2048x1074.png 2048w, https://wp.apollographql.com/wp-content/uploads/2021/05/Screen-Shot-2021-05-25-at-12.28.33-PM-1200x629.png 1200w, https://wp.apollographql.com/wp-content/uploads/2021/05/Screen-Shot-2021-05-25-at-12.28.33-PM-1980x1038.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption class="wp-element-caption">Example of a <strong>successful</strong> build check</figcaption></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="494" height="464" src="https://wp.apollographql.com/wp-content/uploads/2021/05/ScreenRecording2021-04-13at01.29.39PM.gif" alt="Apollo Studio GraphQL subgraph filter" class="wp-image-7597"/><figcaption class="wp-element-caption">New filtering capability with checks</figcaption></figure>



<h2 class="wp-block-heading"><a href="#build-webhooks" aria-hidden="true" class="aal_anchor" id="build-webhooks"><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>Build Webhooks</h2>



<p>We’ve also made it possible to configure build webhooks for your graph so that you can be notified when a new schema is built and ready to ship to your running gateway. You can also use this to alert on broken builds so that you can more quickly resolve errors when they happen.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="773" height="620" src="https://wp.apollographql.com/wp-content/uploads/2021/05/Screen-Shot-2021-05-27-at-3.55.01-PM.png" alt="Apollo Studio GraphQL build webhooks notifications" class="wp-image-7599" srcset="https://wp.apollographql.com/wp-content/uploads/2021/05/Screen-Shot-2021-05-27-at-3.55.01-PM.png 773w, https://wp.apollographql.com/wp-content/uploads/2021/05/Screen-Shot-2021-05-27-at-3.55.01-PM-300x241.png 300w, https://wp.apollographql.com/wp-content/uploads/2021/05/Screen-Shot-2021-05-27-at-3.55.01-PM-768x616.png 768w" sizes="auto, (max-width: 773px) 100vw, 773px" /><figcaption class="wp-element-caption">Set up a webhook to get notified when supergraph schema is built</figcaption></figure>



<p>Webhooks are part of the Studio Enterprise plan. Please <a href="https://www.apollographql.com/contact-sales/?referrer=blog" target="_blank" rel="noreferrer noopener">reach out to us</a> if you are interested in this feature.<br></p>



<h2 class="wp-block-heading"><a href="#get-started" aria-hidden="true" class="aal_anchor" id="get-started"><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</h2>



<p>Want to try out the new check experience today? See the <a href="https://www.apollographql.com/docs/studio/schema-checks/#federated-composition-checks" target="_blank" rel="noreferrer noopener">docs</a> to learn more and see how to try it out!</p>



<p></p>


Introducing Build Checks and Webhooks In Apollo Studio


<p>Last year, when we launched <a href="https://www.apollographql.com/blog/introducing-the-apollo-explorer/">Apollo Explorer </a>and our schema reference and changelog, we wanted to help you put the power of your graph into the hands of as many people as possible. Starting today, we&#8217;re making it even easier. You can invite everyone in your organization to explore your graph in Apollo Studio using the new Consumer user role. Consumers will have access only to your graph’s Explorer, the schema changelog, and schema reference documentation. Graph champions now have a way to safely bring the graph to every single person in your company, putting the power of your graph in the hands of everyone who would benefit from it.</p>



<p>Even better, you can invite an unlimited number of your team members with a Consumer role in all plan tiers, including our Free and Team plans. Previously, Free and Teams plans only offered admin-level access to your graph, which limited the number of people who could have visibility and access to your graph.</p>



<h3 class="wp-block-heading"><a href="#what-does-the-consumer-role-have-access-to" aria-hidden="true" class="aal_anchor" id="what-does-the-consumer-role-have-access-to"><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><strong>What does the Consumer role have access to?</strong></h3>



<p>With the Consumer role, you can provide visibility and discoverability while preventing people from making unwanted changes. Consumers won’t be able to change any settings, see any operational data or metrics, or make any changes to your schema. These restrictions make it suitable to give out safely to anyone casually using your graph or getting started building applications against your graph. All Consumer users will have instant access to:</p>



<ul class="wp-block-list">
<li><a href="https://www.apollographql.com/docs/studio/explorer/">Apollo Studio Explorer</a>, a feature-packed IDE for formulating and executing sample queries. Users can search for fields and find direct paths that can be run as queries, as well as output data in tables along with lots of other conveniences.</li>
</ul>



<ul class="wp-block-list">
<li><a href="https://www.apollographql.com/docs/studio/explorer/#the-documentation-tab">Schema reference</a> for automated documentation of your graph’s types and operations. By registering your schema in Apollo Studio you get instant reference material for all of your users.</li>



<li><a href="https://www.apollographql.com/docs/studio/org/graphs/#tracking-schema-changes">Changelog</a> for an automated view of changes between each new schema published in the registry. Make it easy to see the evolution of your graph over time.</li>
</ul>



<h3 class="wp-block-heading"><a href="#inviting-the-consumers-to-studio" aria-hidden="true" class="aal_anchor" id="inviting-the-consumers-to-studio"><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><strong>Inviting the Consumers to Studio</strong></h3>



<p>There are two ways you can <a href="https://www.apollographql.com/docs/studio/org/members/#inviting-members">invite</a> people to be Consumers:</p>



<ol class="wp-block-list">
<li>Directly invite members, pre-assigning them the Consumer Role. This can be done from the “Members” tab of your organization’s settings page inside Apollo Studio.<br><img loading="lazy" decoding="async" src="https://lh5.googleusercontent.com/I20p3C0AWQUDNNSjvGi3iqfPCP_H2J_Dh9sBb-yXDdnk5nXAbPSHbjJXzAT7hWV7I3K__ZTq_T4yUYu5Kx0BygMKGEzzqfgJM5GdBL9PH-R1IOcm_JC6LNRVhaXRmkBbpNS9-1TK" width="442" height="259"></li>
</ol>



<ol class="wp-block-list" start="2">
<li>Create a shareable invite link, assigning the default role as Consumer. This can be done from the “Settings” tab of your organization’s settings page inside Apollo Studio.<br><img loading="lazy" decoding="async" src="https://lh3.googleusercontent.com/wiG_NNRB-N8nnMpyLo_21s4ib0HlVRixiYY3SvdWQyGeXVkAUXJ-FR2iYPyAqf1OcBWuW1B95xklXOKlYTkP4mJN6yb90djSyyyo9EdkmjL9D9Gg5a3Nri1UfeZHPWNUW2QupdWO" width="624" height="96"></li>
</ol>



<h3 class="wp-block-heading"><a href="#what-if-i-need-more-granular-permissions" aria-hidden="true" class="aal_anchor" id="what-if-i-need-more-granular-permissions"><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><strong>What if I need more granular permissions?</strong></h3>



<p><a href="httpw://www.apollographql.com/pricing">Apollo Studio Enterprise</a> has unlimited access to the Consumer role as well as Enterprise-only roles of Observer, Contributor, and Graph Admin, along with graph-level roles and protected variants that restrict who can make changes to production or other sensitive environments. To learn more about the Enterprise-only user permissions features visit our <a href="https://www.apollographql.com/docs/studio/org/members/">docs</a>.</p>



<h3 class="wp-block-heading"><a href="#we-would-love-to-hear-from-you" aria-hidden="true" class="aal_anchor" id="we-would-love-to-hear-from-you"><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><strong>We would love to hear from you!</strong></h3>



<p>Come visit our discussion <a href="https://github.com/apollographql/apollo-studio-community/discussions/68">thread</a> about the new Consumer role to let us know what you think.</p>



<h3 class="wp-block-heading"><a href="#get-started-today" aria-hidden="true" class="aal_anchor" id="get-started-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><strong>Get started today</strong></h3>



<p>If you aren’t yet using Apollo Studio, you can sign up today for <a href="https://studio.apollographql.com/signup?referrer=blog">free</a>.</p>


Sharing your graph just got a whole lot easier – Announcing unlimited Consumer seats


<p>A few weeks ago, we launched <a href="https://odyssey.apollographql.com/">Odyssey</a>, Apollo&#8217;s new interactive learning platform. Our aim with Odyssey is to provide a fun, hands-on experience for developers who are eager to begin or advance their journey with Apollo and GraphQL. To provide the interactive experience we imagined, we decided to build our own learning management system (LMS) instead of using something off the shelf. With our initial launch behind us, we&#8217;d like to share how we went about building and launching Odyssey in just three months! (And no, the answer definitely isn&#8217;t &#8220;overtime&#8221; 😉)</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="779" src="https://wp.apollographql.com/wp-content/uploads/2021/02/Screen-Shot-2021-02-24-at-10.48.03-AM-1-1024x779.png" alt="Odyssey homepage" class="wp-image-6718" srcset="https://wp.apollographql.com/wp-content/uploads/2021/02/Screen-Shot-2021-02-24-at-10.48.03-AM-1-1024x779.png 1024w, https://wp.apollographql.com/wp-content/uploads/2021/02/Screen-Shot-2021-02-24-at-10.48.03-AM-1-300x228.png 300w, https://wp.apollographql.com/wp-content/uploads/2021/02/Screen-Shot-2021-02-24-at-10.48.03-AM-1-768x584.png 768w, https://wp.apollographql.com/wp-content/uploads/2021/02/Screen-Shot-2021-02-24-at-10.48.03-AM-1-1536x1169.png 1536w, https://wp.apollographql.com/wp-content/uploads/2021/02/Screen-Shot-2021-02-24-at-10.48.03-AM-1-2048x1558.png 2048w, https://wp.apollographql.com/wp-content/uploads/2021/02/Screen-Shot-2021-02-24-at-10.48.03-AM-1-1200x913.png 1200w, https://wp.apollographql.com/wp-content/uploads/2021/02/Screen-Shot-2021-02-24-at-10.48.03-AM-1-1980x1507.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Odyssey homepage</figcaption></figure>



<h2 class="wp-block-heading"><a href="#architecture" aria-hidden="true" class="aal_anchor" id="architecture"><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>Architecture</h2>



<p>Odyssey is a React application built with Gatsby and MDX and deployed with Netlify. These tools were an easy first choice for our team, because several other Apollo web properties (the documentation, blog, and developer hub) already use them. We know how they work, and we know they work well!</p>



<p><a href="https://www.netlify.com/">Netlify</a> gives us a user-friendly CI/CD with GitHub integration and quick and easy deploy previews. <a href="https://www.gatsbyjs.com/">Gatsby</a> enables us to generate all Odyssey course content at build time, which is perfect for us because it’s almost entirely static. Meanwhile, <a href="https://mdxjs.com/">MDX</a> enables us to author courses in familiar Markdown syntax, while also enriching the learning experience with custom JSX components like our coding challenges and multiple-choice quizzes. Instead of using an external CMS, we keep our MDX files in the same repo as the Odyssey app itself. This makes it easier for us to look back at previous iterations of a course via Git history, and to use that history to inform future improvements to our content.</p>



<p>Our particular approach with MDX was inspired by <a href="https://github.com/jxnblk/mdx-deck">MDX Deck</a>, a library that allows you to create an entire presentation slide deck with a single MDX file. Similarly in Odyssey, we author a course in a single MDX file, and it&#8217;s automatically parsed into separate lessons when it&#8217;s rendered. Reducing the total number of MDX files like this helps us maintain a more organized file structure and provides a smoother authoring flow. When writing a course, we don&#8217;t have to interrupt our stream of thought to hop around between various lesson files — we can write everything in one flow and worry about splitting it up into smaller lessons later.</p>



<p>Just like in MDX Deck, Odyssey uses an <code>hr</code> horizontal rule tag to separate a course into individual lessons. Then within each lesson, we use a YAML code block with a <code>meta</code> flag to include each lesson’s metadata, similar to how we can use the file’s frontmatter to write metadata for the entire course.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="532" src="https://wp.apollographql.com/wp-content/uploads/2021/02/Screen-Shot-2021-02-23-at-3.16.02-PM-1-1024x532.png" alt="Screenshot of an excerpt of MDX from an Odyssey course showing lesson separation and metadata" class="wp-image-6720" srcset="https://wp.apollographql.com/wp-content/uploads/2021/02/Screen-Shot-2021-02-23-at-3.16.02-PM-1-1024x532.png 1024w, https://wp.apollographql.com/wp-content/uploads/2021/02/Screen-Shot-2021-02-23-at-3.16.02-PM-1-300x156.png 300w, https://wp.apollographql.com/wp-content/uploads/2021/02/Screen-Shot-2021-02-23-at-3.16.02-PM-1-768x399.png 768w, https://wp.apollographql.com/wp-content/uploads/2021/02/Screen-Shot-2021-02-23-at-3.16.02-PM-1-1536x797.png 1536w, https://wp.apollographql.com/wp-content/uploads/2021/02/Screen-Shot-2021-02-23-at-3.16.02-PM-1-1200x623.png 1200w, https://wp.apollographql.com/wp-content/uploads/2021/02/Screen-Shot-2021-02-23-at-3.16.02-PM-1.png 1672w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Excerpt of MDX from an Odyssey course</figcaption></figure>



<h2 class="wp-block-heading"><a href="#styling" aria-hidden="true" class="aal_anchor" id="styling"><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>Styling</h2>



<p>For styling, we used <a href="https://chakra-ui.com/">Chakra UI</a>. Its built-in components helped us get off the ground quickly while providing out-of-the-box accessibility and intuitive customization. It continues to help us iterate quickly, because it’s so easy to customize the CSS. We also took advantage of <a href="https://www.framer.com/motion/">Framer Motion</a>, one of Chakra UI’s dependencies, to add animations to page transitions between lessons. This gives learners a sense of progression as they navigate backwards or forwards in a course.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="600" height="305" src="https://wp.apollographql.com/wp-content/uploads/2021/02/lesson-page-transitions-1.gif" alt="Gif demonstrating sliding page transitions when navigating between lessons" class="wp-image-6722"/><figcaption>Sliding transitions when navigating between lessons</figcaption></figure>



<h2 class="wp-block-heading"><a href="#evaluating-code-challenges" aria-hidden="true" class="aal_anchor" id="evaluating-code-challenges"><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>Evaluating code challenges</h2>



<p>The interactive coding challenges in Odyssey allow a learner to submit their code and get feedback about any inaccuracies:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="947" src="https://wp.apollographql.com/wp-content/uploads/2021/02/Screen-Shot-2021-02-23-at-3.19.01-PM-1-1024x947.png" alt="Screenshot of a partially correct answer for an Odyssey code challenge" class="wp-image-6724" srcset="https://wp.apollographql.com/wp-content/uploads/2021/02/Screen-Shot-2021-02-23-at-3.19.01-PM-1-1024x947.png 1024w, https://wp.apollographql.com/wp-content/uploads/2021/02/Screen-Shot-2021-02-23-at-3.19.01-PM-1-300x278.png 300w, https://wp.apollographql.com/wp-content/uploads/2021/02/Screen-Shot-2021-02-23-at-3.19.01-PM-1-768x710.png 768w, https://wp.apollographql.com/wp-content/uploads/2021/02/Screen-Shot-2021-02-23-at-3.19.01-PM-1-1200x1110.png 1200w, https://wp.apollographql.com/wp-content/uploads/2021/02/Screen-Shot-2021-02-23-at-3.19.01-PM-1.png 1254w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>A partially correct answer for an Odyssey code challenge</figcaption></figure>



<p>To power this, we use <a href="https://docs.netlify.com/functions/overview/">Netlify Functions</a>: the reader’s code is passed to a serverless function that executes tests against the code in a Node.js environment, then returns the results to the browser. We’ll cover more about this flow in a future blog post, so stay tuned!</p>



<h2 class="wp-block-heading"><a href="#our-odyssey-is-just-beginning" aria-hidden="true" class="aal_anchor" id="our-odyssey-is-just-beginning"><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>Our Odyssey is just beginning</h2>



<p>Our launch iteration of Odyssey is powered by a combination of proven, familiar tools and exciting new ones that both helped us to build quickly and confidently. And while Odyssey is currently a private repo, we may open it to the public as an open source project in the future! Interested in the nitty gritty details on any of the above? Let us know!</p>



<p>Our continuing mission is to help app developers like you change the world, and we hope Odyssey will help you do just that. <a href="https://odyssey.apollographql.com/">Begin your Odyssey today!</a></p>


Rocket engine and titles for the first 3 Odyssey courses

How we built Odyssey


<p>The Apollo platform provides loads of powerful tools that help you enjoy the benefits of GraphQL and a unified data graph. And as with any platform, there’s <em>always</em> more to learn about it.<br><br>The <a href="https://www.apollographql.com/docs/">Apollo docs</a> provide a comprehensive reference for everything Apollo, but we know developers are eager for <strong>a more directed, interactive, and fun learning experience</strong>. Good news: we’ve been hard at work on one!</p>



<h2 class="wp-block-heading"><a href="#your-odyssey-begins" aria-hidden="true" class="aal_anchor" id="your-odyssey-begins"><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>Your Odyssey begins</h2>



<p>Today we’re thrilled to launch <strong><a href="https://odyssey.apollographql.com/">Odyssey</a></strong>, Apollo’s official learning platform.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="671" src="https://wp.apollographql.com/wp-content/uploads/2021/01/odyssey-homepage-1024x671.png" alt="Apollo Odyssey - A platform to learn GraphQL and the Apollo ecosystem" class="wp-image-6586" srcset="https://wp.apollographql.com/wp-content/uploads/2021/01/odyssey-homepage-1024x671.png 1024w, https://wp.apollographql.com/wp-content/uploads/2021/01/odyssey-homepage-300x197.png 300w, https://wp.apollographql.com/wp-content/uploads/2021/01/odyssey-homepage-768x503.png 768w, https://wp.apollographql.com/wp-content/uploads/2021/01/odyssey-homepage.png 1174w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>Odyssey is a free, hands-on learning tool. Each Odyssey course is a collection of approachable lessons that walk you through a particular Apollo topic. Lessons are presented in both video and text, and they’re lightly seasoned with questions and code challenges to help reinforce your understanding.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="554" height="512" src="https://wp.apollographql.com/wp-content/uploads/2021/01/odyssey-code-challenge-success.png" alt="Lessons in Apollo Odyssey" class="wp-image-6588" srcset="https://wp.apollographql.com/wp-content/uploads/2021/01/odyssey-code-challenge-success.png 554w, https://wp.apollographql.com/wp-content/uploads/2021/01/odyssey-code-challenge-success-300x277.png 300w" sizes="auto, (max-width: 554px) 100vw, 554px" /></figure>



<h3 class="wp-block-heading"><a href="#learn-faster-build-faster" aria-hidden="true" class="aal_anchor" id="learn-faster-build-faster"><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>Learn faster, build faster</h3>



<p>Our mission at Apollo is to <strong>empower developers to build apps faster</strong>. Apollo and GraphQL definitely accelerate app development, but only after developers are familiar with them! With Odyssey, we want to remove a lot of the guesswork that comes with adopting a new technology by providing free, up-to-date, first-party guidance for you and your team.</p>



<h2 class="wp-block-heading"><a href="#what-courses-are-available" aria-hidden="true" class="aal_anchor" id="what-courses-are-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>What courses are available?</h2>



<p>In the spirit of “launch and iterate,” we’ve shipped Odyssey with a single course: <strong>Lift-Off Part 1</strong>. The first of a three-part series, it walks through the basics of building a GraphQL-powered web application using Apollo Client and Apollo Server. If you’re new to Apollo, this is a great place to start! 🚀</p>



<h3 class="wp-block-heading"><a href="#plenty-more-on-the-way" aria-hidden="true" class="aal_anchor" id="plenty-more-on-the-way"><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>Plenty more on the way</h3>



<p>Of course, we have a lot more in store for Odyssey than just “the basics.” Between advanced features of Apollo Client (plus the native mobile libraries!), Apollo Federation, and Apollo Studio’s ever-growing feature set, there’s no shortage of topics for us to cover. If there’s an Odyssey course you’d particularly like to see, <a href="https://twitter.com/apollographql">let us know on Twitter!</a></p>



<h2 class="wp-block-heading"><a href="#ready-to-set-forth" aria-hidden="true" class="aal_anchor" id="ready-to-set-forth"><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>Ready to set forth?</h2>



<p>To get started, head on over to <a href="http://odyssey.apollographql.com?referrer=blog">odyssey.apollographql.com</a>!<br><br>You can also <a href="https://studio.apollographql.com/signup/?utm_source=blog&amp;utm_medium=website&amp;utm_campaign=2021_01_odyssey-announcement-post&amp;referrer=blog">sign </a><a href="https://studio.apollographql.com/signup/?referrer=blog">up</a><a href="https://studio.apollographql.com/signup/?utm_source=blog&amp;utm_medium=website&amp;utm_campaign=2021_01_odyssey-announcement-post&amp;referrer=blog"> for a free Apollo account</a> if you don’t have one! That way you can keep track of your progress, as well as access Apollo Studio. In addition to all the features Studio provides, you’ll be able to use the <a href="https://www.apollographql.com/blog/introducing-the-apollo-explorer/">Apollo Studio Explorer</a> throughout all of your Odyssey lessons.</p>



<h2 class="wp-block-heading"><a href="#conclusion" aria-hidden="true" class="aal_anchor" id="conclusion"><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>Conclusion</h2>



<p>We hope you’re as excited about Odyssey as we are. To know when a new course is available, you can <a href="https://twitter.com/apollographql">follow us on Twitter</a> or click on the “Notify me” buttons on courses that haven’t been released yet.</p>


Introducing Odyssey, the Apollo Learning Platform


<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>tldr; you can now apply the <a href="https://www.apollographql.com/blog/user-roles-are-now-available-in-apollo-studio/">user roles that we released last fall</a> at a much more granular level.</p></blockquote>



<p>Happy New Year, everyone! Today, we are excited to share a significant expansion of the roles and permissions controls available in Studio. With these updates, you can confidently on-board more teams to your graph by ensuring that everyone has just the level of access they need. Building off <a href="https://www.apollographql.com/blog/user-roles-are-now-available-in-apollo-studio/">the five user roles we introduced last fall</a>:</p>



<ul class="wp-block-list"><li>We have added a sixth role option, <strong>Graph Admin</strong>, that you can assign to users in your organization. Graph Admins will be able to act as full administrators for every graph in your organization but can’t manage your organization’s users, billing, or settings.</li><li>Users can now be assigned <strong>graph-level roles</strong>, which can override their role in the organization for any individual graph.</li><li>You can now mark graphs in your organization <strong>hidden</strong> from the rest of your org’s members by default.</li><li><strong>The API keys you create for your graphs can be assigned roles</strong>, letting you differentiate between read-only keys and admin keys.</li><li><strong>Variants in your graph can now be marked as protected</strong>, limiting mutations to only users or keys with admin-level access.</li></ul>



<p>We hope that these new access controls and protections will cover your needs and eagerly welcome you to share your feedback with us in our <a href="https://github.com/apollographql/apollo-studio-community">Studio community repository</a>. Today’s release is a major step forward in your ability to manage your Studio account as your organization’s graph evolves.<br></p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>These features are part of the Studio Enterprise plan. Please <a href="https://www.apollographql.com/contact-sales/">reach out to us</a> if you are interested in this features and would like to talk to us.</p></blockquote>



<p>Thanks for being a member of our community and coming on this journey with us. Stay safe and healthy, and as always, happy querying!</p>


Graph Roles and Protected Variants Now in Apollo Studio

Graph Roles and Protected Variants Are Now Available in Studio


<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>tl;dr Apollo Studio Enterprise announces support for Schema Change Webhooks</p></blockquote>



<p>As GraphQL developers, all of our data is communicated through the GraphQL schema. With the release of schema change Slack notifications in 2020, we made it easier than ever to keep everyone working around your graph up-to-date with schema changes through Slack. Expanding on the functionality to connect your graph’s schema to your workspace, we are excited to announce the addition of <strong>schema change webhooks</strong> to Apollo Studio Enterprise.<br><br>With webhooks, you and your team can build whatever automation is relevant to your workflow, whether that be automating pull requests to client &amp; server codebases, running linting tests, generating email notifications, or creating a personalized change-log. The possibilities are yours to enumerate.<br><br>Setting up schema change webhooks will require:</p>



<ul class="wp-block-list"><li>An Apollo Enterprise subscription</li><li>Configuration in Apollo Studio</li><li>An exposed endpoint to handle the webhook payload</li></ul>



<p>Every time your graph variant’s published schema changes, your configured webhook listener will receive a JSON payload like so:</p>



<pre class="wp-block-preformatted">{<br>  "eventType": "SCHEMA_PUBLISH",<br>  "eventID": "6190b556-457e-4669-b933-8b66aa9b8764",<br>  "changes": [<br>    {<br>      "description": "field `Amazon.referrer`: type `String!` changed to `String`"<br>    }<br>  ],<br>  "graphID": "acephei",<br>  "schemaURL": "https://graphql.api.apollographql.com/schema-link?token=6fb35434a55b966f81c0e07a8f93327029d",<br>  "schemaURLExpiresAt": "2021-01-26T20:05:28.856Z",<br>  "timestamp": "2021-01-25T20:05:28.081Z",<br>  "variantID": "acephei@prod"<br>}</pre>



<p>Configuring a new webhook notification is a few clicks in Apollo Studio. Navigate to the notifications tab in your graph’s Settings page and click <code>Add Notification</code> to get started. For a walk-through, take a look at the dedicated <a href="https://www.apollographql.com/docs/studio/notification-setup/">Studio Notifications docs</a>.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="433" src="https://wp.apollographql.com/wp-content/uploads/2021/01/image-1024x433.png" alt="Screen Shot 2021-01-25 at 3.25.32 PM.png" class="wp-image-6602" srcset="https://wp.apollographql.com/wp-content/uploads/2021/01/image-1024x433.png 1024w, https://wp.apollographql.com/wp-content/uploads/2021/01/image-300x127.png 300w, https://wp.apollographql.com/wp-content/uploads/2021/01/image-768x325.png 768w, https://wp.apollographql.com/wp-content/uploads/2021/01/image-1536x650.png 1536w, https://wp.apollographql.com/wp-content/uploads/2021/01/image-2048x866.png 2048w, https://wp.apollographql.com/wp-content/uploads/2021/01/image-1200x507.png 1200w, https://wp.apollographql.com/wp-content/uploads/2021/01/image-1980x837.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>To handle a webhook notification, you’ll expose an endpoint that can consume the JSON payload. We have an example Node.JS server for you to run to handle this event here: <a href="https://github.com/jsegaran/apollo-schema-change-webhook">https://github.com/jsegaran/apollo-schema-change-webhook</a>. Alternatively, it’s simple to get up and running with a custom Zapier integration or whatever your favorite workflow automation tool may be.<br><br>To learn more about schema change webhooks and the other functionality that comes with Apollo Enterprise, <a href="https://www.apollographql.com/contact-sales/">reach out to Apollo</a>!</p>


Apollo Enterprise: Schema Change Webhooks


<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>A Better Way to do CI For GraphQL</p></blockquote>



<p>When deploying code, you want to be sure that nothing will blow up when things go live. To prevent downtime, it’s a good practice to use CI (continuous integration) to run tests, checks, and ensure your app is fully ready to hit production.<br><br>If you’re running GraphQL in production, the <em>last</em> thing you want is a <strong>schema change </strong>to break things for your users.<br><br>Here at Apollo, we’ve taken stock of every way schema changes could cause downtime, and <strong>we’re delighted to announce a new and improved schema check to ensure your GraphQL layer is evolving smoothly 🎉</strong></p>



<h2 class="wp-block-heading"><a href="#schema-checks" aria-hidden="true" class="aal_anchor" id="schema-checks"><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>Schema Checks</h2>



<p>Using the <a href="https://www.apollographql.com/docs/devtools/cli/">Apollo CLI</a>, you can ensure changes made to your schema are backwards compatible by checking it against <em>real production traffic</em>.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1671" height="945" src="https://wp.apollographql.com/wp-content/uploads/2020/10/Screen-Recording-2020-09-30-at-11.07.42-PM.gif" alt="" class="wp-image-4806"/></figure>



<p>We’ve redesigned our schema checks experience to prioritize giving you the most important information. Schema checks help you understand how a change will affect your <em>real-life clients.</em> This release comes with a few long-awaited additions:</p>



<ul class="wp-block-list"><li><strong>Better visibility</strong>: Understand not only <em>which</em> clients are affected, but also <em>how</em>. Schema checks help you determine if an operation won’t run with the new schema.</li><li><strong>Change-level and operation-level overrides</strong>: For dealing with more nuanced cases.</li><li><strong>Better UX</strong>: A visual update that shows usage of your affected operation and provides valuable forensics.</li></ul>



<h2 class="wp-block-heading"><a href="#centralized-config" aria-hidden="true" class="aal_anchor" id="centralized-config"><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>Centralized config</h2>



<p>We’ve also made it possible for teams to configure key settings for schema checks in a central place (see the <em>Check Configurations</em> page in <a href="https://www.apollographql.com/docs/studio/getting-started/">Apollo Studio</a>). Using this central configuration, teams can align on best practices (such as a standard deprecation lifecycle) and share information about deprecated clients and operations.</p>



<h2 class="wp-block-heading"><a href="#get-started" aria-hidden="true" class="aal_anchor" id="get-started"><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</h2>



<p>Want to safely evolve your graph in production? Read the docs on <a href="https://www.apollographql.com/docs/studio/schema-checks">schema checks</a> to learn more and see how to try it out!</p>


Schema Checks: Introducing the New GraphQL CI Tool In Apollo Studio


<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p><strong>tldr;</strong> at the request of many (and just because we really needed it), you can now assign specific roles to members of your organization in Studio on paid accounts. Please email <a href="mailto:support@apollographql.com">support@apollographql.com</a> if you&#8217;re interested.</p></blockquote>



<p>For years, every user in every organization in Studio has been able to operate with full admin privileges, by default. While we’ve enjoyed the days of small teams and extended trust, it’s time to get a bit more serious. Studio is at the point where organization admins need control over what permissions their users have. We’ve heard your calls and have answered.<br><br>We can now turn on roles access for paid accounts on request (email <a href="mailto:support@apollographql.com">support@apollographql.com</a> if you&#8217;re interested). Organization admins can now assign one of these five roles to each member of their account:</p>



<ul class="wp-block-list"><li><strong>Billing Manager</strong> — management access to organization-level configuration and billing. Can also remove members (but not invite them). No access to graphs.</li><li><strong>Consumer</strong> — view-only access to the organization&#8217;s graph <em>schemas</em>, but not metrics. Can also execute queries in the Explorer. Intended for application developers building clients against a graph.</li><li><strong>Observer</strong> — view-only access to the organization&#8217;s graph data, such as schemas and metrics. Can also execute queries in the Explorer. Intended for back-end developers who are <em>not</em> authorized to make changes to graphs.</li><li><strong>Contributor</strong> — management access to the organization&#8217;s graphs, but not to members or organization-level configuration. Intended for back-end developers who are authorized to make changes to graphs.</li><li><strong>Admin</strong> — management access to the entire organization, including its members, graphs, and configuration.</li></ul>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Ther full user permissions table can be found in our <a href="https://www.apollographql.com/docs/studio/org/members/">documentation for user roles</a>.</p></blockquote>



<p>Roles are currently only available at the organization level, but we have it in our sights to introduce them to graphs as well, sooner rather than later. We’d appreciate <a href="https://docs.google.com/forms/d/10C4_ETX5Xb60RfnJjBC2xBVK9gjr6A644AYKA-27T-E/viewform">any and all feedback</a> you may have for us on these five roles and what you need from permissions control in general in Studio 📬.<br><br>Thanks for coming on this journey with us! We look forward to hearing from you.<br><br>As always, happy querying.</p>


User roles are now available in Apollo Studio


<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p><strong>TL;DR: </strong>We’ve renamed Apollo Graph Manager to <strong>Apollo Studio</strong>. Don’t worry, this shouldn’t break anything, but as always please <a href="mailto:support@apollographql.com">let us know if you encounter an issue</a>.</p></blockquote>



<p>Naming things is hard! Especially when you’re naming a product that rapidly grows and evolves alongside the technology it supports. When we named Apollo Graph Manager last year, it was a tool primarily for back-end engineers who maintain a large organization’s data graph. The name matched the scope of the existing product, but it didn’t match the product we wanted it to become: <strong>a tool to help every member of every organization shape, explore, and measure their data</strong>.<br><br>To us, <strong>Apollo Studio</strong> matches that vision. It feels approachable, powerful, and—most importantly—human. Members of our team who were happy to work on Graph Manager are <em>proud</em> to work on Studio, and that pride absolutely shines through in everything we’re building.<br><br>Of course, a new name is meaningless if we don’t deliver on the vision that name represents. As our first delivery, we’re thrilled to release Studio’s new <strong>Explorer tab</strong>, which enables every member of your organization to build and run queries on your graph directly from Studio:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="800" height="443" src="https://wp.apollographql.com/wp-content/uploads/2020/06/Screen-Recording-2020-06-18-at-10.25-PM.gif" alt="" class="wp-image-3859"/></figure>



<p>We’ll have a full post introducing the Explorer tab tomorrow, because there’s a lot of awesome stuff to talk about! But we figured we’d spill the beans early in case you want to <a href="https://www.apollographql.com/docs/graph-manager/getting-started/">get started</a>. 😉<br><br>&#8212;<br><br>There’s plenty more on the way from Apollo, so stay tuned. And as always, let us know how we can help your team build and grow your graph! Drop us a line at <a href="mailto:support@apollographql.com">support@apollographql.com</a>.</p>


Graph  Manager is now Studio


<p>Apollo Graph Manager&#8217;s schema registry powers a ton of features that help you explore, maintain, and monitor your data graph. These features are at their <em>most</em> powerful when the schema you register with Apollo stays up to date with the schema you run in production. To help teams keep their schemas synced, we&#8217;re excited to announce a new Graph Manager feature called <strong>schema reporting</strong>.</p>



<p>Schema reporting enables Apollo Server (or any other GraphQL server!) to automatically register its schema with <a href="https://www.apollographql.com/docs/graph-manager/">Graph Manager</a> on startup. Previously, updating your registered schema required running an Apollo CLI command, which is easy to forget if it isn&#8217;t part of your continuous delivery pipeline.</p>



<p>By registering your schema automatically, you can:</p>



<ul class="wp-block-list"><li>Track your <em>complete</em> schema history over time</li><li>Share and iterate on development schemas with your team before they land in production</li><li>Set up continuous integration to <a href="https://www.apollographql.com/docs/graph-manager/schema-validation/">check schema changes against past traffic</a></li><li>Get up-to-date autocomplete and timing information in your IDE with Apollo&#8217;s <a href="https://www.apollographql.com/docs/devtools/editor-plugins/#gatsby-focus-wrapper">VS Code extension</a></li></ul>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p><strong>Note:</strong> Schema reporting doesn&#8217;t currently support graphs that use Apollo Federation. If you&#8217;re running a federated graph, check out <a href="https://www.apollographql.com/docs/graph-manager/managed-federation/setup/">Setting up managed federation</a>.</p></blockquote>



<h2 class="wp-block-heading"><a href="#get-started-with-apollo-server" aria-hidden="true" class="aal_anchor" id="get-started-with-apollo-server"><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 Apollo Server</h2>



<p><strong>The complete instructions for turning on schema reporting in Apollo Server are in the <a href="https://www.apollographql.com/docs/graph-manager/schema-registry/#automatic-registration-recommended" target="_blank" rel="noreferrer noopener">Apollo docs</a>.</strong> Here are the high-level steps:</p>



<ol class="wp-block-list"><li><a rel="noreferrer noopener" href="https://engine.apollographql.com/" target="_blank">Sign up for Graph Manager</a> and create your graph if you haven&#8217;t yet.</li><li>Obtain an API key from Graph Manager.</li><li>In your server&#8217;s environment, set your API key as the value of the <code>APOLLO_KEY</code> environment variable.</li><li>Set the <code>engine.reportSchema</code> option to <code>true</code> in your <code>ApolloServer</code> constructor, like this:</li></ol>



<pre class="wp-block-prismatic-blocks"><code class="language-typescript">const server = new ApolloServer({
  // ...other options...
  engine: {
    reportSchema: true,
  }
});</code></pre>



<p>That&#8217;s it! Now every time your server starts up, it automatically registers its current schema to your graph. And if you perform a rolling deployment of a new schema version, Graph Manager intelligently waits to register the new schema until every server instance stops reporting the<em> </em>previous<em> </em>one.</p>



<p>To learn about all of the configuration options for schema reporting, check out <a href="https://www.apollographql.com/docs/graph-manager/schema-registry/#automatic-registration-recommended">the docs</a>.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p><strong>Note:</strong> By default, schema reporting registers to your graph&#8217;s default variant, which is named <code>current</code>. To register to a different variant (such as <code>feature-123</code> or <code>staging</code>), set the <code>APOLLO_GRAPH_VARIANT</code> environment variable to the name of the variant you want to register to.</p></blockquote>



<h2 class="wp-block-heading"><a href="#other-graphql-servers" aria-hidden="true" class="aal_anchor" id="other-graphql-servers"><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>Other GraphQL Servers</h2>



<p>Not using Apollo Server? No problem! Any GraphQL server can implement the schema reporting protocol, which is <a href="https://deploy-preview-892--graph-manager-docs.netlify.app/docs/graph-manager/schema-reporting-protocol/">publicly documented</a> (as is Apollo Server&#8217;s <a href="https://github.com/apollographql/apollo-server/blob/master/packages/apollo-engine-reporting/src/schemaReporter.ts">reference implementation</a>). We want it to be as straightforward as possible to add schema reporting to whichever GraphQL server you use, and we’d love to <a href="mailto:gravity@apollographql.com">support you</a> in any way we can.<br></p>



<p>The Apollo team is committed to building tools that make it easy for you and your team to develop quickly and safely with GraphQL. If you have feedback on schema reporting or suggestions on how we can improve your team’s workflows, <a href="mailto:support@apollographql.com">let us know</a>!</p>


Register Schema Changes Automatically with Schema Reporting


<p>One of the biggest benefits of a GraphQL-powered data layer is the ability to maintain a single schema that continuously evolves to reflect your collection of products and features.</p>



<p>As your schema evolves, it’s essential to keep your teams informed whenever you introduce new capabilities or deprecate existing ones. To help with that,&nbsp;<strong>we’re delighted to announce an exciting new feature in Apollo Graph Manager: schema change notifications!&nbsp;</strong>🚀</p>



<p>With schema change notifications, you can configure&nbsp;<a href="https://www.apollographql.com/docs/graph-manager/" target="_blank" rel="noreferrer noopener">Graph Manager</a>&nbsp;to notify you via Slack&nbsp;<strong>any time an update is made to your registered schema</strong>.</p>



<h2 class="wp-block-heading" id="b076"><a href="#setting-it-up" aria-hidden="true" class="aal_anchor" id="setting-it-up"><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>Setting it up</h2>



<p>Setting up schema change notifications takes just a couple of quick steps:</p>



<h3 class="wp-block-heading" id="8fca"><a href="#1-register-your-schema" aria-hidden="true" class="aal_anchor" id="1-register-your-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>1. Register your schema</h3>



<p>If you aren’t already registering your schema with Graph Manager, check out the&nbsp;<a href="https://www.apollographql.com/docs/graph-manager/schema-registry/" target="_blank" rel="noreferrer noopener">schema registry docs</a>. And if you’re&nbsp;<em>brand new</em>&nbsp;to Graph Manager,&nbsp;<a href="https://www.apollographql.com/docs/graph-manager/getting-started/" target="_blank" rel="noreferrer noopener">get started here!</a></p>



<h3 class="wp-block-heading" id="6102"><a href="#2-enable-notifications" aria-hidden="true" class="aal_anchor" id="2-enable-notifications"><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>2. Enable notifications</h3>



<p>On your graph’s&nbsp;<strong>Integrations</strong>&nbsp;page in Graph Manager, click&nbsp;<strong>Configure</strong>:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="999" height="283" src="https://wp.apollographql.com/wp-content/uploads/2020/04/1_aTBZLlcxmXKm8waWPaKTag.png" alt="" class="wp-image-1241" srcset="https://wp.apollographql.com/wp-content/uploads/2020/04/1_aTBZLlcxmXKm8waWPaKTag.png 999w, https://wp.apollographql.com/wp-content/uploads/2020/04/1_aTBZLlcxmXKm8waWPaKTag-300x85.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/04/1_aTBZLlcxmXKm8waWPaKTag-768x218.png 768w" sizes="auto, (max-width: 999px) 100vw, 999px" /><figcaption class="wp-element-caption">The Integrations page in Apollo Graph Manager</figcaption></figure>



<p>From here, you can specify a Slack webhook URL, along with the name of the channel you want to send notifications to:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="596" height="340" src="https://wp.apollographql.com/wp-content/uploads/2020/04/1_-QXO0Zfze-_cCh2yaS565g.png" alt="" class="wp-image-1240" srcset="https://wp.apollographql.com/wp-content/uploads/2020/04/1_-QXO0Zfze-_cCh2yaS565g.png 596w, https://wp.apollographql.com/wp-content/uploads/2020/04/1_-QXO0Zfze-_cCh2yaS565g-300x171.png 300w" sizes="auto, (max-width: 596px) 100vw, 596px" /><figcaption class="wp-element-caption">Specifying a channel name and webhook URL</figcaption></figure>



<p>Next, select the&nbsp;<a href="https://www.apollographql.com/docs/graph-manager/schema-registry/#managing-environments-with-variants" target="_blank" rel="noreferrer noopener">variant</a>&nbsp;of your graph you want to receive notifications for and click&nbsp;<strong>Done</strong>:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="585" height="306" src="https://wp.apollographql.com/wp-content/uploads/2020/04/1_Xl-lbURREM4yHh0FmJvYEQ.png" alt="" class="wp-image-1239" srcset="https://wp.apollographql.com/wp-content/uploads/2020/04/1_Xl-lbURREM4yHh0FmJvYEQ.png 585w, https://wp.apollographql.com/wp-content/uploads/2020/04/1_Xl-lbURREM4yHh0FmJvYEQ-300x157.png 300w" sizes="auto, (max-width: 585px) 100vw, 585px" /><figcaption class="wp-element-caption">Selecting a graph variant</figcaption></figure>



<p>That’s it! You’re all set and ready to go. The next time anyone pushes a schema change to the specified graph variant, you’ll get a Slack notification like the one at the top of this post.</p>



<h2 class="wp-block-heading" id="3fb5"><a href="#do-even-more-with-slack" aria-hidden="true" class="aal_anchor" id="do-even-more-with-slack"><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>Do even more with Slack</h2>



<p>Schema change notifications aren’t the only feature of Graph Manager’s Slack integration! To learn more about daily metrics reports and threshold-based alerting,&nbsp;<a href="https://www.apollographql.com/docs/graph-manager/slack-integration/" target="_blank" rel="noreferrer noopener">check out the docs</a>.</p>



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



<h2 class="wp-block-heading" id="48c1"><a href="#thank-you" aria-hidden="true" class="aal_anchor" id="thank-you"><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>Thank you!</h2>



<p>We appreciate your feedback and would ❤️ to hear from you <a rel="noreferrer noopener" href="https://twitter.com/apollographql" target="_blank">on Twitter</a>! Let us know how you’re liking schema change notifications, and don’t hesitate to give us a shout you if there are any other features you’d like to see in <a href="https://www.apollographql.com/docs/graph-manager/?referrer=blog" target="_blank" rel="noreferrer noopener">Graph Manager</a>.</p>


Introducing Schema Change Notifications with Apollo Graph Manager


<p>Today we are excited to announce new user-based pricing for the Team edition of Apollo Graph Manager. Please read on for more details about why we made the change and how this affects your account.</p>



<p>The Apollo platform helps teams collaborate and ship features faster with a shared data graph. Many customers have shared feedback that our query-based pricing has been difficult to forecast, and at least in some cases has discouraged the expansion of the data graph. They’ve asked — quite reasonably! — for a pricing model that better tracks the value they get from their data graph and the Apollo tools they use to manage it.</p>



<p>So today, we’re excited to announce a new user management model and team-based pricing for Apollo Graph Manager.&nbsp;<a href="https://www.apollographql.com/pricing/" target="_blank" rel="noreferrer noopener">The Team plan for Apollo Graph Manager</a>&nbsp;(formerly Apollo Engine) is now&nbsp;<strong>$49 per user per month</strong>&nbsp;when paid annually, or&nbsp;<strong>$59 per user per month</strong>&nbsp;when paid month-to-month.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="512" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_cxFt9m7YR0lmSoxFOaRv3A-1-1024x512.jpg" alt="User management screen for Apollo Graph Manager" class="wp-image-610" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_cxFt9m7YR0lmSoxFOaRv3A-1-1024x512.jpg 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_cxFt9m7YR0lmSoxFOaRv3A-1-300x150.jpg 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_cxFt9m7YR0lmSoxFOaRv3A-1-768x384.jpg 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_cxFt9m7YR0lmSoxFOaRv3A-1-1536x768.jpg 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_cxFt9m7YR0lmSoxFOaRv3A-1-2048x1024.jpg 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_cxFt9m7YR0lmSoxFOaRv3A-1-1200x600.jpg 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_cxFt9m7YR0lmSoxFOaRv3A-1-1980x990.jpg 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>User management for Apollo Graph Manager</figcaption></figure>



<p>With this change, we are adding the ability to create and manage your organization and its members directly from&nbsp;<a href="https://engine.apollographql.com/" target="_blank" rel="noreferrer noopener">Graph Manager</a>. Previously, Apollo required a GitHub account and Apollo teams mirrored the membership of your GitHub organization. Now, you can invite new users to your organization by email, manage the membership of your organization, and review your team’s monthly spend all directly from&nbsp;<a href="http://engine.apollographql.com/" target="_blank" rel="noreferrer noopener">Graph Manager</a>.</p>



<p>Today we’re rolling out this user-based pricing model to all new Apollo Graph Manager subscribers. Existing teams will transition to the new pricing model on November 1st. If you have an annual subscription, we’ll move you to the new pricing on your upcoming renewal date.</p>



<p>We hope this new pricing is simpler and more straightforward for your team. If you have any questions about your subscription and these changes, please see our&nbsp;<a href="https://www.apollographql.com/migration-faq/" target="_blank" rel="noreferrer noopener">pricing migration FAQ</a>&nbsp;or&nbsp;<a href="https://www.apollographql.com/contact-sales/" target="_blank" rel="noreferrer noopener">contact us</a>&nbsp;to learn more.</p>



<p>Happy querying!</p>


New, simpler pricing for Apollo Graph Manager


<p>Managing customer experiences across all the products in a single brand is hard enough. Now imagine doing that for 25 brands and more than 200 websites. Expedia Group has managed to sustain incredible growth over the years, but growing that large that quickly was bound to create a fair amount of technical debt. Development teams found themselves spending more and more time duplicating work across platforms and managing service APIs — and less time innovating on new travel offerings.</p>



<p>As it goes with technical debt, every new experience and every new platform made matters exponentially worse. In particular, it was the rise of native mobile clients that really ramped up the complexity.</p>



<p><a href="https://twitter.com/imnotdanbo" target="_blank" rel="noreferrer noopener">Dan Boerner</a>, Distinguished Product Manager at Expedia Group explained:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>“Much of the mobile app team’s work had nothing to do with creating experiences for customers because they were constantly figuring out what API to call, on-boarding those APIs, and dealing with version and endpoint changes.”</p></blockquote>



<p>To resolve their technical debt, they made a strategic decision to build a GraphQL-based data graph with Apollo.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="387" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_rNqPyoKfRvhNKULK8x5wbw-1024x387.png" alt="" class="wp-image-604" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_rNqPyoKfRvhNKULK8x5wbw-1024x387.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_rNqPyoKfRvhNKULK8x5wbw-300x113.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_rNqPyoKfRvhNKULK8x5wbw-768x290.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_rNqPyoKfRvhNKULK8x5wbw-1536x580.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_rNqPyoKfRvhNKULK8x5wbw-2048x774.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_rNqPyoKfRvhNKULK8x5wbw-1200x453.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_rNqPyoKfRvhNKULK8x5wbw-1980x748.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>We were honored to work with the team at Expedia Group that’s making it happen. In their&nbsp;<a href="https://www.apollographql.com/customers/expediagroup" target="_blank" rel="noreferrer noopener">new customer story</a>, you’ll get a comprehensive look at their unique technical and organizational challenges, early experimentation with Backend-For-Frontend, and where they landed with an agile approach to building out a single organization-wide data graph for GraphQL.</p>



<p>The results have been nothing short of transformational, both in accelerating development and in freeing up resources to experiment more.</p>



<p>As&nbsp;<a href="https://www.linkedin.com/in/tyler-fleck-09b33125/" target="_blank" rel="noreferrer noopener">Tyler Fleck</a>, Director of User Experience, explains it:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>“Trying out new ideas across all our clients without the need to make any client-specific changes speeds up the design and learning process, and ultimately leads to better customer experiences.”</p></blockquote>



<p>There are tons of learnings and practical tips to take away, whether you’re a small team starting out in your GraphQL journey or far along and looking to scale a data graph across teams.</p>



<p>Grab a cup of coffee and head over to read the full&nbsp;<a href="https://www.apollographql.com/customers/expediagroup" target="_blank" rel="noreferrer noopener"><strong>Expedia Group story</strong></a>. If you’d like to chat about how to bring the awesome benefits of a federated graph to your organization, we’d love to&nbsp;<a href="https://www.apollographql.com/contact-sales" target="_blank" rel="noreferrer noopener">get in touch</a>!</p>


Lessons from Expedia Group’s journey to a data graph


<p>Just a few weeks ago, we released&nbsp;<a href="https://www.apollographql.com/docs/apollo-server/federation/introduction/" target="_blank" rel="noreferrer noopener">Apollo Federation</a>&nbsp;— our new open-source technology for composing multiple GraphQL services into a unified data graph. As&nbsp;<a href="https://medium.com/u/fd3d3dea3cd3?source=post_page-----265c9f0bc88e----------------------" target="_blank" rel="noreferrer noopener">James Baxley III</a>&nbsp;explained in his&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://blog.apollographql.com/apollo-federation-f260cf525d21">blog post</a>, federation is the essential architecture that lets organizations scale their GraphQL API from a single team to a shared asset serving the whole company. It enables multiple teams to collaborate on a shared graph without any fragile stitching code or heavyweight development processes.</p>



<p>Apollo Federation is implemented as a set of capabilities that lets GraphQL servers reference and extend each other’s individual schemas, plus a gateway that answers incoming queries by executing them in parts to the appropriate GraphQL servers. But like any shared infrastructure, running a gateway and a set of distributed services raise an important need for tools that help teams coordinate their efforts and collaborate productively.</p>



<p>Today, we are happy to announce a major update to Apollo’s commercial platform:&nbsp;<a href="https://www.apollographql.com/docs/platform/federation/" target="_blank" rel="noreferrer noopener"><strong>managed federation</strong></a>. Our update adds support for seamlessly building, managing, and querying federated graphs just like you can with a monolithic schema. Read on to learn more, including how you can&nbsp;<a href="https://engine.apollographql.com/" target="_blank" rel="noreferrer noopener">try it today</a>.</p>



<h2 class="wp-block-heading" id="bede"><a href="#a-need-for-data-graph-infrastructure" aria-hidden="true" class="aal_anchor" id="a-need-for-data-graph-infrastructure"><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>A need for data graph infrastructure</h2>



<p>We’ve spoken to hundreds of teams who are scaling GraphQL within their organization about their infrastructure needs for federation. These requirements came up time and time again:</p>



<ul class="wp-block-list"><li><strong>Easy updates to the graph:</strong>&nbsp;Changes need to be easy for every developer on the team to make. They can’t require a manual update or restart of the gateway, which was necessary with&nbsp;<a href="https://github.com/apollographql/graphql-tools/issues/791" target="_blank" rel="noreferrer noopener">schema stitching</a>.</li><li><strong>An even greater need for agility and safety:</strong>&nbsp;Teams with federated graphs tend to have more developers working on the graph and more clients querying it. That puts a higher premium on workflows like&nbsp;<a href="https://www.apollographql.com/docs/platform/schema-validation/" target="_blank" rel="noreferrer noopener">schema change validation</a>&nbsp;to help teams move quickly without breaking their applications.</li><li><strong>Clean integration with cloud-native infrastructure:</strong>&nbsp;Teams implementing service meshes and using new tools like Envoy, Istio, and Spinnaker may have multiple versions of each GraphQL service running in parallel with sophisticated deployment and rollback workflows. In larger organizations, different teams may even use completely different approaches. This means we need a tight integration between service deploy and graph configuration, which drives home the need for a&nbsp;<a href="https://principledgraphql.com/integrity#3-track-the-schema-in-a-registry" target="_blank" rel="noreferrer noopener">central place to track the schema</a>&nbsp;and its underlying GraphQL services.</li><li><strong>A smooth adoption path:</strong>&nbsp;Teams need an easy path from a monolithic schema to a federated graph without any disruptive changes to their clients, resolvers, and development workflows. Popular tools — like GraphiQL and&nbsp;<a href="https://marketplace.visualstudio.com/items?itemName=apollographql.vscode-apollo" target="_blank" rel="noreferrer noopener">Apollo’s VS Code extension</a>&nbsp;— should work the same no matter the graph’s underlying implementation.</li></ul>



<p>Our work is driven by the needs of app developers, so we decided to create the turnkey solution that developers have been asking for in order to successfully roll out GraphQL across multiple teams. With managed federation, teams can collaborate seamlessly on one shared graph without the complexity of building specialized tooling for a distributed architecture.</p>



<h2 class="wp-block-heading" id="09ea"><a href="#managing-a-federated-graph" aria-hidden="true" class="aal_anchor" id="managing-a-federated-graph"><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>Managing a federated graph</h2>



<p>Teams need federation-aware tooling in order to help them coordinate updating the graph whenever an underlying service changes. Apollo’s&nbsp;<strong>Graph Manager</strong>&nbsp;is a complete solution to this problem that includes federated service checks, managed service deployments, and federation-aware analytics out of the box.</p>



<p>A federated graph is composed from multiple services, so the Graph Manager includes a service list to track a graph’s implementing services and their capabilities. Whenever that service list changes, the Graph Manager recomposes the service definitions into an updated schema and pushes a new gateway configuration.</p>



<h3 class="wp-block-heading" id="abb0"><a href="#key-features" aria-hidden="true" class="aal_anchor" id="key-features"><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>Key features</h3>



<ul class="wp-block-list"><li><a href="https://www.apollographql.com/docs/platform/federation/#metrics-and-observability" target="_blank" rel="noreferrer noopener"><strong>Analytics and diagnostics for a federated graph</strong></a><strong>:</strong>&nbsp;When developing a distributed system, how do we know what’s going on underneath the hood? The Graph Manager gives teams key insights about how to improve, maintain, and support services in a federated environment. Developers can drill down into detailed information about what services are live in production and how queries interact across them.</li><li><a href="https://www.apollographql.com/docs/platform/federation/#validating-changes-to-the-graph" target="_blank" rel="noreferrer noopener"><strong>Federated service checks</strong></a><strong>:</strong>&nbsp;Just like with a monolithic schema, teams building a federated graph want to protect against making breaking changes to their part or another team’s part of the graph. With managed federation, service checks wire into your existing CI/CD pipeline so that every team can independently and safely update their piece of the graph.</li><li><a href="https://www.apollographql.com/docs/platform/federation/#connecting-apollo-server-to-the-graph-manager" target="_blank" rel="noreferrer noopener"><strong>Managed service deployments</strong></a><strong>:</strong>&nbsp;When deploying a federated graph, how do we manage rolling out changes to downstream services? With managed deploys, teams can easily coordinate changes to a distributed graph without having to align across multiple teams, build new CI/CD processes, or manually redeploy the GraphQL server to fetch the latest changes.</li></ul>



<p>The diagram below shows managed deployments in action. Once a new Reviews service is deployed, it registers its new capabilities with the Apollo Graph Manager. Then, the manager recomposes the graph and pushes the new configuration to the gateway.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="575" src="https://apollographql.wpengine.com/wp-content/uploads/2020/02/1_LSArcBIJun9dH-o3am-EUg-1024x575.png" alt="" class="wp-image-69" srcset="https://wp.apollographql.com/wp-content/uploads/2020/02/1_LSArcBIJun9dH-o3am-EUg-1024x575.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/02/1_LSArcBIJun9dH-o3am-EUg-300x169.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/02/1_LSArcBIJun9dH-o3am-EUg-768x431.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/02/1_LSArcBIJun9dH-o3am-EUg-1200x674.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/02/1_LSArcBIJun9dH-o3am-EUg.png 1515w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Managed deployments with Apollo</figcaption></figure>



<h2 class="wp-block-heading" id="670a"><a href="#introducing-the-apollo-graph-manager-%f0%9f%9a%80" aria-hidden="true" class="aal_anchor" id="introducing-the-apollo-graph-manager-%f0%9f%9a%80"><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>Introducing the Apollo Graph Manager 🚀</h2>



<p>With the new addition of managed federation, we also wanted to take the opportunity to rename our commercial product in order to more accurately describe what it really is to our users. Previously called Apollo Engine, the commercial part of the Apollo platform is now the&nbsp;<strong>Apollo Graph Manager</strong>&nbsp;— a full, turnkey solution for teams operating a data graph.</p>



<p>The Graph Manager contains several key pieces of cloud infrastructure to help teams seamlessly collaborate when building, managing, and querying one unified graph. It has a schema registry for tracking a graph’s history, including all changes made to its underlying services. It contains a client registry and an operation registry, so teams know exactly how their graph is being consumed down to the field level. It also comes with a dashboard for visualizing analytics, viewing history, and configuring features such as alerts.</p>



<p>The Graph Manager is included in all three plans of the Apollo platform:</p>



<ul class="wp-block-list"><li><strong>Community Edition&nbsp;</strong>is our free tier, with the essentials you need to build and run a data graph. It includes managed service deployments, Apollo’s schema registry, and basic data graph analytics.</li><li><strong>Team Edition</strong>&nbsp;is for teams collaborating on a production graph. It adds tracing, query plan diagnostics, performance metrics, configurable alerts, and schema change validation — everything you need to run confidently in production, and all built to work equally well with federated and monolithic graphs.</li><li><strong>Enterprise Edition</strong>&nbsp;is for companies making a strategic investment in a shared graph that spans the organization. It adds single-sign-on, 24&#215;7 production support, and access to our solution architects and core developers who can help guide your data graph efforts from start to finish.</li></ul>



<h3 class="wp-block-heading" id="1e29"><a href="#try-managed-federation-today" aria-hidden="true" class="aal_anchor" id="try-managed-federation-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>Try managed federation today!</h3>



<p>If managed federation sounds like it might fit your team’s needs, we encourage you to&nbsp;<a href="https://engine.apollographql.com/" target="_blank" rel="noreferrer noopener"><strong>sign up for a free trial</strong></a><strong>.</strong>&nbsp;Please&nbsp;<a href="https://www.apollographql.com/contact-sales" target="_blank" rel="noreferrer noopener">reach out to us</a>&nbsp;if you have questions.</p>



<p>To dive into the technical details, check out the&nbsp;<a href="https://www.apollographql.com/docs/platform/federation" target="_blank" rel="noreferrer noopener">new docs page on managed federation</a>. Since this page assumes you already have a federated graph running, you should visit the docs page on&nbsp;<a href="https://www.apollographql.com/docs/apollo-server/federation/introduction/" target="_blank" rel="noreferrer noopener">implementing a federated graph</a>&nbsp;first if you’re new to federation.</p>



<p>We look forward to hearing your feedback on managed federation!</p>


Announcing managed federation


<p>As GraphQL usage increases in an organization, it’s important for teams to practice&nbsp;<a href="https://principledgraphql.com/agility#5-use-an-agile-approach-to-schema-development" target="_blank" rel="noreferrer noopener">agile schema development</a>&nbsp;and iteratively evolve their schema over time. One of the most common concerns we hear from teams is that they want to move fast with GraphQL, but they also want to make sure that the changes they’re making to their schema are safe to deploy to production.</p>



<p>This is why we’re excited to announce the official release of&nbsp;<strong>schema validation</strong>&nbsp;for teams on the Apollo platform! 🚀 Schema validation compares proposed schema changes against an organization’s production API traffic to ensure any changes won’t break existing clients. The schema validation workflow integrates with existing CI/CD pipelines and the GitHub pull request workflow to give teams the confidence to evolve their GraphQL API safely while maintaining a lean schema.</p>



<p>Take a look at the workflow in action:</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Schema Validation with the Apollo platform" width="580" height="326" src="https://www.youtube.com/embed/TwaqC1Zt6Bc?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<h2 class="wp-block-heading" id="122b"><a href="#schema-validation-workflow" aria-hidden="true" class="aal_anchor" id="schema-validation-workflow"><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>Schema validation workflow</h2>



<p>Schema validation with the Apollo platform has three components: the&nbsp;<strong>CLI</strong>&nbsp;command, the change summary&nbsp;<strong>UI</strong>, and the&nbsp;<strong>GitHub status</strong>&nbsp;integration. Together, they create a cohesive workflow that ensures any schema changes your team makes are compatible with existing clients.</p>



<h3 class="wp-block-heading" id="76c0"><a href="#cli" aria-hidden="true" class="aal_anchor" id="cli"><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>CLI</h3>



<p>Schema validation starts with a CLI command that runs during continuous integration (CI) or continuous deployment (CD). We recommend adding the&nbsp;<code>apollo service:check</code>&nbsp;command to your team’s CI/CD configuration to run on every commit or before every deploy. When&nbsp;<code>apollo service:check</code>&nbsp;runs, it outputs a summary of schema changes and a non-zero error code if there are breaking changes, isolating the important information from the noise of a source code diff.</p>



<p>Teams often have many different deployments (for example, staging vs. production) that should be independently validated.&nbsp;<code>apollo service:check</code>&nbsp;accepts a tag configuration that specifies the target environment. A common pattern, which we use internally to build the Apollo platform, is to run validation against multiple environments in parallel.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="761" height="248" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_Rc_FahLy-rMskkgcsefyzg.png" alt="" class="wp-image-588" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_Rc_FahLy-rMskkgcsefyzg.png 761w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Rc_FahLy-rMskkgcsefyzg-300x98.png 300w" sizes="auto, (max-width: 761px) 100vw, 761px" /><figcaption>Output from running the CLI command</figcaption></figure>



<h3 class="wp-block-heading" id="522b"><a href="#ui" aria-hidden="true" class="aal_anchor" id="ui"><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>UI</h3>



<p>Every&nbsp;<code>apollo service:check</code>&nbsp;execution generates a unique page in Apollo Engine that displays a list of all schema changes. When a change breaks an existing operation, the UI separates these changes out with a summary detailing which clients are affected. The breaking change is compared against the affected client’s production traffic in order to determine the impact of the change and facilitate communication between team members who own different aspects of the system.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="593" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_WlV4LkVRG-HD7pl4yT2mCQ-1-1024x593.png" alt="" class="wp-image-589" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_WlV4LkVRG-HD7pl4yT2mCQ-1-1024x593.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_WlV4LkVRG-HD7pl4yT2mCQ-1-300x174.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_WlV4LkVRG-HD7pl4yT2mCQ-1-768x445.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_WlV4LkVRG-HD7pl4yT2mCQ-1-1536x890.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_WlV4LkVRG-HD7pl4yT2mCQ-1-2048x1186.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_WlV4LkVRG-HD7pl4yT2mCQ-1-1200x695.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_WlV4LkVRG-HD7pl4yT2mCQ-1-1980x1147.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Schema validation UI</figcaption></figure>



<h3 class="wp-block-heading" id="6639"><a href="#github-status" aria-hidden="true" class="aal_anchor" id="github-status"><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>GitHub status</h3>



<p>Schema validation seamlessly integrates with your team’s existing GitHub workflow to display the results of the check and a link to the change summary UI right inside a Pull Request. When the status fails, indicating dangerous code, the merge can be delayed until it passes additional scrutiny. The following screenshot could be acceptable, for example a type rename that requires clients to regenerate types and mocks, while maintaining the same fields.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="777" height="388" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_bQ47wCBS5bWwaPrpFRfJyA.png" alt="" class="wp-image-590" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_bQ47wCBS5bWwaPrpFRfJyA.png 777w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_bQ47wCBS5bWwaPrpFRfJyA-300x150.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_bQ47wCBS5bWwaPrpFRfJyA-768x384.png 768w" sizes="auto, (max-width: 777px) 100vw, 777px" /><figcaption>GitHub status checks</figcaption></figure>



<h2 class="wp-block-heading" id="9b7d"><a href="#get-started-%f0%9f%9a%80" aria-hidden="true" class="aal_anchor" id="get-started-%f0%9f%9a%80"><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 🚀</h2>



<p>We’ve been using schema validation internally at Apollo for a while now, and we’ve been impressed with the productivity boost it has given our teams. Testing every change against live production traffic ensures that we can maintain a lean schema without breaking existing clients. When breaking changes are proposed, schema validation surfaces the impact and fosters conversations so teams can proactively agree on a solution.</p>



<p>Schema validation is available for users on a paid Apollo platform plan. To try it out,&nbsp;<a href="https://engine.apollographql.com/?overlay=UpgradePlan" target="_blank" rel="noreferrer noopener">start a free Teams trial</a>&nbsp;and follow the&nbsp;<a href="https://www.apollographql.com/docs/platform/schema-validation#setup" target="_blank" rel="noreferrer noopener">setup instructions</a>. If you’d like to learn more about the Apollo platform, please contact our sales team at&nbsp;<a href="mailto:sales@apollographql.com" target="_blank" rel="noreferrer noopener">sales@apollographql.com</a>.</p>


Move fast (without breaking things)


<p>We started Apollo in 2016 with the objective of lowering the barriers to making high-quality, modern apps. Since then, we have seen tremendous growth in our community with nearly 500,000 downloads per week and companies like Audi, the New York Times, Airbnb, and CNBC all making strategic commitments to GraphQL. With 800+ attendees at our third annual GraphQL Summit this week and yesterday’s launch of an initiative to form a GraphQL standards body, GraphQL has emerged as the next big advance in app development.</p>



<p>Amidst this momentum, we’ve been fortunate to work with many companies who’ve taken Apollo into large-scale production. From that experience we’ve identified a set of best practices and techniques for doing GraphQL right, and we’re excited to share how we’ve brought those back into Apollo.</p>



<h2 class="wp-block-heading" id="48bc"><a href="#a-platform-fit-for-every-team" aria-hidden="true" class="aal_anchor" id="a-platform-fit-for-every-team"><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>A platform fit for every team</h2>



<p>Today, we’re introducing the open-core <a href="https://www.apollographql.com/platform/">Apollo GraphQL Platform</a> for product teams of all sizes to do GraphQL right. It builds on our core open source and Apollo Engine technology to give organizations at all stages of development the tools they need to adopt GraphQL incrementally, on top of the code and services they already have, all while baking in the best practices and workflows we’ve learned from working with teams moving to GraphQL.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="516" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/0_7A9ZZlIr5c081C_9.png" alt="" class="wp-image-670" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/0_7A9ZZlIr5c081C_9.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/0_7A9ZZlIr5c081C_9-300x151.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/0_7A9ZZlIr5c081C_9-768x387.png 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>An architecture diagram of the Apollo platform</figcaption></figure>



<p>Our important lesson we’ve learned is that GraphQL is really about collaboration, and the teams that get furthest are those who work closely together on their GraphQL API. To facilitate this collaboration, we built a&nbsp;<strong>schema registry</strong>&nbsp;that serves as the source of truth and a central collaboration point for GraphQL development,&nbsp;<strong>client and</strong>&nbsp;<strong>operation registries&nbsp;</strong>that track each known consumer of the data graph, and a&nbsp;<strong>trace warehouse&nbsp;</strong>that stores a structured log of each operation made against your schema. These registries all work together to give your team a precise understanding of your API, like knowing which clients are still accessing a deprecated field or determining which microservices a particular GraphQL query accesses.</p>



<p>On top of these, we built new tools and workflows for GraphQL developers. The new Apollo&nbsp;<strong>VS Code plugin</strong>&nbsp;puts valuable information about your schema — like the average latency of a specific field — right at your fingertips at development time. A plugin for Apollo Server implements&nbsp;<strong>safelisting</strong>, locking your API down to trusted, pre-registered operations. We also added&nbsp;<strong>schema validation</strong>, which tests a proposed schema against the known set of operations observed in production, returning a list of affected clients for each breaking change.</p>



<p>And finally, we added a&nbsp;<strong>GraphQL gateway</strong>, implemented as a commercial plugin for Apollo Server. The gateway delivers on a key enterprise need: a way for multiple teams to collaborate on a single, org-wide schema without mixing everyone’s code together in a monolithic single point of failure. Instead, the gateway composes separately deployed “micro-schemas” that reference each other into a single master schema, which looks to a client just like any regular GraphQL schema. To answer queries, the gateway builds a query plan, fetches data from each upstream GraphQL service, and assembles it all back together into a single result. Since the gateway is just an Apollo Server, the rest of the platform — safelists, schema change validation, and so on— is all tied in and works great.</p>



<h2 class="wp-block-heading" id="7e65"><a href="#open-source-open-core" aria-hidden="true" class="aal_anchor" id="open-source-open-core"><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>Open source, open-core</h2>



<p>We’re an open source company. Hundreds of you have worked with us to make Apollo Client and Apollo Server the industry-leading implementations of GraphQL on both sides of the wire. They’re the centerpiece of the new platform. But, there’s still a ton more to do and we welcome (and need!) your help.</p>



<p>Our strategy is to make transformative and groundbreaking tools — built from open source, commercial plugins, and cloud services — and package them in a fair and transparent way that keeps us aligned with your interests. Building our business and funding our work by making and selling valuable software keeps us honest, hungry, and focused on what developers really need, and ultimately results in a better GraphQL for everyone.</p>



<p>Here’s our model for “what goes where:”</p>



<ul class="wp-block-list"><li>Core technology that implements the GraphQL spec and the standard resolver-based programming model stays in open source, such as Apollo Client and Server. Additionally, our building blocks and low-level libraries, like CLI tooling for codegen and the Apollo language server, work best as common implementations shared across the community, so they will continue to be open source and free forever.</li><li>Services (eg, the trace warehouse), features designed for large-scale enterprise environments (eg, distributed query execution), and workflows built on top of these (eg, schema change validation) are what we’ll sell commercially and build our business on.</li></ul>



<h2 class="wp-block-heading" id="e763"><a href="#pick-your-flavor" aria-hidden="true" class="aal_anchor" id="pick-your-flavor"><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>Pick your flavor</h2>



<p>The platform comes in three flavors, based on that open-core model:</p>



<ul class="wp-block-list"><li><strong>Community edition</strong>&nbsp;is our free-forever, unlimited-use offering that includes all the core open source Apollo libraries and tools — including the new VS Code plugin — plus the complete schema registry to tie it all together. We also include parts of the trace warehouse here to enrich registered schemas with useful metrics.</li><li><strong>Team edition</strong>&nbsp;is for small and medium-sized companies that want all the Apollo tools and workflows. This comes with full use of the trace warehouse and operation registry. Team starts at just $49/month, with pay-for-what-you-use pricing up to 25 million monthly queries.</li><li><strong>Enterprise edition&nbsp;</strong>is for teams and organizations running mission-critical GraphQL APIs. It includes the enterprise Apollo GraphQL Gateway, and also 24x7x365 SLA-backed production support for the entire platform.</li></ul>



<p>For more details on what’s in each package, please check out&nbsp;<a href="https://www.apollographql.com/plans" target="_blank" rel="noreferrer noopener">our plans page</a>. If you’re currently using Apollo Engine, we’ll reach out with details on how to switch to a platform plan so you can take advantage of all the new features.</p>



<p>We’re excited to introduce the&nbsp;<a href="https://www.apollographql.com/platform" target="_blank" rel="noreferrer noopener">Apollo GraphQL Platform</a>&nbsp;and show off some of the ways it’s already being used at&nbsp;<a href="https://summit.graphql.com/" target="_blank" rel="noreferrer noopener">GraphQL Summit</a>&nbsp;this week. If you’re at the conference, we would love to hear what you think of the platform and learn how we can help your team be successful with GraphQL.</p>



<p>To get started today, visit our&nbsp;<a href="https://www.apollographql.com/docs/" target="_blank" rel="noreferrer noopener">new platform docs</a>&nbsp;for detailed guides on all of the new features and a tutorial that ties all of the pieces together.</p>


Introducing the Apollo GraphQL Platform


<p>GraphQL is a powerful and flexible way to expose data to client applications. It empowers application teams to describe the exact data they need for each feature without having to coordinate with a backend team. That flexiblity dramatically reduces the amount of code teams need to write and accelerates how quickly they can ship applications.</p>



<p>But with that flexibility comes a need for management and control. Teams growing their use GraphQL constantly make changes to their schema by adding data, refactoring types, retiring unused or deprecated fields and more. To be able to do that safely, it’s essential to know which parts of the schema are used by each client, and to understand the impact of a schema change on your application. So how does a fast moving team evolve their schema?</p>



<h2 class="wp-block-heading" id="3c66"><a href="#introducing-the-schema-validation-beta" aria-hidden="true" class="aal_anchor" id="introducing-the-schema-validation-beta"><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>Introducing the schema validation beta</h2>



<p>Starting today teams using Apollo Engine can validate their schema against previous versions and against&nbsp;<strong>real world usage</strong>&nbsp;of their API. This incredible new workflow lets teams of any size manage and validate changes to their API while taking advantage of GraphQL’s flexibility to allow each client to fetch exactly the data it needs.</p>



<figure class="wp-block-image alignfull size-large"><img loading="lazy" decoding="async" width="1024" height="534" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_0WTDjPgNtvD83zqGTJEaIg-1-1024x534.png" alt="" class="wp-image-733" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_0WTDjPgNtvD83zqGTJEaIg-1-1024x534.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_0WTDjPgNtvD83zqGTJEaIg-1-300x156.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_0WTDjPgNtvD83zqGTJEaIg-1-768x400.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_0WTDjPgNtvD83zqGTJEaIg-1-1536x801.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_0WTDjPgNtvD83zqGTJEaIg-1-1200x626.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_0WTDjPgNtvD83zqGTJEaIg-1.png 1707w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>To learn more about how Engine empowers teams keep reading, but if you want to give it a try right now head over to the&nbsp;<a href="https://www.apollographql.com/docs/engine/schema-history.html" target="_blank" rel="noreferrer noopener">docs&nbsp;</a>and&nbsp;<em>publish away</em>!</p>



<h2 class="wp-block-heading" id="a729"><a href="#bug-free-schema-evolution" aria-hidden="true" class="aal_anchor" id="bug-free-schema-evolution"><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>Bug free schema evolution</h2>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="715" height="906" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_goysdOpO-FyhnkudMxpQDQ-1.png" alt="" class="wp-image-730" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_goysdOpO-FyhnkudMxpQDQ-1.png 715w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_goysdOpO-FyhnkudMxpQDQ-1-237x300.png 237w" sizes="auto, (max-width: 715px) 100vw, 715px" /></figure>



<p>A lot can change between two versions of a GraphQL schema. Changes to types, fields, directives and more can be dangerous to shipped client applications. So how can a team know what is safe to change and what will trigger a PagerDuty alert at 3 am? Even graphql-js includes a couple undocumented utilities to find&nbsp;<a href="https://github.com/graphql/graphql-js/blob/master/src/utilities/findBreakingChanges.js" target="_blank" rel="noreferrer noopener">breaking and dangerous changes</a>&nbsp;but these are only a part of the picture needed to evolve your schema.</p>



<h3 class="wp-block-heading" id="e0d8"><a href="#usage-powered-information" aria-hidden="true" class="aal_anchor" id="usage-powered-information"><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>Usage powered information</h3>



<p>The most important tool to evolving a schema safely is to know how it is being&nbsp;<strong>used</strong>. Changing a return type could have no impact at all if that field was only used in a really old version of the app. Apollo Engine will use historical data on operations used by clients as far back as 90 days to determine if schema changes would break any operations being sent. It does this by replaying all observed operations against a diff of the two schemas and finding usage patterns that would lead to broken apps.</p>



<p>Instead of being held hostage by past decisions, with Apollo Engine teams can have full confidence in how they change their schema.</p>



<p>Replaying fine grained usage data opens the door to a new kind of API governance that doesn’t exist in the REST ecosystem. Using Apollo provides the most accurate and granular information to make smart decisions about changing your services. Static analysis is just not enough to correctly identify critical parts of your schema, but instead the rich data Engine provides, combined with other Apollo tooling, makes GraphQL the perfect way to manage data in your application.</p>



<h2 class="wp-block-heading" id="5690"><a href="#track-changes-over-time" aria-hidden="true" class="aal_anchor" id="track-changes-over-time"><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>Track changes over time</h2>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="690" height="208" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_MccyANW-o8TSsn2c0866uA-1.png" alt="" class="wp-image-728" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_MccyANW-o8TSsn2c0866uA-1.png 690w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_MccyANW-o8TSsn2c0866uA-1-300x90.png 300w" sizes="auto, (max-width: 690px) 100vw, 690px" /></figure>



<p>Products change over time, and with safely evolving schemas, GraphQL endpoints can seamlessly evolve into the right shape of data the product needs. Much like a git history, having a historical timeline of how these changes can really improve a team’s response rate to issues, fosters communication between backend and frontend teams, and aides in the reviewing of changes. With Apollo Engine, teams can now publish every change of their schema and track the exact commit that caused a change.</p>



<h2 class="wp-block-heading" id="e85a"><a href="#supercharge-your-workflow" aria-hidden="true" class="aal_anchor" id="supercharge-your-workflow"><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>Supercharge your workflow</h2>



<figure class="wp-block-image alignfull size-large"><img loading="lazy" decoding="async" width="1024" height="455" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_Iie3p1Ho_NMdGepFdKTisQ-1024x455.gif" alt="" class="wp-image-729" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_Iie3p1Ho_NMdGepFdKTisQ-1024x455.gif 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Iie3p1Ho_NMdGepFdKTisQ-300x133.gif 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Iie3p1Ho_NMdGepFdKTisQ-768x341.gif 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>With all that can change between two versions of a schema, it is really difficult to effectively review pull requests that introduce changes. To add to the complexity, teams that own the GraphQL server aren’t always the ones actually&nbsp;<strong>using&nbsp;</strong>it! What seems like a small backend tweak could break production apps without anyone knowing what happened. That is why Apollo Engine works with the most critical part of teams workflow, the GitHub pull request.</p>



<p>Last month, GitHub introduced their new&nbsp;<a href="https://blog.github.com/2018-05-07-introducing-checks-api/" target="_blank" rel="noreferrer noopener">checks platform</a>&nbsp;to improve the code review process for teams. I am so excited that we are launching full checks API integration today for schema validation. Here is how it works:</p>



<ol class="wp-block-list"><li>Configure the&nbsp;<a href="https://github.com/apps/apollo-engine" target="_blank" rel="noreferrer noopener">Apollo Engine GitHub app</a></li><li>Run&nbsp;<code>apollo schema:check</code>&nbsp;on every commit</li><li>View the difference in GitHub!</li></ol>



<p>Engine will update the status of a pull request to prevent breaking changes from going into production and comment back detailed information about what changed.&nbsp;<strong>Think of it like a CI for GraphQL!</strong></p>



<p>You can see this in action on our example project&nbsp;<a href="https://github.com/apollographql/GitHunt-API/pull/280/checks?check_run_id=4703076" target="_blank" rel="noreferrer noopener">GitHunt</a>.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="629" height="1024" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_x8sKiI0KH-iC78Ca2Qbf-Q-629x1024.png" alt="" class="wp-image-731" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_x8sKiI0KH-iC78Ca2Qbf-Q-629x1024.png 629w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_x8sKiI0KH-iC78Ca2Qbf-Q-184x300.png 184w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_x8sKiI0KH-iC78Ca2Qbf-Q-768x1250.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_x8sKiI0KH-iC78Ca2Qbf-Q-944x1536.png 944w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_x8sKiI0KH-iC78Ca2Qbf-Q-1258x2048.png 1258w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_x8sKiI0KH-iC78Ca2Qbf-Q-1200x1953.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_x8sKiI0KH-iC78Ca2Qbf-Q.png 1683w" sizes="auto, (max-width: 629px) 100vw, 629px" /></figure>



<h2 class="wp-block-heading" id="6945"><a href="#get-started-today" aria-hidden="true" class="aal_anchor" id="get-started-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 today</h2>



<p>As long as I’ve been working on GraphQL for production applications, I’ve wanted a safe way to change my schema. Schema design can be scary, and at Apollo we are committed to making it easier through&nbsp;<a href="https://www.apollographql.com/docs/guides/schema-design.html" target="_blank" rel="noreferrer noopener">in-depth guides</a>,&nbsp;<a href="https://www.apollographql.com/support" target="_blank" rel="noreferrer noopener">workshops and support</a>, and powerful tools like Engine. To try out this feature today, head over to our&nbsp;<a href="https://www.apollographql.com/docs/engine/schema-history.html" target="_blank" rel="noreferrer noopener">docs</a>&nbsp;and publish away!</p>



<figure class="wp-block-image alignfull size-large"><img loading="lazy" decoding="async" width="1024" height="550" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_2uBo_72nNflD7JIoi9QpsA-1024x550.gif" alt="" class="wp-image-732" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_2uBo_72nNflD7JIoi9QpsA-1024x550.gif 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_2uBo_72nNflD7JIoi9QpsA-300x161.gif 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_2uBo_72nNflD7JIoi9QpsA-768x412.gif 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_2uBo_72nNflD7JIoi9QpsA-1536x825.gif 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_2uBo_72nNflD7JIoi9QpsA-1200x644.gif 1200w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>I hope you’ll also&nbsp;<a href="https://summit.graphql.com/" target="_blank" rel="noreferrer noopener">join us at the 3rd annual GraphQL Summit on Nov 7–8 in San Francisco</a>. With over 800 attendees expected, it’s the largest GraphQL developer event in the world. Super early bird tickets are selling fast, so&nbsp;<a href="https://www.eventbrite.com/e/graphql-summit-2018-tickets-46601841362" target="_blank" rel="noreferrer noopener">register today</a>&nbsp;to reserve your spot!</p>


Schema Validation with Apollo Engine


<p>GraphQL makes it incredibly easy for teams to request any data that they need to build a feature. This flexibility is great for shipping fast, but when you get into production, you need to be able to respond in a flexible way, however your schema is being used. Wouldn’t it be great if you had a tool that would proactively tell you when your service was slowing down or was running into errors? With&nbsp;<a href="https://www.apollographql.com/engine/" target="_blank" rel="noreferrer noopener">Apollo Engine</a>’s new Alerts feature, now you do!</p>



<p><em>If you haven’t added Engine to your API yet, read the&nbsp;</em><a href="https://www.apollographql.com/docs/engine/setup-node.html" target="_blank" rel="noreferrer noopener"><em>setup directions here</em></a><em>&nbsp;or learn more about what it does&nbsp;</em><a href="https://www.apollographql.com/engine/" target="_blank" rel="noreferrer noopener"><em>on the website</em></a><em>.</em></p>



<figure class="wp-block-image alignfull size-large"><img loading="lazy" decoding="async" width="1024" height="438" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_jLHk14IXqMMxn-Co_hkyrA-1024x438.png" alt="" class="wp-image-804" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_jLHk14IXqMMxn-Co_hkyrA-1024x438.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_jLHk14IXqMMxn-Co_hkyrA-300x128.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_jLHk14IXqMMxn-Co_hkyrA-768x328.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_jLHk14IXqMMxn-Co_hkyrA.png 1179w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Stop those pesky bugs as soon as they happen!</figcaption></figure>



<h2 class="wp-block-heading" id="321f"><a href="#how-alerts-work" aria-hidden="true" class="aal_anchor" id="how-alerts-work"><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>How alerts work</h2>



<p>Apollo Engine gives you insight into how your GraphQL API is performing. You can get a service-wide birds-eye view, or look into each GraphQL operation in detail. Engine alerts allow you to set thresholds on this expansive set of timing data, and send notifications to Slack or PagerDuty when problems arise.</p>



<h3 class="wp-block-heading" id="26e6"><a href="#flexible-configuration" aria-hidden="true" class="aal_anchor" id="flexible-configuration"><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>Flexible Configuration</h3>



<p>Alerts can be configured on a number of different thresholds:</p>



<ul class="wp-block-list"><li>Request rate — requests per minute</li><li>Request duration — p50/p95/p99 service time</li><li>Error rate — errors per minute</li><li>Error percentage — the number of requests with errors divided by total requests</li></ul>



<p>Engine lets you configure these thresholds on the entire service, or on individual operations. That pesky front page feed query will never be slow again with Engine on guard.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="751" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_HJBVV1A9KJUM1-yHNBhc0g-1024x751.png" alt="" class="wp-image-803" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_HJBVV1A9KJUM1-yHNBhc0g-1024x751.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_HJBVV1A9KJUM1-yHNBhc0g-300x220.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_HJBVV1A9KJUM1-yHNBhc0g-768x563.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_HJBVV1A9KJUM1-yHNBhc0g.png 1157w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Selecting alert triggers in Apollo Engine</figcaption></figure>



<h3 class="wp-block-heading" id="1739"><a href="#proactive-monitoring" aria-hidden="true" class="aal_anchor" id="proactive-monitoring"><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>Proactive monitoring</h3>



<p>The triggers you select are evaluated on a rolling five minute window. This means that if you have an alert configured to trigger when the&nbsp;<code>HomeFeed</code>&nbsp;operation’s error rate exceeds 5%, and 6 out of the 100 requests that were sent through Engine in the last five minutes resulted in an error, then the alert will trigger with an error rate of 6%. Once you have put out the fire with the information provided by Engine, the alert will resolve after the five minute rate falls back into acceptable levels.</p>



<h2 class="wp-block-heading" id="f455"><a href="#how-to-set-up-alerts" aria-hidden="true" class="aal_anchor" id="how-to-set-up-alerts"><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>How to set up alerts</h2>



<p>Setting up alerts in your Engine account couldn’t be easier! There is a new&nbsp;<strong>ALERTS&nbsp;</strong>tab when you look at your service. I know you have been dying to click on it, now is your time to shine!</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="752" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_VpSzOzuUY5WnVKjqEtUbmw-1024x752.png" alt="" class="wp-image-802" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_VpSzOzuUY5WnVKjqEtUbmw-1024x752.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_VpSzOzuUY5WnVKjqEtUbmw-300x220.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_VpSzOzuUY5WnVKjqEtUbmw-768x564.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_VpSzOzuUY5WnVKjqEtUbmw.png 1157w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>It may not be a big red button, but c’mon, you know you want to click it</figcaption></figure>



<p>After turning on alerts, you will be greeted by a friendly prompt to setup your first alert channel. Choose either Slack or PagerDuty and put in your connection information.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="754" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_V5HfqVv7IN-XqVLuu70Wiw-1024x754.png" alt="" class="wp-image-801" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_V5HfqVv7IN-XqVLuu70Wiw-1024x754.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_V5HfqVv7IN-XqVLuu70Wiw-300x221.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_V5HfqVv7IN-XqVLuu70Wiw-768x566.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_V5HfqVv7IN-XqVLuu70Wiw.png 1157w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Say hello to your new favorite slack bot 🤖</figcaption></figure>



<p>Now Engine will suggest a couple handy alerts as a way to get started. By default it includes a performance alert for your entire service, and a critically helpful error rate trigger. You don’t want to be in production without Engine by your side!</p>



<h2 class="wp-block-heading" id="233f"><a href="#monitor-what-matters" aria-hidden="true" class="aal_anchor" id="monitor-what-matters"><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>Monitor what matters</h2>



<p>The default alerts are great starting point, but the real value of this feature is to keep an eye on what matters most to your users. Using Engine’s performance data and error tracking, you should pick trigger values that matter for your entire service and for key operations. That&nbsp;<code>HomeFeed</code>&nbsp;query from earlier should always be fast, but the&nbsp;<code>SignUp</code>&nbsp;mutation should never fail! So let Engine help keep those goals in check without you having to watch dashboards all day long.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="751" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_7FINlw_hX58FguLfa71ieQ-1024x751.png" alt="" class="wp-image-800" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_7FINlw_hX58FguLfa71ieQ-1024x751.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_7FINlw_hX58FguLfa71ieQ-300x220.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_7FINlw_hX58FguLfa71ieQ-768x563.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_7FINlw_hX58FguLfa71ieQ.png 1157w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Engine has your back for what matters the most</figcaption></figure>



<p>Setting up per operation triggers in Engine is just as easy as service wide ones. You can either set them up on the service level by clicking the operation name in the list, or go to the operation you want to alert on and setup the alert there.</p>



<p>Often times, you expect a certain operation to be slower than the rest or be more prone to errors. Other times, you want to have a more stringent alert on a critical operation. In these cases, you can configure more appropriate alerts for these operations individually. The service level triggers are great safety nets to make sure schema wide things are running smoothly.</p>



<h3 class="wp-block-heading" id="efb1"><a href="#alert-wisely" aria-hidden="true" class="aal_anchor" id="alert-wisely"><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>Alert wisely</h3>



<p>No one wants to be woken up at 3 am because a developer in a different timezone forgot a closing bracket on an operation in GraphiQL. In the same vein, if error rates spike suddenly, a slack mesage when everyone is out to lunch won’t do much good. With Engine you can select the channel of notification that you want for each alert. This means its easy to warn the product team that things are looking slow in Slack but also super simple to wake up the on call team when things are on fire</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="626" height="185" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_8v2SogHCbsMOq0fssGbyCQ.png" alt="" class="wp-image-799" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_8v2SogHCbsMOq0fssGbyCQ.png 626w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_8v2SogHCbsMOq0fssGbyCQ-300x89.png 300w" sizes="auto, (max-width: 626px) 100vw, 626px" /></figure>



<figure class="wp-block-embed is-type-photo is-provider-giphy"><div class="wp-block-embed__wrapper">
<a href="https://giphy.com/gifs/QZkpIdieotn3i"><img loading="lazy" decoding="async" src="https://media0.giphy.com/media/QZkpIdieotn3i/giphy.gif" alt="This Is Fine GIF - Find &amp; Share on GIPHY" width="500" height="272" /></a>
</div></figure>



<h2 class="wp-block-heading" id="e7b8"><a href="#try-it-out-today" aria-hidden="true" class="aal_anchor" id="try-it-out-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>Try it out today</h2>



<p>Alerts are part of the new paid Engine Standard and Pro plans. You can easily try things out on any of your Engine services with a free trial, without putting in a credit card. Turn them on and rest easy knowing that Engine is watching your app for you!</p>



<p><em>Apollo Engine is a GraphQL gateway that helps you operate and understand your GraphQL API in production with features like performance tracing, error tracking, and result caching. If you haven’t added Engine to your API yet, read the&nbsp;</em><a href="https://www.apollographql.com/docs/engine/setup-node.html" target="_blank" rel="noreferrer noopener"><em>setup directions here</em></a><em>&nbsp;or learn more about what it does&nbsp;</em><a href="https://www.apollographql.com/engine/" target="_blank" rel="noreferrer noopener"><em>on the website</em></a><em>.</em></p>


Proactive alerts for your GraphQL API


<p>The best thing about GraphQL as an API technology is that it’s focused on the needs of product developers. You simply describe the data you want for a particular part of your UI with a query, and the GraphQL server takes care of assembling it for you. And because all modern GraphQL clients follow the practice of sending&nbsp;<a href="https://dev-blog.apollodata.com/5-benefits-of-static-graphql-queries-b7fa90b0b69a" target="_blank" rel="noreferrer noopener">static, predictable queries</a>, you can easily associate the queries that hit your API with the parts of the UI that are using those results.</p>



<p>For example, if you see a query called&nbsp;<code>ServicesListQuery</code>&nbsp;hit your API, you can tell that this data is going to be used for the&nbsp;<code>ServicesList</code>&nbsp;component in the frontend. This is a huge benefit of GraphQL over a more “generic” API, where a&nbsp;<code>/services</code>&nbsp;endpoint might be used by dozens of components in different ways.</p>



<p>To take advantage of this, you need a monitoring and reporting tool that natively understands GraphQL and can show you details on the level of individual queries and resolvers. That’s where&nbsp;<a href="https://www.apollographql.com/engine/" target="_blank" rel="noreferrer noopener">Apollo Engine</a>&nbsp;comes in.</p>



<h3 class="wp-block-heading" id="850a"><a href="#announcing-daily-slack-reports-and-api-overview" aria-hidden="true" class="aal_anchor" id="announcing-daily-slack-reports-and-api-overview"><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>Announcing: Daily Slack reports and API overview</h3>



<p>Starting today, Engine can send you a bird’s-eye view of your GraphQL API, with a breakdown of your most important queries, both in the dashboard and in a compact daily Slack report.</p>



<p>Here’s what it looks like:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="926" height="1024" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_MZXdBZeH5M7jU_dTbMYV2A-926x1024.png" alt="" class="wp-image-812" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_MZXdBZeH5M7jU_dTbMYV2A-926x1024.png 926w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_MZXdBZeH5M7jU_dTbMYV2A-271x300.png 271w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_MZXdBZeH5M7jU_dTbMYV2A-768x849.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_MZXdBZeH5M7jU_dTbMYV2A.png 1174w" sizes="auto, (max-width: 926px) 100vw, 926px" /></figure>



<h3 class="wp-block-heading" id="541d"><a href="#getting-started-with-engine" aria-hidden="true" class="aal_anchor" id="getting-started-with-engine"><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>Getting started with Engine</h3>



<p>If you haven’t set up Engine in your GraphQL server yet, here’s how:</p>



<ol class="wp-block-list"><li><a href="https://www.apollographql.com/docs/engine/setup-node.html" target="_blank" rel="noreferrer noopener">Add Engine to your Node.js API in about 5 minutes</a></li><li><a href="https://www.apollographql.com/docs/engine/setup-standalone.html" target="_blank" rel="noreferrer noopener">Use Engine with any GraphQL API with Docker</a></li></ol>



<p>Now, let’s dive in to how these new features work.</p>



<h2 class="wp-block-heading" id="77b6"><a href="#new-service-overviews-and-reports-in-engine" aria-hidden="true" class="aal_anchor" id="new-service-overviews-and-reports-in-engine"><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>New: Service overviews and reports in Engine</h2>



<p>Engine has always enabled you to see how your GraphQL API is working, down to the level of individual queries, mutations, and resolvers. Starting today, Engine will also provide you reports that show you what parts of your API need your attention.</p>



<p>When you log into your Engine dashboard today, you’ll immediately see an overview of your most interesting GraphQL operations:</p>



<figure class="wp-block-image alignfull size-large"><img loading="lazy" decoding="async" width="1024" height="481" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_Jsr778q0ffRMVXyPPlDvrg-1024x481.png" alt="" class="wp-image-813" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_Jsr778q0ffRMVXyPPlDvrg-1024x481.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Jsr778q0ffRMVXyPPlDvrg-300x141.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Jsr778q0ffRMVXyPPlDvrg-768x361.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Jsr778q0ffRMVXyPPlDvrg-1536x721.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Jsr778q0ffRMVXyPPlDvrg-1200x564.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Jsr778q0ffRMVXyPPlDvrg-1980x930.png 1980w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Jsr778q0ffRMVXyPPlDvrg.png 2014w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Visit your&nbsp;<a href="https://engine.apollographql.com/" target="_blank" rel="noreferrer noopener">Engine dashboard</a>&nbsp;to see this new view!</figcaption></figure>



<p>And, so that you don’t need to log into Engine every day to keep an eye on what’s going on, you can get the same information delivered in a daily report to the Slack channel of your choice.</p>



<h3 class="wp-block-heading" id="6090"><a href="#using-the-charts" aria-hidden="true" class="aal_anchor" id="using-the-charts"><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>Using the charts</h3>



<p>We’ve been testing this feature with some early-access customers to make sure that the data presented is the most relevant information you would want to know about your API. Here’s how you can use it to identify issues:</p>



<ol class="wp-block-list"><li><strong>Request rate:&nbsp;</strong>The number of operations per minute, and a list of the most popular operations. A dip in this metric might mean some frontends aren’t able to reach your server!</li><li><strong>p95 service time:&nbsp;</strong>The time under which 95% of operations are executing, and a great representation of the majority user experience. Consistent slowness could indicate an overloaded API, and the operation details will show the worst offenders.</li><li><strong>Error percentage:&nbsp;</strong>Spikes in error percentages may indicate malfunctions in your backend, and knowing which operations are most error-prone will help find precisely where to look.</li></ol>



<h3 class="wp-block-heading" id="f2b4"><a href="#drilling-down-into-operations" aria-hidden="true" class="aal_anchor" id="drilling-down-into-operations"><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>Drilling down into operations</h3>



<p>Once you identify something that needs extra attention, you can click on any of the listed operations to get a more detailed view. This will help you find extra information that you can use to address the issue, taking you directly to a detailed trace of the operation timing or a specific error message:</p>



<figure class="wp-block-image alignfull size-large"><img loading="lazy" decoding="async" width="1024" height="338" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_FNp6lKrH912NAv5RDbFdMw-1024x338.png" alt="" class="wp-image-814" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_FNp6lKrH912NAv5RDbFdMw-1024x338.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_FNp6lKrH912NAv5RDbFdMw-300x99.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_FNp6lKrH912NAv5RDbFdMw-768x254.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_FNp6lKrH912NAv5RDbFdMw-1536x508.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_FNp6lKrH912NAv5RDbFdMw-1200x397.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_FNp6lKrH912NAv5RDbFdMw.png 1915w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>The detailed trace view that tells you timing for each field in your operation.</figcaption></figure>



<h2 class="wp-block-heading" id="294b"><a href="#setting-up-slack-reports" aria-hidden="true" class="aal_anchor" id="setting-up-slack-reports"><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>Setting up Slack reports</h2>



<p>Turning on reports for your GraphQL API is really simple. First, click on the “Daily Reports” button in the top right of the Engine UI:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="136" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_ATice45F4divxzfC-L9jNQ-1024x136.png" alt="" class="wp-image-815" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_ATice45F4divxzfC-L9jNQ-1024x136.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_ATice45F4divxzfC-L9jNQ-300x40.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_ATice45F4divxzfC-L9jNQ-768x102.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_ATice45F4divxzfC-L9jNQ-1536x204.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_ATice45F4divxzfC-L9jNQ-2048x272.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_ATice45F4divxzfC-L9jNQ-1200x159.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_ATice45F4divxzfC-L9jNQ-1980x263.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>You’ll see a form that will allow you to set up a new Slack channel:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="808" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_DaiQYZfWABovahxlGoaqIQ-1024x808.png" alt="" class="wp-image-816" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_DaiQYZfWABovahxlGoaqIQ-1024x808.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_DaiQYZfWABovahxlGoaqIQ-300x237.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_DaiQYZfWABovahxlGoaqIQ-768x606.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_DaiQYZfWABovahxlGoaqIQ-1536x1212.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_DaiQYZfWABovahxlGoaqIQ-2048x1616.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_DaiQYZfWABovahxlGoaqIQ-1200x947.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_DaiQYZfWABovahxlGoaqIQ-1980x1562.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>Follow the directions in the popup to add a Webhook URL to one of your channels, and then paste that URL into Engine. You’ll get a confirmation message in the channel you picked, like so:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="164" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_RmAAxmmX2wqPetFD3OQGOw-1024x164.png" alt="" class="wp-image-817" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_RmAAxmmX2wqPetFD3OQGOw-1024x164.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_RmAAxmmX2wqPetFD3OQGOw-300x48.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_RmAAxmmX2wqPetFD3OQGOw-768x123.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_RmAAxmmX2wqPetFD3OQGOw.png 1152w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>Now you’re good to go! In a short while, you’ll see daily reports from Engine show up in your channel.</p>



<h2 class="wp-block-heading" id="cefe"><a href="#graphql-optimized-for-developer-experience" aria-hidden="true" class="aal_anchor" id="graphql-optimized-for-developer-experience"><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>GraphQL: Optimized for developer experience</h2>



<p>There are all kinds of API monitoring and reporting tools out there, but this type of report demonstrates why having something built around GraphQL makes a big difference. When you see GraphQL queries from your UI show up in the daily report, you not only get a sense of how your API is operating, but you can directly connect that to the GraphQL queries you’ve attached to your components with Apollo Client.</p>



<p>It’s that kind of full-stack integration where GraphQL really shines, and I can’t wait to see what else will be possible!</p>


Daily Slack reports of your GraphQL query performance and errors

GraphQL over REST with Node, Heroku, and Apollo Engine


<p>Two years ago, Apollo started as a tiny open source project with just a handful of contributors. Today it has expanded to many repositories supported by an incredible community:&nbsp;<a href="https://github.com/apollographql/graphql-tag" target="_blank" rel="noreferrer noopener">graphql-tag</a>,&nbsp;<a href="https://github.com/apollographql/apollo-angular" target="_blank" rel="noreferrer noopener">apollo-angular</a>,&nbsp;<a href="https://github.com/apollographql/reason-apollo" target="_blank" rel="noreferrer noopener">reason-apollo</a>,&nbsp;<a href="https://github.com/apollographql/apollo-android" target="_blank" rel="noreferrer noopener">apollo-android</a>,&nbsp;<a href="https://github.com/apollographql/apollo-link-rest" target="_blank" rel="noreferrer noopener">apollo-link-rest</a>&nbsp;to name a few. The existence of these projects and sustained growth are driven by community suggestions and feature contributions. Because Apollo wouldn’t exist without the active community, we want to make it much easier to get started as an open source contributor, and increase people’s ability to get involved on a deeper level.</p>



<p>Today, as our first step to empower the community, we are introducing&nbsp;<a href="https://github.com/apollographql/apollo-bot" target="_blank" rel="noreferrer noopener">Apollo Bot</a>. Apollo Bot will help you engage with our open source codebases and the surrounding ecosystem. The first feature of Apollo Bot will be to allow contributors to label issues and pull requests, but that’s just the start and we’re excited to expand the functionality as we learn more about what will be helpful.</p>



<p>We hope this and future additions create an environment that is easy to get started with and productive for contributors and maintainers. Keep reading to see how it works and what’s in store!</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="682" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_vBLkfW8S-ZqHb8TmNEW1XA-1024x682.jpg" alt="" class="wp-image-832" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_vBLkfW8S-ZqHb8TmNEW1XA-1024x682.jpg 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_vBLkfW8S-ZqHb8TmNEW1XA-300x200.jpg 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_vBLkfW8S-ZqHb8TmNEW1XA-768x512.jpg 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_vBLkfW8S-ZqHb8TmNEW1XA-1536x1024.jpg 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_vBLkfW8S-ZqHb8TmNEW1XA-2048x1365.jpg 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_vBLkfW8S-ZqHb8TmNEW1XA-1200x800.jpg 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_vBLkfW8S-ZqHb8TmNEW1XA-1980x1320.jpg 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Apollo Bot in its natural habitat</figcaption></figure>



<h2 class="wp-block-heading" id="7acf"><a href="#labelling-your-own-issues-and-prs" aria-hidden="true" class="aal_anchor" id="labelling-your-own-issues-and-prs"><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>Labelling your own issues and PRs</h2>



<p>As of today, all new Github Issues and Pull Requests on Apollo repositories will include a section that allows you to add any of four labels:&nbsp;<code>has-reproduction</code>,&nbsp;<code>feature</code>,&nbsp;<code>blocking</code>, and&nbsp;<code>good first issue</code>(or&nbsp;<code>good first review</code>).</p>



<p>These labels have been carefully selected to provide quick actionable information for everyone involved.&nbsp;<code>has-reproduction</code>,&nbsp;<code>feature</code>, and&nbsp;<code>blocking</code>&nbsp;labels contributors to determine the importance and possible reaction to an issue or pull request.&nbsp;<code>good first issue</code>&nbsp;indicates that the feature, bug, doc change is possible with minimal prior experience. Here is a breakdown of each of these labels individually:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="610" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_XxQEgD56QE-p-LDmeuV5HA-1024x610.png" alt="" class="wp-image-831" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_XxQEgD56QE-p-LDmeuV5HA-1024x610.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_XxQEgD56QE-p-LDmeuV5HA-300x179.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_XxQEgD56QE-p-LDmeuV5HA-768x458.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_XxQEgD56QE-p-LDmeuV5HA.png 1148w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>New Labels and Descriptions</figcaption></figure>



<h3 class="wp-block-heading" id="d83c"><a href="#using-these-labels" aria-hidden="true" class="aal_anchor" id="using-these-labels"><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>Using these labels</h3>



<p>The labels will provide contributors and maintainers the opportunity to filter by what you might like to learn or help build. If you’re looking to help our with an issue, the best place to start is the&nbsp;<a href="https://github.com/search?utf8=%E2%9C%93&amp;q=is%3Aopen+is%3Aissue+org%3Aapollographql+archived%3Afalse+label%3Ahas-reproduction&amp;type=" target="_blank" rel="noreferrer noopener">has-reproduction flag</a>. On the other hand, if you are curious about how you can add to the next generation of Apollo Client, then filtering by the&nbsp;feature tag&nbsp;and jumping into a discussion works well. If you’re not sure where to start, keep reading since Apollo Bot has something for you!</p>



<h2 class="wp-block-heading" id="0bb4"><a href="#helping-others" aria-hidden="true" class="aal_anchor" id="helping-others"><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>Helping others</h2>



<p>Contributing to an open source project without a place to start can be difficult and scary. For anyone interested in making a project better in the&nbsp;<a href="https://github.com/apollographql" target="_blank" rel="noreferrer noopener">Apollo organization</a>, Apollo Bot lowers this barrier to entry by providing the ability to add labels on any issue or pull request. To make use of this, you simply add a new comment on the issue or pull request with a&nbsp;<code>/label</code>&nbsp;command on its own line. Some common labels that you may want to add along with these four are&nbsp;<code>docs</code>,&nbsp;<code>discussion</code>,&nbsp;<code>can-close</code>, or the particular package that is affected. Here is an example:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="229" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_qyHlgxuF3dJ-TIp1d-b_UA-1024x229.png" alt="" class="wp-image-830" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_qyHlgxuF3dJ-TIp1d-b_UA-1024x229.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_qyHlgxuF3dJ-TIp1d-b_UA-300x67.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_qyHlgxuF3dJ-TIp1d-b_UA-768x171.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_qyHlgxuF3dJ-TIp1d-b_UA-1536x343.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_qyHlgxuF3dJ-TIp1d-b_UA-1200x268.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_qyHlgxuF3dJ-TIp1d-b_UA.png 1586w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Using a /label command</figcaption></figure>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Note: you may include other text in the comment, as long as the&nbsp;<code>/label</code>&nbsp;command is on its own line!</p></blockquote>



<h3 class="wp-block-heading" id="1048"><a href="#why-label-issues-and-prs" aria-hidden="true" class="aal_anchor" id="why-label-issues-and-prs"><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>Why label issues and PRs?</h3>



<p>Adding labels on a repository is a great way to get started helping out with the project. To understand the history of a project and the current development efforts you can start looking from the oldest issues to the newest. This will provide invaluable context on the project’s gaps and what help will be most appreciated by the community. One great place to start is&nbsp;<code>/label</code>&nbsp;issues with the new labels introduced above. Be sure to reference the original if you close as duplicate!</p>



<h2 class="wp-block-heading" id="0681"><a href="#to-infinity-and-bot-on" aria-hidden="true" class="aal_anchor" id="to-infinity-and-bot-on"><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>To infinity and bot on</h2>



<p>The most exciting part about Apollo Bot is the opportunity for integrations with the rest of Apollo’s ecosystem, such as our&nbsp;<a href="https://www.apollographql.com/#slack" target="_blank" rel="noreferrer noopener">Slack</a>. For example, when an issue is labelled&nbsp;<code>good first issue</code>, the bot could notify the corresponding channel and help bootstrap anyone who is interested. With another Slack integration, Apollo Bot could recognize the most active contributors by aggregating weekly activity around the community.</p>



<p>Every week we host a maintainers meeting to discuss upcoming features and releases. With the new system, part of this meeting could be devoted to issues that are&nbsp;<code>blocking</code>&nbsp;with reproductions or PRs that are highly discussed. In addition to placing these topics on the agenda, Apollo Bot could invite the interested members to the meeting to discuss possible solutions or the various blockers.</p>



<h3 class="wp-block-heading" id="f988"><a href="#using-apollo-bot-yourself" aria-hidden="true" class="aal_anchor" id="using-apollo-bot-yourself"><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>Using Apollo Bot Yourself</h3>



<p>You are also able to include Apollo Bot in your own repositories to take advantage of the&nbsp;<code>/label</code>&nbsp;commands. Simply install the GitHub&nbsp;<a href="https://github.com/apps/apollo-bot" target="_blank" rel="noreferrer noopener">application</a>&nbsp;on your preferred account.</p>



<h3 class="wp-block-heading" id="8085"><a href="#improving-apollo-bot" aria-hidden="true" class="aal_anchor" id="improving-apollo-bot"><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>Improving Apollo Bot</h3>



<p>If you have any ideas that will make your open source experience more productive or want to contribute, please open an issue or pull request (with labels 🙏) on the Apollo Bot&nbsp;<a href="https://github.com/apollographql/apollo-bot" target="_blank" rel="noreferrer noopener">repository</a>.</p>



<h3 class="wp-block-heading" id="2127"><a href="#call-for-avatar" aria-hidden="true" class="aal_anchor" id="call-for-avatar"><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>Call for avatar</h3>



<p>We are looking for an avatar for the new bot! If you want to suggest one, please tweet or DM&nbsp;<a href="https://twitter.com/evanshauser" target="_blank" rel="noreferrer noopener">@evanshauser</a>&nbsp;on Twitter.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="227" height="222" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_hEKPnodVt8aSVc-IFSbrzQ.jpg" alt="" class="wp-image-829"/></figure>


Introducing Apollo Bot 🤖


<p><a href="https://www.apollographql.com/docs/engine/" target="_blank" rel="noreferrer noopener">Apollo Engine</a>&nbsp;is a GraphQL gateway that provides caching, performance monitoring, and other features specifically for GraphQL. It’s built from the ground up to empower product developers to feel confident about using GraphQL on top of existing infrastructure.</p>



<p>Today, we’re launching the 1.0 version of the&nbsp;<code>apollo-engine</code>&nbsp;npm package and our standalone Docker container. These new releases make it dramatically easier to add Engine to your server.</p>



<p>In the past, you had to add code in several places and attach middleware to your app in a specific order, but now it’s much clearer where everything needs to go for a production-ready setup.</p>



<h3 class="wp-block-heading" id="0ac7"><a href="#the-new-setup-experience" aria-hidden="true" class="aal_anchor" id="the-new-setup-experience"><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>The new setup experience</h3>



<p>Apollo Engine provides a ton of valuable features to help you work with GraphQL, and can handle millions or even billions of requests a day, but at the same time we want to make sure it’s a breeze to get started with.</p>



<p>If you want to use Engine with Apollo Server and Node.js, setup is now as simple as can be:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">// Install and import the apollo-engine package
const { ApolloEngine } = require(&#039;apollo-engine&#039;);
const { graphqlExpress } = require(&#039;apollo-server-express&#039;);

const app = express();

// Enable tracing and cacheControl in Apollo Server
app.use(&#039;/graphql&#039;, graphqlExpress({
  tracing: true,
  cacheControl: true,
  schema: schema,
  // ... other options
});

// Initialize Engine with an API key
const engine = new ApolloEngine({ apiKey: &#039;API_KEY&#039; });

// Replace app.listen() with engine.listen()
engine.listen({
  port: 3000,
  expressApp: app,
});</code></pre>



<p>You can get an API key by logging into the&nbsp;<a href="https://engine.apollographql.com/" target="_blank" rel="noreferrer noopener">Apollo Engine app</a>. Once you put in the API key, run your server, and execute some queries, you’ll be able to see traces of your queries, track errors, set up caching, and more!</p>



<p>For all of the details, read the setup directions in the docs:</p>



<ul class="wp-block-list"><li><a href="https://www.apollographql.com/docs/engine/setup-node.html" target="_blank" rel="noreferrer noopener">For Node.js</a></li><li><a href="https://www.apollographql.com/docs/engine/setup-standalone.html" target="_blank" rel="noreferrer noopener">For other languages</a></li></ul>



<h2 class="wp-block-heading" id="5163"><a href="#improvements-from-previous-versions" aria-hidden="true" class="aal_anchor" id="improvements-from-previous-versions"><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>Improvements from previous versions</h2>



<p>This new release comes with several improvements that make Engine easier to use while expanding support to more servers.</p>



<h3 class="wp-block-heading" id="6caf"><a href="#simpler-api" aria-hidden="true" class="aal_anchor" id="simpler-api"><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>Simpler API</h3>



<p>We’ve updated the API and documentation to make it easier to set things up correctly. The previous API required code to be added in very specific places, and the new one is much easier to explain and use correctly.</p>



<p>If you are already using Engine, upgrading is easy:</p>



<ul class="wp-block-list"><li>Instead of using a middleware like&nbsp;<code>engine.expressMiddleware()</code>, you replace your app’s&nbsp;<code>app.listen(port)</code>&nbsp;call with&nbsp;<code>engine.listen({ port, expressApp: app })</code>. This reduces code duplication and removes the need to worry about middleware ordering.</li><li>Instead of the&nbsp;<code>Engine</code>&nbsp;constructor with an&nbsp;<code>engineConfig: {...}</code>&nbsp;option, you now import an&nbsp;<code>ApolloEngine</code>&nbsp;constructor which takes the Engine config directly. Any Node-specific options are passed into the&nbsp;<code>listen</code>&nbsp;function above. This helps avoid confusion about where configuration should be passed.</li></ul>



<p>For all of the details,&nbsp;<a href="https://www.apollographql.com/docs/engine/1.0-migration.html" target="_blank" rel="noreferrer noopener">read the upgrade guide in the docs</a>.</p>



<h3 class="wp-block-heading" id="3111"><a href="#expanded-node-web-framework-support" aria-hidden="true" class="aal_anchor" id="expanded-node-web-framework-support"><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>Expanded Node web framework support</h3>



<p>Because the new API relies on the standard Node&nbsp;<code>listen</code>&nbsp;interface instead of framework-specific middlewares, we’ve&nbsp;<a href="https://www.apollographql.com/docs/engine/setup-node.html#not-express" target="_blank" rel="noreferrer noopener">expanded our support of Node server frameworks</a>. Engine now supports Express, Hapi, Koa, Micro, Restify, Meteor, and even the built in&nbsp;<code>http.Server</code>.</p>



<h3 class="wp-block-heading" id="23f9"><a href="#less-overhead" aria-hidden="true" class="aal_anchor" id="less-overhead"><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>Less overhead</h3>



<p>Even thought it’s easy to install with npm, the part of Engine that you run inside your server is written in Go for better performance and stability. In the previous version, the web framework middleware you installed routed GraphQL requests to the Engine binary, and they were routed back to actually execute your GraphQL schema. With the new 1.0 API, all requests hit the Engine binary directly, and non-graphql requests are passed through. This new approach involves fewer roundtrips, making it even better than the previous approach while actually being easier to set up.</p>



<h3 class="wp-block-heading" id="2200"><a href="#easier-to-use-with-non-node-servers" aria-hidden="true" class="aal_anchor" id="easier-to-use-with-non-node-servers"><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>Easier to use with non-Node servers</h3>



<p>We’ve always distributed the Engine proxy binary both via the apollo-engine npm module (for use with Node GraphQL servers) and as a standalone Docker container (for other servers). We’ve made two improvements to how we support non-Node servers. First, we’re now using the same version numbers to tag the Docker container as we are for the npm module. So today is version 1.0.1 of both distributions, and the same&nbsp;<a href="https://www.apollographql.com/docs/engine/proxy-release-notes.html" target="_blank" rel="noreferrer noopener">release notes</a>&nbsp;describe updates to both distributions. Secondly, because we know it’s not easy to run Docker containers in every hosting environment, we’ve added a&nbsp;<a href="https://www.apollographql.com/docs/engine/setup-standalone.html#apollo-engine-launcher" target="_blank" rel="noreferrer noopener">new ApolloEngineLauncher API to the npm module</a>&nbsp;which you can use to run the Engine binary as a standalone process with no Node web framework integration.</p>



<h2 class="wp-block-heading" id="9d3c"><a href="#what-youll-see-in-the-engine-ui" aria-hidden="true" class="aal_anchor" id="what-youll-see-in-the-engine-ui"><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 you’ll see in the Engine UI</h2>



<p>Once you get Engine set up, you’ll be able to look at&nbsp;<a href="https://www.apollographql.com/docs/engine/performance.html" target="_blank" rel="noreferrer noopener">detailed traces of your GraphQL queries</a>:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="596" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_-PiUjyhfH11jkzBLAmmTTQ-1024x596.png" alt="" class="wp-image-838" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_-PiUjyhfH11jkzBLAmmTTQ-1024x596.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_-PiUjyhfH11jkzBLAmmTTQ-300x175.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_-PiUjyhfH11jkzBLAmmTTQ-768x447.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_-PiUjyhfH11jkzBLAmmTTQ-1536x894.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_-PiUjyhfH11jkzBLAmmTTQ-2048x1192.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_-PiUjyhfH11jkzBLAmmTTQ-1200x698.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_-PiUjyhfH11jkzBLAmmTTQ-1980x1152.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>Track your query performance distribution over time:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="348" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_vv0hvvbZzjP0igz_S00uXg-1024x348.png" alt="" class="wp-image-837" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_vv0hvvbZzjP0igz_S00uXg-1024x348.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_vv0hvvbZzjP0igz_S00uXg-300x102.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_vv0hvvbZzjP0igz_S00uXg-768x261.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_vv0hvvbZzjP0igz_S00uXg-1200x407.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_vv0hvvbZzjP0igz_S00uXg.png 1532w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p><a href="https://www.apollographql.com/docs/engine/caching.html" target="_blank" rel="noreferrer noopener">Cache GraphQL results</a>&nbsp;to make common queries resolve in a matter of microseconds:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="380" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_4z5FSggjOdHGzC7qXw1zKQ-1024x380.png" alt="" class="wp-image-836" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_4z5FSggjOdHGzC7qXw1zKQ-1024x380.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_4z5FSggjOdHGzC7qXw1zKQ-300x111.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_4z5FSggjOdHGzC7qXw1zKQ-768x285.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_4z5FSggjOdHGzC7qXw1zKQ-1200x446.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_4z5FSggjOdHGzC7qXw1zKQ.png 1406w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>And more — there are a lot of other capabilities that you can learn about in the&nbsp;<a href="https://www.apollographql.com/docs/engine/" target="_blank" rel="noreferrer noopener">Engine docs</a>. We’ve hand-picked this set of functionality over the last two years of talking to companies using GraphQL in production.</p>



<h2 class="wp-block-heading" id="7609"><a href="#continuous-improvement" aria-hidden="true" class="aal_anchor" id="continuous-improvement"><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>Continuous improvement</h2>



<p>In addition to overhauling the API you use to set up Apollo Engine in your app, we’ve also started a total rework of&nbsp;<a href="https://www.apollographql.com/docs/engine/" target="_blank" rel="noreferrer noopener">our documentation</a>, beginning with the setup instructions. Keep an eye on our blog over the next few weeks to learn more about what Apollo Engine is, how it’s getting easier to use, and what features we’re working on next!</p>


Set up GraphQL caching and performance monitoring in minutes


<p>One of my favorite parts of the Apollo ecosystem are the&nbsp;<a href="https://github.com/apollographql/apollo-client-devtools" target="_blank" rel="noreferrer noopener">Apollo Devtools</a>. What started as a&nbsp;<a href="https://dev-blog.apollodata.com/apollo-client-developer-tools-ff89181ebcf" target="_blank" rel="noreferrer noopener">hack week project</a>&nbsp;for the core team turned into a pretty amazing way to debug and understand what is happening in an Apollo Client-driven app. The integrated Graph<em>i</em>QL, list of active operations, and cache inspector are all invaluable tools for digging around the data your app is using. Today I’m super excited to showcase a couple new features we’ve added and give you a taste of what is to come!</p>



<h2 class="wp-block-heading" id="2d2a"><a href="#whats-new-today" aria-hidden="true" class="aal_anchor" id="whats-new-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>Whats new today</h2>



<p>We’ve just released&nbsp;<a href="https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm" target="_blank" rel="noreferrer noopener">a new version of the Devtools on the Chrome Web Store&nbsp;</a>with a host of important improvements:</p>



<h3 class="wp-block-heading" id="c05d"><a href="#a-new-more-stable-architecture" aria-hidden="true" class="aal_anchor" id="a-new-more-stable-architecture"><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>A new, more stable architecture</h3>



<p>We had heard reports that in some cases, the devtools wouldn’t respond when making queries, would break after a page reload, or were too slow for large operations. In the newest version, many of these issues have been fixed. Thanks to incredible help from&nbsp;<a href="https://medium.com/u/9bafe4e8ffdd?source=post_page-----eb43258f103f----------------------" target="_blank" rel="noreferrer noopener">Guillaume CHAU</a>, and drawing from examples in the Vue.js Devtools, the Apollo Devtools have a new architecture which addresses a number of stability and performance issues. If you’ve encountered these issues in the past, give them another shot!</p>



<h3 class="wp-block-heading" id="0340"><a href="#improved-dark-mode" aria-hidden="true" class="aal_anchor" id="improved-dark-mode"><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>Improved dark mode</h3>



<p>The dark mode for the Devtools (activated when your Chrome console is set to the dark theme) is improved. Graph<em>i</em>QL now uses the dracula theme from&nbsp;<a href="https://codemirror.net/" target="_blank" rel="noreferrer noopener">CodeMirror</a>&nbsp;instead of the bright Graph<em>i</em>QL theme. This is especially useful for those late-night debugging sessions.</p>



<figure class="wp-block-image alignfull size-large"><img loading="lazy" decoding="async" width="1024" height="388" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_ApYS7Y1IWW5bkWQrPEqP5Q-1024x388.png" alt="" class="wp-image-860" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_ApYS7Y1IWW5bkWQrPEqP5Q-1024x388.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_ApYS7Y1IWW5bkWQrPEqP5Q-300x114.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_ApYS7Y1IWW5bkWQrPEqP5Q-768x291.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_ApYS7Y1IWW5bkWQrPEqP5Q-1536x582.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_ApYS7Y1IWW5bkWQrPEqP5Q-2048x776.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_ApYS7Y1IWW5bkWQrPEqP5Q-1200x454.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_ApYS7Y1IWW5bkWQrPEqP5Q-1980x750.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Dark mode for GraphiQL</figcaption></figure>



<h3 class="wp-block-heading" id="d9d0"><a href="#graphql-subscriptions-in-graphiql" aria-hidden="true" class="aal_anchor" id="graphql-subscriptions-in-graphiql"><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>GraphQL subscriptions in Graph<em>i</em>QL</h3>



<p>The new version of the Devtools uses the Observable-driven interface of Apollo Link instead of a promise-based fetcher for Graph<em>i</em>QL. This means that subscriptions are now fully supported and use the same connection that your application is using to your server!</p>



<p>This is just the beginning of subscription support. In the near future, I expect to see full subscription debugging features just like we currently have for queries and mutations.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="983" height="1024" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_eAzbzZV0yXS9Ag9Q1M2qXA-983x1024.gif" alt="" class="wp-image-859" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_eAzbzZV0yXS9Ag9Q1M2qXA-983x1024.gif 983w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_eAzbzZV0yXS9Ag9Q1M2qXA-288x300.gif 288w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_eAzbzZV0yXS9Ag9Q1M2qXA-768x800.gif 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_eAzbzZV0yXS9Ag9Q1M2qXA-1474x1536.gif 1474w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_eAzbzZV0yXS9Ag9Q1M2qXA-1200x1250.gif 1200w" sizes="auto, (max-width: 983px) 100vw, 983px" /><figcaption>Subscriptions in the Devtools 🎉</figcaption></figure>



<h3 class="wp-block-heading" id="e4cd"><a href="#client-side-schema-support" aria-hidden="true" class="aal_anchor" id="client-side-schema-support"><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>Client-side schema support</h3>



<p><a href="https://medium.com/u/c827782c6410?source=post_page-----eb43258f103f----------------------" target="_blank" rel="noreferrer noopener">Peggy Rayzis</a>&nbsp;has started an incredible effort to bring easy, local state management to Apollo.&nbsp;<a href="https://www.apollographql.com/docs/link/links/state.html" target="_blank" rel="noreferrer noopener">Apollo Link State</a>&nbsp;is a great way for your team to learn one way to manage data that’s both local to the app and shared remotely. This version of the Devtools has initial support allowing you to query your client-side data and even see the schema for your local state.</p>



<p>This is just the beginning — with upcoming changes to Apollo Client, you will be able to fully query local and remote data side by side in your browser’s Graph<em>i</em>QL!</p>



<figure class="wp-block-image alignfull size-large"><img loading="lazy" decoding="async" width="1024" height="426" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_3dU5Fme1h_y6OXEnrQBYdQ-1024x426.png" alt="" class="wp-image-858" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_3dU5Fme1h_y6OXEnrQBYdQ-1024x426.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_3dU5Fme1h_y6OXEnrQBYdQ-300x125.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_3dU5Fme1h_y6OXEnrQBYdQ-768x320.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_3dU5Fme1h_y6OXEnrQBYdQ-1536x640.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_3dU5Fme1h_y6OXEnrQBYdQ-2048x853.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_3dU5Fme1h_y6OXEnrQBYdQ-1200x500.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_3dU5Fme1h_y6OXEnrQBYdQ-1980x824.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<h3 class="wp-block-heading" id="dddd"><a href="#all-in-on-apollo-link" aria-hidden="true" class="aal_anchor" id="all-in-on-apollo-link"><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>All in on Apollo Link</h3>



<p>Subscription and local state support rely on Apollo Link, the new network architecture introduced in Apollo Client 2.0. This means the Devtools no longer supports Apollo Client 1.0. If you’re still on 1.0, it’s easy to upgrade and we have a full guide&nbsp;<a href="https://www.apollographql.com/docs/react/2.0-migration.html" target="_blank" rel="noreferrer noopener">here</a>! If you need your Devtools fix right now and haven’t had the chance to upgrade, you can manually install the old Devtools version&nbsp;<a href="https://github.com/apollographql/apollo-client-devtools/releases/tag/2.0.6" target="_blank" rel="noreferrer noopener">here</a>.</p>



<h2 class="wp-block-heading" id="db5a"><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’s next</h2>



<p>This initial set of improvements was primarily an effort to improve stability and taking advantage of more of what Apollo Client 2.0 has to offer. But we’ve also got a couple of things coming up that I’m super excited about because of the impact they’ll have on day-to-day development with GraphQL.</p>



<h3 class="wp-block-heading" id="2019"><a href="#official-support-for-more-browsers" aria-hidden="true" class="aal_anchor" id="official-support-for-more-browsers"><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>Official support for more browsers</h3>



<p>Previously, the Devtools only worked for Chrome. We are working on new versions for FireFox, Safari, a standalone Electron app, and integration with React Native Debugger! Anywhere that Apollo Client can be used, we want the Devtools to be there, too.</p>



<h3 class="wp-block-heading" id="0b0b"><a href="#more-sophisticated-schema-exploration-and-usage" aria-hidden="true" class="aal_anchor" id="more-sophisticated-schema-exploration-and-usage"><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>More sophisticated schema exploration and usage</h3>



<p>GraphQL is incredible due in large part to the built-in ability to introspect a server’s schema. In future versions of the Devtools, we plan to use this to show your schema’s data graph and overlay how much of it is being used by your application. As you navigate around, you’ll be able to see which types are being used, and even how data is being updated with things like mutations and direct cache writes. To put the icing on the cake, we’re going to work on time traveling debugging to play back states of your app!</p>



<h3 class="wp-block-heading" id="2cd5"><a href="#apollo-link-inspector" aria-hidden="true" class="aal_anchor" id="apollo-link-inspector"><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>Apollo Link inspector</h3>



<p><a href="https://www.apollographql.com/docs/link/" target="_blank" rel="noreferrer noopener">Apollo Link</a>&nbsp;is an amazing way to isolate and compose parts of your data fetching needs with Apollo Client. We want to provide a view that lets you see how data is flowing through these composed chains, where errors happen, and, with Apollo Tracing, how long different parts of the server response took to execute. You can think of these new features as a miniature version of the trace view in&nbsp;<a href="https://www.apollographql.com/engine" target="_blank" rel="noreferrer noopener">Apollo Engine</a>.</p>



<h3 class="wp-block-heading" id="620b"><a href="#viewing-graphql-operations-in-the-application-context" aria-hidden="true" class="aal_anchor" id="viewing-graphql-operations-in-the-application-context"><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>Viewing GraphQL operations in the application context</h3>



<p>Being able to see the data in your app is so useful, but it could be even better if it’s tied into how your app actually works! In the future, we hope to build one or more views that let you do things like view operations by routes, link data directly to components on the page, and even open an operation in your editor.</p>



<hr class="wp-block-separator"/>



<h2 class="wp-block-heading" id="1476"><a href="#our-goal-helping-you-make-the-most-of-graphql" aria-hidden="true" class="aal_anchor" id="our-goal-helping-you-make-the-most-of-graphql"><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>Our goal: Helping you make the most of GraphQL</h2>



<p>At Apollo, our primary goal is to make GraphQL easy to get started with, then smoothly grow with you to be the most powerful way to manage data for your application. Tools like&nbsp;<a href="https://github.com/apollographql/apollo-codegen" target="_blank" rel="noreferrer noopener">Apollo Codegen</a>,&nbsp;<a href="https://github.com/apollographql/eslint-plugin-graphql" target="_blank" rel="noreferrer noopener">eslint-plugin-graphql</a>, and the Apollo Devtools are just a few ways to leverage GraphQL’s power to ship features faster. Projects from the Apollo community including Apollo Client, Apollo Link, and Apollo Server do the hard work of data plumbing so you can focus on what your users need.</p>



<p><em>If you’re as excited as we are about pushing this technology forward, we’re actively hiring for visual design, frontend developers, and open source API tooling engineers!&nbsp;</em><a href="https://twitter.com/stubailo" target="_blank" rel="noreferrer noopener"><em>DM Sashko on Twitter</em></a><em>&nbsp;for more info.</em></p>


Improved Apollo Client Devtools


<p><em>This is a guest post by Dan Shapiro, Senior eCommerce Engineer at&nbsp;</em><a href="https://www.express.com/" target="_blank" rel="noreferrer noopener"><em>Express</em></a><em>.</em></p>



<p>As one of the biggest specialty retail brands in the world, Express keeps up with both fashion and technology trends. Keeping pace technologically means balancing innovation with performance and security. Overhauling the architecture behind the shopping experience’s key eCommerce pages for&nbsp;<a href="https://www.express.com/" target="_blank" rel="noreferrer noopener">Express.com</a>&nbsp;is no task to be taken lightly.</p>



<p>I’m part of the team building a new shopping architecture. Today, Express leverages Adobe Experience Manager (AEM) as the customer-facing experience layer powered by our proprietary APIs built on Oracle’s ATG Web Commerce engine. We wanted to upgrade to a more responsive stack for the website’s experience to be “faster and snappier,” while also being flexible enough to react to changing design trends and customer experience patterns. To meet this goal, we formed a new product development team steeped in Javascript, React, and GraphQL expertise and focused on the product page to introduce a new technical stack.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="452" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_q4LCxA-gY9bWsszbzM4KpQ-1024x452.png" alt="" class="wp-image-927" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_q4LCxA-gY9bWsszbzM4KpQ-1024x452.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_q4LCxA-gY9bWsszbzM4KpQ-300x132.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_q4LCxA-gY9bWsszbzM4KpQ-768x339.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_q4LCxA-gY9bWsszbzM4KpQ-1536x677.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_q4LCxA-gY9bWsszbzM4KpQ-2048x903.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_q4LCxA-gY9bWsszbzM4KpQ-1200x529.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_q4LCxA-gY9bWsszbzM4KpQ-1980x873.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Product Page using our new architecture</figcaption></figure>



<p>We chose React as our foundational Javascript framework. Since more than 50% of our traffic is mobile, we selected GraphQL, which lets the client-side developer control how much data is flowing to the client. That optimization benefit alone was worth the integration. We considered other data orchestration engines, but GraphQL was selected as the best fit with our familiarity and general community acceptance and knowledge.</p>



<h2 class="wp-block-heading" id="7078"><a href="#discovering-apollo-server-and-client" aria-hidden="true" class="aal_anchor" id="discovering-apollo-server-and-client"><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>Discovering Apollo Server and Client</h2>



<p>Since&nbsp;<a href="https://github.com/graphql/graphql-js" target="_blank" rel="noreferrer noopener"><em>graphql-js</em></a>&nbsp;is the reference implementation for a GraphQL server, but isn’t built to scale, we needed a production-tolerant solution. Apollo was new to the team. During GraphQL proof-of-concepting, we decided to explore&nbsp;<a href="https://github.com/apollographql/apollo-server" target="_blank" rel="noreferrer noopener">Apollo Server</a>&nbsp;based on its reputation as being very developer friendly and production ready. Apollo Server adds numerous features on top of that reference implementation, such as error handling and easy-to-understand responses. After selecting Apollo’s GraphQL Server,&nbsp;<a href="https://github.com/apollographql/apollo-client" target="_blank" rel="noreferrer noopener">Apollo Client</a>&nbsp;was an obvious choice. Elegant Apollo Client design choices (like the easy-to-use pagination model) made for a great developer experience as well as an efficient new tool in our tool-set.</p>



<h2 class="wp-block-heading" id="cfe2"><a href="#graphql-boosts-our-development-velocity" aria-hidden="true" class="aal_anchor" id="graphql-boosts-our-development-velocity"><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>GraphQL Boosts Our Development Velocity</h2>



<p>Now GraphQL helps us move faster in product development. We recently had a scenario calling for a new field to be added to a product response to determine the products category. Our API team estimated two weeks to complete the addition. By simply creating a new resolver, we added the new Boolean value, specifying whether the product ID was one of a special set of 25 products, to the response. Within thirty minutes, everyone who uses that API on our side had access to the new field, instead of it being hidden in a client-side module. We saved two weeks of development time.</p>



<h2 class="wp-block-heading" id="6936"><a href="#the-apollo-engine-advantage" aria-hidden="true" class="aal_anchor" id="the-apollo-engine-advantage"><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>The Apollo Engine Advantage</h2>



<p>Early on in our POC we started using&nbsp;<a href="https://www.apollographql.com/engine/" target="_blank" rel="noreferrer noopener">Apollo Engine</a>&nbsp;(previously Apollo Optics) to understand performance of our new stack. During this proof of concept, we wrote a query to get product data which had a large variance in running time. As product developers, Engine helped us understand our backend APIs’ impact on performance. In production we now had the ability to see all the data thanks to Engine. Now we could see all the calls coming to the website and deeper specific traffic data. From a monitoring perspective, we are complementing our traffic and conversion data. We now have a view of how the stack is handling traffic that has illustrated where we need optimization and has provided a more accurate view of scale of traffic and any potential issues.</p>



<p>We leverage Akamai to cache our GraphQL queries every 24 hours. Each product on page is seen by Engine once every 24 hours. In Engine we should see a maximum of around 5,000 products if it’s cached properly. However, in Engine we were seeing around 300,000 a day. This called out a caching challenge we are still researching.</p>



<p>Another challenge Engine helped identify was backend API return errors. We were alerted to a window of 20-second responses that our API team verified as 503s. Those errors were impacting customer experiences, but we were not aware of them. Once identified we adjusted our integration. In short, Engine has been instrumental in identifying issues across our product architecture to improve the end user experience. It has given us confidence in the entire stack.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="450" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_roaRYVcn1L-SRPvKccZiTA-1024x450.png" alt="" class="wp-image-926" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_roaRYVcn1L-SRPvKccZiTA-1024x450.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_roaRYVcn1L-SRPvKccZiTA-300x132.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_roaRYVcn1L-SRPvKccZiTA-768x338.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_roaRYVcn1L-SRPvKccZiTA-1536x675.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_roaRYVcn1L-SRPvKccZiTA-2048x901.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_roaRYVcn1L-SRPvKccZiTA-1200x528.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_roaRYVcn1L-SRPvKccZiTA-1980x871.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Shopping Bag page using our new architecture</figcaption></figure>



<p>Next up, we are extending this stack further down the conversion funnel into the shopping bag and check out experiences. With React and GraphQL monitored by Apollo Engine, we are confident we will be delivering a fast, accessible customer experience<strong>.</strong></p>


Changing the architecture of Express.com


<p>Last week we announced our new GraphQL gateway product and successor to Apollo Optics,&nbsp;<a href="https://www.apollographql.com/engine/" target="_blank" rel="noreferrer noopener">Apollo Engine</a>. It has the essential GraphQL monitoring features like request tracing and performance metrics over time that Optics did, and adds new functionality like error reporting and whole query caching.</p>



<p>It’s been very exciting to see Optics evolve into Engine over the last year, and in the calm after the storm of&nbsp;<a href="https://dev-blog.apollodata.com/introducing-apollo-engine-insights-error-reporting-and-caching-for-graphql-6a55147f63fc" target="_blank" rel="noreferrer noopener">an exciting product launch</a>&nbsp;and a truly amazing&nbsp;<a href="https://summit.graphql.com/" target="_blank" rel="noreferrer noopener">GraphQL Summit</a>&nbsp;last week, I wanted to take some time in this post to talk about the evolution of one of my favorite features in Engine:&nbsp;<em>the Trace view.</em></p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="800" height="729" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_07KQPDGO5MbhhmULFeLkvQ.gif" alt="" class="wp-image-948"/><figcaption>The new Trace view in Engine!</figcaption></figure>



<h2 class="wp-block-heading" id="7447"><a href="#the-trace-view" aria-hidden="true" class="aal_anchor" id="the-trace-view"><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>The Trace view</h2>



<p>Engine collects tracing information on each of your server’s responses and can show you a distribution of request latencies for every query shape in your app. For each duration bucket in those distributions, Engine saves a sample trace of the operation that you can explore through the Trace view, helping you get a precise picture of each GraphQL operation sent to your server and its performance.</p>



<h3 class="wp-block-heading" id="6863"><a href="#whats-new-in-the-trace-view" aria-hidden="true" class="aal_anchor" id="whats-new-in-the-trace-view"><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’s new in the Trace view</h3>



<p>As part of the Engine launch, we made a significant upgrade to the Trace view from what it was in Optics. Here are some things you can do now that you couldn’t before:</p>



<ol class="wp-block-list"><li><strong>Immediately discover the critical path of your query</strong>. On render, the Trace view automatically expands the path to the node with the latest “end time”, meaning that, by default, you’re looking at your query’s critical path. This lets you immediately answer the question: “Which fields are making my query take this long?”</li><li><strong>Understand how much time is spent outside your resolvers</strong>. Executing a GraphQL query includes doing several things outside of what it takes to just resolve fields. Each query’s trace starts at the point at which it leaves the Engine Proxy and stops at the point at which it returns to the proxy. This means that a full trace could include the network latency between the Engine Proxy and your server, as well as any request queueing your server might do. Your server also needs to both parse and validate the query’s AST when it is received. In the new Trace view, you can now clearly see which part of your query’s overall execution time was spent in the resolvers, and which parts weren’t.</li><li><strong>Understand exactly when resolver execution starts and ends</strong>. The trace view now has a cursor that tracks your mouse and clearly shows you which resolvers were active at the specific point you’re hovering over. This makes it easier than ever to identify exactly when resolvers were running and which ones were executing simultaneously.</li><li><strong>Explore the parent-child relationship between resolvers</strong>. You can now expand/collapse resolvers that have children, allowing you to clearly identify relationships between resolvers and to see an overview of your query at a glance, all while still being able to dive into the details of how your query executed.</li></ol>



<figure class="wp-block-image alignfull size-large"><img loading="lazy" decoding="async" width="1024" height="512" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_iMuQyFs3m_FPKWvuGOPE7Q-1024x512.png" alt="" class="wp-image-947" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_iMuQyFs3m_FPKWvuGOPE7Q-1024x512.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_iMuQyFs3m_FPKWvuGOPE7Q-300x150.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_iMuQyFs3m_FPKWvuGOPE7Q-768x384.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_iMuQyFs3m_FPKWvuGOPE7Q-1536x768.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_iMuQyFs3m_FPKWvuGOPE7Q-1200x600.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_iMuQyFs3m_FPKWvuGOPE7Q.png 1800w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>A close-up of the Trace view</figcaption></figure>



<h2 class="wp-block-heading" id="7576"><a href="#how-we-got-here" aria-hidden="true" class="aal_anchor" id="how-we-got-here"><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>How we got here</h2>



<p>One of the best hidden values of GraphQL is that it gives developers across the stack insight into their API that they never had before. Since a GraphQL query specifies exactly what it wants, you know exactly which fields are being used by exactly which clients and queries and when. You can figure out which fields are the most highly requested. You can confidently determine whether or not a field is still being actively used. And best of all, you can find bottlenecks in your queries, because you can trace their exact execution.</p>



<p>When we first started brainstorming what types of tools might be useful for GraphQL developers, building something that could show you a visual “trace” of a query immediately came to mind. We wanted to build a tool that gave developers more insight into how their GraphQL servers were running, and GraphQL’s execution model inspired us to build something offering resolver timing data for queries.</p>



<h3 class="wp-block-heading" id="4977"><a href="#apollo-tracer" aria-hidden="true" class="aal_anchor" id="apollo-tracer"><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>Apollo Tracer</h3>



<p>Our first prototype of what became Optics was a tool called Apollo Tracer. You would install the tracing agent on your server, and it wrapped your resolvers with timing functions that could measure the start and end times of each resolver’s execution. Your server would send batched reports of its query measurements to the Tracer service, which would render those measurements as bars on a chart that could show you how your query was executed visually.</p>



<p>To see if this would be valuable, we instrumented the API of our hosting service, Galaxy, with Tracer and found that one the most high-volume queries had a trace that looked like this:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="538" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_K4Wzdjo99TPvOBzv6JiLBg-1024x538.png" alt="" class="wp-image-946" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_K4Wzdjo99TPvOBzv6JiLBg-1024x538.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_K4Wzdjo99TPvOBzv6JiLBg-300x158.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_K4Wzdjo99TPvOBzv6JiLBg-768x403.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_K4Wzdjo99TPvOBzv6JiLBg-1536x806.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_K4Wzdjo99TPvOBzv6JiLBg-1200x630.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_K4Wzdjo99TPvOBzv6JiLBg.png 1920w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>A query for a list of apps and app metrics, requesting each app separately in series.</figcaption></figure>



<p>We knew we were onto something as soon as we saw this chart, because we immediately recognized that this is a case where a query was resolving a list of data, but it was asking for each item in the list in series instead of in parallel.</p>



<p>When we updated our resolvers to request the list items in parallel instead, we were able to cut the average query response time in half and the new query trace looked like this:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="519" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_cfx9M-m6i95u9D5Vwo32IA-1024x519.png" alt="" class="wp-image-945" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_cfx9M-m6i95u9D5Vwo32IA-1024x519.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_cfx9M-m6i95u9D5Vwo32IA-300x152.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_cfx9M-m6i95u9D5Vwo32IA-768x389.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_cfx9M-m6i95u9D5Vwo32IA-1536x778.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_cfx9M-m6i95u9D5Vwo32IA-1200x608.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_cfx9M-m6i95u9D5Vwo32IA.png 1920w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>The same query, updated to resolve the apps in parallel instead. The average response time improved from 500ms to 300ms.</figcaption></figure>



<p>This type of insight into the order in which resolvers fire is something that’s hard to catch when looking at code, but is immediately obvious when drawn on a simple chart. So when we launched Optics, tracing was our flagship feature and the one that our customers valued the most.</p>



<h3 class="wp-block-heading" id="140c"><a href="#apollo-optics" aria-hidden="true" class="aal_anchor" id="apollo-optics"><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>Apollo Optics</h3>



<p>Optics collected timing information for each request, and would plot the distribution of request durations on a histogram for you. For each duration bucket on the histogram, you could see a sample trace of a query whose overall duration fit into that bucket.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="674" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_urc6DWqypmMSSUznp1khig-1024x674.png" alt="" class="wp-image-944" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_urc6DWqypmMSSUznp1khig-1024x674.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_urc6DWqypmMSSUznp1khig-300x197.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_urc6DWqypmMSSUznp1khig-768x505.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_urc6DWqypmMSSUznp1khig-1200x790.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_urc6DWqypmMSSUznp1khig.png 1243w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Optics when it launched: the request distribution and a sample trace.</figcaption></figure>



<p>As customers of our own product, we used the insights we gained from these traces in Optics to make performance improvements in the GraphQL queries we wrote in Galaxy.</p>



<h3 class="wp-block-heading" id="1609"><a href="#apollo-engine" aria-hidden="true" class="aal_anchor" id="apollo-engine"><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>Apollo Engine</h3>



<p>Over the last year Optics has come a long way along every dimension to become Engine. We now have more features, an improved visual design, and a better and more performant underlying system. As part of building the proxy-based architecture for Engine, we designed a new&nbsp;<a href="https://github.com/apollographql/apollo-tracing" target="_blank" rel="noreferrer noopener">community-based tracing standard</a>&nbsp;(Apollo Tracing) for server developers that is extensible and a foundation on which many great tools can be built.</p>



<p>In preparation for Engine’s launch, we completely redesigned the tracing feature and upgraded it from rendering a flat list of resolvers to rendering the the tree in which the resolvers actually resolve, maintaining the parent-child relationship between each of them.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="921" height="1024" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_IahV7FiXjRx2rSQWRsz_Rw-921x1024.png" alt="" class="wp-image-943" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_IahV7FiXjRx2rSQWRsz_Rw-921x1024.png 921w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_IahV7FiXjRx2rSQWRsz_Rw-270x300.png 270w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_IahV7FiXjRx2rSQWRsz_Rw-768x854.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_IahV7FiXjRx2rSQWRsz_Rw-1381x1536.png 1381w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_IahV7FiXjRx2rSQWRsz_Rw-1200x1335.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_IahV7FiXjRx2rSQWRsz_Rw.png 1424w" sizes="auto, (max-width: 921px) 100vw, 921px" /><figcaption>The new Trace view as it exists in Engine today</figcaption></figure>



<p>The best part about the new Trace view is that it’s the evolution of a concept we’ve known would be valuable to GraphQL since the first prototype of our Apollo Tracer tool. I’m particularly excited because I believe we’ve finally landed on an interface and interaction model that lets you explore your data in the same way it actually works under the hood.</p>



<h2 class="wp-block-heading" id="f59c"><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’s next</h2>



<p>I look forward to seeing tracing available in every GraphQL server so that we can continue to build more tools like this one, and help developers take full control over what’s happening in their GraphQL layer.</p>



<p>Outside of Engine, I think there are a lot of opportunities to build more tooling for the GraphQL community. I’m particularly excited about ideas like adding a tracing view similar to this one to things like GraphQL DevTools or GraphiQL, which are other valuable tools that developers use to work with and gain insight into their GraphQL APIs.</p>



<p>Engine is free for 1 million queries a month, which is more than enough traces for development and most production applications, so you can&nbsp;<a href="https://www.apollographql.com/engine/" target="_blank" rel="noreferrer noopener">get started improving your server’s performance</a>! The new Trace view was extremely fun to build, and I look forward to hearing your stories and seeing what insights you can get into your server’s implementation and execution from both this feature and others.</p>



<p>Want to learn more or start a conversation? Find me and the rest of the Engine team in the #engine channel of the&nbsp;<a href="https://www.apollographql.com/#slack" target="_blank" rel="noreferrer noopener">Apollo Slack</a>&nbsp;🙂</p>


The new Trace view in Apollo Engine


<p>Today we’re excited to introduce&nbsp;<a href="https://www.apollographql.com/engine/" target="_blank" rel="noreferrer noopener">Apollo Engine</a>, our new turnkey infrastructure that helps you take GraphQL services into production with confidence.&nbsp;The&nbsp;<a href="https://dev-blog.apollodata.com/apollo-engine-and-graphql-error-tracking-e7dd3ce8b99d" target="_blank" rel="noreferrer noopener">successor</a>&nbsp;to Apollo Optics, Engine delivers essential capabilities like query caching, error tracking, and execution tracing on top of any spec-compliant GraphQL server including Apollo Server, GraphQL-Ruby, Sangria, and Absinthe.<br><br>Adding Engine to your server is as easy as an `npm install` command.&nbsp;<a href="https://www.apollographql.com/docs/engine/setup-node.html" target="_blank" rel="noreferrer noopener">Click here</a>&nbsp;to get started!</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="512" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_wUQMuTCJvFWuEvK5lXfwLA-1024x512.png" alt="" class="wp-image-956" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_wUQMuTCJvFWuEvK5lXfwLA-1024x512.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_wUQMuTCJvFWuEvK5lXfwLA-300x150.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_wUQMuTCJvFWuEvK5lXfwLA-768x384.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_wUQMuTCJvFWuEvK5lXfwLA-1536x768.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_wUQMuTCJvFWuEvK5lXfwLA-2048x1023.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_wUQMuTCJvFWuEvK5lXfwLA-1200x600.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_wUQMuTCJvFWuEvK5lXfwLA-1980x990.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Performance latency, cache hit rates and error tracking for each GraphQL operation</figcaption></figure>



<h2 class="wp-block-heading" id="0f25"><a href="#unlock-the-full-power-of-graphql" aria-hidden="true" class="aal_anchor" id="unlock-the-full-power-of-graphql"><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>Unlock the full power of GraphQL</h2>



<p>Engine implements the most important features you need to develop and run a production GraphQL API, including:</p>



<ul class="wp-block-list"><li><strong>Integrated GraphQL query caching</strong>: Engine caches pre-assembled query results at the edge of your GraphQL layer, minimizing page render times and workload on your backends.</li><li><strong>Error tracking</strong>: Engine tracks every error from your GraphQL server in the context it occurred, giving you a way to find and diagnose GraphQL service errors by field, by path, and by operation.</li><li><strong>Query execution tracing:&nbsp;</strong>Engine captures a precise trace of your GraphQL operations, including field-by-field details of resolver execution times, cache hit rates, and individual error events.</li><li><strong>Schema analysis</strong>: Engine gives you a complete understanding of exactly how — and how much — each field in your GraphQL schema is used.</li><li><strong>API usage trends</strong>: Engine shows you historical trends of all the data it captures, giving you a clear understanding of the impact on your API as your UI components, GraphQL queries, and user behavior change.</li></ul>



<p>Each of these considerations is best addressed in separate infrastructure, rather than inside a GraphQL client or as part of a server process — and that’s why we architected Engine as a layer between the two. A thin proxy is deployed into your own cloud or datacenter, sitting in the request path right next to your GraphQL services. Most of Engine runs in our cloud and is centrally managed, monitored, and automatically scaled for you. We call this a “hybrid prem” architecture, and it has some big advantages:</p>



<ul class="wp-block-list"><li>Low latency — because the proxy is next to your server, requests are handled in your own datacenter</li><li>Highly available — your API uptime doesn’t depend on our services</li><li>Security — your business data never leaves your premises.</li></ul>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="519" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1__2bjpoEUcalP-RMbQbBBNA-1024x519.png" alt="" class="wp-image-955" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1__2bjpoEUcalP-RMbQbBBNA-1024x519.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1__2bjpoEUcalP-RMbQbBBNA-300x152.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1__2bjpoEUcalP-RMbQbBBNA-768x389.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1__2bjpoEUcalP-RMbQbBBNA-1536x778.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1__2bjpoEUcalP-RMbQbBBNA-1200x608.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1__2bjpoEUcalP-RMbQbBBNA.png 1930w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Engine’s hybrid prem architecture</figcaption></figure>



<h2 class="wp-block-heading" id="ed77"><a href="#engines-newest-feature-graphql-aware-caching" aria-hidden="true" class="aal_anchor" id="engines-newest-feature-graphql-aware-caching"><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>Engine’s newest feature: GraphQL-aware caching</h2>



<p>Engine’s hybrid prem architecture opens the door for performance optimization features that live in the query path. The first such capability we are shipping is an initial preview of GraphQL query caching.<br><br>API caching is a standard best practice, both to reduce the load on your servers, and to accelerate API responses and decrease page render times. But because GraphQL requests are POSTed to a single endpoint, existing HTTP caching solutions don’t work well for GraphQL APIs.<br><br>To bring caching to GraphQL, we developed&nbsp;<a href="https://github.com/apollographql/apollo-cache-control" target="_blank" rel="noreferrer noopener">Apollo Cache Control</a>, an open standard that allows servers to specify exactly what parts of a response can be cached, and for how long. Apollo Engine implements Apollo Cache Control, caching whole query responses based on a computed cacheability of each new query type, without requiring any manual configuration. Engine also shows how cache policies impact each query type, making it easy to optimize your queries for cacheability, refine field-level cache policies, and pinpoint slow components on screen that could benefit from caching.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="405" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_KKuCjnC-IoRXWD7Hrd80lw-1024x405.png" alt="" class="wp-image-954" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_KKuCjnC-IoRXWD7Hrd80lw-1024x405.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_KKuCjnC-IoRXWD7Hrd80lw-300x119.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_KKuCjnC-IoRXWD7Hrd80lw-768x304.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_KKuCjnC-IoRXWD7Hrd80lw-1536x608.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_KKuCjnC-IoRXWD7Hrd80lw-1200x475.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_KKuCjnC-IoRXWD7Hrd80lw.png 1890w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>View per-field cache control for each query</figcaption></figure>



<p>We’ve added support for Apollo Cache Control in Apollo Server, and are looking forward to working with other GraphQL server authors as well.</p>



<p>This is just the start of what we believe can be delivered with GraphQL-aware caching. By having Engine take advantage of fine-grained cache control, different parts of a query response can be cached with different lifetimes and stitched together on demand. Stitching can also be used to augment publicly cached data with user-specific fields. Going beyond specifying cache lifetimes, Apollo Cache Control could be used to explicitly invalidate parts of your data, so both Engine and your client cache can be kept up-to-date automatically.</p>



<p>It’s easy to add cache control directives to your existing GraphQL server —&nbsp;<a href="https://www.apollographql.com/docs/engine/caching.html" target="_blank" rel="noreferrer noopener">follow instructions on doing this</a>&nbsp;with Apollo Server.</p>



<h2 class="wp-block-heading" id="89ae"><a href="#free-forever" aria-hidden="true" class="aal_anchor" id="free-forever"><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>Free forever</h2>



<p>We want everyone to be able to use Engine, so just like with Optics, the first million requests each month are completely free –– plenty for development and for many production applications. Beyond one million queries, Engine costs just $9 per each additional million queries, billed to the nearest penny.<br><br>Engine is the successor to Optics, and we’ll work with existing Optics users to migrate them to Engine in the coming months. We’ll discontinue support for the Optics agent and shut down optics.apollodata.com in early 2018.<br><br>Engine is the result of hundreds of customer conversations we’ve had over the past few months with companies taking GraphQL into production. This is just the beginning; we’ve already started exploring new capabilities that the Engine architecture makes possible, like rate limiting and schema stitching, and we look forward to building them together.</p>



<hr class="wp-block-separator"/>



<p><em>To get started, visit our&nbsp;</em><a href="https://www.apollographql.com/docs/engine/setup-node.html" target="_blank" rel="noreferrer noopener"><em>guide</em></a><em>. If you’re already on Optics today, please review our&nbsp;</em><a href="https://www.apollographql.com/docs/engine/upgrade-optics.html" target="_blank" rel="noreferrer noopener"><em>upgrade instructions</em></a><em>.</em></p>


Introducing Apollo Engine: insights, error reporting and caching for GraphQL


<p>Today I’m excited to introduce you to&nbsp;<a href="https://github.com/apollographql/apollo-tracing" target="_blank" rel="noreferrer noopener">Apollo Tracing</a>, a GraphQL extension for performance monitoring that we’ve been working on for the last few months. Thanks to the community, Apollo Tracing already works with most popular GraphQL server libraries, including&nbsp;<a href="https://github.com/graphql/graphql-js" target="_blank" rel="noreferrer noopener">Node</a>,&nbsp;<a href="https://github.com/rmosolgo/graphql-ruby" target="_blank" rel="noreferrer noopener">Ruby</a>,&nbsp;<a href="https://github.com/sangria-graphql/sangria" target="_blank" rel="noreferrer noopener">Scala</a>,&nbsp;<a href="https://github.com/graphql-java/graphql-java" target="_blank" rel="noreferrer noopener">Java</a>, and&nbsp;<a href="https://github.com/absinthe-graphql/absinthe" target="_blank" rel="noreferrer noopener">Elixir</a>, and it enables you to easily get resolver-level performance information as part of a GraphQL response.</p>



<p>Apollo Tracing works by including data in the&nbsp;<code>extensions</code>&nbsp;field of the GraphQL response, which&nbsp;<a href="https://facebook.github.io/graphql/#sec-Response-Format" target="_blank" rel="noreferrer noopener">is reserved by the GraphQL spec for extra information that a server wants to return</a>. That way, you have access to performance traces alongside the data returned by your query. It’s already supported by Apollo Engine, the new version of Optics that&nbsp;<a href="https://dev-blog.apollodata.com/apollo-engine-and-graphql-error-tracking-e7dd3ce8b99d" target="_blank" rel="noreferrer noopener">entered preview recently</a>, and we’re excited to see what other kinds of integrations people can build on top of this format. For example, you could create a panel in Graph<em>i</em>QL that visualizes trace data on a per-response basis.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>We’d like to thank&nbsp;<a href="https://medium.com/u/93c50e4b5ebe?source=post_page-----97c5dd391385----------------------" target="_blank" rel="noreferrer noopener">Oleg Ilyenko</a>&nbsp;for adding support for Apollo Tracing to Sangria,&nbsp;<a href="https://github.com/RSuh" target="_blank" rel="noreferrer noopener">Reginald Suh</a>&nbsp;from Universe for the Ruby support,&nbsp;<a href="https://github.com/bbakerman" target="_blank" rel="noreferrer noopener">Brad Baker</a>&nbsp;from Atlassian for Java, and&nbsp;<a href="https://github.com/sikanhe" target="_blank" rel="noreferrer noopener">Sikan He</a>&nbsp;for Elixir.</p></blockquote>



<h2 class="wp-block-heading" id="420b"><a href="#example-response" aria-hidden="true" class="aal_anchor" id="example-response"><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>Example response</h2>



<p>Here’s an example of a response with trace data included:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-json">{
  &quot;data&quot;: {
    &quot;hero&quot;: {
      &quot;name&quot;: &quot;Luke Skywalker&quot;,
      &quot;friends&quot;: [
        {
          &quot;name&quot;: &quot;Han Solo&quot;
        },
        {
          &quot;name&quot;: &quot;Leia Organa&quot;
        },
        {
          &quot;name&quot;: &quot;C-3PO&quot;
        },
        {
          &quot;name&quot;: &quot;R2-D2&quot;
        }
      ]
    }
  },
  &quot;extensions&quot;: {
    &quot;tracing&quot;: {
      &quot;version&quot;: 1,
      &quot;startTime&quot;: &quot;2017-10-16T18:58:06.797Z&quot;,
      &quot;endTime&quot;: &quot;2017-10-16T18:58:06.811Z&quot;,
      &quot;duration&quot;: 13962507,
      &quot;execution&quot;: {
        &quot;resolvers&quot;: [
          {
            &quot;path&quot;: [
              &quot;hero&quot;
            ],
            &quot;parentType&quot;: &quot;Query&quot;,
            &quot;fieldName&quot;: &quot;hero&quot;,
            &quot;returnType&quot;: &quot;Character&quot;,
            &quot;startOffset&quot;: 11089188,
            &quot;duration&quot;: 181335
          },
          {
            &quot;path&quot;: [
              &quot;hero&quot;,
              &quot;name&quot;
            ],
            &quot;parentType&quot;: &quot;Human&quot;,
            &quot;fieldName&quot;: &quot;name&quot;,
            &quot;returnType&quot;: &quot;String!&quot;,
            &quot;startOffset&quot;: 12304767,
            &quot;duration&quot;: 103632
          },
          {
            &quot;path&quot;: [
              &quot;hero&quot;,
              &quot;friends&quot;
            ],
            &quot;parentType&quot;: &quot;Human&quot;,
            &quot;fieldName&quot;: &quot;friends&quot;,
            &quot;returnType&quot;: &quot;[Character]&quot;,
            &quot;startOffset&quot;: 12588394,
            &quot;duration&quot;: 1106042
          },
          {
            &quot;path&quot;: [
              &quot;hero&quot;,
              &quot;friends&quot;,
              0,
              &quot;name&quot;
            ],
            &quot;parentType&quot;: &quot;Human&quot;,
            &quot;fieldName&quot;: &quot;name&quot;,
            &quot;returnType&quot;: &quot;String!&quot;,
            &quot;startOffset&quot;: 13583004,
            &quot;duration&quot;: 16006
          },
          ...,
          {
            &quot;path&quot;: [
              &quot;hero&quot;,
              &quot;friends&quot;,
              2,
              &quot;name&quot;
            ],
            &quot;parentType&quot;: &quot;Droid&quot;,
            &quot;fieldName&quot;: &quot;name&quot;,
            &quot;returnType&quot;: &quot;String!&quot;,
            &quot;startOffset&quot;: 13662093,
            &quot;duration&quot;: 1928
          },
          ...
        ]
      }
    }
  }
}</code></pre>



<p>As you can see, the trace data includes the start and end time of the request, as well as detailed timings and type information for individual resolvers. Resolver-level data is organized by path, similar to the way error paths are handled in the GraphQL spec. The reason for including the type information is that we didn’t want interpretation of the results to require knowledge of the schema, especially because schemas may change, and because some resolvers depend on runtime type information.</p>



<p>For a more detailed description of the format, see the&nbsp;<code>&lt;a href=&quot;https://github.com/apollographql/apollo-tracing&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;apollo-tracing&lt;/a&gt;</code><a href="https://github.com/apollographql/apollo-tracing" target="_blank" rel="noreferrer noopener">&nbsp;repo</a>.</p>



<h2 class="wp-block-heading" id="cdf2"><a href="#try-it-today" aria-hidden="true" class="aal_anchor" id="try-it-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>Try it today</h2>



<p>If you’re using Apollo Server, support for Apollo Tracing is built-in and you can try it out just by setting&nbsp;<code>tracing</code>&nbsp;to&nbsp;<code>true</code>:</p>



<pre class="wp-block-preformatted">app.use('/graphql', bodyParser.json(), graphqlExpress({<br>  schema,<br>  context: {},<br>  tracing: true,<br>}));</pre>



<p>Since options passed to&nbsp;<code>graphqlExpress</code>&nbsp;can be a function, you can turn tracing on and off on a per-request basis.</p>



<h3 class="wp-block-heading" id="b295"><a href="#supported-graphql-servers" aria-hidden="true" class="aal_anchor" id="supported-graphql-servers"><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>Supported GraphQL servers</h3>



<p>For other servers, you can follow these instructions to enable tracing:</p>



<ul class="wp-block-list"><li><a href="https://github.com/apollographql/apollo-tracing-js" target="_blank" rel="noreferrer noopener">Node.js</a></li><li><a href="https://github.com/uniiverse/apollo-tracing-ruby" target="_blank" rel="noreferrer noopener">Ruby</a></li><li><a href="https://gist.github.com/OlegIlyenko/124b55e58609ad45fcec276f15158d16" target="_blank" rel="noreferrer noopener">Scala</a></li><li><a href="http://graphql-java.readthedocs.io/en/v4/instrumentation.html#apollo-tracing-instrumentation" target="_blank" rel="noreferrer noopener">Java</a></li><li><a href="https://github.com/sikanhe/apollo-tracing-elixir" target="_blank" rel="noreferrer noopener">Elixir</a></li></ul>



<h2 class="wp-block-heading" id="5cc0"><a href="#supporting-more-servers-and-tools" aria-hidden="true" class="aal_anchor" id="supporting-more-servers-and-tools"><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>Supporting more servers and tools</h2>



<p>We think this format is broadly useful, and we’d love to work with you to add support for it to your tools of choice. If you’re looking for a first idea, we especially think it would be great to see support for Apollo Tracing in&nbsp;<a href="https://github.com/graphql/graphiql" target="_blank" rel="noreferrer noopener">GraphiQL</a>&nbsp;and the&nbsp;<a href="https://github.com/apollographql/apollo-client-devtools" target="_blank" rel="noreferrer noopener">Apollo Client developer tools</a>!</p>



<p>If you’re interested in working on support for other GraphQL servers, or integrations with more tools, please get in touch on the&nbsp;<code>#apollo-tracing</code>&nbsp;channel on the&nbsp;<a href="http://www.apollodata.com/#slack" target="_blank" rel="noreferrer noopener">Apollo Slack</a>.</p>


Exposing trace data for your GraphQL server with Apollo Tracing


<p>Today we’re excited to release a technical preview of the next version of Optics, called Apollo Engine. Engine lets you visualize, monitor and scale your GraphQL services, and is built on a new architecture that supports more languages and environments.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="512" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_PTfFQTJhulp-Kpwq7I06XA-1024x512.png" alt="" class="wp-image-963" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_PTfFQTJhulp-Kpwq7I06XA-1024x512.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_PTfFQTJhulp-Kpwq7I06XA-300x150.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_PTfFQTJhulp-Kpwq7I06XA-768x384.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_PTfFQTJhulp-Kpwq7I06XA-1536x768.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_PTfFQTJhulp-Kpwq7I06XA-1200x600.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_PTfFQTJhulp-Kpwq7I06XA-1980x990.png 1980w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_PTfFQTJhulp-Kpwq7I06XA.png 2018w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>A complete log of a GraphQL server’s errors.</figcaption></figure>



<h2 class="wp-block-heading" id="dfa9"><a href="#new-feature-tracking-errors-in-graphql" aria-hidden="true" class="aal_anchor" id="new-feature-tracking-errors-in-graphql"><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>New feature: Tracking errors in GraphQL</h2>



<p>GraphQL’s flexibility brings some big advantages, like allowing clients to query just the exact data they need instead of depending on a set of rigid REST endpoints. It also creates a need for new tools like&nbsp;<a href="http://apollodata.com/optics" target="_blank" rel="noreferrer noopener">Optics</a>&nbsp;that help us understand the behavior and performance of a GraphQL API.<br><br>Errors are a great example. Unlike an REST API call that completely succeeds or fails, a GraphQL server that encounters one or more errors while executing a query can return a partial result with some fields missing, along with a list of the thrown errors. All the information about errors&nbsp;<a href="http://facebook.github.io/graphql/October2016/#sec-Errors-and-Non-Nullability)%20(http://facebook.github.io/graphql/October2016/#sec-Errors-and-Non-NullabilityAll" target="_blank" rel="noreferrer noopener">is contained in the response</a>, so without a GraphQL-aware tool, it can be difficult to recognize a misbehaving server or diagnose the underlying problem.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="468" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_le7wG3GUEEIO9TBGyqr7Qw-1024x468.png" alt="" class="wp-image-962" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_le7wG3GUEEIO9TBGyqr7Qw-1024x468.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_le7wG3GUEEIO9TBGyqr7Qw-300x137.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_le7wG3GUEEIO9TBGyqr7Qw-768x351.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_le7wG3GUEEIO9TBGyqr7Qw-1200x549.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_le7wG3GUEEIO9TBGyqr7Qw.png 1522w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>A GraphQL response with multiple errors</figcaption></figure>



<p>Here are the kinds of problems we wanted to address:</p>



<ul class="wp-block-list"><li>GraphQL operations can throw&nbsp;<strong>multiple errors</strong>, so we wanted an accurate and complete log that captures each error in the context it was thrown.</li><li>Because resolver errors may depend on the particular way a query was executed, we needed a way to zero in on&nbsp;<strong>errors by field, by path, or by operation</strong>.</li><li>Errors can affect query performance(including fields that didn’t throw an error), so all traces in Optics&nbsp;<strong>highlight failed resolvers</strong>&nbsp;and include their execution timing data.</li><li>To help zero in on&nbsp;<strong>changes and trends</strong>&nbsp;in server errors, Engine charts error rates alongside GraphQL query volume.</li><li>To catch cases where something failed in the GraphQL server or its execution layer, we added&nbsp;<strong>support for “500”-style errors</strong>&nbsp;that occur outside of resolver code.</li></ul>



<p>GraphQL’s error model also offers some interesting opportunities, like a more straightforward way to build UIs that gracefully degrade when a non-essential microservice is unavailable. We’re really excited to build tools like these across the stack that help everyone in the community take advantage of the new options made possible by GraphQL.</p>



<h2 class="wp-block-heading" id="b8a3"><a href="#a-new-architecture-and-apollo-tracing" aria-hidden="true" class="aal_anchor" id="a-new-architecture-and-apollo-tracing"><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>A new architecture and Apollo Tracing</h2>



<p>Engine is built on a new architecture that uses an embedded GraphQL proxy instead of a per-language agent package.<br><br>The most immediate benefit is support for more languages and environments. Engine uses&nbsp;<a href="https://github.com/apollographql/apollo-tracing" target="_blank" rel="noreferrer noopener">Apollo Tracing</a>, a GraphQL extension for exposing trace data, so it works with any spec-compliant GraphQL server that includes tracing support. The&nbsp;<a href="https://github.com/apollographql/apollo-tracing#supported-graphql-servers" target="_blank" rel="noreferrer noopener">list of servers that support Apollo Tracing</a>&nbsp;today includes Node, Ruby, Scala, Java, and Elixir, with more being developed by the community.<br><br>This approach has other advantages as well. The Engine proxy isn’t affected by a misbehaving server, so it accurately tracks errors even in cases where the GraphQL server crashes, or where a bug corrupts the server’s internal state. The new architecture also gives us a path forward to collecting more complete timing data for GraphQL operations, including time spent outside the resolver tree. Finally, keeping Engine’s trace sampling and analysis code out of the GraphQL server’s main execution thread improves request latency and server performance.<br><br>This is just the beginning. We’ve already started exploring new features that the Engine architecture makes possible, like GraphQL query caching (take another look at the screenshot above!) and request rate limiting.</p>



<h2 class="wp-block-heading" id="1ded"><a href="#try-it-out-today" aria-hidden="true" class="aal_anchor" id="try-it-out-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>Try it out today</h2>



<p>To get started, visit our&nbsp;<a href="http://engine-docs.apollographql.com/setup-node.html" target="_blank" rel="noreferrer noopener">getting started guide</a>. If you’re already on Optics today, please review our&nbsp;<a href="https://www.apollographql.com/docs/engine/upgrade-optics.html" target="_blank" rel="noreferrer noopener">upgrade instructions</a>. The Engine preview is completely free to use today — we’ll announce our pricing in the coming weeks.</p>



<p>We’re excited to hear what you think of it! Join us on&nbsp;<a href="http://apollodata.com/slack" target="_blank" rel="noreferrer noopener">Apollo Slack</a>&nbsp;in the&nbsp;<strong>#engine</strong>&nbsp;channel. Or, meet the engineers working on Apollo Engine in person at&nbsp;<a href="http://summit.graphql.com/" target="_blank" rel="noreferrer noopener"><strong>GraphQL Summit</strong></a>, October 25–26 in San Francisco (register with code<code>APOLLOENGINE</code>&nbsp;for 25 % off).</p>


Apollo Engine and GraphQL error tracking


<p>The team at Apollo has been really happy with the response we’ve gotten after announcing the&nbsp;<a href="https://dev-blog.apollodata.com/apollo-optics-is-now-free-up-to-1-million-graphql-requests-a-month-d759248ea084" target="_blank" rel="noreferrer noopener">1 million query free tier update</a>&nbsp;to Optics! It’s awesome to see thousands of developers using&nbsp;<a href="https://www.apollodata.com/optics/" target="_blank" rel="noreferrer noopener">Optics</a>&nbsp;to visualize the execution of their GraphQL queries, monitor performance trends, and track how clients are consuming their API.<br><br>Right now we’re working on new functionality that we think GraphQL developers will get really excited about, including:</p>



<ul class="wp-block-list"><li>Optics&nbsp;<strong>support for Java, Scala and Elixir GraphQL servers</strong>&nbsp;using&nbsp;<a href="https://github.com/apollographql/apollo-tracing" target="_blank" rel="noreferrer noopener">Apollo Tracing</a>&nbsp;— a new spec for including performance information in your GraphQL response</li><li><strong>Error reporting</strong>: capture each error at the GraphQL layer, and view aggregate error metrics per field and query</li><li><strong>Notifications</strong>: monitor query performance and error metrics, and get notifications when these metrics exceed a specified threshold</li></ul>



<p>We aren’t quite done yet, and we need your help to test out this new functionality before a wider release.</p>



<h2 class="wp-block-heading" id="d049"><a href="#sign-up-for-early-access" aria-hidden="true" class="aal_anchor" id="sign-up-for-early-access"><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><a href="https://www.getfeedback.com/r/fYAgLw6X/" target="_blank" rel="noreferrer noopener">Sign up for early access</a></h2>



<p>If you’re interested in trying out some of the above features, please&nbsp;<a href="https://www.getfeedback.com/r/fYAgLw6X/" target="_blank" rel="noreferrer noopener">let us know</a>&nbsp;that you’d like to offer feedback in Early Access!</p>


Give us feedback on new Optics features!


<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Update: There is a new version of Optics!&nbsp;<a href="https://www.apollographql.com/engine/" target="_blank" rel="noreferrer noopener"><strong>Apollo Engine</strong></a>&nbsp;has everything Optics does plus error tracking, query caching, and more. Engine is free for 1 million requests a month and it’s easy to switch from Optics to Engine using our&nbsp;<a href="https://www.apollographql.com/docs/engine/upgrade-optics.html" target="_blank" rel="noreferrer noopener"><strong>migration guide</strong></a>.</p></blockquote>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="789" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_0CuDTgzkyaLEq1rlKtDYCg-1024x789.png" alt="" class="wp-image-1039" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_0CuDTgzkyaLEq1rlKtDYCg-1024x789.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_0CuDTgzkyaLEq1rlKtDYCg-300x231.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_0CuDTgzkyaLEq1rlKtDYCg-768x592.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_0CuDTgzkyaLEq1rlKtDYCg-1536x1184.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_0CuDTgzkyaLEq1rlKtDYCg-2048x1578.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_0CuDTgzkyaLEq1rlKtDYCg-1200x925.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_0CuDTgzkyaLEq1rlKtDYCg-1980x1526.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>Since Apollo Optics launched 8 months ago, it has become an indispensable tool for thousands of GraphQL developers. Teams at companies like Product Hunt, Udacity, and Heroku are using Optics to visualize the execution of their GraphQL queries, monitor performance trends, and track how clients are consuming their API. It’s also been exciting to see developers like Tim Griesser&nbsp;<a href="https://speakerdeck.com/tgriesser/embracing-the-power-of-graphql?slide=104" target="_blank" rel="noreferrer noopener">mention Optics in their talks</a>&nbsp;about GraphQL. (Thanks for the shoutout, Tim!)</p>



<p>But there’s been one problem with Optics: up until now, not everyone has been able to use it. Free usage was limited to 10,000 requests and the minimum paid plan was $49/month. That pricing didn’t make sense for every project.<br><br>We want there to be no reason&nbsp;<em>not</em>&nbsp;to use Optics in your app.<strong>&nbsp;So, starting today,&nbsp;</strong><strong>Optics is now free up to 1 million requests per month.&nbsp;</strong>That’s a 100x increase, meaning that even many complex production apps can use Optics for free.<br><br>Our intention is to make Optics a community-driven tool that’s accessible to everyone, with any server or client and across all stages of development, and making it free under a million requests per month helps make that possible. It’s all part of Apollo’s mission: to remove any and all obstacles to industry-wide GraphQL adoption.<br><br>We’re proud of Optics and we hope you’ll check it out! You can add Optics to your GraphQL app in just a few minutes.&nbsp;<a href="http://www.apollodata.com/optics" target="_blank" rel="noreferrer noopener">Click here</a>&nbsp;to get started or join us in&nbsp;<strong>#optics</strong>&nbsp;on&nbsp;<a href="http://www.apollodata.com/#slack" target="_blank" rel="noreferrer noopener">Apollo Slack</a>&nbsp;if you have questions!</p>



<h2 class="wp-block-heading" id="6811"><a href="#optics-pro" aria-hidden="true" class="aal_anchor" id="optics-pro"><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>Optics Pro</h2>



<p>It’s been incredible to watch GraphQL’s growth over the past six months. GraphQL now powers mission-critical apps across a range of industries, and Optics is often a part of that story. For example,&nbsp;<a href="http://express.com/" target="_blank" rel="noreferrer noopener">Express.com</a>&nbsp;uses Optics and GraphQL to power their entire online shopping experience.<br><br>We have good news for these large customers too. We’ve heard your requests for advanced features to scale and protect your most important apps. So today, we’re also announcing Optics Pro — an add-on to Optics for businesses that are embracing GraphQL and its power to transform their product development process. Optics Pro includes:</p>



<ul class="wp-block-list"><li>30 days of historical data retention</li><li>An architectural review session with a GraphQL expert</li><li>A private, dedicated Slack channel with Apollo engineers</li><li>Prioritized Optics support cases</li></ul>



<p>Our goal with Optics Pro is to provide you with everything you need to operate and scale your most important apps with confidence. Extended data retention has been one of our most-requested features — it allows teams to identify and respond to performance trends that take place over multiple weeks, as well as track field usage to manage API changes over time. And with priority support, an architectural review session and a direct channel to Apollo engineers, you’ll have GraphQL experts available whenever you need them.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="815" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_A4zVnD_srTkgj02byZSbpQ-1024x815.png" alt="" class="wp-image-1038" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_A4zVnD_srTkgj02byZSbpQ-1024x815.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_A4zVnD_srTkgj02byZSbpQ-300x239.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_A4zVnD_srTkgj02byZSbpQ-768x611.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_A4zVnD_srTkgj02byZSbpQ-1536x1223.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_A4zVnD_srTkgj02byZSbpQ-2048x1631.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_A4zVnD_srTkgj02byZSbpQ-1200x955.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_A4zVnD_srTkgj02byZSbpQ-1980x1576.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption><em>View field usage over a 30 day period</em></figcaption></figure>



<p>But these features are just the beginning. There’s more in store later this year for Optics and Pro customers. We’re committed to your team’s success by building the tools and support you need to unlock the full value of GraphQL.<br><br>The Optics Pro add-on starts at $499/month and is available now. If you’re ready to take the next step with your production GraphQL usage,&nbsp;<a href="mailto:sales@apollodata.com" target="_blank" rel="noreferrer noopener">contact us today</a>&nbsp;to enable Pro on your Optics accounts!</p>


Apollo Optics is now free up to 1 million GraphQL requests a month


<p>Last month&nbsp;<a href="https://dev-blog.apollodata.com/introducing-launchpad-the-graphql-server-demo-platform-cc4e7481fcba" target="_blank" rel="noreferrer noopener">we released Apollo Launchpad</a>, a platform to prototype and demo GraphQL servers. Today we are releasing all of the code for Launchpad as&nbsp;<a href="https://github.com/apollographql/launchpad" target="_blank" rel="noreferrer noopener">open source</a>&nbsp;on GitHub!</p>



<p>In the Apollo project, we’re committed to building valuable open source tools for GraphQL. One thing that’s new for us is building and maintaining Launchpad as an application, not a library. However, just like the open source libraries maintained by the Apollo community, we see Launchpad as a tool to benefit everyone interested in GraphQL.</p>



<p>We’ve already seen Launchpad be an effective tool to help people get started with GraphQL, and we want to take it to the next level.</p>



<h2 class="wp-block-heading" id="6eb3"><a href="#lets-get-building" aria-hidden="true" class="aal_anchor" id="lets-get-building"><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>Let’s get building!</h2>



<p>We’ve gotten lots of feedback on how to improve and extend Launchpad in the past month. We’re going to continue to support and improve it, but we think we can go much faster with help from the community. For Launchpad to help as many people as possible, we not only need to have more pads and examples, but also new features.</p>



<p>In the Launchpad repository,&nbsp;<a href="https://github.com/apollographql/launchpad/issues" target="_blank" rel="noreferrer noopener">we have created issues</a>&nbsp;where we want your help. These include both new pads and features, improvements and maintenance work like better tests. We have also marked some issues as good places to start for new contributors. If you need any help or guidance about contributing to it, don’t hesitate to contact&nbsp;<a href="mailto:freiksenet@reindex.io" target="_blank" rel="noreferrer noopener">me</a>&nbsp;(<a href="https://medium.com/u/51db47a6a4ef?source=post_page-----e4ff26327311----------------------" target="_blank" rel="noreferrer noopener">Mikhail Novikov</a>) or&nbsp;<a href="mailto:sashko@meteor.com" target="_blank" rel="noreferrer noopener">Sashko</a>&nbsp;(<a href="https://medium.com/u/803918030a60?source=post_page-----e4ff26327311----------------------" target="_blank" rel="noreferrer noopener">Sashko Stubailo</a>) about it.</p>



<figure class="wp-block-image size-large"><a href="https://github.com/apollographql/launchpad/issues"><img loading="lazy" decoding="async" width="1024" height="628" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_IFKiNwbecSKdJ04b4BtVuQ-1024x628.png" alt="" class="wp-image-1056" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_IFKiNwbecSKdJ04b4BtVuQ-1024x628.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_IFKiNwbecSKdJ04b4BtVuQ-300x184.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_IFKiNwbecSKdJ04b4BtVuQ-768x471.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_IFKiNwbecSKdJ04b4BtVuQ-1200x736.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_IFKiNwbecSKdJ04b4BtVuQ.png 1308w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></a></figure>



<p>We are happy we’re able to open source Launchpad and are really excited to move it forward together with the community!</p>


Launchpad is now open source


<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Update: There is a new version of Optics!&nbsp;<a href="https://www.apollographql.com/engine/" target="_blank" rel="noreferrer noopener"><strong>Apollo Engine</strong></a>&nbsp;has everything Optics does plus error tracking, query caching, and more. Engine is free for 1 million requests a month and it’s easy to switch from Optics to Engine using our&nbsp;<a href="https://www.apollographql.com/docs/engine/upgrade-optics.html" target="_blank" rel="noreferrer noopener"><strong>migration guide</strong></a>.</p></blockquote>



<p>We want&nbsp;<a href="https://www.apollodata.com/optics/" target="_blank" rel="noreferrer noopener">Optics</a>&nbsp;to be something every GraphQL developer can use to understand how their server works, even if it’s still in development. So today we’re excited to announce that we’ve added a completely free tier up to 10,000 requests a month. Now, you can instrument your API and see what it’s doing without worrying about running out of time in a free trial!</p>



<p>Developers from companies like Expo and Product Hunt have said that they like Optics because it provides a fine-grained view into the execution of their GraphQL queries. Last weekend at&nbsp;<a href="https://graphql-europe.org/" target="_blank" rel="noreferrer noopener">GraphQL Europe</a>, Optics got mentions in several talks, including in Brooks’ talk about&nbsp;<a href="https://graphql-europe.org/schedule/launching-githubs-public-graphql-api" target="_blank" rel="noreferrer noopener">launching GitHub’s public GraphQL API</a>.</p>



<p>Optics lets you see in detail how each query is resolved on your server, and shows aggregate statistics of how your schema fields are being used.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="829" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_6MttjID9kQe-VarmsppDKw-1024x829.png" alt="" class="wp-image-1100" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_6MttjID9kQe-VarmsppDKw-1024x829.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_6MttjID9kQe-VarmsppDKw-300x243.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_6MttjID9kQe-VarmsppDKw-768x622.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_6MttjID9kQe-VarmsppDKw-1200x972.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_6MttjID9kQe-VarmsppDKw.png 1400w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>The Optics dashboard</figcaption></figure>



<p>If you haven’t heard about Apollo Optics yet, and want to learn more about what it does and why you might want a GraphQL-specific server performance tool, check out our&nbsp;<a href="https://www.apollodata.com/optics/" target="_blank" rel="noreferrer noopener">landing page</a>!</p>



<h2 class="wp-block-heading" id="95e4"><a href="#optics-quick-start" aria-hidden="true" class="aal_anchor" id="optics-quick-start"><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>Optics quick start</h2>



<p>If you have a GraphQL server, it only takes a few minutes to instrument your schema and see your data in Optics. The quick directions below are for instrumenting a Node.js Express server. If you’re using a different server technology, check out the docs for&nbsp;<a href="https://github.com/apollographql/optics-agent-js" target="_blank" rel="noreferrer noopener">JavaScript</a>&nbsp;and&nbsp;<a href="https://github.com/apollographql/optics-agent-ruby" target="_blank" rel="noreferrer noopener">Ruby</a>. An implementation for Sangria (Scala) is coming soon as well!</p>



<h3 class="wp-block-heading" id="767d"><a href="#1-install" aria-hidden="true" class="aal_anchor" id="1-install"><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>1. Install</h3>



<p>Simple enough:</p>



<pre class="wp-block-preformatted">npm install optics-agent --save</pre>



<h3 class="wp-block-heading" id="4873"><a href="#2-import" aria-hidden="true" class="aal_anchor" id="2-import"><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>2. Import</h3>



<p>In the file which connects your GraphQL schema to your Express server, add an import at the top:</p>



<pre class="wp-block-preformatted">import OpticsAgent from 'optics-agent';</pre>



<h3 class="wp-block-heading" id="9bdd"><a href="#3-instrument-the-schema-middleware-and-context" aria-hidden="true" class="aal_anchor" id="3-instrument-the-schema-middleware-and-context"><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>3. Instrument the schema, middleware and context</h3>



<p>The Optics agent relies on a variety of data points, which are available at different stages in the execution cycle. Currently, you need to add code in three places.</p>



<p>First, wrap your GraphQL Schema object with&nbsp;<code>instrumentSchema</code>:</p>



<pre class="wp-block-preformatted">// Before: graphqlExpress({ schema: schema })<br>graphqlExpress((req) =&gt; {<br>  // other options...<br>  schema: OpticsAgent.instrumentSchema(schema)<br>})</pre>



<p>Second, add the HTTP middleware&nbsp;<em>before</em>&nbsp;your GraphQL middleware:</p>



<pre class="wp-block-preformatted">expressServer.use(OpticsAgent.middleware());</pre>



<p>Third, add an&nbsp;<code>opticsContext</code>&nbsp;field to your GraphQL context:</p>



<pre class="wp-block-preformatted">graphqlExpress((req) =&gt; { <br>  // other options...<br>  context: {<br>    // other context fields...<br>    opticsContext: OpticsAgent.context(req),<br>  }<br>})</pre>



<p>That’s all the code we have to add. You’re almost done!</p>



<h3 class="wp-block-heading" id="6642"><a href="#4-sign-into-optics-and-set-the-api-key" aria-hidden="true" class="aal_anchor" id="4-sign-into-optics-and-set-the-api-key"><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>4. Sign into Optics and set the API key</h3>



<p>Go to&nbsp;<a href="https://optics.apollodata.com/" target="_blank" rel="noreferrer noopener">optics.apollodata.com</a>&nbsp;and create an endpoint to get an API key. Restart your server and pass your API key with an environment variable, like so:</p>



<pre class="wp-block-preformatted">OPTICS_API_KEY=&lt;my_key&gt; npm start</pre>



<p>The agent will automatically pick it up from there. Now, open up GraphiQL, run a query, and in a few seconds you’ll see data starting to show up in your Optics dashboard. You’re all set up!</p>



<hr class="wp-block-separator"/>



<p>We’re really excited to make Optics available to more people, and we hope you’ll find it a valuable tool to understand how your GraphQL schema and queries work! If you have any feedback or want to chat about Optics, please join the #optics channel in the&nbsp;<a href="http://www.apollodata.com/#slack" target="_blank" rel="noreferrer noopener">Apollo Slack</a>!</p>


Apollo Optics is now free for small projects

Introducing Launchpad: The GraphQL server demo platform


<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p><em>Update: There is a new version of Optics!&nbsp;</em><a href="https://www.apollographql.com/engine/" target="_blank" rel="noreferrer noopener"><strong><em>Apollo Engine</em></strong></a><em>&nbsp;has everything Optics does plus error tracking, query caching, and more. Engine is free for 1 million requests a month and it’s easy to switch from Optics to Engine using our&nbsp;</em><a href="https://www.apollographql.com/docs/engine/upgrade-optics.html" target="_blank" rel="noreferrer noopener"><strong><em>migration guide</em></strong></a><em>.</em></p></blockquote>



<p>We are&nbsp;<em>very</em>&nbsp;excited to announce that you can now view performance trends over time in Optics, through an interactive data-rich visualization. This is the #1 requested feature from our users.</p>



<p>We’re on a mission to make product development as fast, easy, and productive as possible. We all spend far too much time today writing complicated data loading and state management code, instead of focusing on the product features our users want and the feedback we get from them. That’s why we’re so excited about GraphQL — it replaces all that code with queries that are fast to write and easy to understand.</p>



<p>This is what Optics is all about. We think all product developers should have the very best tools for our craft, and we think GraphQL helps us get there. Here’s what we’re shipping today:</p>



<figure class="wp-block-image alignfull size-large"><img loading="lazy" decoding="async" width="2000" height="1064" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_AtU7S8qwsiaQI1n1_EKxvg.gif" alt="" class="wp-image-1182"/></figure>



<hr class="wp-block-separator"/>



<p>This new visualization shows every GraphQL operation from your clients in the form of a heat map, displaying performance distributions over a span of time. Optics now has four key charts for understanding GraphQL performance:</p>



<ol class="wp-block-list"><li>A heat map showing performance trends over time</li><li>A step chart showing endpoint traffic over time</li><li>A performance distribution showing aggregate trends in a time range</li><li>Sample traces showing the specific executions of GraphQL operations</li></ol>



<h2 class="wp-block-heading" id="ae3f"><a href="#performance-over-time" aria-hidden="true" class="aal_anchor" id="performance-over-time"><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>Performance Over Time</h2>



<p>This chart shows every GraphQL operation from your clients in your selected time range. The horizontal axis is time, and the vertical axis shows how long the operation took. Faster response times are at the bottom, slower at the top. Darker colors represent larger request volumes.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="814" height="321" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_-8ETmlAzAkdR8N4SoEbClw.jpg" alt="" class="wp-image-1181" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_-8ETmlAzAkdR8N4SoEbClw.jpg 814w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_-8ETmlAzAkdR8N4SoEbClw-300x118.jpg 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_-8ETmlAzAkdR8N4SoEbClw-768x303.jpg 768w" sizes="auto, (max-width: 814px) 100vw, 814px" /></figure>



<p>You’ll notice there is a distinct drop in the performance of this operation at 4pm PST. The heat map lets you pick out a lot of valuable supporting information at a glance. A vertical shift here, without much change in each band’s overall color, tells us that overall request load time was constant; thus, this particular degradation must have been caused by something else going on with the server.</p>



<p>In our case here, this degradation in server performance is caused because we collect daily analytics at 12am UTC, which is 4pm PST. If the slowdown had been caused by added GraphQL request load, we’d see something quite different: a darker color band that shift up to reflect the larger total number of requests, and a corresponding shift up in the endpoint traffic graph below.</p>



<h2 class="wp-block-heading" id="22a5"><a href="#endpoint-traffic" aria-hidden="true" class="aal_anchor" id="endpoint-traffic"><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>Endpoint traffic</h2>



<p>This chart shows requests per minute (RPM) over time, and shares its time axis with the chart above it. Higher values on the vertical axis represent a higher volume of requests in that time period.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="814" height="115" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_DAXtCKbaP_5zgu7QlpYdKw.jpg" alt="" class="wp-image-1180" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_DAXtCKbaP_5zgu7QlpYdKw.jpg 814w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_DAXtCKbaP_5zgu7QlpYdKw-300x42.jpg 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_DAXtCKbaP_5zgu7QlpYdKw-768x109.jpg 768w" sizes="auto, (max-width: 814px) 100vw, 814px" /></figure>



<h2 class="wp-block-heading" id="8928"><a href="#performance-distribution" aria-hidden="true" class="aal_anchor" id="performance-distribution"><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>Performance Distribution</h2>



<p>This chart shows a distribution of how long each GraphQL operation took in your selected time range. The horizontal axis shows how long the operation took, and the height of the bar reflects how many requests fell into that duration range. Each bar represents the sum of a single row in the Performance Over Time chart above. Taller bars here correspond to darker colors in the heat map.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="814" height="241" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_aRNJoU1HxlBEIoJerKzmyg.jpg" alt="" class="wp-image-1179" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_aRNJoU1HxlBEIoJerKzmyg.jpg 814w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_aRNJoU1HxlBEIoJerKzmyg-300x89.jpg 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_aRNJoU1HxlBEIoJerKzmyg-768x227.jpg 768w" sizes="auto, (max-width: 814px) 100vw, 814px" /></figure>



<h2 class="wp-block-heading" id="ba6c"><a href="#sample-traces" aria-hidden="true" class="aal_anchor" id="sample-traces"><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>Sample traces</h2>



<p>This chart shows the execution trace of a sample request taken from the duration window highlighted in the histogram above (darker blue bar). Every bar represents the timespan in which a particular field resolved its value. There is one sample trace for every duration range in the histogram above, so you can compare the executions of operations that took varying times to resolve.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="814" height="194" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_FqifFEa8zG035T4szsWE-A-1.jpg" alt="" class="wp-image-1178" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_FqifFEa8zG035T4szsWE-A-1.jpg 814w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_FqifFEa8zG035T4szsWE-A-1-300x71.jpg 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_FqifFEa8zG035T4szsWE-A-1-768x183.jpg 768w" sizes="auto, (max-width: 814px) 100vw, 814px" /></figure>



<hr class="wp-block-separator"/>



<p>We are very excited about the possibilities a visualization like this creates, and you can look forward to more content from us soon about how we built the heat map, what value we’ve gotten from it, and how we plan to expand its utility in the future!<br><br><em>If you’d like to get a closer look at any of the things we’re working on here at Apollo, join us for&nbsp;</em><a href="https://www.eventbrite.com/e/apollo-day-2017-tickets-32267399661" target="_blank" rel="noreferrer noopener"><em>Apollo Day</em></a><em>&nbsp;this April 11th. We look forward to seeing you there! If you’re interested in working with us on GraphQL full time,&nbsp;</em><a href="http://jobs.meteor.com/" target="_blank" rel="noreferrer noopener"><em>we’re hiring</em></a><em>. 🙂</em></p>


New in Optics: Trends over Time


<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Update: There is a new version of Optics!&nbsp;<a href="https://www.apollographql.com/engine/" target="_blank" rel="noreferrer noopener"><strong>Apollo Engine</strong></a>&nbsp;has everything Optics does plus error tracking, query caching, and more. Engine is free for 1 million requests a month and it’s easy to switch from Optics to Engine using our&nbsp;<a href="https://www.apollographql.com/docs/engine/upgrade-optics.html" target="_blank" rel="noreferrer noopener"><strong>migration guide</strong></a>.</p></blockquote>



<p>Hi folks! Today, we’re going to be walking through why you should be monitoring and analyzing your GraphQL server for performance, and how Scaphold and Apollo Optics integrate to make this very easy.</p>



<h2 class="wp-block-heading" id="5538"><a href="#why-are-analytics-important" aria-hidden="true" class="aal_anchor" id="why-are-analytics-important"><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>Why are analytics important?</h2>



<p><em>For those that care about performance, money, UX, and scalability.</em></p>



<p>As we move into a GraphQL-first world, it’s important to be able to understand not only&nbsp;<em>what</em>&nbsp;data you’re fetching, but also&nbsp;<em>how</em>&nbsp;it’s being fetched. Many people think of this as an after-thought, hoping that simply getting as much code as possible out as fast as possible will help them win over their competition.</p>



<p>However, this approach can be costly on many levels. First, your application’s end users will notice the clunkiness of your application. In addition, on your servers, fetching data the wrong way can create inefficiencies that cost you in CPU usage, memory leaks, and slow response times (not to mention your AWS bill skyrocketing through the roof). Not the type of growth you’re looking for, probably.</p>



<h2 class="wp-block-heading" id="c39a"><a href="#lets-get-started" aria-hidden="true" class="aal_anchor" id="lets-get-started"><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>Let’s get started!</h2>



<p><em>Easily hook up Apollo Optics into your GraphQL API in a couple minutes.</em></p>



<p>Luckily, there’s a simple tool to use for GraphQL query analytics:&nbsp;<a href="http://www.apollodata.com/optics" target="_blank" rel="noreferrer noopener">Apollo Optics</a>. You can try it out for free, and it comes with a beautiful dashboard that helps you visualize your queries to gain insights on request order and response times.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="777" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_yIVQYPutR8oinOuwrtCzuQ@2x-1024x777.png" alt="" class="wp-image-515" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_yIVQYPutR8oinOuwrtCzuQ@2x-1024x777.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_yIVQYPutR8oinOuwrtCzuQ@2x-300x228.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_yIVQYPutR8oinOuwrtCzuQ@2x-768x583.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_yIVQYPutR8oinOuwrtCzuQ@2x-1200x910.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_yIVQYPutR8oinOuwrtCzuQ@2x.png 1255w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Apollo Optics: Insights and Analytics for GraphQL</figcaption></figure>



<p>GraphQL lends itself to awesome tooling like this due to its type system, where you can clearly and automatically introspect what the inputs and outputs are of a an API.</p>



<p>Here’s a step-by-step run-through of how you can create and immediately get analytics for a GraphQL app using Scaphold and Optics.</p>



<ol class="wp-block-list"><li><strong>Sign up for&nbsp;</strong><a href="https://scaphold.io/" target="_blank" rel="noreferrer noopener"><strong>Scaphold</strong></a><strong>&nbsp;and create an app.</strong></li></ol>



<p>Once you hit&nbsp;<em>Create</em>, you’ll automatically have a production-ready GraphQL server and API at your disposal.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="548" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_3dIyjaySvmPvxhehi2m_hQ-1024x548.png" alt="" class="wp-image-516" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_3dIyjaySvmPvxhehi2m_hQ-1024x548.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_3dIyjaySvmPvxhehi2m_hQ-300x160.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_3dIyjaySvmPvxhehi2m_hQ-768x411.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_3dIyjaySvmPvxhehi2m_hQ-1536x821.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_3dIyjaySvmPvxhehi2m_hQ-2048x1095.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_3dIyjaySvmPvxhehi2m_hQ-1200x642.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_3dIyjaySvmPvxhehi2m_hQ-1980x1059.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>2.&nbsp;<strong>Sign up for&nbsp;</strong><a href="http://www.apollodata.com/optics" target="_blank" rel="noreferrer noopener"><strong>Apollo Optics</strong></a><strong>&nbsp;and grab your API key.</strong></p>



<p>On your Apollo Optics account, open your&nbsp;<em>app settings</em>.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="549" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_0BvocWxcW17YGLQn4M9bsQ-1024x549.png" alt="" class="wp-image-517" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_0BvocWxcW17YGLQn4M9bsQ-1024x549.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_0BvocWxcW17YGLQn4M9bsQ-300x161.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_0BvocWxcW17YGLQn4M9bsQ-768x412.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_0BvocWxcW17YGLQn4M9bsQ-1536x823.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_0BvocWxcW17YGLQn4M9bsQ-2048x1098.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_0BvocWxcW17YGLQn4M9bsQ-1200x643.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_0BvocWxcW17YGLQn4M9bsQ-1980x1062.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p><em>Copy your API key</em><strong></strong>for use in the next step.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="845" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_A_U2_V1LbcGv5ffTobU4xg-1024x845.png" alt="" class="wp-image-518" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_A_U2_V1LbcGv5ffTobU4xg-1024x845.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_A_U2_V1LbcGv5ffTobU4xg-300x248.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_A_U2_V1LbcGv5ffTobU4xg-768x634.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_A_U2_V1LbcGv5ffTobU4xg-1536x1267.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_A_U2_V1LbcGv5ffTobU4xg-1200x990.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_A_U2_V1LbcGv5ffTobU4xg.png 1600w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>3.&nbsp;<strong>Add Apollo Optics integration on Scaphold.</strong></p>



<p>In the Integrations Dashboard, click&nbsp;<em>Add</em>.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="548" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_EfONJQjWZv2IofPqsUtdeQ-1024x548.png" alt="" class="wp-image-519" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_EfONJQjWZv2IofPqsUtdeQ-1024x548.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_EfONJQjWZv2IofPqsUtdeQ-300x161.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_EfONJQjWZv2IofPqsUtdeQ-768x411.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_EfONJQjWZv2IofPqsUtdeQ-1536x822.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_EfONJQjWZv2IofPqsUtdeQ-2048x1096.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_EfONJQjWZv2IofPqsUtdeQ-1200x642.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_EfONJQjWZv2IofPqsUtdeQ-1980x1059.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p><em>Paste your API key</em>&nbsp;from earlier into the appropriate field, then hit&nbsp;<em>Create</em>.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="548" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_zNs8xhzdGcWCX2zsO5Bi2A-1024x548.png" alt="" class="wp-image-520" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_zNs8xhzdGcWCX2zsO5Bi2A-1024x548.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_zNs8xhzdGcWCX2zsO5Bi2A-300x161.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_zNs8xhzdGcWCX2zsO5Bi2A-768x411.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_zNs8xhzdGcWCX2zsO5Bi2A-1536x822.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_zNs8xhzdGcWCX2zsO5Bi2A-2048x1097.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_zNs8xhzdGcWCX2zsO5Bi2A-1200x643.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_zNs8xhzdGcWCX2zsO5Bi2A-1980x1060.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>4.&nbsp;<strong>Make a request and see it in your Optics dashboard!</strong></p>



<p>In this case, we created a couple users and queried for all of them back.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="548" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_dgKimV-SXQmu-wQMpJzr0A-1024x548.png" alt="" class="wp-image-521" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_dgKimV-SXQmu-wQMpJzr0A-1024x548.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_dgKimV-SXQmu-wQMpJzr0A-300x160.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_dgKimV-SXQmu-wQMpJzr0A-768x411.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_dgKimV-SXQmu-wQMpJzr0A-1536x821.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_dgKimV-SXQmu-wQMpJzr0A-2048x1095.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_dgKimV-SXQmu-wQMpJzr0A-1200x642.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_dgKimV-SXQmu-wQMpJzr0A-1980x1059.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>Our data shows up within seconds in our Apollo Optics dashboard. Hooray!</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="548" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_aX9xLTSt4yvjRx7OvgseKg-1024x548.png" alt="" class="wp-image-522" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_aX9xLTSt4yvjRx7OvgseKg-1024x548.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_aX9xLTSt4yvjRx7OvgseKg-300x160.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_aX9xLTSt4yvjRx7OvgseKg-768x411.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_aX9xLTSt4yvjRx7OvgseKg-1536x821.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_aX9xLTSt4yvjRx7OvgseKg-2048x1095.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_aX9xLTSt4yvjRx7OvgseKg-1200x642.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_aX9xLTSt4yvjRx7OvgseKg-1980x1059.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<hr class="wp-block-separator"/>



<h2 class="wp-block-heading" id="a8a5"><a href="#seeing-the-value" aria-hidden="true" class="aal_anchor" id="seeing-the-value"><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>Seeing the Value</h2>



<p><em>Trimming out unnecessary calls can save you time and money.</em></p>



<p>To demonstrate how much money we can save by leveraging analytics to eliminate unnecessary calls, let’s make a Stripe call to create a new customer in order to simulate Facebook’s payment flow.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">mutation CreateStripeCustomer ($customer: CreateStripeCustomerInput!) {
  createStripeCustomer(input: $customer) {
    changedStripeCustomer {
      id
      email
      created
    }
  }
}</code></pre>



<p>Check it out in your Optics dashboard. Look at how much time that request took: 219ms.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="549" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_v4v46VFz6tGL0ylPvHPihQ-1024x549.png" alt="" class="wp-image-523" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_v4v46VFz6tGL0ylPvHPihQ-1024x549.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_v4v46VFz6tGL0ylPvHPihQ-300x161.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_v4v46VFz6tGL0ylPvHPihQ-768x412.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_v4v46VFz6tGL0ylPvHPihQ-1536x823.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_v4v46VFz6tGL0ylPvHPihQ-2048x1098.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_v4v46VFz6tGL0ylPvHPihQ-1200x643.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_v4v46VFz6tGL0ylPvHPihQ-1980x1062.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>Looks like the bottleneck is when we’re asking for the <em>created </em>field to be returned as part of the request. We actually don’t need that value on our client, so let’s remove it.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">mutation CreateStripeCustomer ($customer: CreateStripeCustomerInput!) {
  createStripeCustomer(input: $customer) {
    changedStripeCustomer {
      id
      email
    }
  }
}</code></pre>



<p>After running this mutation, we can see that the total request time was only 157ms.</p>



<p>Request time decreased by over 28%! 🎉</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="548" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_ctNCBGoEbHCdEh38rSWYfQ-1024x548.png" alt="" class="wp-image-524" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_ctNCBGoEbHCdEh38rSWYfQ-1024x548.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_ctNCBGoEbHCdEh38rSWYfQ-300x160.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_ctNCBGoEbHCdEh38rSWYfQ-768x411.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_ctNCBGoEbHCdEh38rSWYfQ-1536x821.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_ctNCBGoEbHCdEh38rSWYfQ-2048x1095.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_ctNCBGoEbHCdEh38rSWYfQ-1200x642.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_ctNCBGoEbHCdEh38rSWYfQ-1980x1059.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>In dollar amounts, you were able to&nbsp;<strong>save Facebook about $20 each time a new customer was created</strong>. Now, that’s pretty significant.</p>



<p>Congratulations! You’ve successfully set up powerful analytics to help you optimize your GraphQL API, and saved yourself both time and money.</p>



<hr class="wp-block-separator"/>



<p>Thanks for reading!</p>



<p>If you’re interested in learning more about analytics, feel free to&nbsp;<a href="http://slack.scaphold.io/" target="_blank" rel="noreferrer noopener">join our Slack channel</a>&nbsp;and ask us directly, or get started today with&nbsp;<a href="http://www.apollodata.com/optics" target="_blank" rel="noreferrer noopener">Apollo Optics</a>&nbsp;and&nbsp;<a href="https://scaphold.io/" target="_blank" rel="noreferrer noopener">Scaphold.io</a>! We’re happy to provide more information on how you can optimize your GraphQL API and more.</p>



<p><em>Originally published at&nbsp;</em><a href="https://scaphold.io/community/blog/apollo-optics-and-your-graphql-server/" target="_blank" rel="noreferrer noopener"><em>Scaphold.io</em></a><em>.</em></p>


Apollo Optics and your GraphQL Server


<p>We’re excited to say that we’ve upgraded the Query reporting page in Optics, making key metrics visible at a glance and critical query traces easier to find and navigate through.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p><em>Update: There is a new version of Optics!&nbsp;</em><a href="https://www.apollographql.com/engine/" target="_blank" rel="noreferrer noopener"><strong><em>Apollo Engine</em></strong></a><em>&nbsp;has everything Optics does plus error tracking, query caching, and more. Engine is free for 1 million requests a month and it’s easy to switch from Optics to Engine using our&nbsp;</em><a href="https://www.apollographql.com/docs/engine/upgrade-optics.html" target="_blank" rel="noreferrer noopener"><strong><em>migration guide</em></strong></a><em>.</em></p></blockquote>



<p><em>Optics is our GraphQL performance insights tool. If you’re working with GraphQL and haven’t tried it yet, I highly encourage you to! Sign up for free&nbsp;</em><a href="http://www.apollodata.com/optics" target="_blank" rel="noreferrer noopener"><em>here</em></a><em>— no credit card required.</em></p>



<p>After analyzing a lot of user feedback and using Optics extensively ourselves, we decided that a bar chart would represent the request distribution data more authentically than our previous visualization (a smooth line). Over the last sprint cycle, we took the time to implement a new design of the Query reporting page, and it’s now available to all users!</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="640" height="470" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_V7It9Na7c-Fjx3LPQnEzDA.gif" alt="" class="wp-image-484"/></figure>



<p>With this upgraded version of the histogram, you can easily:</p>



<ul class="wp-block-list"><li>View duration bucket details by hovering over them</li><li>Navigate between different trace samples by clicking bars</li><li>Identify important percentiles through x-axis labels</li><li>Compare different query distributions (x-axis persists between them)</li></ul>



<p>The upgraded histogram is highly interactive. To help users understand their real-world endpoint latencies, we’ve specifically emphasized the percentile of each duration bucket and made important request metadata easily accessible.</p>



<hr class="wp-block-separator"/>



<p>The request distribution is not the only thing that’s been upgraded in Optics. We’ve completely redesigned the tabs on the Query page to emphasize what users care about most. Basic query stats are now always shown under the query name in the page header, and we’ve paired the request distribution with the trace samples by having them on the same page.</p>



<p>Here’s the before and after:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="565" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_54kb6Yq1U-6khKoT0qzVQ-1024x565.png" alt="" class="wp-image-483" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_54kb6Yq1U-6khKoT0qzVQ-1024x565.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_54kb6Yq1U-6khKoT0qzVQ-300x165.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_54kb6Yq1U-6khKoT0qzVQ-768x423.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_54kb6Yq1U-6khKoT0qzVQ-1536x847.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_54kb6Yq1U-6khKoT0qzVQ-2048x1129.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_54kb6Yq1U-6khKoT0qzVQ-1200x662.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_54kb6Yq1U-6khKoT0qzVQ-1980x1092.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Before</figcaption></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="565" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_MmiNdBhwGBTqzRO3IIgvGQ-1024x565.png" alt="" class="wp-image-482" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_MmiNdBhwGBTqzRO3IIgvGQ-1024x565.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_MmiNdBhwGBTqzRO3IIgvGQ-300x166.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_MmiNdBhwGBTqzRO3IIgvGQ-768x424.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_MmiNdBhwGBTqzRO3IIgvGQ-1536x848.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_MmiNdBhwGBTqzRO3IIgvGQ-2048x1131.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_MmiNdBhwGBTqzRO3IIgvGQ-1200x663.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_MmiNdBhwGBTqzRO3IIgvGQ-1980x1093.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>After</figcaption></figure>



<hr class="wp-block-separator"/>



<p>Check out the new design for yourself! We’d love to hear your feedback through Intercom in Optics (blue circle on the bottom right), the #optics channel of our public&nbsp;<a href="http://www.apollodata.com/#slack" target="_blank" rel="noreferrer noopener">Apollo Slack</a>, or comments on this post.</p>


Upgraded Query Interface in Optics


<figure class="wp-block-image"><img decoding="async" src="https://miro.medium.com/max/590/1*qklQHkc1Y1Srk_vlo5GEOQ.png" alt=""/></figure>



<h2 class="wp-block-heading" id="15e1"><a href="#defining-the-problem" aria-hidden="true" class="aal_anchor" id="defining-the-problem"><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>Defining the Problem</h2>



<p>NewSpring Church is a Southern Baptist megachurch headquartered in Anderson, South Carolina. In addition to its main location, which receives an average of 32,000 visitors per week, NewSpring has more than a dozen locations in cities and towns throughout the state.</p>



<div class="wp-block-image"><figure class="alignleft size-large"><img loading="lazy" decoding="async" width="300" height="77" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_QAWOno5bP8XMRCSmp1BKag.png" alt="" class="wp-image-479"/></figure></div>



<p>NewSpring is one of the fastest-growing churches in the country. The church’s development team has had to build and maintain a variety of websites and applications for the various locations in order to adequately serve employees and congregants. The church also operates several institutions, including a leadership college and a youth ministry, each with its own technical needs.</p>



<p>Due to the massive increases in growth and attendance year after year, NewSpring’s technical team has cobbled together a number of internal and third-party solutions in order to keep everything running. “I came into an organization that had grown very fast, and needed very quickly to sign up for a number of different services to be able to sustain itself,” said James Baxley, NewSpring’s director of web systems development. “It was a very distributed data system, with a lot of stuff in the wrong place and not really in sync.” The team wanted to unify the various solutions put into place so that users could have one central hub of activity without signing into a dozen different portals.</p>



<h2 class="wp-block-heading" id="3306"><a href="#migrating-to-graphql" aria-hidden="true" class="aal_anchor" id="migrating-to-graphql"><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>Migrating to GraphQL</h2>



<p>With this objective in mind, Baxley and the NewSpring team began to seriously look into adding&nbsp;<a href="https://graphql.com/" target="_blank" rel="noreferrer noopener">GraphQL</a>&nbsp;into its technical stack. The team already relied on ExpressionEngine, a PHP and MySQL content management system, as well as third-party church management software and a number of REST endpoints. Because the stack was so large, any new solution needed to play nicely with these existing technologies.</p>



<p>When deciding whether to use GraphQL, the development team had three main concerns:</p>



<ul class="wp-block-list"><li>First, GraphQL was a very new technology; the specifications had only been officially been announced five or six months previously. The team needed reassurance that GraphQL would have support for the foreseeable future and wasn’t just a flash in the pan.</li><li>Second, even a delay of 100 milliseconds is enough to push users away from a website, so speed would be a paramount concern.</li><li>Third, NewSpring keeps track of a large amount of sensitive data, including financial information and personal conversations. Protecting user data was a critical need for the new system.</li></ul>



<p>“Whatever choice we made in how to handle our data had to provide the security and reliability to keep the lights on and set us up for future success,” said Baxley. “GraphQL is that choice.”</p>



<h2 class="wp-block-heading" id="7f39"><a href="#insight-with-apollo-optics" aria-hidden="true" class="aal_anchor" id="insight-with-apollo-optics"><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>Insight With Apollo Optics</h2>



<p>To supplement the adoption of GraphQL, NewSpring used&nbsp;<a href="http://apollodata.com/optics" target="_blank" rel="noreferrer noopener">Apollo Optics</a>&nbsp;to provide system analytics. Optics let the NewSpring team target queries that were unnecessarily slow or causing problems with caching, allowing them to make numerous improvements and optimizations. Optics makes it simple for the team to find any significant spike in response time, offering a closer look in order to identify where the issue is coming from and determine how much of the problem is due to the application’s caching mechanisms.</p>



<figure class="wp-block-image alignfull size-large"><img loading="lazy" decoding="async" width="1024" height="467" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_7sbz2oa3vivbXH2qAqMsVw-1024x467.png" alt="" class="wp-image-478" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_7sbz2oa3vivbXH2qAqMsVw-1024x467.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_7sbz2oa3vivbXH2qAqMsVw-300x137.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_7sbz2oa3vivbXH2qAqMsVw-768x350.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_7sbz2oa3vivbXH2qAqMsVw-1536x701.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_7sbz2oa3vivbXH2qAqMsVw-2048x934.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_7sbz2oa3vivbXH2qAqMsVw-1200x547.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_7sbz2oa3vivbXH2qAqMsVw-1980x903.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Apollo Optics Trace View</figcaption></figure>



<p>By using&nbsp;<a href="http://apollodata.com/optics" target="_blank" rel="noreferrer noopener">Apollo Optics</a>&nbsp;to sort by the length of time taken for a query, the NewSpring team can easily identify the weak spots in their application. For example, the development team noticed that looking up a person was one of the most time-consuming tasks because the application needed to move from a user account to a record for a person, which could potentially involve merge operations in SQL. Initially, developers assumed that one person would only have one user account and only require a simple check, but this proved not to be the case in production. Optics allowed NewSpring to troubleshoot the issue and tag this pain point for optimization.</p>



<p>“Optics was the fastest way for us to take GraphQL projects from prototype to production” — James Baxley</p>



<p>The operations team also uses Optics to analyze queries during major events, such as Sunday or holiday services. The application lets them view the different usage patterns in the form of GraphQL queries to give them an idea of how successful their efforts have been. By helping to identify inefficiencies, points of overuse and potential areas of improvement, Optics has become a key part of the NewSpring team’s daily toolbox. “Optics was the fastest way for us to take GraphQL projects from prototype to production,” said Baxley.</p>



<h2 class="wp-block-heading" id="547c"><a href="#looking-to-the-future" aria-hidden="true" class="aal_anchor" id="looking-to-the-future"><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>Looking to the Future</h2>



<p>After working with GraphQL and Optics, the NewSpring team is excited about the chance to use what they’ve built and help other churches unify around a common schema. In addition, the team wants to implement some key system features that have been sorely missing so far.</p>



<p>First, Apollo is able to support subscriptions as they are implemented in GraphQL. The NewSpring team is hoping to use the subscriptions feature to build a chat platform using GraphQL, giving end users more functionality and putting a cutting-edge technology into production.</p>



<p>Second, NewSpring’s GraphQL server is currently written in JavaScript, but the team has developed an application in conjunction with other churches written in C#. Moving forward, one of the biggest tasks will be to transition the NewSpring GraphQL server to C#, so that they can promote GraphQL amongst the church tech community.</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="James Baxley - Using Apollo in production at NewSpring Church" width="580" height="326" src="https://www.youtube.com/embed/RGfn8GfC_uE?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<p>If you liked this case study, please show your love with the ❤ below! Have a story to share? Let us know in the comments below!</p>



<p>Have a GraphQL project you’d like to instrument?&nbsp;<a href="https://optics.apollodata.com/" target="_blank" rel="noreferrer noopener">Try Apollo Optics for free »</a>&nbsp;No credit card required.</p>


Managing Explosive Growth with Apollo Optics — A Case Study


<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Update: There is a new version of Optics!&nbsp;<a href="https://www.apollographql.com/engine/" target="_blank" rel="noreferrer noopener"><strong>Apollo Engine</strong></a>&nbsp;has everything Optics does plus error tracking, query caching, and more. Engine is free for 1 million requests a month and it’s easy to switch from Optics to Engine using our&nbsp;<a href="https://www.apollographql.com/docs/engine/upgrade-optics.html" target="_blank" rel="noreferrer noopener"><strong>migration guide</strong></a>.</p></blockquote>



<p>Over the last few weeks we’ve been working on some new features for Apollo&nbsp;<a href="http://www.apollodata.com/optics" target="_blank" rel="noreferrer noopener">Optics</a>, our GraphQL performance insights tool. We’re excited to announce that two of the most requested features are now available:&nbsp;<strong>fine-grained time filters</strong>&nbsp;and&nbsp;<strong>query variables</strong>.These should give users even more information about what’s causing performance issues in their GraphQL API.</p>



<h2 class="wp-block-heading" id="69d8"><a href="#fast-fine-grained-time-filters" aria-hidden="true" class="aal_anchor" id="fast-fine-grained-time-filters"><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><strong>Fast, fine-grained time filters</strong></h2>



<p>It’s really valuable to be able to compare data from arbitrary, fine-grained time periods. For example, you might want to review the effect of adding a new field to a query by comparing yesterday and today’s versions of that query’s latency histogram.</p>



<p>You can now apply these fine grained time filters to any data available in Optics. You can compare query performance histograms from different time periods in the last day, dig into specific traces from a particular time range, and review field-by-field analytics (including a report of unused fields) for any desired time range. Take a look:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="679" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/0_XalvmxlkfGSGE6Oz-1024x679.png" alt="" class="wp-image-453" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/0_XalvmxlkfGSGE6Oz-1024x679.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/0_XalvmxlkfGSGE6Oz-300x199.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/0_XalvmxlkfGSGE6Oz-768x509.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/0_XalvmxlkfGSGE6Oz-1200x795.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/0_XalvmxlkfGSGE6Oz.png 1400w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>Adding time filters that were arbitrary, fine-grained and&nbsp;<em>fast&nbsp;</em>was a fun challenge that forced us to be smart about precomputing and aggregating data in a way that kept costs manageable. We ultimately landed on an interesting solution to this in our GCP-based data platform (more on that later!).</p>



<h2 class="wp-block-heading" id="c1b2"><a href="#query-variables" aria-hidden="true" class="aal_anchor" id="query-variables"><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>Query variables</h2>



<p>One thing we’ve heard repeatedly from our users is that they’d like to understand the variables associated with a query request. We’ve added this as a new section below the graphical trace view:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="659" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/0_9NJO6jxwIqpusu3r-1024x659.png" alt="" class="wp-image-452" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/0_9NJO6jxwIqpusu3r-1024x659.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/0_9NJO6jxwIqpusu3r-300x193.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/0_9NJO6jxwIqpusu3r-768x494.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/0_9NJO6jxwIqpusu3r-1200x772.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/0_9NJO6jxwIqpusu3r.png 1400w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<h2 class="wp-block-heading" id="d2ca"><a href="#try-it-out-for-free" aria-hidden="true" class="aal_anchor" id="try-it-out-for-free"><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>Try it out for free!</h2>



<p>You can get a&nbsp;<a href="http://www.apollodata.com/optics" target="_blank" rel="noreferrer noopener">free trial</a>&nbsp;of Optics and see performance insights about your GraphQL server in minutes.</p>


GraphOS