
<p>Apollo Kotlin 4 is the new major version of Apollo Kotlin. It builds on top of Apollo Kotlin 3 and brings a number of tooling and API improvements:</p>



<ul class="wp-block-list">
<li>A brand new IDE plugin for all your refactoring needs.</li>



<li>Improvement to the error handling APIs, making it easier to handle errors in a single place.</li>



<li>WasmJs support.</li>



<li>A multiplatform GraphQL parser.</li>



<li>A preview of semantic nullability.</li>



<li>Network monitoring API, new WebSocket APIs and more …</li>
</ul>



<p>For a comprehensive list of all changes, please review the <a href="https://github.com/apollographql/apollo-kotlin/releases/tag/v4.0.0">full changelog</a>.</p>



<p>If you&#8217;re currently using Apollo Kotlin 3, refer to the <a href="https://www.apollographql.com/docs/kotlin/v4/migration/4.0/#moved-artifacts">migration guide</a> for step-by-step migration instructions.</p>



<p>Or read on for a brief summary of the key updates and a preview of what&#8217;s on the horizon.</p>



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



<p>If you’re using Android Studio or IntelliJ, <a href="https://www.apollographql.com/docs/kotlin/v4/testing/android-studio-plugin/">you can now download the Apollo IntelliJ plugin in the IntelliJ marketplace</a> and get even more help from your IDE.</p>



<p>Apollo IDE plugin core features include:</p>



<ul class="wp-block-list">
<li>On the fly code generation</li>



<li>GraphQL &lt;-> Kotlin navigation</li>



<li>Unused field inspection</li>



<li>High Field latency inspection</li>



<li>Normalized cache viewer</li>



<li>Schema download </li>



<li>Automatic migration</li>
</ul>



<p>That last point means you can now use the plugin to automate most of your v3 -&gt; v4 migration.</p>



<p><img loading="lazy" decoding="async" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXdaWp_FZSNQWfiwe6FNOOsEcoK1pc4K1wAsu7BX6Am-8yP7Rdjs0ZPGbgppgMND00Yvs4iBQbOlY9IBVwwYhjUNrHUq8_vIeAGxaxKNvL7S_aG00mq18dCdD8PYBtBbQO5-_8XWu5e1wL2MtRvZykK-86SW?key=12X6ltZW9oZBbxKegGgpWw" width="668" height="463"></p>



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



<p>With the release of Apollo Kotlin 4, we&#8217;ve achieved a significant milestone where our core APIs—including code generation, parsers, and interceptors—are now stable. This stability means we don’t anticipate any major overhauls like the transition from version 2 to 3, though the landscape of Kotlin and GraphQL continues to evolve rapidly. Developments such as <a href="https://youtrack.jetbrains.com/issue/KT-68296">union types for errors</a> or <a href="https://github.com/graphql/nullability-wg/discussions/58">semantic nullability schemas</a> may necessitate breaking changes in the future.</p>



<p>Looking ahead, our goal is to roll out smaller, more frequent updates, including major versions. This approach will keep the core APIs consistent, enabling us to introduce new features and adapt more swiftly to changes in the environment. To facilitate this, we’ve updated the package name from <code>com.apollographql.apollo3</code> to <code>com.apollographql.apollo</code>.<br><br>With Apollo Kotlin 4, we are also introducing an evolution policy. This policy will steer the development of future versions and ensure that we provide clear deprecation notices, helping you to transition smoothly and confidently.</p>



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



<p>Previously, Apollo Kotlin relied on<a href="https://github.com/graphql/graphql-js" data-type="link" data-id="https://github.com/graphql/graphql-js"> <code>graphql-js</code></a> for parsing GraphQL documents. In version 2, we transitioned to using <a href="https://www.antlr.org/">Antlr</a> to generate parsers from <code>.g4</code> grammars.</p>



<p>With Apollo Kotlin 4, we’ve taken a significant leap forward by developing our <a href="https://github.com/apollographql/apollo-kotlin/pull/5047">own recursive descent</a> parser.</p>



<p>The new parser not only performs up to <a href="https://github.com/apollographql/apollo-kotlin/pull/5047#issue-1780385717">twice </a>as fast as the previous Antlr-based parser in certain scenarios, but it’s also entirely written in Kotlin, ensuring full multiplatform support. This means you can seamlessly integrate it into your Kotlin multiplatform projects just like any other KMP dependency.</p>



<p>Here’s how you can add the new parser to your project:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-kotlin">kotlin {
  sourceSets {
    getByName(&quot;commonMain&quot;) {
      dependencies {
        implementation(&quot;com.apollographql.apollo:apollo-ast&quot;)
      }
    }
  }
}</code></pre>



<p>And here’s how to utilize it at runtime:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-kotlin">  // Parse a document
  val document = &quot;query { hello }&quot;.toGQLDocument()

  // transform/inspect it
  // And serialize it again
  println(document.toUtf8())</code></pre>



<h2 class="wp-block-heading"><a href="#introducing-wasmjs-support" aria-hidden="true" class="aal_anchor" id="introducing-wasmjs-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>Introducing WasmJs support</h2>



<p>Apollo Kotlin 4 now includes support for the WasmJs target, expanding your capabilities to use the generated models and <code>apollo-runtime</code> in a Wasm application. Experience this new feature firsthand by trying out the Confetti wasm demo at <a href="https://wasm.confetti-app.dev/">https://wasm.confetti-app.dev/</a> (<a href="https://github.com/joreilly/Confetti">GitHub</a>).</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="874" height="1024" src="https://wp.apollographql.com/wp-content/uploads/2024/07/Screenshot-2024-07-31-at-17.27.47-874x1024.png" alt="" class="wp-image-23864" srcset="https://wp.apollographql.com/wp-content/uploads/2024/07/Screenshot-2024-07-31-at-17.27.47-874x1024.png 874w, https://wp.apollographql.com/wp-content/uploads/2024/07/Screenshot-2024-07-31-at-17.27.47-256x300.png 256w, https://wp.apollographql.com/wp-content/uploads/2024/07/Screenshot-2024-07-31-at-17.27.47-768x900.png 768w, https://wp.apollographql.com/wp-content/uploads/2024/07/Screenshot-2024-07-31-at-17.27.47-1311x1536.png 1311w, https://wp.apollographql.com/wp-content/uploads/2024/07/Screenshot-2024-07-31-at-17.27.47-1748x2048.png 1748w, https://wp.apollographql.com/wp-content/uploads/2024/07/Screenshot-2024-07-31-at-17.27.47-1200x1406.png 1200w, https://wp.apollographql.com/wp-content/uploads/2024/07/Screenshot-2024-07-31-at-17.27.47.png 1886w" sizes="(max-width: 874px) 100vw, 874px" /></figure>



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



<p>In GraphQL, <a href="https://graphql.org/learn/best-practices/#nullability">fields are traditionally nullable by default</a>. However, the standards set in 2015 don’t always align with the needs of 2024, especially as <a href="https://github.com/graphql/nullability-wg/">the GraphQL community seeks to enhance </a>type safety for languages like TypeScript, Swift, and Kotlin.</p>



<p>Apollo Kotlin 4 introduces two experimental directives, <code>@semanticNonNull</code> and <code>@catch</code>, designed to simplify interactions with nullable fields.</p>



<p>The <code>@semanticNonNull</code> directive is a server-side directive, indicating that a field is guaranteed to be non-null unless an error happens. This directive can be incorporated into your <code>.graphqls</code> schema extensions, enhancing the clarity and reliability of your data models:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-kotlin"># name is never null unless an error happens
extend type User @semanticNonNullField(name: &quot;name&quot;)</code></pre>



<p>On the code generation front, Apollo Kotlin recognizes <code>@semanticNonNullField</code> and accordingly generates non-null Kotlin properties, ensuring that your application code remains type-safe and concise.</p>



<p>Additionally, the <code>@catch</code> directive is a client-side directive for opting into specific error handling strategies during operations. By using <code>@catch</code> in your <code>.graphql</code> operations, you can manage how errors are handled directly within the data context—whether by mapping errors to <code>null</code>, re-throwing them, or using another method:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-kotlin">query GetUser {
  user {
    # map name to FieldResult&lt;String?&gt; instead of stopping parsing
    name @catch(to: RESULT)
  }
}</code></pre>



<p>For a deeper understanding of these enhancements and their implications on your projects, please refer to our detailed <a href="https://www.apollographql.com/docs/kotlin/v4/advanced/nullability#handle-errors-and-receive-partial-data-with-catch">nullability documentation page</a>.</p>



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



<p>Beyond the updates already discussed, Apollo Kotlin 4 introduces several exciting features including support for<a href="https://github.com/graphql/graphql-spec/pull/825"> <code>@oneOf</code></a>, new WebSockets APIs, new low-level Apollo compiler plugin APIs, and new Gradle APIs. For a detailed list of all the enhancements, make sure to read the full changelog.</p>



<p>One significant area poised for further development is the normalized cache, which continues to present challenges. While Apollo Kotlin 3 introduced <a href="https://www.apollographql.com/docs/kotlin/caching/declarative-ids/">&nbsp;<code>@typePolicy</code> and <code>@fieldPolicy</code> for declarative ids</a>, certain scenarios still demand the use of complex programmatic APIs.</p>



<p>Additionally, issues such as garbage collection and invalidation remain unresolved. We aim to address these in version 5.</p>



<p>With the modularization of Apollo Kotlin development has shifted to <a href="https://github.com/apollographql/apollo-kotlin-normalized-cache-incubating/">a separate repository</a>, enabling more agile iteration and improvement.<br>For the latest updates and future plans, please refer to <a href="https://github.com/apollographql/apollo-kotlin/blob/main/ROADMAP.md">the ROADMAP</a> document on what is being worked on.</p>



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



<p>Have a question or wish to discuss GraphQL, Kotlin, or the<a href="https://github.com/apollographql/apollo-kotlin/blob/main/ROADMAP.md"> ROADMAP</a>? We encourage you to connect with us and join the conversation:</p>



<ul class="wp-block-list">
<li><a href="https://github.com/apollographql/apollo-android/issues">Github</a></li>



<li><a href="http://community.apollographql.com/new-topic?category=Help&amp;tags=mobile,client">Community forums</a></li>



<li>Join the <a href="https://app.slack.com/client/T09229ZC6/C01A6KM1SBZ">Apollo KotlinLang slack channel</a> (click <a href="https://slack.kotl.in/">here</a> for an invite).</li>
</ul>



<p>We&#8217;re here to support you and look forward to your insights and contributions!</p>


Apollo Kotlin 4 is now available


<p>Apollo Client 3.10 has just been released, and we want to provide you with an overview of what&#8217;s new:</p>



<ul class="wp-block-list">
<li>Introducing new experimental schema-based testing utilities</li>



<li>New API: <code>client.watchFragment</code></li>



<li><code>createQueryPreloader</code> reaches &#8220;stable&#8221; status</li>
</ul>



<p>Let&#8217;s take a look:</p>



<h2 class="wp-block-heading"><a href="#introducing-new-experimental-schema-based-testing-utilities" aria-hidden="true" class="aal_anchor" id="introducing-new-experimental-schema-based-testing-utilities"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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 new experimental schema-based testing utilities</h2>



<p>In Apollo Client 3.10, we are introducing new schema-based testing utilities under the <code>@apollo/client/testing/experimental</code> import.</p>



<p>This adds two new tools:</p>



<p><strong><code>createTestSchema</code></strong> allows you to enhance a <code>GraphQLSchema</code> class with mock scalars and mock resolvers. </p>



<p>You can modify the resolvers inside your tests to simulate changing results.</p>



<p>This approach is an alternative to the current testing approach with <code>MockProvider</code>, allowing you to write tests similar to how you would implement your backend &#8211; applying skills you already have and can use in other situations.</p>



<p>You can then use this schema with <a href="https://mswjs.io/" data-type="link" data-id="https://mswjs.io/">Mock Service Worker</a> to simulate a GraphQL server, or you can use our new <strong><code>createSchemaFetch</code></strong> function to create a <code>fetch</code> function to be used inside of your tests.</p>



<p>Both of these approaches allow you to use your real link chain instead of a mocked one.</p>



<p>You can read more on this testing approach in <a href="https://github.com/apollographql/apollo-client/issues/11705" data-type="link" data-id="https://github.com/apollographql/apollo-client/issues/11705">the schema-driven testing RFC</a> and <a href="https://www.apollographql.com/docs/react/development-testing/schema-driven-testing" data-type="link" data-id="https://www.apollographql.com/docs/react/development-testing/schema-driven-testing">the documentation</a>.</p>



<h2 class="wp-block-heading"><a href="#new-api-client-watchfragment" aria-hidden="true" class="aal_anchor" id="new-api-client-watchfragment"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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 API: <code>client.watchFragment</code></h2>



<p>We also add a new function to the <code>ApolloClient</code> class: <code>watchFragment</code>.</p>



<p>This function enables the functionality of the <code>useFragment</code> hook to be used in Vanilla JavaScript or other frameworks. </p>



<p>A PR to add a <code>watchFragment</code> functionality to <code>apollo-angular</code> has already been opened, and more will follow soon!</p>



<h2 class="wp-block-heading"><a href="#createquerypreloader-reaches-stable-status" aria-hidden="true" class="aal_anchor" id="createquerypreloader-reaches-stable-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><code>createQueryPreloader</code> reaches &#8220;stable&#8221; status</h2>



<p>In Apollo Client 3.9, we introduced the <code>createQueryPreloader</code> API as &#8220;alpha&#8221;, and since we&#8217;ve heard your positive feedback, with 3.10, we&#8217;re releasing it as &#8220;stable.&#8221;</p>



<p><code>createQueryPreloader</code> is used to start a query outside of React (e.g. in a Router action) and then later attach to the generated <code>queryRef</code> with the <code>useReadQuery</code> hook.</p>



<p>You can read more about it in the <a href="https://www.apollographql.com/docs/react/data/suspense/#initiating-queries-outside-react" data-type="link" data-id="https://www.apollographql.com/docs/react/data/suspense/#initiating-queries-outside-react">documentation</a>.</p>


What’s new in Apollo Client 3.10


<p>With the release of Apollo Client 3.9, we&#8217;re excited to announce a host of new features and improvements, including:</p>



<ul class="wp-block-list">
<li>Suspense-enabled data fetching in response to user interaction with <code>useLoadableQuery</code></li>



<li>Preloading data outside of React with <code>createQueryPreloader</code> and <code>preloadQuery</code></li>



<li>Memory usage optimizations</li>



<li>A new&nbsp;<code>useQueryRefHandlers</code>&nbsp;hook for accessing <code>refetch</code> and <code>fetchMore</code> for a given <code>queryRef</code></li>



<li>Multipart subscriptions network adapters for Relay and urql</li>



<li><code>MockedProvider</code> improvements</li>
</ul>



<p>Let&#8217;s dive in!</p>



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



<p>When it comes to Suspense-enabled data fetching in Apollo Client, <code>useSuspenseQuery</code> and <code>useBackgroundQuery</code> are useful for loading data as soon as the component calling the hook mounts. But what about loading a query in response to user interaction? For example, you may want to start loading some data when a user hovers on a link.</p>



<p>Introducing the <code>useLoadableQuery</code> hook 🎉 For more information, see <a href="https://www.apollographql.com/docs/react/data/suspense#fetching-in-response-to-user-interaction">its documentation</a>.</p>



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



<p>Starting with Apollo Client 3.9, queries can be initiated outside of React. This allows your app to begin fetching data <em>before</em> React renders your components, and can provide performance benefits.</p>



<p>To preload queries, you first need to create a preload function with <code>createQueryPreloader</code>. <code>createQueryPreloader</code> takes an <code>ApolloClient</code> instance as an argument and returns a function that, when called, initiates a network request.</p>



<p>The preload function returns a <code>queryRef</code> that is passed to <a href="https://www.apollographql.com/docs/react/api/react/hooks/#usereadquery"><code>useReadQuery</code></a> to read the query data and suspend the component while loading. <code>useReadQuery</code> will ensure that your component is kept up-to-date with cache updates for the preloaded query.</p>



<p>This feature pairs nicely with popular routers such as React Router and TanStack Router, both of which provide APIs for loading data before route components render (such as the <a href="https://reactrouter.com/en/main/route/route#loader"><code>loader</code> function</a> from React Router). It provides the benefits of earlier fetching without sacrificing the ability to automatically re-render when future cache updates occur.</p>



<p>This feature is in alpha in 3.9 and may be subject to change before 3.10. If you&#8217;d like to provide feedback before it&#8217;s stabilized, please visit <a href="https://github.com/apollographql/apollo-client/issues/11519">#11519</a> and add a comment.</p>



<p>For more information, see <a href="https://www.apollographql.com/docs/react/data/suspense#initiating-queries-outside-react">its documentation</a>.</p>



<h2 class="wp-block-heading"><a href="#introducing-a-new-usequeryrefhandlers-hook" aria-hidden="true" class="aal_anchor" id="introducing-a-new-usequeryrefhandlers-hook"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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 a new&nbsp;<code>useQueryRefHandlers</code>&nbsp;hook</h2>



<p><code>useQueryRefHandlers</code> is a hook that returns <code>refetch</code> and <code>fetchMore</code> functions for a given <code>queryRef</code>. It&#8217;s useful for gaining access to these handlers for a <code>queryRef</code> that was created by <code>createQueryPreloader</code>, or to avoid passing these handlers down through your component tree.</p>



<p>For more information, see <a href="https://www.apollographql.com/docs/react/api/react/hooks/#usequeryrefhandlers">its documentation</a>.</p>



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



<p>Spanning over twenty memory-related pull requests, 3.9 includes a host of improvements and optimizations related to memory usage.</p>



<p>You can find a comprehensive list in <a href="https://www.apollographql.com/blog/author/lenz">Lenz</a>&#8216;s December <a href="https://www.apollographql.com/blog/apollo-3-9-beta-feature-spotlight-the-memory-story">blog post</a>, but at a high level this work includes many fixes and improvements and introduces <strong>the ability to granularly configure Apollo Client’s internal memoization</strong>.</p>



<p>Memoization is always a trade-off between processing time and memory, and some of our old cache limits erred on the side of consuming more memory. While the new defaults should be sufficient for most applications, we know that some will need to make different trade-offs so we made each cache size individually configurable, both before and after the Apollo Client has been initialized. </p>



<p>For more information, see our new <a href="https://www.apollographql.com/docs/react/caching/memory-management/">documentation page for memory management</a> and share your <code>ApolloClient.getMemoryInternals()</code> values <a href="https://github.com/apollographql/apollo-client/issues/11444">in this issue</a>!</p>



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



<p>With the launch of <a href="https://www.youtube.com/watch?v=-4R6rLMZ9mc&amp;list=PLpi1lPB6opQzUOqG3QroLLN06FF-Q_uhX&amp;index=5">federated subscriptions</a> in the Apollo Router last year, Apollo Client added support for GraphQL <a href="https://www.apollographql.com/docs/react/data/subscriptions/#subscriptions-via-multipart-http">subscriptions over HTTP</a>.</p>



<p>In 3.9, we&#8217;re shipping network adapters for Relay and urql to make consuming subscriptions via multipart HTTP a breeze no matter which client library you&#8217;re using. For more information, see <a href="https://www.apollographql.com/docs/react/data/subscriptions/#http">the documentation</a>.</p>



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



<p>This release also introduces two frequently requested improvements to the testing utility, <code>MockedProvider</code>:</p>



<ul class="wp-block-list">
<li><strong>Reusing mocks:</strong> By default, a mock is only used once. If you want to reuse a mock for multiple operations, you can now set the <code>maxUsageCount</code> field to a number indicating how many times the mock should be used.</li>



<li><strong>Dynamic variables:</strong> The <code>MockedResponse</code> object now takes a <code>variableMatcher</code> property that is a function that takes the variables and returns a boolean indication if this mock should match the invocation for the provided query. This can be useful when the exact value of the variables being passed are not known, or for asserting specific variables individually.</li>
</ul>



<p>For more on these enhancements, see our complete documentation on <a href="https://www.apollographql.com/docs/react/development-testing/testing/#testing-the-loading-and-success-states">testing React components</a>. Finally, to keep an eye on future testing improvements slated for 3.10, this <a href="https://github.com/apollographql/apollo-client/issues/9738">GitHub issue</a> is the one to watch.</p>



<p>You can browse the <a href="https://github.com/apollographql/apollo-client/releases/tag/v3.9.0">full changelog</a> on GitHub. Happy querying!</p>



<p><a href="https://github.com/apollographql/apollo-client/blob/main/ROADMAP.md#future-3x-releases"></a></p>


What’s new in Apollo Client 3.9

Announcing Apollo Client 3.8 With React Suspense Integration

Wait for it… Announcing Apollo Client 3.8 with React Suspense Integration


<p>The <a href="https://nextjs.org/blog/next-13-4">latest release of Next.js 13 (13.4)</a> declared the new app directory as stable and it will now be the default for new projects.</p>



<p>The app directory is a major milestone of Next.js and the whole React ecosystem as it marks all components under the app directory as <a href="https://nextjs.org/docs/getting-started/react-essentials#server-components">React Server Components</a>. While this is an exciting new feature, it also brought some confusion to people using them for the first time.</p>



<p>You might have seen my blog post about how to use<a href="https://www.apollographql.com/blog/apollo-client/next-js/how-to-use-apollo-client-with-next-js-13/"> Apollo Client with Next.js 13</a>, and the solution we proposed worked, but it was a bit cumbersome and might break in future.</p>



<p>In order to make it easier to adopt Apollo Client in Next.js we are releasing an experimental library: <code>@apollo/experimental-nextjs-app-support</code> (don&#8217;t worry the name will change once the library is stable 😊).</p>



<p>This library will do all the right things for you whether you&#8217;re running under Server Components or if you&#8217;re running in Client Components.</p>



<h1 class="wp-block-heading"><a href="#when-should-you-use-client-components-vs-server-components" aria-hidden="true" class="aal_anchor" id="when-should-you-use-client-components-vs-server-components"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>When should you use Client Components vs Server Components?</strong></h1>



<p>Thanks to Apollo Client’s normalized cache, Client Components can automatically update all usages of an entity in your application, for example as a result of a mutation. This is not the case for Server Components and they must be manually refreshed when data changes.</p>



<p>So if the same data would be displayed or used in both environments, it would quickly run out of sync and result in inconsistencies.</p>



<p>To keep things consistent, we suggest deciding whether to render each entity in RSC or in Client Components. In the context of Apollo Client, entities refer to normalized data objects that are stored in the client cache. These entities are used to avoid duplication of (cached) data and to enable efficient updates to the cache.</p>



<p>When data is fetched from a GraphQL server, it is normalised into entities and stored in the cache. Subsequent queries can then retrieve data from the cache using the same entity structure, rather than refetching the data from the server. Therefore, when deciding whether to render each entity in RSC or in Client Components, it is important to consider how the data will be accessed and updated in the cache.</p>



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



<p>Let&#8217;s see how we can use this new library in both RSC and Client Components, the first thing we need to do is to install both <code>@apollo/client</code> rc and <code>@apollo/experimental-nextjs-app-support</code>:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-shell-session">npm install @apollo/client@rc @apollo/experimental-nextjs-app-support</code></pre>



<p>After installing both libraries, we can choose between using Server Components or Client Components, depending on our preferred approach.</p>



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



<p>If you want to use Apollo Client inside Server components you need to create a new file <code>lib/client.js</code> and put the following in it:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-jsx">import { ApolloClient, HttpLink, InMemoryCache } from &quot;@apollo/client&quot;;
import { registerApolloClient } from &quot;@apollo/experimental-nextjs-app-support/rsc&quot;;

export const { getClient } = registerApolloClient(() =&gt; {
  return new ApolloClient({
    cache: new InMemoryCache(),
    link: new HttpLink({
      // https://studio.apollographql.com/public/spacex-l4uc6p/
      uri: &quot;https://main--spacex-l4uc6p.apollographos.net/graphql&quot;,
      // you can disable result caching here if you want to
      // (this does not work if you are rendering your page with `export const dynamic = &quot;force-static&quot;`)
      // fetchOptions: { cache: &quot;no-store&quot; },
    }),
  });
});</code></pre>



<p><code>registerApolloClient</code> will return a <code>getClient</code> function that allows you to safely get an instance of the Apollo Client that&#8217;s scoped to the current request, so you won&#8217;t end up sharing the Apollo Client cache within multiple requests.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>Note that the default caching mechanism in Next.js is to cache everything at build time, make sure you set <a href="https://www.apollographql.com/blog/apollo-client/how-to-use-apollo-client-with-next-js-13/#next-js-cache-and-apollo">the correct options</a> based on how your data changes.</p>
</blockquote>



<h2 class="wp-block-heading"><a href="#client-components-with-server-side-rendering" aria-hidden="true" class="aal_anchor" id="client-components-with-server-side-rendering"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>Client Components (with server side rendering)</strong></h2>



<p>If you want to use Apollo Client using the &#8220;traditional&#8221; approach of fetching data on the client you can create a new file called <code>lib/apollo-wrapper.js</code> and put the following content:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-jsx">&quot;use client&quot;;

import {
  ApolloClient,
  ApolloLink,
  HttpLink,
} from &quot;@apollo/client&quot;;
import {
  ApolloNextAppProvider,
  NextSSRInMemoryCache,
  SSRMultipartLink,
} from &quot;@apollo/experimental-nextjs-app-support/ssr&quot;;

function makeClient() {
  const httpLink = new HttpLink({
      // https://studio.apollographql.com/public/spacex-l4uc6p/
      uri: &quot;https://main--spacex-l4uc6p.apollographos.net/graphql&quot;,
  });

  return new NextSSRApolloClient({
    cache: new NextSSRInMemoryCache(),
    link:
      typeof window === &quot;undefined&quot;
        ? ApolloLink.from([
            new SSRMultipartLink({
              stripDefer: true,
            }),
            httpLink,
          ])
        : httpLink,
  });
}

export function ApolloWrapper({ children }: React.PropsWithChildren) {
  return (
    &lt;ApolloNextAppProvider makeClient={makeClient}&gt;
      {children}
    &lt;/ApolloNextAppProvider&gt;
  );
}</code></pre>



<p>This script is more complex from the previous one, so let&#8217;s break it down:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">&quot;use client&quot;;</code></pre>



<p>The <code>&quot;use client&quot;</code> directive tells the Next.js bundler that this file has a Client Component, this enables us to use all the APIs that aren&#8217;t available in Server Components, like <code>useContext</code>, <code>useState</code> and so on.</p>



<p>In our <code>makeClient</code> we create an Apollo Http Link similar to what we did before, but if this is executed in SSR we also combine it with the <code>SSRMultipartLink</code> :</p>



<pre class="wp-block-prismatic-blocks"><code class="language-jsx">  return new NextSSRApolloClient({
    cache: new NextSSRInMemoryCache(),
    link:
      typeof window === &quot;undefined&quot;
        ? ApolloLink.from([
            new SSRMultipartLink({
              stripDefer: true,
            }),
            httpLink,
          ])
        : httpLink,
  });</code></pre>



<p>The <code>SSRMultipartlink</code> with <code>stripDefer: true</code>, will strip all fragments that are marked with the <code>@defer</code> directive from your queries during SSR &#8211; we want to get data out to the browser as fast as possible, and with a cache-policy like <code>cache-first</code> or <code>cache-and-network</code>, you can already get partial data in the browser, while the browser can start to receive the deferred interfaces.&nbsp;</p>



<p>In addition to that, when creating the Apollo Client, we also use the <code>NextSSRInMemoryCache</code>: this cache knows how to store the normalised cache in a way that can be then reused by the <code>ApolloNextAppProvider</code> to restore the cache on the browser side.</p>



<p>Finally we create a new React Component that combines everything like this:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-jsx">export function ApolloWrapper({ children }: React.PropsWithChildren) {
  return (
    &lt;ApolloNextAppProvider makeClient={makeClient}&gt;
      {children}
    &lt;/ApolloNextAppProvider&gt;
  );
}</code></pre>



<p>Then we can use the wrapper like in our components like this:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-jsx">// app/layout.js
import { ApolloWrapper } from &quot;/@lib/apollo-wrapper&quot;;

export default function RootLayout({
  children,
}: {
  children: React.ReactNode,
}) {
  return (
    &lt;html lang=&quot;en&quot;&gt;
      &lt;body&gt;
        &lt;ApolloWrapper&gt;{children}&lt;/ApolloWrapper&gt;
      &lt;/body&gt;
    &lt;/html&gt;
  );
}</code></pre>



<p>Then we can use useSuspenseQuery to fetch our data:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-jsx">&quot;use client&quot;;

export const dynamic = &quot;force-dynamic&quot;;

import { useSuspenseQuery } from &quot;@apollo/experimental-nextjs-app-support/ssr&quot;;

const query = gql`query {
  launchLatest {
    mission_name
  }
}`

export default function PollPage() {
  const { data } = useSuspenseQuery(query);

  return &lt;div&gt;{data.launchLatest.mission_name}&lt;/div&gt;;
};</code></pre>



<p>In this snippet we are creating a new page that will render the latest launch from the <a href="https://studio.apollographql.com/public/spacex-l4uc6p/">SpaceX API</a>, here we are also marking this page as a client component and then using <code>useSuspenseQuery</code> to fetch the query. Finally we are using export const <code>dynamic = &quot;force-dynamic&quot;;</code> to tell <a href="https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic">Next.js not to cache this page</a>, so we don’t get stale data when reloading.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>Note: in bigger applications you’d probably want to use useSuspenseQuery in combination with <a href="https://www.apollographql.com/docs/react/api/react/hooks-experimental">useFragment</a> which which you can try out by installing the latest 3.8 rc with <code>npm i @apollo/client@rc</code> &nbsp;😊</p>
</blockquote>



<p>If you want to learn more about the internals of this library feel free to check out the<a href="https://github.com/apollographql/apollo-client-nextjs/pull/9"> RFC written by Lenz</a>, it contains a lot of details about how it works and potential pitfalls (or areas for future improvements).</p>



<p>I’ve also created a demo that uses both approaches to create a basic application that allows us to answer a poll about GraphQL 😊 The source code for the example is <a href="https://github.com/apollographql/apollo-client-nextjs/tree/main/examples/polls-demo">available here</a>. Feel free to clone the repo and try it locally!</p>



<p>If you have any questions feel free to <a href="https://discord.gg/YBazzh8tGQ">join our discord</a>! We are also <a href="https://discord.gg/graphos?event=1105869286133743656">planning a livestream</a> to talk about this library, show some of the code and answer any questions you might have!</p>



<p>Huge appreciation goes to Lenz for developing this library, and to Dan, Jerel, and Josh for their work in reviewing pull requests and code, making it all possible.</p>


Using Apollo Client with Next.js 13: releasing an official library to support the App Router


<p>We’ve had a busy month at Apollo. Over the last several weeks we’ve released some significant updates to the Apollo stack. Last month we shipped <a href="https://www.apollographql.com/blog/announcement/backend/apollo-federation-2-is-now-generally-available/">Federation 2</a>, a sophisticated and more flexible approach to GraphQL composition. And last week we made <a href="https://www.apollographql.com/blog/announcement/platform/contracts-are-now-generally-available/">Contracts</a> generally available, a way to tailor your graph to specific use cases like mobile development or creating public GraphQL APIs.</p>



<p>Today we’re launching updates to two more components of our stack: the <a href="https://apollographql.com/blog/apollo-router-is-now-generally-available">GA release of Apollo Router</a> – our new high-performance runtime for federated GraphQL APIs – and a <a href="https://apollographql.com/blog/schema-checks-and-launches-are-now-available-for-free-in-apollo-studio/">new cloud-hosted build pipeline</a> for delivering changes to a graph.</p>



<p>We’ve been building these tools together to help teams implement a more advanced GraphQL architecture – one that delivers essential capabilities for operating mission-critical graphs in organizations with many teams, programming languages, and technologies. That architecture is now at the heart of API strategy at companies like Netflix, Walmart, Expedia, Zillow, RetailMeNot, Paypal, Major League Baseball, and many more.&nbsp;</p>



<p>We think it’s time to give this architecture a name, and after talking about it with the developers that have pioneered this approach in their companies, we’re calling it <strong>the supergraph</strong>.</p>



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



<p>The essential ideas of the supergraph are going to be <a href="https://principledgraphql.com/">pretty familiar to those who’ve been following Apollo for a while</a>. It comes down to three core principles.</p>



<h3 class="wp-block-heading"><a href="#1-a-unified-composition-layer" aria-hidden="true" class="aal_anchor" id="1-a-unified-composition-layer"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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: a unified composition layer</h3>



<p>The supergraph is a new way to think about implementing GraphQL that goes far beyond the technical benefits of replacing data fetching and BFF code with schema and queries. It’s a unified network of a company’s data, microservices, and digital capabilities that serves as the “composition layer” for the whole organization.&nbsp;</p>



<p>The supergraph empowers everyone to create richer, more engaging experiences for their users and customers by bringing everything into a single point of collaboration.</p>



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



<p>Supergraph architecture is declarative and modular. Just as React and Kubernetes leverage modularity to scale UI development and service deployment, the supergraph leverages modularity to scale the API layer as it grows beyond a single team.&nbsp;</p>



<p>Apollo Federation has always been about bringing modularity to the API layer – letting you scale a graph without bottlenecking developers on a single monolith or creating a single point of failure.&nbsp;</p>



<p>Of course, Apollo Federation offers a lot of additional advantages along the way: programmable configuration, standardized tooling, analyzable query plans, strict validation at build-time instead of run-time, great support for heterogeneous environments, a structured on-ramp for new developers, and many more.</p>



<h3 class="wp-block-heading"><a href="#3-an-agile-approach" aria-hidden="true" class="aal_anchor" id="3-an-agile-approach"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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: an agile approach</h3>



<p>The supergraph enables an agile bottom-up approach. Traditionally, APIs tend to be fairly static. Because it’s so hard to change an API, the tendency is to waterfall a design that anticipates future requirements. But products change constantly, driven by evolving user requirements and feedback.&nbsp;</p>



<p>The supergraph works harmoniously with rapidly changing products because it empowers developers to ship schema changes swiftly and safely to support their own initiatives, causing the schema to naturally evolve based on actual usage and the needs of the business.</p>



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



<p>We’ve seen case after case of the supergraph architecture – a unified layer, made from modules, continuously evolving – emerging organically at companies we respect and admire. So we’re focused on this idea of the supergraph and our ambition is to help every team have one. Here’s how all that we’ve been building helps with that goal.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1600" height="800" src="https://wp.apollographql.com/wp-content/uploads/2023/05/supergraph-runtime-plane.png" alt="" class="wp-image-20799" srcset="https://wp.apollographql.com/wp-content/uploads/2023/05/supergraph-runtime-plane.png 1600w, https://wp.apollographql.com/wp-content/uploads/2023/05/supergraph-runtime-plane-300x150.png 300w, https://wp.apollographql.com/wp-content/uploads/2023/05/supergraph-runtime-plane-1024x512.png 1024w, https://wp.apollographql.com/wp-content/uploads/2023/05/supergraph-runtime-plane-768x384.png 768w, https://wp.apollographql.com/wp-content/uploads/2023/05/supergraph-runtime-plane-1536x768.png 1536w, https://wp.apollographql.com/wp-content/uploads/2023/05/supergraph-runtime-plane-1200x600.png 1200w" sizes="(max-width: 1600px) 100vw, 1600px" /></figure>



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



<p>Apollo Federation is our open specification for composing subgraphs – modular GraphQL services – together into a single supergraph. Each subgraph is a self-contained component with its own schema and server, so it can be developed, tested, and deployed independently.&nbsp;</p>



<p>Rather than relying on custom code to combine subgraphs, subgraphs reference and extend each other through a principled set of primitives. Thanks to our incredible developer community, Federation supports subgraphs written in over <a href="https://www.apollographql.com/docs/federation/other-servers">20 programming languages</a> and a growing number of GraphQL-native services and products.</p>



<p><a href="https://www.apollographql.com/blog/announcement/backend/apollo-federation-2-is-now-generally-available/">Federation 2</a> builds on what we’ve learned from our community. It adds more complete support for the GraphQL spec including interfaces and new directives which can eliminate much of the boilerplate code that came with Federation 1.&nbsp;</p>



<p>Federation 2 also streamlines cross-team collaboration with a flexible shared ownership model that allows multiple subgraphs to implement overlapping, complementary parts of types and schemas. New governance directives like <code>@inaccessible</code>, <code>@shareable</code>, and <code>@override</code> give teams fine-grained control over the composition process and resulting supergraph schema.</p>



<p>TLDR; Apollo Federation is now more approachable and incrementally adoptable for anyone interested in building a supergraph, and it scales seamlessly all the way into enterprises with thousands of developers collaborating on the largest rapidly-evolving supergraphs. Check out <a href="https://www.apollographql.com/docs/federation/quickstart/setup/">the Federation quickstart</a> to learn more.</p>



<h3 class="wp-block-heading"><a href="#apollo-router-the-runtime" aria-hidden="true" class="aal_anchor" id="apollo-router-the-runtime"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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 Router: the runtime</h3>



<p>So you’ve created a federated schema, but how do you run it? At a minimum, the runtime for a supergraph has to receive client requests, build an execution plan, route requests to the proper subgraphs, assemble the results back together, and return it back to the client. We launched Apollo Gateway — an add-on to Apollo Server — alongside Apollo Federation to serve this purpose, but we quickly realized that we needed to build a more elegant solution that was purpose-built for the task. We decided to call it a <strong>graph router</strong>.</p>



<p>A graph router does far more than a traditional API gateway. Like a relational database, it requires a sophisticated implementation that shields users from unwanted details of execution while still providing a principled way to analyze and control the system when necessary. Critical infrastructure like this is better written in a lower-level systems language that offers a smaller operational footprint, so we opted for Rust instead of Node.js.</p>



<p>At the end of 2021, we released the world’s first and only graph router: Apollo Router. The performance advantages are significant: Apollo Router processes requests with <strong>10x lower latency</strong>, <strong>10x higher throughput</strong>, and <strong>12x lower variance</strong> compared to Apollo Gateway, its JavaScript predecessor. Take a look at the benchmark below to get a sense of how much better it is.</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/2022/05/Frame-3-1-1024x512.png" alt="" class="wp-image-13769" srcset="https://wp.apollographql.com/wp-content/uploads/2022/05/Frame-3-1-1024x512.png 1024w, https://wp.apollographql.com/wp-content/uploads/2022/05/Frame-3-1-300x150.png 300w, https://wp.apollographql.com/wp-content/uploads/2022/05/Frame-3-1-768x384.png 768w, https://wp.apollographql.com/wp-content/uploads/2022/05/Frame-3-1-1536x768.png 1536w, https://wp.apollographql.com/wp-content/uploads/2022/05/Frame-3-1-1200x600.png 1200w, https://wp.apollographql.com/wp-content/uploads/2022/05/Frame-3-1.png 1600w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption class="wp-element-caption">Response latency vs request throughput for Gateway, Router, and direct-to-subgraph</figcaption></figure>



<p>There are other benefits too, like an <a href="https://www.apollographql.com/docs/router/customizations/rhai">extension facility</a> that lets you replace custom gateway code with configuration (this should sound familiar!) and comprehensive support for <a href="https://www.apollographql.com/docs/router/configuration/tracing">OpenTelemetry</a>.</p>



<p>As of today, <a href="https://apollographql.com/blog/apollo-router-is-now-generally-available">Apollo Router is generally available</a>, free for anyone to use. Check out the <a href="https://www.apollographql.com/docs/router/">Router docs</a> to learn more.</p>



<h3 class="wp-block-heading"><a href="#graphos-studio-the-control-plane" aria-hidden="true" class="aal_anchor" id="graphos-studio-the-control-plane"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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 Studio: the control plane</h3>



<p>GraphOS Studio is the final piece of the puzzle for building and operating a supergraph. Its delivery pipeline provides the validation, automation, and observability you need to deliver changes rapidly and safely, making it possible to constantly evolve the supergraph schema, particularly when teams leverage and extend each other’s contributions.</p>



<p><a href="https://www.apollographql.com/docs/studio/schema-checks">Schema Checks</a> and <a href="https://www.apollographql.com/docs/studio/launches">Launches</a> prevent breaking changes before they happen by automatically validating your supergraph schema in development and giving visibility into past and in-progress changes to the supergraph.</p>



<p>Previously only available on our Enterprise plan, <a href="https://apollographql.com/blog/schema-checks-and-launches-are-now-available-for-free-in-apollo-studio/">today we are making Studio’s delivery pipeline available to everyone</a>.</p>



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



<p>We’re excited to get the core components of the supergraph architecture in your hands. We can’t wait to build with you and we are eager to work together on what’s next.</p>


The supergraph: a new way to think about GraphQL

Announcing the Release of Apollo Client 3.0


<p>Our mission is to make Apollo Client the most modern and frictionless state management solution for React developers. As the React community has evolved and pioneered new UI development best practices over time, we’ve ensured that Apollo Client adopts and upholds those practices. In keeping with that tradition,&nbsp;<strong>today we’re thrilled to announce the addition of&nbsp;</strong><a href="https://reactjs.org/docs/hooks-overview.html" target="_blank" rel="noreferrer noopener"><strong>React Hooks</strong></a><strong>&nbsp;to Apollo Client!&nbsp;</strong>🚀</p>



<p><a href="https://reactjs.org/blog/2019/02/06/react-v16.8.0.html" target="_blank" rel="noreferrer noopener">Introduced in React 16.8</a>, Hooks are a new way to write stateful components while avoiding the pitfalls of classes. Apollo Client now includes three hooks that you can drop into your app, anywhere you currently use a corresponding higher-order component or render prop component:&nbsp;<code>useQuery</code>,&nbsp;<code>useMutation</code>, and&nbsp;<code>useSubscription</code>. These hooks are simple to get started with, and they have many advantages over the previous APIs, including bundle size reductions and less boilerplate code.</p>



<p>One of the things we love most about React is that the core team and the community are always striving to improve the React developer experience, and Hooks are a prime example of this. We encourage everyone to start using them!</p>



<h2 class="wp-block-heading" id="e83a"><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>If you’re looking to start a new Apollo project, we recommend installing the following package after you’ve set up your Apollo Client instance:</p>



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



<p>This package exports the&nbsp;<code>ApolloProvider</code>&nbsp;component to connect the client to your React app, just like the old API.</p>



<p>If you already have an Apollo project, you have a couple options depending on how you want to transition to hooks. Read the&nbsp;<a href="https://www.apollographql.com/docs/react/hooks-migration/" target="_blank" rel="noreferrer noopener"><strong>migration guide</strong></a>&nbsp;to learn more about upgrading.</p>



<h2 class="wp-block-heading" id="c931"><a href="#why-hooks-are-the-future-%e2%9a%93%ef%b8%8f" aria-hidden="true" class="aal_anchor" id="why-hooks-are-the-future-%e2%9a%93%ef%b8%8f"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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 Hooks are the future ⚓️</h2>



<p>Apollo Client still supports its higher-order component and render prop APIs, and it will support them for a while. Going forward, we think hooks are the best way to fetch data with Apollo Client. While you don’t need to migrate all of your old components right away, you should adopt hooks for new components. Here’s why:</p>



<h3 class="wp-block-heading" id="c114"><a href="#less-data-management-code" aria-hidden="true" class="aal_anchor" id="less-data-management-code"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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 data management code</h3>



<p>Hooks reduce boilerplate and unnecessary data management code, which leads to smaller components that are easier to reason about. You no longer have to understand how to compose higher-order components or trace complicated render prop logic. Fetching data is as straightforward as calling a single&nbsp;<code>useQuery</code>&nbsp;function:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-jsx">const LAST_LAUNCH = gql`
  query lastLaunch {
    launch {
      id
      timestamp
    }
  }
`;

export function LastLaunch() {
  const { loading, data } = useQuery(LAST_LAUNCH);
  return (
    &lt;div&gt;
      &lt;h1&gt;Last Launch&lt;/h1&gt;
      {loading ? &lt;p&gt;Loading&lt;/p&gt; : &lt;p&gt;Timestamp: {data.launch.timestamp}&lt;/p&gt;}
    &lt;/div&gt;
  );
}</code></pre>



<p>See the&nbsp;<a href="https://github.com/apollographql/fullstack-tutorial" target="_blank" rel="noreferrer noopener">Apollo platform tutorial app</a>&nbsp;for a working example of Apollo Client hooks.</p>



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



<p>When you’re working with multiple mutations in a single component, higher-order components and render props can produce code that is difficult to understand. With the render prop API, the nesting of multiple&nbsp;<code>Mutation</code>&nbsp;components creates a false sense of hierarchy. The new&nbsp;<code>useMutation</code>&nbsp;hook avoids this issue entirely since we’re simply calling a function. The example below demonstrates how multiple mutations and a query can interact with each other, all from within the same component:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-jsx">function Message() {
  const [saveMessage, { loading }] = useMutation(SAVE_MESSAGE);
  const [deleteMessage] = useMutation(DELETE_MESSAGE);
  const { data } = useQuery(GET_MESSAGE);

  return (
    &lt;div&gt;
      &lt;p&gt;
        {loading
          ? &#039;Loading ...&#039;
          : `Message: ${data &amp;&amp; data.message ? data.message.content : &#039;&#039;}`}
      &lt;/p&gt;
      &lt;p&gt;
        &lt;button onClick={() =&gt; saveMessage()}&gt;Save&lt;/button&gt;
        &lt;button onClick={() =&gt; deleteMessage()}&gt;Delete&lt;/button&gt;
      &lt;/p&gt;
    &lt;/div&gt;
  );
}</code></pre>



<p>You can see multiple mutations in action&nbsp;<a href="https://codesandbox.io/s/react-apollo-multiple-mutations-c4h0p" target="_blank" rel="noreferrer noopener">here</a>. This example app also includes a similar component built using render props, which you can compare with the hooks approach.</p>



<h3 class="wp-block-heading" id="e5cf"><a href="#improved-typescript-support" aria-hidden="true" class="aal_anchor" id="improved-typescript-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>Improved TypeScript support</h3>



<p>It’s no secret we’re huge fans of TypeScript at Apollo. Combined with automatic type definitions generated by the Apollo CLI, the new hooks make writing type-safe React components even better than before. Here’s what fetching data with Apollo Client’s&nbsp;<code>useQuery</code>&nbsp;and TypeScript looks like:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-tsx">import { RocketData, RocketVars } from &#039;./types&#039;;

const GET_ROCKET_INVENTORY = gql`
  query getRocketInventory($year: Int!) {
    rocketInventory(year: $year) {
      id
      year
    }
  }
`;

export function RocketInventoryList() {
  const { loading, data } = useQuery&lt;RocketData, RocketVars&gt;(
    GET_ROCKET_INVENTORY,
    { variables: { year: 2019 } }
  );
  return (/* ... show data ... */);
}</code></pre>



<h2 class="wp-block-heading" id="a84e"><a href="#more-improvements-for-react-developers" aria-hidden="true" class="aal_anchor" id="more-improvements-for-react-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>More improvements for React developers</h2>



<p>Although this release focuses on the new&nbsp;<code>useQuery</code>,&nbsp;<code>useMutation</code>, and&nbsp;<code>useSubscription</code>&nbsp;hooks, we have a few other exciting features to highlight:</p>



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



<p>Whereas the&nbsp;<code>react-apollo@2</code>&nbsp;package is&nbsp;<a href="https://bundlephobia.com/result?p=react-apollo@2.5.8" target="_blank" rel="noreferrer noopener">10.6 kB minified + gzipped</a>,&nbsp;<code>react-apollo@3</code>&nbsp;is a mere&nbsp;<a href="https://bundlephobia.com/result?p=react-apollo@3.0.0-beta.4" target="_blank" rel="noreferrer noopener">7.8 kB</a>. What’s more, if you are able to use only the&nbsp;<code>@apollo/react-hooks</code>&nbsp;package, the bundle size drops to just&nbsp;<a href="https://bundlephobia.com/result?p=@apollo/react-hooks@0.1.0-beta.11" target="_blank" rel="noreferrer noopener">5.1 kB</a>, a 50% savings over&nbsp;<code>react-apollo@2</code>.</p>



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



<p>The&nbsp;<code>useQuery</code>&nbsp;hook executes its query as soon as the function is called, which might not always be desirable. Consider a type-ahead input box, for example. You might want to render a component with your search box prepped to receive input, but delay running your search query until the user begins typing. To enable this behavior, use the&nbsp;<code>useLazyQuery</code>&nbsp;hook, which returns a tuple with an&nbsp;<code>execute</code>&nbsp;function in the first position:</p>



<pre class="wp-block-preformatted">const [execute, { loading, data }] = useLazyQuery(GET_INVENTORY);</pre>



<p>The query won’t run until you call the&nbsp;<code>execute</code>&nbsp;function, at which point your component will re-render and the normal&nbsp;<code>useQuery</code>&nbsp;workflow will proceed. Thanks to community member&nbsp;<a href="https://medium.com/u/f6486a471194?source=post_page-----676d116eeae2----------------------" target="_blank" rel="noreferrer noopener">Daniel K.</a>&nbsp;for&nbsp;<a href="https://github.com/apollographql/apollo-feature-requests/issues/119" target="_blank" rel="noreferrer noopener">his ideas</a>&nbsp;on lazy queries!</p>



<h3 class="wp-block-heading" id="a083"><a href="#new-api-docs" aria-hidden="true" class="aal_anchor" id="new-api-docs"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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 API docs</h3>



<p>We’ve updated the&nbsp;<a href="https://www.apollographql.com/docs/react/" target="_blank" rel="noreferrer noopener">docs</a>&nbsp;to emphasize hooks as our recommended path for newcomers to Apollo Client. Nevertheless, our documentation still covers render prop components and the higher-order component. Use the new drop-down menu to select your preferred pattern (coming soon: TypeScript support!):</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="781" height="328" src="https://apollographql.wpengine.com/wp-content/uploads/2020/02/1_9wdVh5bOUWIveMl6ms1fHQ.png" alt="" class="wp-image-52" srcset="https://wp.apollographql.com/wp-content/uploads/2020/02/1_9wdVh5bOUWIveMl6ms1fHQ.png 781w, https://wp.apollographql.com/wp-content/uploads/2020/02/1_9wdVh5bOUWIveMl6ms1fHQ-300x126.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/02/1_9wdVh5bOUWIveMl6ms1fHQ-768x323.png 768w" sizes="(max-width: 781px) 100vw, 781px" /><figcaption>Toggle between hooks, render props, and HOCs from a single code block!</figcaption></figure>



<h2 class="wp-block-heading" id="eac6"><a href="#a-big-thank-you-to-the-community-%e2%9d%a4%ef%b8%8f" aria-hidden="true" class="aal_anchor" id="a-big-thank-you-to-the-community-%e2%9d%a4%ef%b8%8f"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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 big thank you to the community ❤️</h2>



<p>The Apollo community is absolutely amazing, and this release wouldn’t have happened without their help. We owe many thanks to everyone involved in developing the Apollo hooks API, whether they triaged issues, contributed code, got involved in beta testing, improved the docs, or helped answer questions on&nbsp;<a href="https://spectrum.chat/apollo" target="_blank" rel="noreferrer noopener">Spectrum</a>. We’d also like to give&nbsp;<a href="https://medium.com/u/a44eec263a83?source=post_page-----676d116eeae2----------------------" target="_blank" rel="noreferrer noopener">Daniel Trojanowski</a>&nbsp;an extra special shoutout for his tireless efforts on the&nbsp;<code>&lt;a href=&quot;https://github.com/trojanowski/react-apollo-hooks&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;react-apollo-hooks&lt;/a&gt;</code>&nbsp;project, which paved the way for Apollo to officially support a battle-hardened and thoroughly tested hooks API.</p>



<p>To dive in, head over to the&nbsp;<a href="https://www.apollographql.com/docs/react/" target="_blank" rel="noreferrer noopener">updated Apollo Client docs</a>&nbsp;or reach out with any questions in&nbsp;<a href="https://spectrum.chat/apollo" target="_blank" rel="noreferrer noopener">Spectrum</a>. We can’t wait to see what you build with hooks!</p>


Apollo Client, now with React Hooks

What’s new in Apollo Client 2.6


<p>Like many members of the React community, the Apollo team eagerly woke up at 5:00 AM to catch&nbsp;<a href="https://medium.com/u/a3a8af6addc1?source=post_page-----10a82907b48e----------------------" target="_blank" rel="noreferrer noopener">Dan Abramov</a>’s talk on the future of React at&nbsp;<a href="https://www.facebook.com/react/videos/1552821821462886/" target="_blank" rel="noreferrer noopener">JSConf Iceland</a>. With big mugs of coffee in hand, we glued ourselves to our laptops and watched as Dan explained how React async rendering would allow us to adapt our applications to our users’ many devices and networks.</p>



<p>Showcasing two outstanding demos, Dan illustrated some of async React’s new features such as&nbsp;<strong>time slicing</strong>&nbsp;and&nbsp;<strong>suspense</strong>. We couldn’t wait to get our hands dirty with these new features, so we started experimenting with what it would take to make Apollo Client async-ready. Thanks to&nbsp;<a href="https://medium.com/u/fd3d3dea3cd3?source=post_page-----10a82907b48e----------------------" target="_blank" rel="noreferrer noopener">James Baxley III</a>, we shipped a prerelease of React Apollo 3.0 that’s 100% strict mode compliant, which is essential in order for your library to be async compatible.</p>



<p>Read on to learn how we made React Apollo async compatible and built an&nbsp;<a href="https://medium.com/u/6025bd347b9a?source=post_page-----10a82907b48e----------------------" target="_blank" rel="noreferrer noopener">Andrew Clark</a>&nbsp;inspired demo with GraphQL and Apollo! 🚀</p>



<h2 class="wp-block-heading" id="5fe1"><a href="#the-suspense-was-killing-us" aria-hidden="true" class="aal_anchor" id="the-suspense-was-killing-us"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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 suspense was killing us</h2>



<p>Optimizing fetching GraphQL data in your React app is something we’re constantly working on improving. That’s why we were thrilled to learn about React’s latest feature, suspense! Suspense lets you pause rendering a component while it’s loading async data. Here’s a step-by-step breakdown from Andrew about how it works:</p>



<figure class="wp-block-embed-twitter wp-block-embed is-type-rich is-provider-twitter"><div class="wp-block-embed__wrapper">
<blockquote class="twitter-tweet" data-width="550" data-dnt="true"><p lang="en" dir="ltr">Here&#39;s how suspending works:<br><br>&#8211; in the render method, read a value from the cache.<br>&#8211; if the value is already cached, the render continues like normal<br>&#8211; if the value is not already cached, the cache *throws a promise*<br>&#8211; when the promise resolves, React retries where it left off</p>&mdash; Andrew Clark (@acdlite) <a href="https://twitter.com/acdlite/status/969171217356746752?ref_src=twsrc%5Etfw">March 1, 2018</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div></figure>



<p>Let’s look at how Dan implemented data fetching with suspense in the I/O demo from his talk:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="573" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_OEA_ONb7mkwZaZ6j0Ab5pw-1024x573.png" alt="" class="wp-image-1206" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_OEA_ONb7mkwZaZ6j0Ab5pw-1024x573.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_OEA_ONb7mkwZaZ6j0Ab5pw-300x168.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_OEA_ONb7mkwZaZ6j0Ab5pw-768x430.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_OEA_ONb7mkwZaZ6j0Ab5pw-1200x672.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_OEA_ONb7mkwZaZ6j0Ab5pw.png 1400w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption>Fetching data in render! 😮</figcaption></figure>



<p>Under the hood, the&nbsp;<code>createFetcher</code>&nbsp;function uses React’s new cache implementation called&nbsp;<code>&lt;a href=&quot;https://github.com/facebook/react/tree/master/packages/simple-cache-provider&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;simple-cache-provider&lt;/a&gt;</code>&nbsp;in order to suspend the request from within the render method. With React Apollo, we can mimic this functionality by suspending the result of our GraphQL query.</p>



<p>To turn on this feature in our <code>Query</code> component, it’s as easy as passing a new <code>asyncMode</code> prop. No other changes necessary!</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">const MOVIE_QUERY = gql`
  query GetMovie($id: Int!) {
    movie(id: $id) {
      id
      title
      overview
      poster_path
    }
  }
`;
function MovieInfo({ movie, clearActiveResult }) {
  return (
    &lt;Query asyncMode query={MOVIE_QUERY} variables={{ id: movie.id }}&gt;
      {({ data: { movie } }) =&gt; (
        &lt;Fragment&gt;
          &lt;FullPoster movie={movie} /&gt;
          &lt;h2&gt;{movie.title}&lt;/h2&gt;
          &lt;div&gt;{movie.overview}&lt;/div&gt;
        &lt;/Fragment&gt;
      )}
    &lt;/Query&gt;
  );
}</code></pre>



<p>How did we implement&nbsp;<code>asyncMode</code>? The snippet below is from our&nbsp;<code>getQueryResult</code>&nbsp;function inside React Apollo, which is called in the&nbsp;<code>Query</code>&nbsp;component’s render method. If we’re in async mode and we’re loading, which means the request isn’t found in Apollo’s cache, we&nbsp;<strong>throw</strong>&nbsp;the promise that will eventually resolve to the result of our query.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="145" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_7-zxFfhRyPQb6ExUlD4Syw-1024x145.png" alt="" class="wp-image-1205" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_7-zxFfhRyPQb6ExUlD4Syw-1024x145.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_7-zxFfhRyPQb6ExUlD4Syw-300x42.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_7-zxFfhRyPQb6ExUlD4Syw-768x109.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_7-zxFfhRyPQb6ExUlD4Syw-1536x217.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_7-zxFfhRyPQb6ExUlD4Syw-1200x170.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_7-zxFfhRyPQb6ExUlD4Syw.png 1950w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption>Throw promises in the air like you just don’t care! 🙌</figcaption></figure>



<p>Why are we throwing a promise here? 🤔 While this pattern might feel out of your comfort zone the first time you try it, it’s what allows React to suspend rendering until the promise is resolved. This unlocks the ability to handle loading state in a more thoughtful way by bubbling up the pending promise to a parent placeholder component. If the request time exceeds a threshold, the placeholder component can render a fallback UI until the request completes. This feature works similarly to&nbsp;<a href="https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html" target="_blank" rel="noreferrer noopener">error boundaries</a>&nbsp;created with&nbsp;<code>componentDidCatch</code>.</p>



<p>Suspense is also what allows React to pause low-priority updates like data fetching while continuing to render high-priority updates like entering text into a search input. Once the promise eventually resolves with our GraphQL result, React will continue rendering where it left off. You can think of pausing and resuming rendering as creating a branch and rebasing that branch onto master, as Dan eloquently explained in his talk.</p>



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



<p>Once we shipped a prerelease of async React Apollo, we couldn’t wait to give it a spin in an example app. Luckily, wrapping REST endpoints with a&nbsp;<a href="https://github.com/apollographql/movie-database-graphql" target="_blank" rel="noreferrer noopener">GraphQL server</a>&nbsp;is our specialty, and with the power of GraphQL-specific caching built into&nbsp;<a href="https://www.apollographql.com/engine" target="_blank" rel="noreferrer noopener">Apollo Engine</a>, the app is blazing fast!</p>



<p>If you’d like to skip to the code, you can check out our example below on CodeSandbox. Warning: the React API that powers deferred state updates is unstable, so proceed with caution!</p>



<p>Aside from setting the&nbsp;<code>asyncMode</code>&nbsp;flag on your&nbsp;<code>Query</code>&nbsp;component, you’ll notice not much has changed with how you build Apollo apps in an async React world vs. how you build them today. We want to help you take advantage of all the cool features async React has to offer without making you rewrite your entire application. Our goal is to bring you the best developer experience possible by empowering you to easily build performant, fluid applications with React and GraphQL.</p>



<h2 class="wp-block-heading" id="0993"><a href="#whats-next-%f0%9f%9a%80" aria-hidden="true" class="aal_anchor" id="whats-next-%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>What’s next 🚀</h2>



<p>Our work isn’t done yet. We’re just scratching the surface of all the creative ways async rendering will enable us to build better user experiences with React and GraphQL.</p>



<p>One new feature we’re super excited to explore further is the&nbsp;<code>&lt;a href=&quot;https://github.com/facebook/react/tree/master/packages/simple-cache-provider&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;simple-cache-provider&lt;/a&gt;</code>. We think it will inspire new ways of thinking about the Apollo Client cache and future developments to help improve performance. We’re especially interested in testing out the&nbsp;<code>&lt;a href=&quot;https://github.com/facebook/react/tree/master/packages/simple-cache-provider&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;simple-cache-provider&lt;/a&gt;</code>&nbsp;low-level APIs that Dan mentioned in his talk. It’s possible that we could eventually hook into these APIs to normalize your GraphQL result before React’s commit phase.</p>



<p>If you’d like to give async React Apollo a spin,&nbsp;<code>npm i react-apollo@canary</code>&nbsp;and make sure to show us what you’ve built. The API is highly likely to change, especially as the React team starts to refine async APIs, so please don’t use it in production. That being said, we’d love to hear what you think and can’t wait to see how React Apollo 3.0 evolves.</p>



<hr class="wp-block-separator"/>



<p>A special thanks to the React team for their feedback on our post and for giving us early access to some of the new features! 👏 We look forward to collaborating further to ensure that all Apollo apps can fully benefit from all of async React’s exciting new features. If you are interested in helping us integrate Apollo with async React, come join us on Apollo Slack!</p>


A first look at Async React + Apollo


<p>Recently, there have been a lot of exciting developments happening in the GraphQL client space. Some of these new clients, such as&nbsp;<a href="https://github.com/FormidableLabs/urql" target="_blank" rel="noreferrer noopener">urql</a>&nbsp;and&nbsp;<a href="https://github.com/arackaf/micro-graphql-react" target="_blank" rel="noreferrer noopener">micro-graphql-react</a>, were partially born from the idea that Apollo should be easier to get started with, especially for beginners. We’ve taken this constructive feedback to heart — that&#8217;s why today, we’re announcing&nbsp;<code>&lt;a href=&quot;https://github.com/apollographql/apollo-client/tree/master/packages/apollo-boost&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;apollo-boost&lt;/a&gt;</code>, an easy-to-use booster kit for Apollo Client with our recommended configuration. 🚀 We’re really hyped about making GraphQL easier to learn with Apollo Boost and can’t wait to hear what you all think!</p>



<p>As of today, here’s how simple it is to get started with Apollo Client:</p>



<pre class="wp-block-preformatted">import ApolloClient from 'apollo-boost';const client = new ApolloClient();</pre>



<p>The longer you work on an open source project, the tougher it is to put yourselves in the shoes of someone who’s discovering the project for the first time.&nbsp;As library authors, we want to work harder at this. Our main goal is to make GraphQL more approachable and powerful for everyone. For us, building Apollo Boost was an awesome chance for us to focus on empathy, and we’re really happy with the outcome. 🤗</p>



<p>I encourage all of you to take a step back and practice empathy building your software too. At the same time, continue to provide valuable feedback toward the open source projects you love.</p>



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



<p>From the beginning, the Apollo team has always strived to design tools that were simple to get started with, so you could send your first query right away. While Apollo Client 2.0’s modular architecture unlocked new possibilities for experienced users to customize their cache and network stack, it also deviated somewhat from our original goal of simplicity. First impressions are everything, and it’s important to us that beginners feel comfortable working with GraphQL. That’s why we’re returning back to our roots with&nbsp;<code>apollo-boost</code>!</p>



<p>If you’ve been with us since the 1.0 days, you’ll notice that the&nbsp;<code>ApolloClient</code>&nbsp;exported from&nbsp;<code>apollo-boost</code>&nbsp;looks familiar. With Apollo Boost, you no longer have to manually connect your cache and network stack to the client. We’ve already set up&nbsp;<code>InMemoryCache</code>&nbsp;and&nbsp;<code>HttpLink</code>&nbsp;for you by default. No heavy lifting required. 💪</p>



<h2 class="wp-block-heading" id="ea96"><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>Creating a client with Apollo Boost requires zero config to get started. We’ve included some packages that we think are essential for building an Apollo app, like&nbsp;<code>apollo-link-error</code>&nbsp;and&nbsp;<code>apollo-link-state</code>. You can activate these features by specifying a few options on the&nbsp;<code>ApolloClient</code>&nbsp;constructor and we’ll set them up for you behind the scenes.</p>



<p>Let’s dive in! First, you’ll want to install the following packages. We’re going to install the new&nbsp;<a href="https://dev-blog.apollodata.com/whats-next-for-react-apollo-4d41ba12c2cb" target="_blank" rel="noreferrer noopener">React Apollo 2.1 beta</a>&nbsp;so we can take advantage of Query components.</p>



<pre class="wp-block-preformatted">npm i apollo-boost react-apollo@beta graphql -S</pre>



<p>Next, create your client and hook it up to your app by passing it to the <code>ApolloProvider</code> exported from <code>react-apollo</code>.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">import React from &#039;react&#039;;
import { render } from &#039;react-dom&#039;;
import ApolloClient from &#039;apollo-boost&#039;;
import { ApolloProvider } from &#039;react-apollo&#039;;

// Pass your GraphQL endpoint to uri
const client = new ApolloClient({
  uri: &#039;https://nx9zvp49q7.lp.gql.zone/graphql&#039;
});

const ApolloApp = () =&gt; (
  &lt;ApolloProvider client={client}&gt;
    &lt;App /&gt;
  &lt;/ApolloProvider&gt;
);

render(ApolloApp, document.getElementById(&#039;root&#039;));</code></pre>



<p>Now that our app is up and running, let’s make our first query:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">import React from &#039;react&#039;;
import { gql } from &#039;apollo-boost&#039;;
import { Query } from &#039;react-apollo&#039;;
 
const GET_DOG = gql`
  query {
    dog(breed: &quot;bulldog&quot;) {
      id
      displayImage
    }
  }
`

export const App = () =&gt; (
  &lt;Query query={GET_DOG}&gt;
    {({ loading, error, data }) =&gt; {
      if (loading) return &lt;div&gt;Loading...&lt;/div&gt;;
      if (error) return &lt;div&gt;Error :(&lt;/div&gt;;
 
      return &lt;img src={data.dog.displayImage} /&gt;
    }}
  &lt;/Query&gt;
)</code></pre>



<p>That’s it! If you need more customization, there are only six optional config properties you can pass to the Apollo Boost client:</p>



<ul class="wp-block-list"><li><code>uri</code>: Your GraphQL endpoint (defaults to&nbsp;<code>/graphql</code>)</li><li><code>fetchOptions</code>: Static fetch options for every request</li><li><code>request</code>: A function called every request that receives the operation. Here, you can implement authentication easily by dynamically setting headers on the context.</li><li><code>onError</code>: An error handler function (our default logs out errors for you)</li><li><code>clientState</code>: Your local state config for&nbsp;<code>&lt;a href=&quot;https://www.apollographql.com/docs/link/links/state.html&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;apollo-link-state&lt;/a&gt;</code></li><li><code>cacheRedirects</code>: Functions for redirecting queries to another entry in the cache (previously called cache resolvers)</li></ul>



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



<p>If you’re looking to integrate custom links into your Apollo Link stack that aren’t already included in Apollo Boost, migration is simple. Apollo Boost exports some of the building blocks of Apollo Client, like <code>HttpLink</code> and <code>InMemoryCache</code>, for you so you don’t have to reinstall all of the individual packages. In the future, we’d love to have an eject feature that writes your client setup for you automatically.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">import { ApolloClient } from &#039;apollo-client&#039;;
import { HttpLink, InMemoryCache, ApolloLink } from &#039;apollo-boost&#039;;

const client = new ApolloClient({
  link: ApolloLink.from([ myCustomLink, new HttpLink() ]),
  cache: new InMemoryCache()
});</code></pre>



<h2 class="wp-block-heading" id="96d2"><a href="#%f0%9f%94%a5-new-%f0%9f%94%a5" aria-hidden="true" class="aal_anchor" id="%f0%9f%94%a5-new-%f0%9f%94%a5"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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 🔥</h2>



<p>In addition to Apollo Boost, we’ve also made some improvements to the docs, along with a new example app on CodeSandbox.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="861" height="1024" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_wkzOCXWu_aSvEhhMtZudHA-861x1024.png" alt="" class="wp-image-856" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_wkzOCXWu_aSvEhhMtZudHA-861x1024.png 861w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_wkzOCXWu_aSvEhhMtZudHA-252x300.png 252w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_wkzOCXWu_aSvEhhMtZudHA-768x913.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_wkzOCXWu_aSvEhhMtZudHA-1291x1536.png 1291w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_wkzOCXWu_aSvEhhMtZudHA-1200x1427.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_wkzOCXWu_aSvEhhMtZudHA.png 1320w" sizes="(max-width: 861px) 100vw, 861px" /><figcaption>Choose your favorite pup!</figcaption></figure>



<ul class="wp-block-list"><li><a href="https://codesandbox.io/s/r5qp83z0yq" target="_blank" rel="noreferrer noopener"><strong>Pupstagram</strong></a><strong>:</strong>&nbsp;Our new example app 🐶 (aka what I wish my Instagram feed was). It features Apollo Boost, local state management with&nbsp;<code>apollo-link-state</code>, and more! For the GraphQL server, check out our&nbsp;<a href="https://launchpad.graphql.com/nx9zvp49q7" target="_blank" rel="noreferrer noopener">Launchpad</a>.</li><li><a href="https://www.apollographql.com/docs/react/essentials/get-started.html" target="_blank" rel="noreferrer noopener"><strong>Quick Start</strong></a><strong>:</strong>&nbsp;Go from zero to your first queries &amp; mutations in less than 10 minutes with Apollo Boost.</li><li><a href="https://www.apollographql.com/docs/react/why-apollo.html" target="_blank" rel="noreferrer noopener"><strong>Why Apollo</strong></a><strong>:</strong>&nbsp;Wondering why we normalize our cache? Need a document to convince your team to switch to Apollo Client? It’s all right here.</li></ul>



<hr class="wp-block-separator"/>



<p>With the release of Apollo Boost, we’ve sunset the&nbsp;<code>apollo-client-preset</code>&nbsp;proof of concept which served as inspiration. For backwards compatibility, everything that was included in the old preset is included in&nbsp;<code>apollo-boost</code>. Simply change your import and you should be good to go! Thanks to everyone who helped test out&nbsp;<code>apollo-client-preset</code>.</p>



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



<p>Apollo Boost was largely inspired by the simplicity of&nbsp;<a href="https://formidable.com/blog/2018/introducing-urql/" target="_blank" rel="noreferrer noopener">urql</a>, the newest GraphQL client on the block. We’d like to give a big thank you to&nbsp;<a href="https://medium.com/u/e50c25098d37?source=post_page-----27b1f1b3c2c3----------------------" target="_blank" rel="noreferrer noopener">Ken Wheeler</a>&nbsp;and the team at Formidable Labs for challenging us to rethink how we could improve the developer experience for our users. We’re grateful for the opportunity to learn from your work.</p>



<p>It’s super exciting to see newcomers popping up in the GraphQL ecosystem because we all get to build upon each other’s successes. I firmly believe that competition is healthy for open source projects to keep innovating. As long as more developers are getting hyped about GraphQL and how it can improve their team’s productivity, we welcome anyone entering the space.</p>



<p>Finally, we’d also like to thank all of you! Our team loves hearing honest feedback from the community, whether it’s positive or constructive. If you have any ideas on how we can make your experience with Apollo better, just drop us a message on Twitter or Slack.</p>


Community

Apollo Kotlin 4 is now available

What’s new in Apollo Client 3.10

What’s new in Apollo Client 3.9

Wait for it… Announcing Apollo Client 3.8 with React Suspense Integration

Using Apollo Client with Next.js 13: releasing an official library to support the App Router

The supergraph: a new way to think about GraphQL

Announcing the Release of Apollo Client 3.0

Past posts

Apollo Client, now with React Hooks

What’s new in Apollo Client 2.6

A first look at Async React + Apollo

Zero-config GraphQL state management

Community

Apollo Kotlin 4 is now available

What’s new in Apollo Client 3.10

What’s new in Apollo Client 3.9

Wait for it… Announcing Apollo Client 3.8 with React Suspense Integration

Using Apollo Client with Next.js 13: releasing an official library to support the App Router

The supergraph: a new way to think about GraphQL

Announcing the Release of Apollo Client 3.0

Past posts

Apollo Client, now with React Hooks

What’s new in Apollo Client 2.6

A first look at Async React + Apollo

Zero-config GraphQL state management

Stay in our orbit