Enhance customer experiences with Apollo GraphOS


<p class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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" data-line=""># router.yaml
preview_persisted_queries:
  enabled: true
  log_unknown: true</code></pre>



<p class="wp-block-paragraph">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" data-line=""># 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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph"><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 class="wp-block-paragraph">We can leverage Apollo Federation’s <code class="" data-line="">@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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">Our supergraph source variant defines a <code class="" data-line="">User</code> type with the following fields:</p>



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



<p class="wp-block-paragraph">This <code class="" data-line="">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 class="" data-line="">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 class="wp-block-paragraph">&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 class="" data-line="">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 class="wp-block-paragraph">A much more effective approach involving Contracts can alleviate all these issues. Contracts rely on the <code class="" data-line="">@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 class="" data-line="">name</code> field and can be used to tag any types and fields in the schema. An annotated version of the <code class="" data-line="">User</code> type looks like this:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql" data-line="">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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" data-line=""># 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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="" data-line="">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 class="wp-block-paragraph">One of the key benefits of GraphQL federation is its ability to manage dependencies between services. By using federation-specific directives like <code class="" data-line="">@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 class="wp-block-paragraph">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 class="wp-block-paragraph">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" data-line="">type TripSuggestion @key(fields: &quot;trip { id }&quot;) {
  trip: Trip
  suggestions: [Product]
}
union Product = Hotel | Flight</code></pre>



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



<p class="wp-block-paragraph">Note that the suggestions field of this type is a list of <code class="" data-line="">Product</code>&#8216;s, which itself is a union of the <code class="" data-line="">Hotel</code> and <code class="" data-line="">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" data-line="">query CurrentTrip($userId: ID!) {
  currentTrip(userId: $userId) {
    products {
      ... on TripSuggestion {
        suggestions {
          ... on Hotel {
            id
            name
          }
          ... on Flight {
            id
            origin {
              airportCode
            }
          }
        }
      }
    }
  }
}</code></pre>



<p class="wp-block-paragraph">By using the fragments <code class="" data-line="">... on Hotel</code> and <code class="" data-line="">... 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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph"><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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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" data-line="">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 class="wp-block-paragraph">You will notice that we have a generic <code class="" data-line="">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 class="wp-block-paragraph">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" data-line="">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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 class="wp-block-paragraph">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>


GraphOS

How to build connected travel apps with Apollo GraphOS

Mitigate scraping and bot attacks with GraphOS

Seamlessly integrate with partners to enhance the travel experience

Delivering personalized travel experiences with GraphQL

Ship products faster with SDUI

Stay in our orbit