Enhance customer experiences with Apollo GraphOS


<p>Nullability is a fundamental concept in many programming languages giving us the ability to express the absence of a value or assigned object. This is particularly relevant in strongly typed languages where each constant or variable must be defined with one of the language data types or explicitly allowed to be null.</p>



<p>GraphQL is strongly-typed and all fields are, by default, nullable with <code>null</code> being a valid response for any field unless explicitly declared otherwise. In GraphQL syntax a trailing exclamation mark is used to denote a field that uses a <a href="https://spec.graphql.org/draft/#sec-Non-Null">Non-Null</a> type, like this:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-swift">{
  nullableField: String
  nonNullableField: String!
}</code></pre>



<p>Strong typing is also one of the defining characteristics of Swift where the use of the <a href="https://developer.apple.com/documentation/swift/optional"><code>Optional</code></a> type ensures that nullable (<code>nil</code>) values are handled explicitly. Swift default type behavior is the opposite of GraphQL, though, and types are defined as non-null unless explicitly declared otherwise. The question mark on a type declaration indicates that the value it contains is optional (nullable), like this:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-swift">let nonOptionalValue: String
let optionalValue: String?</code></pre>



<p><em><strong>Note: </strong>GraphQL has <a href="https://spec.graphql.org/draft/#sec-Non-Null.Nullable-vs-Optional">concepts</a> of both Nullable and Optional, and there is semantic overlap with the Swift <code>&lt;a href=&quot;https://developer.apple.com/documentation/swift/optional&quot;&gt;Optional&lt;/a&gt;</code> type. It is worth taking the time to understand each to avoid confusion.</em></p>



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



<p>In the section above, we showed how nullability is an integral part of both languages. Let’s explore how nullability is used in the Swift code generated by Apollo iOS.</p>



<p>During code generation when a GraphQL field type is defined as nullable, Apollo iOS will translate that into a Swift <code>Optional</code> type, allowing the generated model to receive <code>null</code> as a valid response for that field.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-swift">type Query {
  allAnimals: [Animal]
}

interface Animal {
  species: String # &lt;- nullable
}

type Predator implements Animal {
  species: String # &lt;- nullable
}

type Pet implements Animal {
  species: String # &lt;- nullable
  name: String # &lt;- nullable
}</code></pre>



<pre class="wp-block-prismatic-blocks"><code class="language-swift">query AllAnimals {
  allAnimals {
    species
  }
}</code></pre>



<pre class="wp-block-prismatic-blocks"><code class="language-swift">class AllAnimalsQuery: GraphQLQuery {
  struct Data: SelectionSet {
    struct AllAnimal: SelectionSet {
      var species: String? { get } // &lt;- optional
    }
  }
}</code></pre>



<p><em><strong>Note: </strong>There are cases where non-nullable fields will be generated as nullable by using the <code>@include</code> or <code>@skip</code> directives. In these cases, the field can be returned as <code>null</code> and therefore a Swift <code>Optional</code> type is needed.</em></p>



<p>If you’ve used Apollo iOS to generate Swift code before you might have noticed that some fragment accessors are generated as optional too. This is because the fragment’s fields might not be returned in the response depending on the object’s type.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-swift">query AllAnimals {
  allAnimals {
    species
    ... on Pet {
      ...PetDetails
    }
  }
}

fragment PetDetails on Pet {
  name
}</code></pre>



<pre class="wp-block-prismatic-blocks"><code class="language-swift">class AllAnimalsQuery: GraphQLQuery {
  struct Data: SelectionSet {
    struct AllAnimal: SelectionSet {
      var species: String? { get } // &lt;- optional
      var asPet?: AsPet { _asInlineFragment() } // &lt;- optional
      
      struct AsPet: InlineFragment {
        var name: String? { get } // &lt;- optional
      }
    }
  }
}</code></pre>



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



<p>So far we’ve explored nullability in GraphQL and Swift, but we still haven’t encountered the <code>GraphQLNullable</code> type yet. Looking at the way nullable types are defined in both languages it is reasonable to assume that they can be expressed in the same way, albeit with slightly different syntax. However, that’s not true.</p>



<p>A Swift <code>Optional</code> either has a value, which must be unwrapped, or there is no value. Similarly, GraphQL types either have a value or there is no value but, most importantly, <a href="https://spec.graphql.org/draft/#sec-Null-Value">null</a> values have two semantically different ways to represent the lack of a value: <em>explicitly</em> by providing the literal value: <code>null</code>; <em>implicitly</em> by not providing a value at all. Trying to reconcile this difference is where <code>GraphQLNullable</code> is required.</p>



<p>n the same way that Swift’s <code>Optional</code> type is an enum, <code>GraphQLNullable</code> is also a Swift <code>enum</code> providing the <code>some</code> and <code>none</code> cases but additionally the third possible case allowed by GraphQL &#8211; <code>null</code>.</p>



<ul class="wp-block-list">
<li><code>some</code> represents the presence of a value</li>



<li><code>none</code> represents the <em>implicit</em> absence of a value, aka <code>nil</code></li>



<li><code>null</code> represents an <em>explicitly</em> null value</li>
</ul>



<p><code>GraphQLNullable</code> is not needed in the generated response models though because whether a GraphQL response contains <code>null</code> for a field or the field is not present, both are represented in the generated response as a Swift optional. The only time a field is allowed to be missing from a GraphQL response is as a result of the <code>@include</code>, <code>@skip</code> or <code>@defer</code> directives. Any other time a field is missing would indicate a partial response due to a <a href="https://spec.graphql.org/draft/#sec-Errors.Field-Errors">field error</a>.</p>



<p>It is only on input types where the subtle <a href="https://spec.graphql.org/draft/#sec-Null-Value">difference</a> between <code>nil</code> and <code>null</code> becomes important. In a mutation or input variable, an explicit <code>null</code> value could be taken to represent the deletion of a field, whereas the absence of an explicit value (i.e.: <code>nil</code>) could be taken to imply no change to the field. Unfortunately, some GraphQL server implementations simply treat them the same, and many developers who use GraphQL are unaware of the difference. This is also in contrast to type-safe languages which cannot discern the difference between explicit or implicit <code>nil</code>.</p>



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



<p>Apollo iOS is a general-purpose GraphQL client and must comply with the full <a href="https://spec.graphql.org/">GraphQL specification</a>. We needed to make it clear that there is a difference, and you should be explicit in what you want. Therefore, the design of <code>GraphQLNullable</code> forces the user to select a case that signals their intent without question.</p>



<p><code>GraphQLNullable</code> was introduced with the major <code>1.0</code> release and is, without doubt, an improvement over the previous syntax of double-optional. Developers were often confused by this syntax where an inner optional with a value of <code>nil</code> combined with an outer optional value of <code>some</code> would mean the GraphQL value <code>null</code>, while an outmost optional of <code>nil</code> would mean the absence of a value, aka. <code>nil</code>. We received plenty of questions about why values were doubly wrapped in optional and it would often lead to easy mistakes in using <code>nil</code> when you actually wanted <code>null</code> but the compiler could never know what your intent was.</p>



<p>The change to <code>GraphQLNullable</code> hasn’t been without friction, though, and most of the feedback we have received is from developers who say they do not need to be concerned with the difference between <code>nil</code> and <code>null</code>. We believe in the value of being explicit, but it does make the usage of these fields more cumbersome because of having to use the verbose syntax of <code>.some()</code> or <code>GraphQLNullable()</code>, especially when combined with another <code>enum</code> type such as <code>GraphQLEnum</code>.</p>



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



<p>Consider the following definitions:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-swift">struct Filter {
  let species: String
  let name: String? = nil
  let predator: Bool
}

var filter: GraphQLNullable&lt;Filter&gt;

// Implicitly stating the absence of a value, aka nil.
filter = .none 

// Explicitly stating a null value
filter = .null

// Stating the presence of a value
filter = .some(.init(
  species: &quot;Canine&quot;, 
  predator: false
))</code></pre>



<p>As you can see above, the <code>none</code> and <code>null</code> cases are easy enough to use and clear in their semantics, whereas having to wrap values in <code>some</code> is awkward and less clear to someone reading the code who may be unfamiliar with <code>GraphQLNullable</code>.</p>



<p>For additional convenience, you&#8217;ll find that <code>GraphQLNullable</code> conforms to Swift’s <code>ExpressibleBy</code> protocols that match GraphQL&#8217;s scalar types, such as <code>ExpressibleByStringLiteral</code>, <code>ExpressibleByIntegerLiteral</code>, etc. So if your <code>GraphQLNullable</code> property is wrapping a GraphQL scalar type, then initialization can be done as follows:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-swift">let aString: GraphQLNullable&lt;String&gt; = &quot;value&quot;
let aBool: GraphQLNullable&lt;Bool&gt; = true
let aInt: GraphQLNullable&lt;Int&gt; = 123
let aDouble: GraphQLNullable&lt;Double&gt; = 1.1</code></pre>



<p><code>GraphQLNullable</code> also has a convenient nil coalescing operator useful in cases where the value being evaluated is optional itself:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-swift">let species: GraphQLNullable = optionalValue ?? .null</code></pre>



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



<p>Despite the conveniences, we’ve seen that the <code>some</code> case is still awkward to use. For those who aren’t concerned about the semantic difference of <code>nil</code> and <code>null</code> there have been suggestions from the community for an extension on <code>GraphQLNullable</code> that can help with the initialization of nullable values.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-swift">extension GraphQLNullable {
  init(optionalValue value: Wrapped?) {
    if let value {
      self = .some(value)
    } else {
      self = .none // &lt;- change this to .null if your server requires
    }
  }
}</code></pre>



<p><em><strong>Note: </strong>We choose not to provide this extension by default in Apollo iOS because the decision to return <code>.none</code> vs. <code>.null</code> is going to be specific to how your connecting GraphQL server interprets nullable values. You should take the time to fully understand the impact of this extension and what the resultant input field value is signaling to your server.</em></p>



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



<p>GraphQL and Swift are a good fit. They are both strongly typed and have nullability built-in. Their syntax is quite similar even if the defaults are different and the details of handling <code>null</code> vs <code>nil</code> can get complicated for input values.</p>



<p>I hope this article cleared up some of the confusion around <code>GraphQLNullable</code> and provided you with some insight into its design.</p>



<p>We welcome your feedback, and please don’t hesitate to reach out on <a href="https://github.com/apollographql/apollo-ios">GitHub</a>, the <a href="https://community.apollographql.com/tag/mobile">Apollo Community</a>, or the <a href="https://discord.gg/graphos">Apollo Discord</a> server.</p>


GraphQLNullable is not a trap!


<p>Efficient React apps are selective in their re-rendering, using a variety of techniques (such as&nbsp;<a href="https://react.dev/reference/react/memo"><strong><code>memo</code></strong></a>) to&nbsp;<em>skip</em>&nbsp;re-rendering unchanged components. With the beta release of Apollo Client 3.8, we’re excited to spotlight a couple of&nbsp;<em>new</em>&nbsp;techniques to help you re-render exactly the components that you need to:</p>



<ul class="wp-block-list">
<li><strong>The&nbsp;<a href="https://www.apollographql.com/docs/react/data/directives/#nonreactive"><code>@nonreactive</code>&nbsp;directive</a>:</strong>&nbsp;mark GraphQL query fields and fragments that&nbsp;<em>shouldn’t</em>&nbsp;trigger a re-render if their cached value changes.</li>



<li><strong>The&nbsp;</strong><a href="https://www.apollographql.com/docs/react/api/react/hooks-experimental/#usefragment"><strong><code>useFragment</code>&nbsp;hook</strong></a><strong>:</strong>&nbsp;create a live binding into the Apollo Client cache for a GraphQL fragment. This allows Apollo Client to broadcast specific fragment results to individual React components so child components can re-render&nbsp;<em>without</em> needing to re-render the parent.</li>
</ul>



<p>Let’s look at how we can use these (both individually and in combination) to keep our app snappy!</p>



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



<p>You might have found yourself reaching for&nbsp;<code>memo</code>&nbsp;while building an app with Apollo Client that renders a&nbsp;<strong>list</strong>. Consider the following example:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">const UserFragment = gql`
  fragment UserFragment on User {
    name
  }
`;

const ALL_USERS = gql`
  query AllUsers {
    users {
      id
      ...UserFragment
    }
  }
`;

function UserComponent({ user }) {
  return &lt;li&gt;{user.name}&lt;/li&gt;;
};

function UserList() {
  const { data } = useQuery(ALL_USERS);
  return (
    &lt;ul&gt;
      {data?.users.map((user) =&gt; (
        &lt;UserComponent key={user.id} user={user} /&gt;
      ))}
    &lt;/ul&gt;
  );
};

const client = new ApolloClient({
  link,
  cache: new InMemoryCache({
    fragments: createFragmentRegistry(gql`
      ${UserFragment}
    `),
  }),
});

const container = document.getElementById(&quot;root&quot;);
const root = createRoot(container);

root.render(
  &lt;ApolloProvider client={client}&gt;
    &lt;UserList /&gt;
  &lt;/ApolloProvider&gt;
);</code></pre>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>By registering our&nbsp;<code>UserFragment</code>&nbsp;with Apollo Client’s&nbsp;<code>InMemoryCache</code>&nbsp;via&nbsp;<code>&lt;a href=&quot;https://www.apollographql.com/docs/react/data/fragments/#registering-named-fragments-using-createfragmentregistry&quot;&gt;createFragmentRegistry&lt;/a&gt;</code>, we can reference it by name inside our queries (as we do here with the&nbsp;<code>...UserFragment</code>&nbsp;spread in&nbsp;<code>ALL_USERS</code>) without interpolating it directly.</p>
</blockquote>



<p>In this example, the&nbsp;<code>UserList</code>&nbsp;component fetches a list of users with Apollo Client’s&nbsp;<code>useQuery</code>&nbsp;hook, then maps over the result to render a&nbsp;<code>UserComponent</code>&nbsp;for each user in the list.</p>



<p>But what happens when a user record is updated in the Apollo Client cache? Because these cached fields are watched by our&nbsp;<code>useQuery</code>&nbsp;invocation, the hook re-runs. This re-renders&nbsp;<code>UserList</code>&nbsp;with the latest values, which in turn recursively re-renders every child component (<em>by default</em>). In other words, if a&nbsp;<em>single user</em>&nbsp;in our list is updated, the vast majority of our&nbsp;<code>UserComponent</code>s will re-render even though they haven’t changed!</p>



<p>These unnecessary renders often go unnoticed by end users (and sometimes developers), but recursively re-running application and library code can add up to cause noticeable dips in performance.</p>



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



<p>The React docs provide excellent guidance for this question in the deep dive section&nbsp;<a href="https://react.dev/reference/react/memo#should-you-add-memo-everywhere">“Should you add memo everywhere?”</a>&nbsp;Like many optimizations,&nbsp;<code>memo</code>&nbsp;has a cost: the additional step of comparing old and new props on every render. Although that cost is often outweighed by the benefits, it’s still a cost you should consider.</p>



<p>I encourage you to read that section in its entirety, but here are two criteria from it that can help us determine whether we should optimize with&nbsp;<code>memo</code>&nbsp;(emphasis mine):</p>



<ul class="wp-block-list">
<li>Does our component&nbsp;<strong>re-render often</strong>&nbsp;with&nbsp;<strong>the same exact props</strong>?</li>



<li>And is its&nbsp;<strong>re-rendering logic expensive,&nbsp;</strong>causing&nbsp;<strong>perceptible lag&nbsp;</strong>when it re-renders?</li>
</ul>



<p>Let’s take a look at an example that extends the&nbsp;<code>UserList</code>&nbsp;code above.</p>



<p>When editing a single user and writing to Apollo Client’s&nbsp;<code>InMemoryCache</code>&nbsp;on every keystroke, we see that the parent component re-renders, along with&nbsp;<em>all</em>&nbsp;of the 2,000&nbsp;<code>UserComponents</code>&nbsp;in our list. Typing in the input feels sluggish 🐌</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="636" height="516" src="https://wp.apollographql.com/wp-content/uploads/2023/06/CleanShot-2023-06-01-at-11.50.43.gif" alt="" class="wp-image-21269"/></figure>



<p>Of course, this is a contrived example: there are other ways we might write this code in a real app to work around the problem: using&nbsp;<a href="https://www.apollographql.com/docs/react/pagination/overview/">pagination</a>, debouncing cache writes so we aren’t updating the user list on every keystroke, or writing to the cache only after the user presses “Done editing”.</p>



<p>But there are reasons we shouldn’t be satisfied with these “fixes”. First, although rendering fewer users and/or performing fewer cache writes would improve perceived performance, we’d still be re-rendering&nbsp;<strong>parent</strong>&nbsp;and&nbsp;<strong>child</strong>&nbsp;components unnecessarily every time a user updates. Reducing the number of renders is a good place to start, but the dynamic nature of lists—iterating over N users, where N is usually known only at runtime—can make this tricky.</p>



<p>Maybe at first we don’t think we’re handling enough data to really&nbsp;<em>need</em>&nbsp;pagination, only to later notice performance has degraded when our&nbsp;<code>ALL_USERS</code>&nbsp;query returns more users than expected (been there 🙋🏻‍♀️). Or maybe our&nbsp;<code>UserComponent</code> starts out with a simple implementation that does minimal work on each render, but as our app grows it either becomes more complex&nbsp;<em>or</em>&nbsp;renders more complex children of its own.</p>



<p>I hope by now I’ve convinced you this is a problem worth solving! But is&nbsp;<code>memo</code>&nbsp;the answer?</p>



<p>Using the criteria from the React docs, our&nbsp;<code>UserComponent</code>&nbsp;<strong>is a good candidate for memoization</strong>: all other users in the list are re-rendering with the same exact props ✅, and each component is simulating expensive rendering logic, causing the DOM to perceptibly lag when applying updates to 2,000+ nodes on every keystroke ✅.</p>



<p>Sure enough, after wrapping&nbsp;<code>UserComponent</code>&nbsp;in&nbsp;<code>memo</code>, we can see the lag disappear:</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="636" height="516" src="https://wp.apollographql.com/wp-content/uploads/2023/06/CleanShot-2023-06-01-at-11.51.40.gif" alt="" class="wp-image-21271"/></figure>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>Fun fact: even though&nbsp;<a href="https://react.dev/reference/react/memo#my-component-rerenders-when-a-prop-is-an-object-or-array">objects, arrays and functions normally need to be memoized/cached when passing them as props</a>&nbsp;to memoized React components (so they pass React’s&nbsp;<code>Object.is</code>&nbsp;same value equality check when determining whether the child needs to re-render), we don’t have to memoize the user objects we’re passing into our&nbsp;<code>UserComponent</code>s. This is because Apollo Client’s normalized cache has already done the work to ensure the user objects we get from the cache are referentially stable 🎉</p>
</blockquote>



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



<p>The lag is gone, but our work isn’t done. Notice that the&nbsp;<em>parent component is still re-rendering on every keystroke</em>, because our&nbsp;<code>useQuery</code>&nbsp;call is watching for changes on all&nbsp;<code>users</code>.&nbsp;<strong>We’re still re-rendering the parent, but now React is able to skip re-rendering all unchanged child components.</strong></p>



<p>Re-rendering the parent has its own drawbacks: in a larger application, we’d also have to remember to wrap every other child of&nbsp;<code>UserList</code>&nbsp;in&nbsp;<code>memo</code>&nbsp;when needed (see the criteria above, rinse and repeat). And&nbsp;<code>memo</code>&#8216;s comparison of all of those props still comes with a cost—one we’d like to avoid altogether.</p>



<p>Our Apollo Client team saw an opportunity here. We wondered: what if a parent component could ignore updates to certain fields on the selection set it’s watching in the cache? And what if each child component could react to updates for a single cache entity,&nbsp;<em>without</em>&nbsp;being prompted to re-render by its parent?</p>



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



<p>Together, this new directive and hook unlock a pattern for rendering lists that selectively re-render individual list items by default—<strong>no&nbsp;<code>memo</code>&nbsp;required</strong>.</p>



<p>You can apply the&nbsp;<code>@nonreactive</code>&nbsp;directive to fields or fragments on the parent component’s query, and you can use it with or without Apollo Client’s React bindings (for example, in queries passed to&nbsp;<code>client.watchQuery</code>).</p>



<p>In our demo app, the&nbsp;<code>AllUsers</code>&nbsp;query becomes:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">  query AllUsers {
    users {
      id
      ...UserFragment @nonreactive
    }
  }</code></pre>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>Note: The parent component&nbsp;<em>should&nbsp;</em>receive updates for the&nbsp;<code>id</code>&nbsp;field (or whatever the equivalent cache key is for an entity), so we intentionally&nbsp;<em>don’t</em>&nbsp;apply&nbsp;<code>@nonreactive</code>&nbsp;to the&nbsp;<code>id</code>&nbsp;field here. This ensures that the parent&nbsp;<strong>does</strong>&nbsp;update when items are added or removed from the list.</p>
</blockquote>



<p>Now, when cache updates arrive and Apollo Client is comparing the previous result with incoming data for a selection set to determine whether to update, it can avoid comparing fields that exist on subtrees of the&nbsp;<code>@nonreactive</code>&nbsp;fragment altogether. Less work for Apollo Client, and less work for React as a result.</p>



<p>Instead of passing each user object into&nbsp;<code>UserComponent</code>&nbsp;and wrapping it with&nbsp;<code>memo</code>, child components can use the&nbsp;<code>id</code>&nbsp;and fragment document to receive cache updates directly for each user in the list:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">function UserComponent({ id }) {
  const { data: user } = useFragment({
    fragment: UserFragment,
    from: {
      __typename: &quot;User&quot;,
      id,
    },
  });
  
  return &lt;li&gt;{user.name}&lt;/li&gt;;
});</code></pre>



<p>Any component watching for changes for a specific user via&nbsp;<code>useFragment</code>&nbsp;will re-render on its own when data changes. It no longer needs to wait for a parent to trigger a re-render by passing it fresh data via props!</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="636" height="516" src="https://wp.apollographql.com/wp-content/uploads/2023/06/CleanShot-2023-06-01-at-11.52.40.gif" alt="" class="wp-image-21273"/></figure>



<p>Finally, our parent component&nbsp;<strong>no longer re-renders at all when updating users</strong>—only when users are&nbsp;<strong>added</strong>&nbsp;or&nbsp;<strong>removed</strong>. This gives us predictable behavior&nbsp;<em>and</em>&nbsp;performance, whether our list is 10, 100, or 1,000 users long! And we achieved all of this without&nbsp;<code>memo</code>. (You definitely&nbsp;<em>should</em>&nbsp;still use&nbsp;<code>memo</code>&nbsp;as needed to solve other performance issues, per the guidance in the docs!)</p>



<p>View the full CodeSandbox demo <a href="https://codesandbox.io/s/github/alessbell/nonreactive">here</a>. You can try out both&nbsp;<code>@nonreactive</code>&nbsp;and&nbsp;<code>useFragment</code>&nbsp;in our latest 3.8 beta via&nbsp;<code>npm i @apollo/client@beta</code>&nbsp;and view the documentation for both&nbsp;<code>&lt;a href=&quot;https://www.apollographql.com/docs/react/data/directives/#nonreactive&quot;&gt;@nonreactive&lt;/a&gt;</code>&nbsp;and&nbsp;<code>&lt;a href=&quot;https://www.apollographql.com/docs/react/api/react/hooks-experimental/#usefragment&quot;&gt;useFragment&lt;/a&gt;</code>&nbsp;for more information. We’d love to hear what you think!</p>


Don’t Overreact! Introducing Apollo Client’s new @nonreactive directive and useFragment hook

Getting Started with Vue Apollo


<p><em><em>This is a guest post by Rares Matei, senior engineer at Nrwl.io. He created a course on Apollo Client called <a href="https://app.egghead.io/playlists/manage-state-in-react-apps-with-apollo-client-and-graphql-a45b3b89">Manage State in React Apps with Apollo Client and GraphQL.</a></em></em> <em>The course is free to take up until December 17th, 2021. </em></p>



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



<p>Apollo Client has a unique position in our front-end apps: like a proxy sitting right at the edge, all the outgoing and incoming requests go through it, it knows what data each component needs and what the server responds with. All this knowledge puts it in a uniquely powerful position. And it turns out Apollo Client handles all this responsibility beautifully: with its powerful cache, baked-in defaults for keeping interactions fast, APIs for handling the most common frontend problems, and tools for plugging in your local state and even handling REST requests, you&#8217;ll notice it guides you towards better user experience and writing more maintainable and readable components.</p>



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



<p>Synchronizing data between a client app and a server is hard. You make the request, wait for it to resolve, you then need to parse the response and update your local model, and finally, you have to ensure all your components are properly connected to your different data points so that they re-render when a change occurs. If your request actually mutates data on the server, then it gets even trickier since you need to make sure the mutation happens in local memory as well.</p>



<p>Apollo abstracts all that away with a powerful in-memory cache: your components declare what data they want in the shape that they want it and Apollo will start building up this local sub-graph representation of your server graph, and ensure no unnecessary network requests are ever made. If two components end up requesting the same slice of your sub-graph, regardless of how they define their queries, Apollo will point them to the same location in the cache.</p>



<p><a href="https://app.egghead.io/lessons/apollo-why-have-a-client-side-graphql-cache">Just by using Apollo Client to make your queries, without any special configuration, your app will become faster.</a> (I created a series of videos around this, and if you click some of the links in this article, I will go more in-depth around some of the topics)</p>



<p>Do you need to make a mutation? <a href="https://app.egghead.io/lessons/apollo-update-the-local-cache-automatically-when-making-mutations">Apollo will automatically update its normalised representation of your updated object, and will re-render all components listening to that part of your graph</a>, regardless of the shape of their query.</p>



<p>And you are not locked into its default behaviours. If you have special cases where you need to reach into the cache to manually modify, <a href="https://app.egghead.io/lessons/apollo-manually-modify-the-cache-to-remove-deleted-items">Apollo fully opens that up with powerful APIs.</a></p>



<p>As you let Apollo worry about state management, and data synchronization your components will start becoming simpler, more maintainable. They&#8217;ll start describing the shape of the data they need in a single place. And Apollo <a href="https://app.egghead.io/lessons/apollo-use-read-field-policies-to-query-local-client-state">even allows us to sprinkle local client-only state in those queries, so that we don&#8217;t have to maintain a separate mechanism for handling it</a>:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="933" src="https://wp.apollographql.com/wp-content/uploads/2021/12/Screen-Shot-2021-12-14-at-8.54.31-AM-1024x933.png" alt="" class="wp-image-11487" srcset="https://wp.apollographql.com/wp-content/uploads/2021/12/Screen-Shot-2021-12-14-at-8.54.31-AM-1024x933.png 1024w, https://wp.apollographql.com/wp-content/uploads/2021/12/Screen-Shot-2021-12-14-at-8.54.31-AM-300x273.png 300w, https://wp.apollographql.com/wp-content/uploads/2021/12/Screen-Shot-2021-12-14-at-8.54.31-AM-768x700.png 768w, https://wp.apollographql.com/wp-content/uploads/2021/12/Screen-Shot-2021-12-14-at-8.54.31-AM-1200x1093.png 1200w, https://wp.apollographql.com/wp-content/uploads/2021/12/Screen-Shot-2021-12-14-at-8.54.31-AM.png 1304w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="870" height="572" src="https://wp.apollographql.com/wp-content/uploads/2021/12/local_state_example.gif" alt="" class="wp-image-11489"/></figure>



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



<p>Working on front-end apps is challenging. You are operating on this small island where the only way to communicate with the outside world is via network requests. And those network requests can be fast, or occasionally very slow. They might throw an error. The server might change its data and you might be left displaying stale views to the user. And how would you even build a potentially infinitely scrolling list, like on Twitter?</p>



<p>While the cache sits at the core of Apollo, because of its unique position as a proxy of all incoming and outgoing network requests, it does offer lots of APIs on top of it to help with some of the most common frontend problems in existence:</p>



<ul class="wp-block-list"><li>simple, boolean &#8220;<a href="https://app.egghead.io/lessons/apollo-handle-loading-states-for-your-graphql-queries">loading</a>&#8221; and &#8220;<a href="https://app.egghead.io/lessons/apollo-handle-graphql-query-error-states-using-apollo">error</a>&#8221; states for each query</li><li><a href="https://app.egghead.io/lessons/apollo-use-the-retrylink-in-apollo-to-retry-queries-after-an-error">retries for your failed queries, with optional exponential back-off and jittering</a></li><li><a href="https://app.egghead.io/lessons/apollo-keep-queries-in-sync-with-the-backend-by-polling-for-new-data">simple polling for keeping queries in sync with your backend</a></li><li>after you&#8217;ve made a query, <a href="https://app.egghead.io/lessons/apollo-append-graphql-subscription-updates-to-existing-queries">you can subscribe for further real-time updates</a></li><li><a href="https://app.egghead.io/lessons/apollo-use-fetchmore-and-merge-field-policies-to-dynamically-load-more-items-into-a-list">build infinitely scrolling lists or paginate data</a></li><li><a href="https://app.egghead.io/lessons/apollo-use-optimistic-updates-to-build-uis-that-react-immediately-to-user-actions">enable optimistic updates</a> so that your UI updates instantly when you make a mutation, even if the server still hasn&#8217;t confirmed it. If there&#8217;s an error later on, Apollo automatically rolls back the optimistic UI update.</li><li>and many more!</li></ul>



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



<p>With its sensible defaults, but open APIs, Apollo lets you extend its capabilities as and when you need them. You are not locked into a specific workflow, and we briefly saw examples of this above when talking about handling local state and manually modifying the cache under advanced scenarios.</p>



<p>And with its extensible linker API, Apollo&#8217;s capabilities become ready to handle even the most advanced requirements.</p>



<p>Are you still using REST but are planning to migrate to GraphQL? <a href="https://app.egghead.io/lessons/apollo-incrementally-migrate-from-rest-to-graphql-using-the-restlink">You can start writing your components as if you are making GraphQL queries, and Apollo will transform them to REST calls behind the scenes</a>.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="670" src="https://wp.apollographql.com/wp-content/uploads/2021/12/Screen-Shot-2021-12-14-at-8.54.55-AM-1024x670.png" alt="" class="wp-image-11491" srcset="https://wp.apollographql.com/wp-content/uploads/2021/12/Screen-Shot-2021-12-14-at-8.54.55-AM-1024x670.png 1024w, https://wp.apollographql.com/wp-content/uploads/2021/12/Screen-Shot-2021-12-14-at-8.54.55-AM-300x196.png 300w, https://wp.apollographql.com/wp-content/uploads/2021/12/Screen-Shot-2021-12-14-at-8.54.55-AM-768x503.png 768w, https://wp.apollographql.com/wp-content/uploads/2021/12/Screen-Shot-2021-12-14-at-8.54.55-AM-1200x786.png 1200w, https://wp.apollographql.com/wp-content/uploads/2021/12/Screen-Shot-2021-12-14-at-8.54.55-AM.png 1390w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>Another great example of this is <a href="https://app.egghead.io/lessons/apollo-provide-quick-app-start-up-times-by-syncing-the-apollo-cache-with-local-storage">syncing your in-memory cache to your browser&#8217;s localstorage</a>, to provide almost instant app start-up times.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="473" src="https://wp.apollographql.com/wp-content/uploads/2021/12/Screen-Shot-2021-12-14-at-8.55.01-AM-1024x473.png" alt="" class="wp-image-11493" srcset="https://wp.apollographql.com/wp-content/uploads/2021/12/Screen-Shot-2021-12-14-at-8.55.01-AM-1024x473.png 1024w, https://wp.apollographql.com/wp-content/uploads/2021/12/Screen-Shot-2021-12-14-at-8.55.01-AM-300x138.png 300w, https://wp.apollographql.com/wp-content/uploads/2021/12/Screen-Shot-2021-12-14-at-8.55.01-AM-768x355.png 768w, https://wp.apollographql.com/wp-content/uploads/2021/12/Screen-Shot-2021-12-14-at-8.55.01-AM-1200x554.png 1200w, https://wp.apollographql.com/wp-content/uploads/2021/12/Screen-Shot-2021-12-14-at-8.55.01-AM.png 1382w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



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



<p>Apollo does a lot out of the box. The more you trust and understand its cache, the less you&#8217;ll fight with hard-to-understand bugs. The more you read its docs, the higher the chance you&#8217;ll find an API that can elegantly handle a feature you&#8217;re building. And the more you get familiar with it, the more linkers you&#8217;ll find yourself using, that unlock new advanced capabilities.</p>



<p>Since using Apollo in my frontend projects, I&#8217;ve started enjoying the process of coding a lot more as well, because I don&#8217;t have to worry about whether I&#8217;m updating all my local data correctly and whether the right components know about the update. I get nudged towards creating better user experiences and writing simpler, more declarative code. Looking at how Apollo handles all the complex challenges of synchronizing data between the client and the server has taught me to become a better web developer myself, and I&#8217;ll continue to apply these learnings in all future projects I&#8217;ll work on, regardless of the technologies it uses.</p>



<p>And if you&#8217;d like to fully understand what I mean, regardless of whether you&#8217;ve never used Apollo before or are an advanced user, <a href="https://app.egghead.io/playlists/manage-state-in-react-apps-with-apollo-client-and-graphql-a45b3b89">I created a video course here where we&#8217;ll cover in-depth most concepts discussed in this article (and many more!), all while building practical features in a real-world app.</a> </p>


Why Apollo Client is an important tool in your GraphQL stack

Testing Apollo Client Applications

TypeScript GraphQL Code Generator – Generate GraphQL Types with Apollo Codegen Tutorial


<p>GraphQL lets front-end developers simplify their data-fetching and state management approaches. For backend developers, GraphQL acts as a structured, maintainable API. To learn how GraphQL works across the stack, I recommend completing a fullstack GraphQL tutorial.</p>



<p>In this short post, I&#8217;d like to share two GraphQL training resources that we created @ Apollo to help you ramp up and get comfortable building GraphQL applications from back to front.</p>



<h2 class="wp-block-heading"><a href="#%f0%9f%93%bd%ef%b8%8f-watch-learn-graphql-the-lift-off-series-on-odyssey-the-apollo-course-platform" aria-hidden="true" class="aal_anchor" id="%f0%9f%93%bd%ef%b8%8f-watch-learn-graphql-the-lift-off-series-on-odyssey-the-apollo-course-platform"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>📽️ [Watch] Learn GraphQL &#8211; The lift-off series on Odyssey: the Apollo Course Platform</h2>



<p>Earlier this year, we released <a href="http://odyssey.apollographql.com/?referrer=blog">Odyssey: the Apollo course platform</a>. We wanted to create a more directed, interactive, and fun learning experience for developers in search of practical training using GraphQL and Apollo.</p>



<p>The first series of courses on Odyssey is called <strong>Lift-off</strong>.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="960" height="645" src="https://wp.apollographql.com/wp-content/uploads/2021/03/Untitled-1.png" alt="" class="wp-image-6871" srcset="https://wp.apollographql.com/wp-content/uploads/2021/03/Untitled-1.png 960w, https://wp.apollographql.com/wp-content/uploads/2021/03/Untitled-1-300x202.png 300w, https://wp.apollographql.com/wp-content/uploads/2021/03/Untitled-1-768x516.png 768w" sizes="auto, (max-width: 960px) 100vw, 960px" /></figure>



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



<p>In <em>Lift-off,</em> you&#8217;ll build a full-stack GraphQL example application called Catstronauts, a learning platform for adventurous cats who want to explore the universe!</p>



<p>It contains list-view and detail-view pages of all the different courses.</p>



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



<p>In <em>Lift-off part I</em>, you&#8217;ll learn the core components of a full-stack GraphQL app, specifically:</p>



<ul class="wp-block-list">
<li>a schema first-approach to building web applications with GraphQL</li>



<li>GraphQL&#8217;s Schema Definition Language (SDL)</li>



<li>how to set up Apollo Server, test, and develop it using <a href="https://studio.apollographql.com/dev?referrer=blog">Apollo Explorer</a></li>



<li>how to connect to your GraphQL API from the front-end using Apollo Client and React</li>
</ul>



<p>And in the second part of the series, you&#8217;ll learn:</p>



<ul class="wp-block-list">
<li>how to write more advanced queries and display data in the UI</li>



<li>how to use variables</li>



<li>how to mutate data and update the UI</li>
</ul>



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



<p>Ready to start? Head on over to <a href="https://odyssey.apollographql.com/?referrer=blog">odyssey.apollographql.com</a>.</p>



<h2 class="wp-block-heading"><a href="#%f0%9f%93%96-read-learn-graphql-the-official-apollo-full-stack-graphql-tutorial" aria-hidden="true" class="aal_anchor" id="%f0%9f%93%96-read-learn-graphql-the-official-apollo-full-stack-graphql-tutorial"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>📖 [Read] Learn GraphQL &#8211; The Official Apollo Full-stack GraphQL Tutorial</h2>



<p>For those that prefer the written approach to learning, I recommend checking out the <a href="https://www.apollographql.com/docs/tutorial/introduction/">Official Apollo Full-stack GraphQL Tutorial</a> via the Apollo docs.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="738" height="1024" src="https://wp.apollographql.com/wp-content/uploads/2021/03/graphql-tutorial-space-explorer-738x1024.png" alt="" class="wp-image-6873" srcset="https://wp.apollographql.com/wp-content/uploads/2021/03/graphql-tutorial-space-explorer-738x1024.png 738w, https://wp.apollographql.com/wp-content/uploads/2021/03/graphql-tutorial-space-explorer-216x300.png 216w, https://wp.apollographql.com/wp-content/uploads/2021/03/graphql-tutorial-space-explorer-768x1066.png 768w, https://wp.apollographql.com/wp-content/uploads/2021/03/graphql-tutorial-space-explorer.png 912w" sizes="auto, (max-width: 738px) 100vw, 738px" /></figure>



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



<p>In the written GraphQL tutorial, we build Space Explorer: an interactive app for reserving a seat on an upcoming SpaceX launch 🚀.</p>



<p>It contains a login page, list and detail-view pages, user profiles, and a cart for setting up launches.</p>



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



<p>You&#8217;ll learn how to build a full-stack GraphQL application with <em>authentication, pagination, state management,</em> and more. Specifically, you&#8217;ll learn:</p>



<ul class="wp-block-list">
<li>How to build a GraphQL schema using Apollo Server, hook it to data, and then connect to it from a client-side React applications using Apollo Client</li>



<li>How to use Apollo Client and React to fetch and display GraphQL data</li>



<li>How to use Apollo Server to build a GraphQL API</li>



<li>How to source data from a REST API</li>



<li>How to source data from a database</li>
</ul>



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



<p>If you&#8217;re ready to walk through and build Space Explorer, <a href="https://www.apollographql.com/docs/tutorial/introduction/">check out the tutorial via the Apollo docs here</a>.</p>



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



<p>There you have it — two great GraphQL tutorials to learn how to build fullstack apps. </p>


Learn GraphQL – Tutorials for Fullstack GraphQL


<p>Searching and filtering is a standard part of any GraphQL API. In this article, we&#8217;ll learn how to add filtering capabilities to your API by walking through a few real-world examples.</p>



<p>To learn how to handle searching and filtering on the front-end using Apollo Client, read &#8220;<a href="https://www.apollographql.com/blog/apollo-client/how-to-filter-and-search-using-variables-in-apollo-client/">How to Filter and Search using Variables in Apollo Client</a>&#8220;.</p>



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



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p><strong>Searching <em>is</em> filtering</strong>: Searching and filtering are two different ways to say the same thing. The goal is to find an item (or a list of items) that matches some sort of criteria. For the rest of this post, we&#8217;ll use the word <em>filter</em> instead of search.</p>
</blockquote>



<p>For each filtering example, we&#8217;ll take a look at the originating schema, how to write a query within it, and a resolver implementation.</p>



<p>As a reminder, GraphQL is data source-agnostic. This means that you can use whatever database technology you like to fetch and save data; for instance — SQL, ORMs, NoSQL, JSON, or in-memory data all work just fine.</p>



<p>For these examples, we&#8217;ll assume we&#8217;ve stored the data <em>in-memory</em>.</p>



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



<p>Consider the following GraphQL schema:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">type Query {
  album(id: ID!): Album
}</code></pre>



<p>The <code>album</code> field expects an <code>ID</code> to be provided as an argument, and if found — it&#8217;ll return the <code>Album</code> type.</p>



<p>To fetch this, we could write a query that passes in an <code>id</code> and asks for the <code>album</code> with the <code>title</code>, <code>artist</code> and <code>genre</code> fields. The query could look like this:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">query GetAlbumById {
  album (id: &quot;1&quot;) {
    title
    genre
    artist {
      name
    }
  }
}</code></pre>



<p>And in the <a href="https://www.apollographql.com/docs/apollo-server/data/resolvers/">resolver</a> on the server, we&#8217;d pull the <code>id</code> value out from <code>args</code> and use it to filter our data.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-typescript">const resolvers = {
  Query: {
    album (parent, args, context, info) {
      const { id } = args;
      return context.db.Albums.find((a) =&gt; a.id == id)
    }
  }
} </code></pre>



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



<p>Now consider our GraphQL schema had an additional field on the root <code>Query</code> type to query for a <em>list</em> of albums:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">type Query {
  album(id: ID!): Album
  albums(genre: Genre): [Album]! # New
}</code></pre>



<p>With this new field, we can query for the list — optionally filtering it down using the <code>Genre</code> argument.</p>



<p>Here&#8217;s what a query might look like:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">query GetRockAlbums {
  albums (genre: &quot;Rock&quot;) {
    title
    genre
    artist {
      name
    }
  }
}</code></pre>



<p>And the resolver:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">const resolvers = {
  Query: {
    albums (parent, args, context, info) {
      const { genre } = args;
      return context.db.Albums
	.filter((a) =&gt; a.genre == genre)
    }
  }
} </code></pre>



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



<p>Let&#8217;s say you wanted to get a very specific set of items and you already knew their <code>ids</code>.</p>



<p>We could adjust our GraphQL schema to look more like this:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">type Query {
  album(id: ID!): Album
  albums(genre: Genre, ids: [ID!]): [Album]! 
}</code></pre>



<p>By the way, do you notice that the parameter list is starting to get a little bit lengthy? There&#8217;s a way to clean that up, and we&#8217;ll do that soon — but first, let&#8217;s see what a query for this might look like.</p>



<p>The following query asks for albums with the ids <code>1</code>, <code>4</code>, <code>5</code>, <code>6</code>, and <code>8</code>.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">query GetAlbumsByIds {
  albums (ids: [&quot;1&quot;, &quot;4&quot;, &quot;5&quot;, &quot;6&quot;, &quot;8&quot;]) {
    title
    genre
    artist {
      name
    }
  }
}</code></pre>



<p>To handle this sort of query in the resolver, we could write it this way:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">const resolvers = {
  Query: {
    album (parent, args, context, info) {
      const { ids } = args;
      return context.db.Albums.filter((a) =&gt; ids.includes(a.id))
    }
  }
} </code></pre>



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



<p>In the last example, we started to see that the parameter list was getting long. A better approach is to design an <em>Input Type</em> containing all the possible filtering (or sorting) options necessary, and use that as a single parameter, encapsulating all of the arguments for the field.</p>



<p>Instead of this:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">type Query {
  album(id: ID!): Album
  albums(genre: Genre, ids: [ID!]): [Album]! 
}</code></pre>



<p>Let&#8217;s try this:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">type AlbumsFilters = {
  genre: Genre
  ids: [ID!]
}

type AlbumsInput = {
  filter: AlbumsFilters
}

type Query {
  album(id: ID!): Album
  albums(input: AlbumsInput): [Album]! 
}</code></pre>



<p>To handle queries for <code>albums</code> in the resolver, we&#8217;d want to take care to handle both the cases of the <code>genre</code> filter being applied, the <code>ids</code> filter being applied, and both of them being applied.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">const resolvers = {
  Query: {
    album (parent, args, context, info) {
      const { filter } = args;
      const shouldApplyFilters = filter !== null;

      let albums = context.db.Albums;

      if (!shouldApplyFilters) {
	return albums;
      }

      const shouldApplyGenreFilter = filter.genre !== null;
      const shouldApplyIdsFilter = filter.ids;

      if (shouldApplyGenreFilter) {
	albums = albums
          .filter((a) =&gt; a.genre === filter.genre)
      }

      if (shouldApplyIdsFilter) {
	albums = albums.filter((a) =&gt; ids.includes(a.id))
      }
		
      return albums;
    }
  }
} </code></pre>



<p>While this <em>does</em> add complexity to the resolver, it makes the querying experience much more robust.</p>



<p>Using the <em>Input Type</em> pattern, you can incrementally add more filtering (or sorting) options to your API like:</p>



<ul class="wp-block-list">
<li><strong>Filtering between ranges (greater than, less than, equal)</strong></li>



<li><strong>Conditional filtering (and, or, not, exists, etc)</strong></li>



<li><strong>Any other filtering criteria you can think of</strong></li>
</ul>



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



<p>We just walked through a few examples of how to add filter functionality to your GraphQL API. You should be all set to implement filtering in your own GraphQL API.</p>



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



<p>Apollo Explorer is a free cloud GraphQL IDE that we built from the ground up, <strong>specifically for GraphQL developers</strong>.</p>



<p>The Explorer comes with productivity-boosting features like one-click query building, intelligent search, and the ability to extract variables and fragments.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="954" height="544" src="https://wp.apollographql.com/wp-content/uploads/2021/03/point-and-click-1.gif" alt="" class="wp-image-6849"/></figure>



<p>Apollo Explorer also comes with <a href="https://www.apollographql.com/docs/studio/dev-graphs/">development graphs</a>, which enables you to build, test, and document your schema changes locally, as well as preview graph changes in local branches and PRs.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="354" src="https://wp.apollographql.com/wp-content/uploads/2021/03/Untitled.png" alt="" class="wp-image-6851" srcset="https://wp.apollographql.com/wp-content/uploads/2021/03/Untitled.png 1024w, https://wp.apollographql.com/wp-content/uploads/2021/03/Untitled-300x104.png 300w, https://wp.apollographql.com/wp-content/uploads/2021/03/Untitled-768x266.png 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>To use Apollo Explorer, head over to <a href="https://studio.apollographql.com/dev?referrer=blog">studio.apollographql.com/dev</a> and get started with your first development graph.</p>



<p>Happy querying!</p>


GraphQL Search and Filter – How to search and filter results with GraphQL

What is a GraphQL query? GraphQL query examples using Apollo Explorer


<p>If you&#8217;re using Apollo Android, the chances are that you are using a <code>schema.json</code> file: an&nbsp;<a rel="noreferrer noopener" target="_blank" href="https://graphql.org/learn/introspection/"><strong><u>introspection</u></strong></a>&nbsp;schema. While introspection schemas work well, GraphQL has&nbsp;<a rel="noreferrer noopener" target="_blank" href="https://graphql.org/learn/schema/"><strong><u>SDL</u></strong></a>&nbsp;(Schema Definition Language), which is another, more concise, way to describe a schema.&nbsp;</p>



<p>The excellent news is that Apollo Android supports SDL! </p>



<p>Read below to learn more about SDL and how to enable it in your project.</p>



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



<p>Since Apollo Android already supports introspection schemas, why bother with a new schema format? Well, there are a ton of reasons for that:</p>



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



<p>Taking a look at the&nbsp;<a target="_blank" href="https://github.com/apollographql/apollo-android/pull/2543" rel="noreferrer noopener"><u>commit</u></a>&nbsp;that moved the Apollo Android test schema from introspection to SDL:&nbsp;</p>



<p>&nbsp;The SDL file has almost ten times fewer lines. It&#8217;s also significantly smaller (<a rel="noreferrer noopener" target="_blank" href="https://github.com/apollographql/apollo-android/blob/5d8338338cff6217a73f5c62db2443bf1d760577/apollo-compiler/src/test/graphql/schema.sdl"><u>9KB</u></a>&nbsp;vs.&nbsp;<a rel="noreferrer noopener" target="_blank" href="https://github.com/apollographql/apollo-android/blob/02d77acd9d84dc7fb4cf8d78e2b602beec7cf185/apollo-compiler/src/test/graphql/schema.json"><u>106KB</u></a>), making your repository faster to download.</p>



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



<p>SDL being smaller also means it&#8217;s easier to read. Let&#8217;s take an example from our&nbsp;<a rel="noreferrer noopener" target="_blank" href="https://github.com/apollographql/starwars-server"><u>favorite schema</u></a>&nbsp;(simplified here):</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql"># SDL
&quot;&quot;&quot;A character from the Star Wars universe&quot;&quot;&quot;
interface Character {
  &quot;&quot;&quot;The ID of the character&quot;&quot;&quot;
  id: ID!

  &quot;&quot;&quot;The name of the character&quot;&quot;&quot;
  name: String!

  &quot;&quot;&quot;The date character was born.&quot;&quot;&quot;
  birthDate: Date!
}</code></pre>



<p>The same thing in JSON (with only the &#8220;id&#8221; field or it would take too much space!):</p>



<pre class="wp-block-prismatic-blocks"><code class="language-json">// Introspection
{
  &quot;kind&quot;: &quot;INTERFACE&quot;,
  &quot;name&quot;: &quot;Character&quot;,
  &quot;description&quot;: &quot;A character from the Star Wars universe&quot;,
  &quot;fields&quot;: [
    {
      &quot;name&quot;: &quot;id&quot;,
      &quot;description&quot;: &quot;The ID of the character&quot;,
      &quot;args&quot;: [],
      &quot;type&quot;: {
        &quot;kind&quot;: &quot;NON_NULL&quot;,
        &quot;name&quot;: null,
        &quot;ofType&quot;: {
          &quot;kind&quot;: &quot;SCALAR&quot;,
          &quot;name&quot;: &quot;ID&quot;,
          &quot;ofType&quot;: null        }
      },
      &quot;isDeprecated&quot;: false,
      &quot;deprecationReason&quot;: null    },
    {
      [REDACTED],
    }
  ]
}</code></pre>



<p>Adding a new field to an SDL type is a few lines, and you won&#8217;t have to worry about creating a valid JSON document or nesting the <code>LIST</code> and <code>NON_NULL</code> types; this makes the experience of writing unit tests for Apollo Android way more enjoyable.</p>



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



<p>While introspection is a useful tool during development, it exposes your schema&#8217;s structure to anyone to access your GraphQL endpoint. Unfortunately, exposing your schema can have security repercussions, and a lot of server implementations like apollo-server&nbsp;<a target="_blank" href="https://www.apollographql.com/docs/apollo-server/testing/graphql-playground/" rel="noreferrer noopener"><u>will disable introspection in production</u></a>, making it harder to obtain an introspection schema.</p>



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



<p>Last but not least, SDL carries more information than plain introspection JSON. Custom directives definition, for example, are stripped out in introspection responses. While Apollo Android does not use this, having this information gives client developers more context about the schema they are using. There are other useful ways we could utilize it in the future too!&nbsp;</p>



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



<p>Using SDL in Apollo Android is&nbsp;<strong>as simple as replacing your <code>schema.json</code> file with a <code>schema.sdl</code> file</strong>. You might sometimes see this file named schema.graphql. We decided to go with the explicit <code>schema.sdl</code> name to distinguish from operation files, which also have a .graphql extension.&nbsp;</p>



<p>We also built a few tools in the Gradle plugin to make it easier to work with SDL files:</p>



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



<p>The Gradle plugin in Apollo Android can automatically translate your <code>schema.json</code> to <code>schema.sdl</code>:</p>



<p><code>./gradlew convertApolloSchema --from schema.json --to schema.sdl</code></p>



<p>Note that it works both ways if for some reason you want to get a JSON file:</p>



<p><code>./gradlew convertApolloSchema --from schema.sdl --to schema.json</code></p>



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



<p>Since the plugin can translate between both formats, it can save the results of an introspection query as SDL.</p>



<p><code>./gradlew downloadApolloSchema --endpoint https://example.com/graphql --schema app/src/main/graphql/com/example/schema.sdl</code></p>



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



<p>Finally, if you have a Studio integration, you can also download the SDL directly from<a target="_blank" href="https://www.apollographql.com/docs/studio/" rel="noreferrer noopener"><u>&nbsp;Apollo Studio</u></a>. Get your&nbsp;<a target="_blank" href="https://www.apollographql.com/docs/studio/api-keys/" rel="noreferrer noopener">API key</a>&nbsp;and type:</p>



<p><code>./gradlew downloadApolloSchema --key $API_KEY --graph $GRAPH --variant current&nbsp;</code><br><code>--schema app/src/main/graphql/com/example/schema.sdl</code></p>



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



<p>The initial SDL support was <a href="https://github.com/apollographql/apollo-android/commit/8fccd52b01b7f8e9a7d9dffca0438cb8c97da141">committed</a> a couple of months ago and we’re still working on improving it. <code>convertApolloSchema</code>, for example, is a very recent addition.</p>



<p>It’s still the early days of SDL support for Apollo Android but we’ve been using it successfully to write a lot of unit tests and it really made our life better. We hope it can make yours better too!</p>



<p>Try it out and <a href="https://app.slack.com/client/T09229ZC6/C01A6KM1SBZ">let us know</a> how you liked it!</p>


SDL Support in Apollo Android


<p>One of the most common use cases front-end developers face is re-render the UI after executing a <code>mutation</code> and changing something in the backend.</p>



<p>To solve this problem, a lot of developers like to use the <code>refetchQueries</code> API.</p>



<p>For example, if I wanted to <strong>add</strong> a <code>todo</code> to a list of <code>todos</code>, I might pass a <code>GET_ALL_TODOS</code> query to my list of queries to refetch, like so:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-typescript">import { gql, useMutation } from &quot;@apollo/client&quot;;
import * as AddTodoTypes from &#039;./__generated__/AddTodo&#039;;
import { GET_ALL_TODOS } from &quot;../queries/getAllTodos&quot;;

export const ADD_TODO = gql`
  mutation AddTodo ($text: String!) {
    addTodo (text: $text) {
      success
      error {
        message
      }
    }
  }
`

export function useAddTodo () {
  const [mutate, { data, error }] = useMutation&lt;
    AddTodoTypes.AddTodo, 
    AddTodoTypes.AddTodoVariables
  &gt;(
    ADD_TODO,
    {
      refetchQueries: [
        { query: GET_ALL_TODOS }
      ]
    }
  )
  return { mutate, data, error };
}
﻿</code></pre>



<p>While this approach works, the biggest disadvantage is that we have to make multiple network round-trips to get our UI to re-render, even if we already have the data we need on the client-side.</p>



<p>It also introduces the question of &#8220;what do we do if we have a lot of queries relying on the same data? Do we have to remember to add all of <em>those</em> to the same <code>refetchQueries</code> list as well?&#8221;</p>



<p>Luckily, you don&#8217;t.</p>



<p>In this post, I&#8217;ll explain when it makes sense to use <code>refetchQueries</code>, and when you should rely on Apollo Client&#8217;s automatic cache normalization algorithm or <code>update</code> functions.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>The following example uses the Apollo Client 3 Todos app example from <a href="https://github.com/apollographql/ac3-state-management-examples">@apollographql/ac3-state-management-examples</a>.</p></blockquote>



<h2 class="wp-block-heading"><a href="#use-refetchqueries-when-youre-first-getting-started" aria-hidden="true" class="aal_anchor" id="use-refetchqueries-when-youre-first-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>Use refetchQueries when you&#8217;re first getting started</h2>



<p>If you&#8217;re just getting started with GraphQL, I think the mental model of passing in the queries that you&#8217;d like to re-run after a mutation is an easy one to wrap your head around.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="789" src="https://wp.apollographql.com/wp-content/uploads/2020/11/Screen_Shot_2020-11-16_at_1.51.32_PM-1024x789.png" alt="" class="wp-image-5972" srcset="https://wp.apollographql.com/wp-content/uploads/2020/11/Screen_Shot_2020-11-16_at_1.51.32_PM-1024x789.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/11/Screen_Shot_2020-11-16_at_1.51.32_PM-300x231.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/11/Screen_Shot_2020-11-16_at_1.51.32_PM-768x591.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/11/Screen_Shot_2020-11-16_at_1.51.32_PM.png 1061w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>Looking back at our trivial <code>todo</code> app, if we have a list of <code>todos</code> and we want to <strong>add</strong> an item, we can accomplish that and re-render the UI with the <code>ADD_TODO</code> operation passed into a <code>useMutation</code> hook and the <code>GET_ALL_TODOS</code> query passed into the <code>refetchQueries</code> array.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-typescript">const [mutate, { data, error }] = useMutation&lt;
  AddTodoTypes.AddTodo, 
  AddTodoTypes.AddTodoVariables
&gt;(
  // Execute this
  ADD_TODO, 
  {
    // Then re-run 
    refetchQueries: [
      { query: GET_ALL_TODOS }
    ]
  }
)
return { mutate, data, error };
﻿</code></pre>



<p>This works. It runs the query and after successfully completing the mutation, it executes the <code>GET_ALL_TODOS</code> query and pulls in all the new <code>todos</code>.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="789" src="https://wp.apollographql.com/wp-content/uploads/2020/11/Screen_Shot_2020-11-16_at_1.51.02_PM-1024x789.png" alt="" class="wp-image-5976" srcset="https://wp.apollographql.com/wp-content/uploads/2020/11/Screen_Shot_2020-11-16_at_1.51.02_PM-1024x789.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/11/Screen_Shot_2020-11-16_at_1.51.02_PM-300x231.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/11/Screen_Shot_2020-11-16_at_1.51.02_PM-768x591.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/11/Screen_Shot_2020-11-16_at_1.51.02_PM.png 1061w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>The advantage here is that this approach is straightforward. The disadvantage is that we&#8217;re fetching the entire list of data again when we might not need to.</p>



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



<p>For a more efficient use of bandwidth and network round-trips, we can rely on cache normalization and <code>update</code> functions.</p>



<p>As we previously learned in the &#8220;<a href="https://www.apollographql.com/blog/demystifying-cache-normalization/">Demystifying Cache Normalization</a>&#8221; blog post, for certain operations, the Apollo Client cache is smart enough to <strong>automatically update the cache for you</strong>. For others, we can utilize an <code>update</code> function to tell the cache how we want it to update.</p>



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



<p>For mutations that <strong>change only a single entity,</strong> the cache is smart enough to update the item in place automatically, but only if we return the changed item (containing the unique identifier) in the mutation response.</p>



<p>Here&#8217;s an example of <strong>editing a</strong> <code>todo</code>.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-typescript">import { gql, useMutation } from &quot;@apollo/client&quot;;
import * as EditTodoTypes from &#039;./__generated__/EditTodo&#039;

export const EDIT_TODO = gql`
  mutation EditTodo ($id: Int!, $text: String!) {
    editTodo (id: $id, text: $text) {
      success
      todo { # Return the new todo in the mutation response
        id
        text 
        completed
      }
      error {
        ... on TodoNotFoundError {
          message
        }
        ... on TodoValidationError {
          message
        }
      }
    }
  }
`

export function useEditTodo () {
  const [mutate, { data, error }] = useMutation&lt;
    EditTodoTypes.EditTodo, 
    EditTodoTypes.EditTodoVariables
  &gt;(
    EDIT_TODO
  )

  return { mutate, data, error };
}
﻿</code></pre>



<p>And since we&#8217;ve returned the <strong>changed data</strong> in the <code>mutation</code> response, it works.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="789" src="https://wp.apollographql.com/wp-content/uploads/2020/11/Screen_Shot_2020-11-16_at_2.08.21_PM-1024x789.png" alt="" class="wp-image-5980" srcset="https://wp.apollographql.com/wp-content/uploads/2020/11/Screen_Shot_2020-11-16_at_2.08.21_PM-1024x789.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/11/Screen_Shot_2020-11-16_at_2.08.21_PM-300x231.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/11/Screen_Shot_2020-11-16_at_2.08.21_PM-768x591.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/11/Screen_Shot_2020-11-16_at_2.08.21_PM.png 1061w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>But for other operations, like <em>adding</em> to a list or <em>removing</em> elements from a list, we need to give the cache a little bit of help to figure out exactly what we want to do.</p>



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



<p>Here&#8217;s the <code>ADD_TODO</code> example again, but this time using an <code>update</code> function to update the existing list of <code>todos</code>.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-typescript">import { gql, useMutation } from &quot;@apollo/client&quot;;
import * as AddTodoTypes from &#039;./__generated__/AddTodo&#039;;
import { GET_ALL_TODOS } from &quot;../queries/getAllTodos&quot;;
import { GetAllTodos } from &quot;../queries/__generated__/GetAllTodos&quot;;

export const ADD_TODO = gql`
  mutation AddTodo ($text: String!) {
    addTodo (text: $text) {
      success
      todo {
        id
        text 
        completed
      }
      error {
        message
      }
    }
  }
`

export function useAddTodo () {
  const [mutate, { data, error }] = useMutation&lt;
    AddTodoTypes.AddTodo, 
    AddTodoTypes.AddTodoVariables
  &gt;(
    ADD_TODO,
    {
      update (cache, { data }) {
        // We use an update function here to write the 
        // new value of the GET_ALL_TODOS query.
        const newTodoFromResponse = data?.addTodo.todo;
        const existingTodos = cache.readQuery&lt;GetAllTodos&gt;({
          query: GET_ALL_TODOS,
        });

        if (existingTodos &amp;&amp; newTodoFromResponse) {
          cache.writeQuery({
            query: GET_ALL_TODOS,
            data: {
              todos: [
                ...existingTodos?.todos,
                newTodoFromResponse,
              ],
            },
          });
        }
      }
    }
  )
  return { mutate, data, error };
}
﻿</code></pre>



<p>In this example, we use the <code>readQuery</code> and <code>writeQuery</code> APIs to write the new value of the <code>todos</code> list which contains the <code>todo</code> we created in the <code>mutation</code>.</p>



<p>One way we could omit needing to write this <code>update</code> function is if the mutation response returned the <strong>entire list of new todos</strong> in the <code>mutation</code> response, but that&#8217;s not always possible.</p>



<p>Sometimes you don&#8217;t own the API.</p>



<p>Sometimes, it can get expensive to be doing that after every <code>mutation</code>.</p>



<p>So here, we utilize the <code>update</code> function.</p>



<p>Admittedly, this is a little bit more work than using <code>refetchQueries</code>, but that&#8217;s the trade off for a performance improvement. You don&#8217;t have to re-request the same data from your server and wait for another entire roundtrip to update the UI.</p>



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



<p>In summary best times to use <code>refetchQueries</code> are:</p>



<ol class="wp-block-list"><li>When you don&#8217;t yet know how ACC normalization works</li><li>If you&#8217;re not able to return the changed data in a mutation response</li></ol>



<p>To reduce round-trips after mutations, we generally recommend relying on the Apollo Client automatic caching normalization and when necessary, <code>update</code> functions.</p>



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



<ul class="wp-block-list"><li>&#8220;<a href="https://www.apollographql.com/blog/demystifying-cache-normalization/">Demystifying Cache Normalization</a>&#8221; from the Apollo Blog</li><li>&#8220;<a href="https://www.apollographql.com/docs/react/caching/advanced-topics/#updating-after-a-mutation">Updating after a Mutation</a>&#8221; from the Apollo Docs</li></ul>


When To Use Refetch Queries in Apollo Client

Add GraphQL to Your Jetpack Compose Apps

Demystifying Cache Normalization: Best Practice Series

Demystifying Cache Normalization

Dispatch This: Using Apollo Client 3 as a State Management Solution

☝️ GraphQL File Uploads with Apollo Server 2, React Hooks, TypeScript & Amazon S3 [Tutorial]


<p>Apollo Client’s caching system is core to both the user experience and the developer experience it provides. As one of Apollo Client’s most powerful features, the cache has been our biggest focus area while building Apollo Client 3. This major-version release will include plenty of other new features (such as a consolidated&nbsp;<code>@apollo/client</code>&nbsp;package that includes both React and Apollo Link functionality without requiring any additional imports), but the cache improvements are the most impactful and exciting.</p>



<p>Apollo Client 3 is available today as a beta. Let’s take a look at some of the caching features it includes!</p>



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



<p>Any library or framework can send a query to a GraphQL endpoint. Where Apollo Client shines is in its result caching. It uses a normalized cache to dramatically speed up the execution of GraphQL queries that don’t rely on real-time data. By reducing the number of network requests made to your GraphQL server, the cache improves the responsiveness of your application client. It also automatically keeps UI components up to date as new data is fetched and stored in the cache.</p>



<p>The Apollo Client caching system has worked well for a wide range of applications, but a few pain points have emerged over time, including a lack of cache eviction capabilities and inconsistent configuration APIs.</p>



<p>Apollo Client 3 aims to eliminate as many of these pain points as possible, while delivering a variety of useful features requested by the amazing GraphQL community.</p>



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



<p>Apollo Client 3 focuses on unifying its cache configuration strategy and providing fine-grained control over cache interactions. Let’s dive into a few features in detail:</p>



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



<p>Cache invalidation is by far&nbsp;<a href="https://github.com/apollographql/apollo-feature-requests/issues/4" target="_blank" rel="noreferrer noopener">the most requested feature</a>&nbsp;from the Apollo community. It’s easy to understand why, since the Apollo Client 2.x Cache API doesn’t allow specific parts of the cache to be purged.</p>



<p>To address this, Apollo Client 3 introduces new&nbsp;<code>InMemoryCache</code>&nbsp;methods to garbage-collect cache entries that are no longer reachable (<code>cache.gc()</code>) and evict a specific entry by its ID (<code>cache.evict()</code>). You can call either of these methods on an active&nbsp;<code>InMemoryCache</code>&nbsp;instance at any time:</p>



<pre class="wp-block-preformatted">const cache = new InMemoryCache();// Remove all unreachable objects from the cache<br>cache.gc();// Remove a specific entity by ID<br>cache.evict(id);</pre>



<p>We believe the&nbsp;<a href="https://en.wikipedia.org/wiki/Tracing_garbage_collection" target="_blank" rel="noreferrer noopener">tracing garbage collection</a>&nbsp;implementation used by&nbsp;<code>cache.gc()</code>&nbsp;will serve the needs of most applications, but&nbsp;<code>cache.evict()&nbsp;</code>will come in handy for applications that need a little more direct control.&nbsp;<a href="https://www.apollographql.com/docs/react/v3.0-beta/caching/cache-interaction/#garbage-collection-and-cache-eviction" target="_blank" rel="noreferrer noopener">Check out the docs</a>&nbsp;for details.</p>



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



<p>Previous versions of Apollo Client have split cache configuration functions across multiple, inconsistent APIs. Apollo Client 3 introduces a consolidated&nbsp;<strong>type policies API</strong>&nbsp;that lets you configure how the cache interacts with individual types in your schema. When you create a new&nbsp;<code>InMemoryCache</code>&nbsp;instance, you can pass its constructor an object that maps&nbsp;<code>__typename</code>&nbsp;strings to&nbsp;<code>TypePolicy&nbsp;</code>objects.</p>



<p>A&nbsp;<code>TypePolicy</code>&nbsp;object can specify the primary key fields for a type, along with a collection of&nbsp;<code>FieldPolicy</code>&nbsp;objects that customize the handling of individual fields. Let’s look at a few examples.</p>



<ol class="wp-block-list"><li><code>&lt;strong&gt;typePolicies&lt;/strong&gt;</code><strong>&nbsp;can replace the&nbsp;</strong><code>&lt;strong&gt;dataIdFromObject&lt;/strong&gt;</code><strong>&nbsp;function</strong></li></ol>



<p>You can now specify which fields of an object represent its primary key(s), on a per-<code>__typename</code>&nbsp;basis. For example, let’s say a book can be uniquely identified by its ISBN:</p>



<pre class="wp-block-preformatted">const cache = new InMemoryCache({<br>  typePolicies: {<br>    Book: {<br>      keyFields: ["isbn"],<br>    },<br>  },<br>});</pre>



<p>This API supports multiple primary keys and composite primary keys, without any risk of unstable JSON serialization, or forgetting to include the&nbsp;<code>__typename</code>&nbsp;in the ID.</p>



<p><strong>2.&nbsp;</strong><code>&lt;strong&gt;typePolicies&lt;/strong&gt;</code><strong>&nbsp;can replace the&nbsp;</strong><code>&lt;strong&gt;@connection&lt;/strong&gt;</code><strong>&nbsp;directive</strong></p>



<p>Instead of including the&nbsp;<code>@connection</code>&nbsp;directive in every query that interacts with a particular field, you can now specify the storage identity of fields and their arguments in one place.</p>



<p>In other words, this code:</p>



<pre class="wp-block-preformatted">query Feed($type: FeedType!, $offset: Int, $limit: Int) {<br>  feed(type: $type, offset: $offset, limit: $limit) <a href="http://twitter.com/connection" target="_blank" rel="noreferrer noopener">@connection</a>(<br>    key: "feed", <br>    filter: ["type"]<br>  ) {<br>    ...FeedEntry<br>  }<br>}</pre>



<p>becomes this code:</p>



<pre class="wp-block-preformatted">const cache = new InMemoryCache({<br>  typePolicies: {<br>    Query: {<br>      fields: {<br>        feed: {<br>          keyArgs: ["type"],<br>        },<br>      },<br>    },<br>  },<br>});</pre>



<p><strong>3.&nbsp;</strong><code>&lt;strong&gt;typePolicies&lt;/strong&gt;</code><strong>&nbsp;can replace&nbsp;</strong><code>&lt;strong&gt;cacheRedirects&lt;/strong&gt;</code></p>



<p>Instead of using a resolver-like approach for finding objects elsewhere in the cache (like this):</p>



<pre class="wp-block-preformatted">const cache = new InMemoryCache({<br>  cacheRedirects: {<br>    Query: {<br>      book: (_, args, { getCacheKey }) =&gt;<br>        getCacheKey({ __typename: 'Book', id: args.id })<br>    },<br>  },<br>});</pre>



<p>You can now use a custom&nbsp;<code>FieldPolicy</code>&nbsp;read function (like this):</p>



<pre class="wp-block-preformatted">const cache = new InMemoryCache({<br>  typePolicies: {<br>    Query: {<br>      fields: {<br>        book(existingData, { args, toReference }) {<br>          return existingData || <br>            toReference({ __typename: 'Book', id: args.id });<br>        }<br>      }<br>    },<br>  },<br>});</pre>



<p>The new type policy API provides a uniform approach for customizing your cache interactions, and it has plenty more great applications. In addition to the above examples, you can now:</p>



<ul class="wp-block-list"><li>Implement arbitrary pagination logic (or other custom storage) without leaking implementation details outside of the cache</li><li>Reuse generic pagination logic across different fields</li><li>Disable the normalization of certain data to improve performance</li></ul>



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



<p>The Apollo Client cache uses data normalization to help track and manage changes to entities. Although normalization makes sense in most cases, normalizing certain types of data can negatively affect performance. This is especially true if you’re caching large quantities of transient data (such as metrics that are identified by a timestamp and never receive updates).</p>



<p>The type policy API in Apollo Client 3 lets you disable normalization for particular types, like so:</p>



<pre class="wp-block-preformatted">const cache = new InMemoryCache({<br>  typePolicies: {<br>    Person: {<br>      keyFields: false,<br>    },<br>  },<br>});</pre>



<p>When normalization is disabled for a type, objects of that type are embedded within their parent object in the cache, and they can be accessed via that parent.</p>



<p>Check out the&nbsp;<a href="https://www.apollographql.com/docs/react/v3.0-beta/caching/cache-configuration/#disabling-normalization" target="_blank" rel="noreferrer noopener">disabling normalization</a>&nbsp;section of the docs for more details.</p>



<h3 class="wp-block-heading" id="2d88"><a href="#additional-cache-improvements" aria-hidden="true" class="aal_anchor" id="additional-cache-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>Additional cache improvements</h3>



<p>The previous sections highlight the biggest upcoming cache improvements, but here’s a quick rundown of other notable changes.</p>



<p><strong>a) The&nbsp;</strong><code>&lt;strong&gt;InMemoryCache&lt;/strong&gt;</code><strong>&nbsp;no longer generates local IDs</strong></p>



<p>Previous versions of the&nbsp;<code>InMemoryCache</code>&nbsp;would generate identifiers for entities that lack one in order to enable normalization. In Apollo Client 3, the<code>InMemoryCache</code>&nbsp;uses a new, reference-ID-based approach that only normalizes entities that have an ID. Entities&nbsp;<em>without</em>&nbsp;an ID are instead stored within their parent object in the cache. Initial tests with production data sets show a dramatic reduction in cache size, and an increase in overall cache performance.</p>



<p><strong>b) The&nbsp;</strong><code>&lt;strong&gt;InMemoryCache&lt;/strong&gt;</code><strong>&nbsp;uses a new approach for fragment matching</strong></p>



<p>The&nbsp;<code>InMemoryCache</code>&nbsp;now supports using fragments with unions and interfaces via the&nbsp;<code>possibleTypes</code>&nbsp;option. By passing in an object that defines the polymorphic relationships between your schema’s types, you can then look up cached data by interface or union. See the updated&nbsp;<a href="https://www.apollographql.com/docs/react/v3.0-beta/data/fragments/#using-fragments-with-unions-and-interfaces" target="_blank" rel="noreferrer noopener">using fragments with unions and interfaces</a>&nbsp;section of the docs for details.</p>



<p><strong>c)&nbsp;</strong><code>&lt;strong&gt;InMemoryCache&lt;/strong&gt;</code><strong>&nbsp;results are frozen/immutable</strong></p>



<p>As promised in our&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://blog.apollographql.com/whats-new-in-apollo-client-2-6-b3acf28ecad1">What’s new in Apollo Client 2.6 post</a>, cache results are now immutable by default. The&nbsp;<code>freezeResults</code>&nbsp;cache option has been removed (<code>assumeImmutableResults</code>&nbsp;is still available for now, since cache implementations other than&nbsp;<code>InMemoryCache</code>&nbsp;might not return immutable results).</p>



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



<p>You can try all of these great new cache features right now, using the latest Apollo Client 3 beta:</p>



<pre class="wp-block-preformatted">npm install @apollo/client@beta</pre>



<p>Please note that this beta also includes many other non-cache-related changes, which we’ll be covering in future posts. Also note that this is a major release that includes&nbsp;<a href="https://github.com/apollographql/apollo-client/blob/release-3.0/CHANGELOG.md#breaking-changes" target="_blank" rel="noreferrer noopener">backward-incompatible changes</a>.</p>



<p>To learn more about what’s coming in Apollo Client 3, see the&nbsp;<a href="https://github.com/apollographql/apollo-client/pull/5116" target="_blank" rel="noreferrer noopener">release 3.0 PR</a>. You can also refer to the&nbsp;<a href="https://www.apollographql.com/docs/react/v3.0-beta/" target="_blank" rel="noreferrer noopener">3.0 beta documentation</a>. We hope to launch the final version of Apollo Client 3 shortly after Summit, but we still have a few great new features lined up that we’d like to get in place first.</p>



<p>A huge&nbsp;<strong>THANK YOU</strong>&nbsp;to all the Apollo community members who have helped shape the Apollo Client 3 release. If you have a chance, please test out&nbsp;<code>@apollo/client</code>&nbsp;and let us know what you think!</p>



<p>One final note — Apollo Client’s lead developer&nbsp;<a href="https://medium.com/u/540bbf1a0d2b?source=post_page-----565fadd6a01e----------------------" target="_blank" rel="noreferrer noopener">Ben Newman</a>&nbsp;will be talking about all of the new upcoming cache changes in his GraphQL Summit talk, “Fine-Tuning Apollo Client Caching for Your Data Graph.” The talk will take place on October 30th at 12 pm Pacific and will be&nbsp;<a href="https://www.youtube.com/watch?v=LF6Ja9_zNrA" target="_blank" rel="noreferrer noopener">livestreamed here</a>!</p>


Previewing the Apollo Client 3 Cache

What’s new in Apollo Client 2.6

Announcing Apollo Client 2.5


<p>Modern apps are chatty—they require a lot of data, and thus make a lot of requests to underlying services to fulfill those needs. Layering GraphQL over your services solves this issue, since it encapsulates multiple requests into a single operation, avoiding the cost of multiple round trips.</p>



<p>While GraphQL encourages this style of data fetching, React encourages developers to split up data fetching logic to be colocated with the components that use it. This pattern is extremely useful, but can lead to many of the same issues of an app making too many network requests for a server to handle at scale. The idea of batching client operations can be applied to GraphQL clients to solve many of these issues, but sometimes batching can hurt more than help.</p>



<p>To batch, or not to batch, that is the question.</p>



<p>By the end of this post, you should be able to answer the following questions about batching client operations with Apollo:</p>



<ul class="wp-block-list"><li>How does batching work?</li><li>What are the tradeoffs with batching?</li><li>Is batching necessary?</li><li>Can batching be done manually?</li><li>Can I fix automatic batching?</li></ul>



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



<p>Batching is the process of taking a group of requests, combining them into one, and making a single request with the same data that all of the other queries would have made. This is usually done with a timing threshold. For example, with a threshold of 50ms, if a query is made from a component, instead of making the query immediately, the client waits 50ms. If any other queries are requested in that 50ms, all of those additional queries are requested at the same time, rather than separately.</p>



<p>In GraphQL apps, batching usually takes one of two forms. The first form takes all operations and combines them into a single operation using the alias feature in GraphQL. This approach is not recommended, however, since this removes the ease of tracking metrics on a per-operation basis and adds additional complexity to the client.</p>



<p>Instead, we recommend sending an array of operations to a GraphQL server, having the server recognize the request as an array of operations instead of a single one, and handle each operation separately. This method still requires only a single round-trip, while retaining the ability to track single operation performance. Apollo Client handles batching like this using&nbsp;<code>apollo-link-batch-http</code>. It’s also worth noting that this method requires the server to be able to receive an array of operations as well as single operations. Luckily,&nbsp;<code>apollo-server</code>&nbsp;supports this out of the box.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="546" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_IUrPIx21p74CvO2tTKabkA-1024x546.png" alt="" class="wp-image-678" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_IUrPIx21p74CvO2tTKabkA-1024x546.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_IUrPIx21p74CvO2tTKabkA-300x160.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_IUrPIx21p74CvO2tTKabkA-768x410.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_IUrPIx21p74CvO2tTKabkA-1200x640.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_IUrPIx21p74CvO2tTKabkA.png 1500w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>How Apollo batches operations with an array</figcaption></figure>



<p>For a deeper dive into how batching works with Apollo, check out&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://blog.apollographql.com/query-batching-in-apollo-63acfd859862">this post</a>&nbsp;introducing batching in an earlier version of Apollo Client. Even though some of the implementation details have changed, the concepts are still relevant today.</p>



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



<p>Batching may sound like the perfect solution to some network performance issues on the client, but it’s far from perfect. Request batching is prone to slow loading times on the client. For example, if five requests from separate components are made to the GraphQL endpoint, and one of the five requests take a long time, the client won’t get&nbsp;<em>any</em>&nbsp;of the results back until&nbsp;<em>all</em>&nbsp;operations have been resolved. In other words, batched operations are always as slow as the slowest operation in the batch.</p>



<p>Since GraphQL is often used to aggregate data from multiple data sources, this can be problematic. If one of the underlying services is slower than the rest, the effects may be felt across the whole client app.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="400" height="227" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1__1VoQ49cbUEPHL7RPsl0og.gif" alt="" class="wp-image-677"/></figure>



<p>Additionally, batching makes it much harder to debug network traffic. In most scenarios, if a specific operation was taking a long time to resolve, it would be obvious. The component making the query would be stuck in a loading state, and the rest of the app would function normally. Additionally, when using browser debugging tools, slow network requests can usually be found easily. Batching queries makes both of these debugging methods more difficult.</p>



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



<p>Before looking at solutions to the issues that batching introduces, it’s important to question whether batching is even needed in the first place. Since enabling batching is as easy as replacing one&nbsp;<code>apollo-link</code>&nbsp;with another, it&#8217;s tempting to introduce batching at the onset of a project, without any real evidence that batching is needed. In fact, because of its drawbacks, we don’t recommend batching unless performance issues are still present after all of the following steps have been taken:</p>



<ul class="wp-block-list"><li><a href="https://www.apollographql.com/docs/guides/performance.html#automatic-persisted-queries" target="_blank" rel="noreferrer noopener">Use automatic persisted queries</a>&nbsp;(APQ) to reduce the request body size.</li><li><a href="https://www.apollographql.com/docs/guides/performance.html#get" target="_blank" rel="noreferrer noopener">Cache requests with a CDN</a>&nbsp;to prevent operations from ever reaching the GraphQL endpoint.</li><li>Enable partial query caching with&nbsp;<a href="https://www.apollographql.com/docs/apollo-server/features/data-sources.html" target="_blank" rel="noreferrer noopener">Apollo Server</a>&nbsp;to make operation resolution significantly quicker in most cases.</li><li>If possible, use HTTP/2 on the server (with Node.js 10), which allows multiplexing of requests, effectively batching them.</li></ul>



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



<p>Yes! Batching can be done manually. Often, for the cases where batching may still be a necessity, inexpensive operations can be manually batched together to prevent unnecessary requests. In GraphQL, this is done by combining smaller queries into one larger one. For example, if there was a page with four content blocks on it, rather than having each block fetch its own data, a&nbsp;<code>container</code>&nbsp;could fetch the data and pass it to the components manually. This is conceptually similar to the first implementation of batching described in the first section.</p>



<p>This may sound counterintuitive to the patterns that have been established, like colocating queries with the components that use their response, but there are ways around this.</p>



<p>This isn’t suggesting to write one large GraphQL query at the container-level. Instead, write queries normally, next to the components that use them. When you’re ready to optimize a section of an app, convert those queries to&nbsp;<a href="https://www.apollographql.com/docs/react/advanced/fragments.html" target="_blank" rel="noreferrer noopener">fragments</a>&nbsp;and export them from the component file. You can then import these fragments in the container, let the container make the single, large query, and pass the fragment results back to the children. Using container components in this way can even allow you to control loading and error states at the container-level, rather than in each component.</p>



<p>Take a look at this CodeSandbox for a full example of this in action:</p>



<figure class="wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-codesandbox"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" class="wp-embedded-content" sandbox="allow-scripts" security="restricted" title="Manual Query Batching" width="580" height="870" src="https://codesandbox.io/embed/wnyxmy8kv7#?secret=5eT4FyMOe1" data-secret="5eT4FyMOe1"></iframe>
</div></figure>



<p>Even manual batching has issues, though. Since manually batched operations are much larger,&nbsp;<strong>their ability to take advantage of whole-query caching is reduced</strong>. Whole-query cache TTLs are based on the field in an operation with the shortest TTL. Increasing the number of fields in an operation increases the chances that a field that can’t be cached for a long time is included, reducing the ability to cache the whole operation. For more on whole-query caching, and how these TTLs are calculated,&nbsp;<a href="https://www.apollographql.com/docs/engine/proxy/guides.html#cache-hints" target="_blank" rel="noreferrer noopener">read this doc</a>.</p>



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



<p>There is no silver bullet for batching. If batching is enabled, there is always the potential for portions of the batch to run slower, and thus hold up the remaining portions of the batch. Sometimes, however, the trouble of manually batching operations outweighs the benefits. Manually batching may be too complicated, or too large of a refactor to reasonably undertake.</p>



<p>Some of the issues around batching can be solved by manually&nbsp;<em>debatching</em>&nbsp;expensive operations–that is, allowing most operations to be batched like normal, but preventing batching for ones that are known to cause issues. Doing this requires a few steps:</p>



<ol class="wp-block-list"><li>Build components as usual, with colocated queries.</li><li>Identify the most expensive operations using a tool like&nbsp;<a href="https://www.apollographql.com/engine" target="_blank" rel="noreferrer noopener">Apollo Engine</a>&nbsp;(these are not necessarily just the largest queries).</li><li>Mark expensive operations on the client using an operation’s&nbsp;<code>context</code>. You can set the context by specifying a prop on your&nbsp;<code>Query</code>&nbsp;component.</li><li>Use&nbsp;<code>&lt;a href=&quot;https://www.apollographql.com/docs/link/composition.html#directional&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;split&lt;/a&gt;</code>&nbsp;to switch between&nbsp;<code>apollo-link-http</code>&nbsp;or&nbsp;<code>apollo-link-batch-http</code>&nbsp;depending on the context of the operation.</li></ol>



<p>Take a look at this CodeSandbox for a full example of this in action:</p>



<figure class="wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-codesandbox"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" class="wp-embedded-content" sandbox="allow-scripts" security="restricted" title="Link switching for batches (blog)" width="580" height="870" src="https://codesandbox.io/embed/14xk74wk0q#?secret=S2SdbHI0bf" data-secret="S2SdbHI0bf"></iframe>
</div></figure>



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



<p>Batching is a tricky topic. There are plenty of reasons to use some form of client request batching, but many times these solutions just cause more problems than they solve.</p>



<p>Hopefully, armed with this information, you can feel confident when making a decision about how to boost performance on the client.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="480" height="359" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_z1jNMuLYJ-eOi_TGIjkjNw.gif" alt="" class="wp-image-676"/></figure>



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



<p>I hope you’ll also&nbsp;<a href="https://summit.graphql.com/" target="_blank" rel="noreferrer noopener">join us at the 3rd annual GraphQL Summit on Nov 7–8 in San Francisco</a>. With over 800 attendees expected, it’s the largest GraphQL developer event in the world. Tickets are selling fast, so&nbsp;<a href="https://www.eventbrite.com/e/graphql-summit-2018-tickets-46601841362" target="_blank" rel="noreferrer noopener">register today</a>&nbsp;to reserve your spot!</p>


Batching Client GraphQL Queries

Deploy a fullstack Apollo app with Netlify


<p>We’ve been working on a new&nbsp;<a href="https://www.apollographql.com/docs">guides and best practices site</a>&nbsp;for Apollo and GraphQL that covers some of the most important topics we’ve heard from our users. This post reproduces part of the&nbsp;<a rel="noreferrer noopener" href="https://www.apollographql.com/docs/react/recipes/testing" target="_blank">Testing React Components</a>&nbsp;article, and if you’d like to read more about testing (including mutation components), and other best practices, check out the&nbsp;<a href="https://www.apollographql.com/docs/guides/testing-react-components.html">full article</a>&nbsp;on the site!</p>



<p>As always, we’re grateful to the community help that makes Apollo possible. Thanks to&nbsp;<a href="https://medium.com/u/b016d103ae51?source=post_page-----d575dc642e04----------------------" target="_blank" rel="noreferrer noopener">Dirk-Jan Rutten</a>&nbsp;for&nbsp;<a href="https://github.com/apollographql/apollo-client/pull/3309" target="_blank" rel="noreferrer noopener">kick-starting this article on GitHub</a>!</p>



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



<p>Running tests against your code has long been a best practice. Testing provides additional security for the code that’s already written, and prevents accidental regressions in the future. Components utilizing&nbsp;<code>react-apollo</code>, the React integration for Apollo Client, are no exception.</p>



<p>Although&nbsp;<code>react-apollo</code>&nbsp;has a lot going on under the hood to make your life as a React developer easy, the library provides multiple tools for testing that simplify those abstractions, and allows complete focus on the component logic. These testing utilities have long been used to test the&nbsp;<code>react-apollo</code>&nbsp;library itself, and they will be supported long-term.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="513" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_EopQgfU7303F3YpVFwi7uA-1024x513.png" alt="" class="wp-image-740" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_EopQgfU7303F3YpVFwi7uA-1024x513.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_EopQgfU7303F3YpVFwi7uA-300x150.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_EopQgfU7303F3YpVFwi7uA-768x385.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_EopQgfU7303F3YpVFwi7uA-1536x769.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_EopQgfU7303F3YpVFwi7uA-2048x1026.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_EopQgfU7303F3YpVFwi7uA-1200x601.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_EopQgfU7303F3YpVFwi7uA-1980x992.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>The goal: Lots of green checkmarks!</figcaption></figure>



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



<p>The&nbsp;<code>react-apollo</code>&nbsp;libary relies on&nbsp;<a href="https://reactjs.org/docs/context.html" target="_blank" rel="noreferrer noopener">context</a>&nbsp;in order to pass the&nbsp;<code>ApolloClient</code>&nbsp;instance through the React component tree. In addition,&nbsp;<code>react-apollo</code>&nbsp;makes network requests in order to fetch data. This behavior affects how tests should be written for components that use&nbsp;<code>react-apollo</code>.</p>



<p>This guide will explain step-by-step how to test&nbsp;<code>react-apollo</code>&nbsp;code. The following examples use the&nbsp;<a href="https://facebook.github.io/jest/docs/en/tutorial-react.html" target="_blank" rel="noreferrer noopener">Jest</a>&nbsp;testing framework, but most concepts should be reusable with other libraries. These examples aim to use as simple of a toolset as possible, so React’s&nbsp;<a href="https://reactjs.org/docs/test-renderer.html" target="_blank" rel="noreferrer noopener">test renderer</a>&nbsp;will be used in place of React-specific tools like&nbsp;<a href="https://github.com/airbnb/enzyme" target="_blank" rel="noreferrer noopener">Enzyme</a>&nbsp;and&nbsp;<a href="https://github.com/kentcdodds/react-testing-library" target="_blank" rel="noreferrer noopener">react-testing-library</a>.</p>



<p>Consider the component below, which makes a basic query, and displays its results:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-jsx">import React from &#039;react&#039;;
import gql from &#039;graphql-tag&#039;;
import { Query } from &#039;react-apollo&#039;;

// Make sure the query is also exported -- not just the component
export const GET_DOG_QUERY = gql`
  query getDog($name: String) {
    dog(name: $name) {
      id
      name
      breed
    }
  }
`;

export const Dog = ({ name }) =&gt; (
  &lt;Query query={GET_DOG_QUERY} variables={{ name }}&gt;
    {({ loading, error, data }) =&gt; {
      if (loading) return &#039;Loading...&#039;;
      if (error) return `Error!`;

      return (
        &lt;p&gt;
          {data.dog.name} is a {data.dog.breed}
        &lt;/p&gt;
      );
    }}
  &lt;/Query&gt;
);</code></pre>



<p>Given this component, let’s try to render it inside a test, just to make sure there are no render errors:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">// Broken because it&#039;s missing Apollo Client in the context
it(&#039;should render without error&#039;, () =&gt; {
  renderer.create(&lt;Dog name=&quot;Buck&quot; /&gt;);
});</code></pre>



<p>This test would produce an error because Apollo Client isn’t available on the context for the&nbsp;<code>Query</code>&nbsp;component to consume.</p>



<p>In order to fix this we could wrap the component in an&nbsp;<code>ApolloProvider</code>&nbsp;and pass an instance of Apollo Client to the&nbsp;<code>client</code>&nbsp;prop:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-jsx">// Not predictable
it(&#039;renders without error&#039;, () =&gt; {
  renderer.create(
    &lt;ApolloProvider client={client}&gt;
      &lt;Dog name=&quot;Buck&quot; /&gt;
    &lt;/ApolloProvider&gt;,
  );
});</code></pre>



<p>However, this will cause the tests to run against an actual backend which makes the tests very unpredictable for the following reasons:</p>



<ul class="wp-block-list"><li>The server could be down.</li><li>There may be no network connection.</li><li>The results are not guaranteed to be the same for every query.</li></ul>



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



<p>The&nbsp;<code>react-apollo/test-utils</code>&nbsp;module exports a&nbsp;<code>MockedProvider</code>&nbsp;component which simplifies the testing of React components by mocking calls to the GraphQL endpoint. This allows the tests to be run in isolation and provides consistent results on every run by removing the dependence on remote data.</p>



<p>By using this&nbsp;<code>MockedProvider</code>&nbsp;component, it’s possible to specify the exact results that should be returned for a certain query using the&nbsp;<code>mocks</code>&nbsp;prop.</p>



<p>Here’s an example of a test for the above&nbsp;<code>Dog</code>&nbsp;component using&nbsp;<code>MockedProvider</code>, which shows how to define the mocked response for&nbsp;<code>GET_DOG_QUERY</code>:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-jsx">// dog.test.js

import { MockedProvider } from &#039;react-apollo/test-utils&#039;;

// The component AND the query need to be exported
import { GET_DOG_QUERY, Dog } from &#039;./dog&#039;;

const mocks = [
  {
    request: {
      query: GET_DOG_QUERY,
      variables: {
        name: &#039;Buck&#039;,
      },
    },
    result: {
      data: {
        dog: { id: &#039;1&#039;, name: &#039;Buck&#039;, breed: &#039;bulldog&#039; },
      },
    },
  },
];

it(&#039;renders without error&#039;, () =&gt; {
  renderer.create(
    &lt;MockedProvider mocks={mocks} addTypename={false}&gt;
      &lt;Dog name=&quot;Buck&quot; /&gt;
    &lt;/MockedProvider&gt;,
  );
});</code></pre>



<p>The&nbsp;<code>mocks</code>&nbsp;array takes objects with specific&nbsp;<code>request</code>s and their associated&nbsp;<code>result</code>s. When the provider receives a&nbsp;<code>GET_DOG_QUERY</code>&nbsp;with matching&nbsp;<code>variables</code>, it returns the corresponding object from the&nbsp;<code>result</code>&nbsp;key.</p>



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



<p>You may notice the prop being passed to the&nbsp;<code>MockedProvider</code>&nbsp;called&nbsp;<code>addTypename</code>. The reason this is here is because of how Apollo Client normally works. When a request is made with Apollo Client normally, it adds a&nbsp;<code>__typename</code>&nbsp;field to every object type requested. This is to make sure that Apollo Client’s cache knows how to normalize and store the response. When we’re making our mocks, though, we’re importing the raw queries&nbsp;<em>without typenames</em>&nbsp;from the component files.</p>



<p>If we don’t disable the adding of typenames to queries, the imported query won’t match the query actually being run by the component during our tests.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p><em>In short, if queries are lacking&nbsp;</em><code>&lt;em&gt;__typename&lt;/em&gt;</code><em>, it’s important to pass the&nbsp;</em><code>&lt;em&gt;addTypename={false}&lt;/em&gt;</code><em>&nbsp;prop to the&nbsp;</em><code>&lt;em&gt;MockedProvider&lt;/em&gt;</code><em>.</em></p></blockquote>



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



<p>In this example, the&nbsp;<code>Dog</code>&nbsp;component will render, but it will render in a loading state, not the final response state. This is because&nbsp;<code>MockedProvider</code>&nbsp;doesn’t just return the data but instead returns a&nbsp;<code>Promise</code>&nbsp;that will resolve to that data. By using a&nbsp;<code>Promise</code>&nbsp;it enables testing of the loading state in addition to the final state:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-jsx">it(&#039;should render loading state initially&#039;, () =&gt; {
  const component = renderer.create(
    &lt;MockedProvider mocks={[]}&gt;
      &lt;Dog /&gt;
    &lt;/MockedProvider&gt;,
  );

  const tree = component.toJSON();
  expect(tree.children).toContain(&#039;Loading...&#039;);
});</code></pre>



<p>This shows a basic example test that tests the loading state of a component by checking that the children of the component contain the text&nbsp;<code>Loading...</code>. In an actual application, this test would probably be more complicated, but the testing logic would be the same.</p>



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



<p>Loading state, while important, isn’t the only thing to test. To test the final state of the component after receiving data, we can just wait for it to update and test the final state.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-jsx">const wait = require(&#039;waait&#039;);

it(&#039;should render dog&#039;, async () =&gt; {
  const dogMock = {
    request: {
      query: GET_DOG_QUERY,
      variables: { name: &#039;Buck&#039; },
    },
    result: {
      data: { dog: { id: 1, name: &#039;Buck&#039;, breed: &#039;poodle&#039; } },
    },
  };

  const component = renderer.create(
    &lt;MockedProvider mocks={[dogMock]} addTypename={false}&gt;
      &lt;Dog name=&quot;Buck&quot; /&gt;
    &lt;/MockedProvider&gt;,
  );

  await wait(0); // wait for response

  const p = component.root.findByType(&#039;p&#039;);
  expect(p.children).toContain(&#039;Buck is a poodle&#039;);
});</code></pre>



<p>Here, you can see the&nbsp;<code>await wait(0)</code>&nbsp;line. This is a utility function from the&nbsp;<code>&lt;a href=&quot;https://npm.im/waait&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;waait&lt;/a&gt;</code>&nbsp;npm package. It delays until the next “tick” of the event loop, and allows time for that&nbsp;<code>Promise</code>&nbsp;returned from&nbsp;<code>MockedProvider</code>&nbsp;to be fulfilled. After that&nbsp;<code>Promise</code>&nbsp;resolves (or rejects), the component can be checked to ensure it displays the correct information — in this case, “Buck is a poodle”.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="500" height="244" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_jgFr1nhOITWQphBedPE34A.gif" alt="" class="wp-image-741"/><figcaption>✅ is a great feeling</figcaption></figure>



<p>For more complex UI with heavy calculations, or delays added into its render logic, the&nbsp;<code>wait(0)</code>&nbsp;will not be long enough. In these cases, you could either increase the wait time or use a package like&nbsp;<code>&lt;a href=&quot;https://npm.im/wait-for-expect&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;wait-for-expect&lt;/a&gt;</code>&nbsp;to delay until the render has happened. The risk of using a package like this everywhere by default is that&nbsp;<em>every&nbsp;</em>test could take up to five seconds to execute (or longer if the default timeout has been increased).</p>



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



<p>Since they can make or break the experience a user has when interacting with the app, error states are one of the most important states to test, but are often less tested in development.</p>



<p>Since most developers would follow the “happy path” and not encounter these states as often, it’s almost&nbsp;<em>more</em>important to test these states to prevent accidental regressions.</p>



<p>To simulate a GraphQL error, an&nbsp;<code>error</code>&nbsp;property can be included on the mock, in place of or in addition to the&nbsp;<code>result</code>.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-jsx">it(&#039;should show error UI&#039;, async () =&gt; {
  const dogMock = {
    request: {
      query: GET_DOG_QUERY,
      variables: { name: &#039;Buck&#039; },
    },
    error: new Error(&#039;aw shucks&#039;),
  };

  const component = renderer.create(
    &lt;MockedProvider mocks={[dogMock]} addTypename={false}&gt;
      &lt;Dog name=&quot;Buck&quot; /&gt;
    &lt;/MockedProvider&gt;,
  );

  await wait(0); // wait for response

  const tree = component.toJSON();
  expect(tree.children).toContain(&#039;Error!&#039;);
});</code></pre>



<p>Here, whenever the&nbsp;<code>MockedProvider</code>&nbsp;receives a&nbsp;<code>GET_DOG_QUERY</code>&nbsp;with matching&nbsp;<code>variables</code>, it will return the error assigned to the&nbsp;<code>error</code>&nbsp;property in the mock. This forces the component into the error state, allowing verification that it’s being handled gracefully.</p>



<p>Testing UI components isn’t a simple issue, but hopefully these tools will create confidence when testing components that are dependent on data.</p>



<p>For a working example, check out&nbsp;<a href="https://codesandbox.io/s/40k7j708n4" target="_blank" rel="noreferrer noopener">this CodeSandbox</a>.</p>



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



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



<p>For more, including how to test <code>Mutation</code> components, check out the <a href="https://www.apollographql.com/docs/guides/testing-react-components.html">Testing React Components</a> page on <a rel="noreferrer noopener" href="https://www.apollographql.com/docs/" target="_blank">our new guides and best practices site</a>!</p>


Testing Apollo’s Query Component


<p>The wait is over! We’re super excited to announce&nbsp;<strong>React Apollo 2.1</strong>, a huge step forward in improving how you develop React applications with GraphQL. It features a new render prop API and&nbsp;<a href="https://dev-blog.apollodata.com/whats-next-for-react-apollo-4d41ba12c2cb" target="_blank" rel="noreferrer noopener">much stronger TypeScript support</a>, along with upgraded docs. It’s also 100% backwards compatible!</p>



<p>From the very beginning, React Apollo was designed to make building React apps with Apollo Client a delightful and intuitive experience. For a long time, this meant connecting data to your UI with higher order components. With React Apollo 2.1, using GraphQL data in your React app is now easier than ever thanks to our brand new components:&nbsp;<code>Query</code>,&nbsp;<code>Mutation</code>, and&nbsp;<code>Subscription</code>.</p>



<p>We’ve been working with these components exclusively for the past three months and have been amazed not only by how much they’ve improved our productivity, but also by how fun they are to build. Read on to learn more! 🚀</p>



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



<p>Fetching data in a simple, declarative way is one of the core features of Apollo Client. We’re excited to improve upon that feature with our new <code>Query</code> component, which uses the render prop pattern to update your UI with your GraphQL data.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">import React from &quot;react&quot;;
import { Query } from &quot;react-apollo&quot;;
import gql from &quot;graphql-tag&quot;;

const GET_TODOS = gql`
  {
    todos {
      id
      type
    }
  }
`;

const Todos = () =&gt; (
  &lt;Query query={GET_TODOS}&gt;
    {({ loading, error, data }) =&gt; {
      if (loading) return &lt;p&gt;Loading...&lt;/p&gt;;
      if (error) return &lt;p&gt;Error :(&lt;/p&gt;;

      return data.todos.map(({ id, type }) =&gt; (
        &lt;p key={id}&gt;{type}&lt;/p&gt;
      ));
    }}
  &lt;/Query&gt;
);</code></pre>



<p>To create a&nbsp;<code>Query</code>&nbsp;component, just pass a GraphQL query to the&nbsp;<code>query</code>&nbsp;prop and provide a function as its child that returns the UI you want to render. This function, commonly referred to as a&nbsp;<a href="https://reactjs.org/docs/render-props.html" target="_blank" rel="noreferrer noopener">render prop function</a>, is called with your GraphQL query’s&nbsp;<code>loading</code>&nbsp;and&nbsp;<code>error</code>&nbsp;state, in addition to your&nbsp;<code>data</code>&nbsp;when it arrives. For a full list of properties on the render prop function, check out our&nbsp;<a href="https://www.apollographql.com/docs/react/essentials/queries.html#api" target="_blank" rel="noreferrer noopener">updated API overview</a>.</p>



<p>The render prop API allows for much greater flexibility than our old&nbsp;<code>graphql</code>&nbsp;higher order component, unlocking features such as dynamically choosing a query based on props and easily composing multiple queries. While the higher order component API is still useful, we think the new API more accurately reflects how developers are building React apps today.</p>



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



<p>If you thought fetching data with the <code>Query</code> component was cool, just wait until you try updating data with the new <code>Mutation</code> component! <code>Mutation</code> also uses the render prop pattern to pass down a function to trigger a mutation from your UI, in addition to the state of your mutation and any results.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">import React from &quot;react&quot;;
import { Mutation } from &quot;react-apollo&quot;;
import gql from &quot;graphql-tag&quot;;

const TOGGLE_TODO = gql`
  mutation ToggleTodo($id: Int!) {
    toggleTodo(id: $id) {
      id
      completed
    }
  }
`;

const Todo = ({ id, text }) =&gt; (
  &lt;Mutation mutation={TOGGLE_TODO} variables={{ id }}&gt;
    {(toggleTodo, { loading, error, data }) =&gt; (
      &lt;div&gt;
        &lt;p onClick={toggleTodo}&gt;
          {text}
        &lt;/p&gt;
        {loading &amp;&amp; &lt;p&gt;Loading...&lt;/p&gt;}
        {error &amp;&amp; &lt;p&gt;Error :( Please try again&lt;/p&gt;}
      &lt;/div&gt;
    )}
  &lt;/Mutation&gt;
);</code></pre>



<p>In this example,&nbsp;<code>toggleTodo</code>&nbsp;is our mutate function that tells Apollo Client to fire off the mutation. We also receive information about its&nbsp;<code>loading</code>&nbsp;and&nbsp;<code>error</code>&nbsp;state, as well as any&nbsp;<code>data</code>&nbsp;returned. This is a vast improvement over creating mutation containers with the&nbsp;<code>graphql</code>&nbsp;higher order component because you no longer have to manually track the state of your mutation. We’ve also provided&nbsp;<code>onError</code>&nbsp;and&nbsp;<code>onCompleted</code>&nbsp;props to the&nbsp;<code>Mutation</code>&nbsp;component if you’d like to register any callbacks.</p>



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



<p>React Apollo 2.1 introduces a new component, the&nbsp;<code>ApolloConsumer</code>, that allows you to easily access your Apollo Client instance directly via the render prop function. You can think of the&nbsp;<code>ApolloConsumer</code>&nbsp;component as similar to the&nbsp;<code>Consumer</code>&nbsp;component from the&nbsp;<a href="https://github.com/reactjs/rfcs/blob/master/text/0002-new-version-of-context.md" target="_blank" rel="noreferrer noopener">new React context API</a>.</p>



<p>One of the benefits of the <code>ApolloConsumer</code> component is that it drastically reduces the amount of code you need to write in order to perform simple local mutations with <code>apollo-link-state</code>. For one-off mutations like writing a string to the cache, there’s no need to set up a resolver or a GraphQL mutation! In your <code>ApolloConsumer</code> render prop function, just call <code>writeData</code> directly from your Apollo Client instance.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">import React from &quot;react&quot;;
import { ApolloConsumer } from &quot;react-apollo&quot;;

import Link from &quot;./Link&quot;;

const FilterLink = ({ filter, children }) =&gt; (
  &lt;ApolloConsumer&gt;
    {cache =&gt; (
      &lt;Link
        onClick={() =&gt; cache.writeData({ data: { visibilityFilter: filter } })}
      &gt;
        {children}
      &lt;/Link&gt;
    )}
  &lt;/ApolloConsumer&gt;
);</code></pre>



<p>You can also use the&nbsp;<code>ApolloConsumer</code>&nbsp;component for&nbsp;<a href="https://www.apollographql.com/docs/react/essentials/queries.html#manual-query" target="_blank" rel="noreferrer noopener">firing queries manually</a>&nbsp;in response to a user action, like a button click, or for prefetching data.</p>



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



<p>With the React Apollo 2.1 release, we’re thrilled to finally share our revamped&nbsp;<a href="https://www.apollographql.com/docs/react/" target="_blank" rel="noreferrer noopener">docs site</a>, now with search and more tutorials! All of our docs improvements were specifically built with the community in mind, thanks to all the feedback you’ve shared with us on Twitter and Slack.</p>



<p>Not only did we refactor the code samples to&nbsp;<code>Query</code>&nbsp;and&nbsp;<code>Mutation</code>&nbsp;components, we also refactored the left-hand navigation to make core features like pagination and local state management more discoverable. In case you already know what you’re looking for, we reenabled search across all Apollo docs, thanks to&nbsp;<a href="https://medium.com/u/54c8047f8f10?source=post_page-----c837cc23d926----------------------" target="_blank" rel="noreferrer noopener">Jesse Rosenberger</a>.</p>



<p>For this release, we wanted to ensure that the getting started experience with Apollo Client was approachable and interactive, so we built a new essentials section from the ground up. The&nbsp;<a href="https://www.apollographql.com/docs/react/essentials/get-started.html" target="_blank" rel="noreferrer noopener">Apollo essentials</a>&nbsp;section covers everything you need to start building your first&nbsp;<code>Query</code>&nbsp;and&nbsp;<code>Mutation</code>&nbsp;components quickly without overwhelming you with information. They feature tutorials on&nbsp;<a href="https://dev-blog.apollodata.com/zero-config-graphql-state-management-27b1f1b3c2c3" target="_blank" rel="noreferrer noopener">Apollo Boost</a>,&nbsp;<code>Query</code>&nbsp;components,&nbsp;<code>Mutation</code>&nbsp;components, and&nbsp;<a href="https://dev-blog.apollodata.com/the-future-of-state-management-dd410864cae2" target="_blank" rel="noreferrer noopener">Apollo Link State</a>&nbsp;accompanied by interactive examples on&nbsp;<a href="https://codesandbox.io/" target="_blank" rel="noreferrer noopener">CodeSandbox</a>.</p>



<p>We know that many of you will be migrating to the new render props API incrementally, so we’ve made the&nbsp;<a href="https://www.apollographql.com/docs/react/api/react-apollo.html#graphql" target="_blank" rel="noreferrer noopener">old docs</a>&nbsp;for the&nbsp;<code>graphql</code>&nbsp;higher order component available within the React Apollo API section.</p>



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



<p>We’d like to thank&nbsp;<a href="https://medium.com/u/2e2136fb7ed0?source=post_page-----c837cc23d926----------------------" target="_blank" rel="noreferrer noopener">Kevin Ross</a>,&nbsp;<a href="https://medium.com/u/b016d103ae51?source=post_page-----c837cc23d926----------------------" target="_blank" rel="noreferrer noopener">Dirk-Jan Rutten</a>, and&nbsp;<a href="https://medium.com/u/82263c594756?source=post_page-----c837cc23d926----------------------" target="_blank" rel="noreferrer noopener">Leonardo A Garcia C</a>, who tirelessly worked to help write, test, and improve the new render props API. We’re really happy with how flexible the&nbsp;<code>Query</code>,&nbsp;<code>Mutation</code>, and&nbsp;<code>Subscription</code>&nbsp;components are, and we can’t wait to see what all of you build with them!</p>



<p>For the past two months, many of our community members were brave enough to test out the beta version of React Apollo 2.1. We’d like to give a shoutout to all our early testers, especially content creators such as&nbsp;<a href="https://medium.com/u/86a55cd7983b?source=post_page-----c837cc23d926----------------------" target="_blank" rel="noreferrer noopener">Wes Bos</a>&nbsp;and&nbsp;<a href="https://medium.com/u/b384aa92a080?source=post_page-----c837cc23d926----------------------" target="_blank" rel="noreferrer noopener">Sara Vieira</a>, for your invaluable feedback on how to refine and teach the new components.</p>



<p>Finally, I’d like to give a special thanks to all of the Apollo team members who were involved in shipping this release, especially&nbsp;<a href="https://medium.com/u/fd3d3dea3cd3?source=post_page-----c837cc23d926----------------------" target="_blank" rel="noreferrer noopener">James Baxley III</a>&nbsp;for his leadership over the project. It’s been awesome to see your vision for React Apollo evolve over the past two years.</p>



<h2 class="wp-block-heading" id="c22f"><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 constantly looking to iterate upon the best way to build React apps with GraphQL. Here’s a sneak peek of some of the things on our mind that should be coming to React Apollo in the future:</p>



<ul class="wp-block-list"><li>Today, you can manually fire queries either for prefetching or in response to a user action by creating an&nbsp;<code>ApolloConsumer</code>&nbsp;component, but you have to handle your own loading and error state. Soon, we’re looking to make&nbsp;<strong>manually firing queries</strong>&nbsp;a first-class feature in the&nbsp;<code>Query</code>&nbsp;component by adding a new&nbsp;<code>delay</code>&nbsp;prop and&nbsp;<code>load</code>&nbsp;action to the render prop function.</li><li>We’re eagerly anticipating the release of React 16.3 and its awesome features like the new context API. Once it arrives, we will release a new major version of React Apollo that’s 100% compatible with&nbsp;<strong>async strict mode</strong>&nbsp;and all of the latest features.</li><li>Beyond React 16.3, we can’t wait to start experimenting further with&nbsp;<a href="https://dev-blog.apollodata.com/a-first-look-at-async-react-apollo-10a82907b48e" target="_blank" rel="noreferrer noopener">integrating React Suspense into React Apollo</a>. We’ve already released a first proof of concept, and are curious to see where it goes!</li></ul>



<p>As always, we would love to hear your feedback about React Apollo 2.1 and the direction of the project. We hope you love it as much as we do! ❤️</p>


Introducing React Apollo 2.1


<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="auto, (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="auto, (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


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



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



<p>I’m super excited to announce the first beta of React Apollo version 2.1. It is a non-breaking change (unless you are using TypeScript) with a ton of new features, so go install it right now! It adds a new component API, smaller bundle size, and better TypeScript support,&nbsp;<em>and</em>&nbsp;even supports Preact for server-side rendering.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="776" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_z5Lx8JK4KFGWxcfezikoKw-1024x776.png" alt="" class="wp-image-862" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_z5Lx8JK4KFGWxcfezikoKw-1024x776.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_z5Lx8JK4KFGWxcfezikoKw-300x227.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_z5Lx8JK4KFGWxcfezikoKw-768x582.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_z5Lx8JK4KFGWxcfezikoKw-1200x909.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_z5Lx8JK4KFGWxcfezikoKw.png 1360w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Query component in action!</figcaption></figure>



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



<p>It has been over a year and a half since this&nbsp;<a href="https://github.com/apollographql/react-apollo/pull/120" target="_blank" rel="noreferrer noopener">pull request</a>&nbsp;was merged, creating the current React Apollo API. Back then,&nbsp;<a href="https://medium.com/u/803918030a60?source=post_page-----4d41ba12c2cb----------------------" target="_blank" rel="noreferrer noopener">Sashko Stubailo</a>&nbsp;and&nbsp;<a href="https://medium.com/u/39cbd38c57c8?source=post_page-----4d41ba12c2cb----------------------" target="_blank" rel="noreferrer noopener">Jonas Helfer</a>&nbsp;were hard at work making the core Apollo Client the best way to use GraphQL, and I was a member of the Apollo community happily designing the integration my team at the time wanted to use to ship our app faster. At that time, Apollo Client was averaging around 3,000 downloads per week and React had a little over 400,000. Redux and HOC’s were all the rage, with libraries like Recompose being a pretty incredible way to build with React.</p>



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



<p>Apollo Client is now used over 150,000 times a week and React has grown to a massive 1.7 million a week! With both of these projects growing, the community was bound to grow and change. Full, “Component-based” APIs like React Router 4, Formik, and more are pushing more composition into the render function and away from patterns like higher order components. At the same time, the abilities and usage of Apollo has grown to include things like local state, REST endpoints, and more and more features around working with GraphQL endpoints.</p>



<p>Now, it’s time for a change, or rather an addition:</p>



<p>With React Apollo 2.1, we are introducing the&nbsp;<code>Query</code>&nbsp;component, a great way to bring data into your render.</p>



<p>This design was worked on for over a month with a ton of members of the Apollo community. A huge shout out goes to&nbsp;<a href="https://medium.com/u/2e2136fb7ed0?source=post_page-----4d41ba12c2cb----------------------" target="_blank" rel="noreferrer noopener">Kevin Ross</a>,&nbsp;<a href="https://medium.com/u/b016d103ae51?source=post_page-----4d41ba12c2cb----------------------" target="_blank" rel="noreferrer noopener">Dirk-Jan Rutten</a>, and&nbsp;<a href="https://medium.com/u/82263c594756?source=post_page-----4d41ba12c2cb----------------------" target="_blank" rel="noreferrer noopener">Leonardo A Garcia C</a>&nbsp;who really put in the hard work of writing, testing, and rewriting to find an API that is flexible but brings all of the improvements that render props can offer into an app. The work of these three show how strong and passionate the Apollo community is in building what app developers need.</p>



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



<p>The standout feature of React Apollo 2.1 is the <code>Query</code> component. Using it goes a little something like this:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">import gql from &#039;graphql-tag&#039;;
import { Query } from &#039;react-apollo&#039;;

const query = gql`
  query SomeQuery {
    foo {
      bar
      baz
    }
  }
`;
function MyComponent() {
  return (
    &lt;Query query={query}&gt;
      {(result) =&gt; {
        if (result.loading) return &lt;Loading /&gt;;
        if (result.error) return &lt;Error error={error} /&gt;;
         
        const { data } = result;
        
        return &lt;h1&gt;Hello {data.foo.bar} {data.foo.baz}!&lt;/h1&gt;;
      })
    &lt;/Query&gt;
  );
}</code></pre>



<p>Instead of exporting a wrapped component using the&nbsp;<code>graphql</code>&nbsp;HOC, you put your query right into the render function whenever you need data! It takes a function as a child, which is quickly becoming the go-to way to use a&nbsp;<a href="https://reactjs.org/docs/render-props.html#using-props-other-than-render" target="_blank" rel="noreferrer noopener">render prop in React</a>. In doing this, a few exciting features are opened up:</p>



<ul class="wp-block-list"><li>Choosing a dynamic query based on what props are used</li><li>Updating the state of the component that is showing the data without passing down a prop</li><li>Easy composition of multiple operations</li></ul>



<p>Though partially cosmetic, the design decisions that went into this component come from real-world use by a ton of Apollo developers.&nbsp;<a href="https://medium.com/u/cff8a83d5fc3?source=post_page-----4d41ba12c2cb----------------------" target="_blank" rel="noreferrer noopener">Peter Piekarczyk</a>&nbsp;started this off with his project&nbsp;<a href="https://github.com/peterpme/apollo-tote" target="_blank" rel="noreferrer noopener">Apollo Tote</a>, which was solving real needs of his app. We always want Apollo to be driven by the needs of product teams and I think this is a great example of the community designing what is best!</p>



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



<p>It (kinda) all started from a&nbsp;<a href="https://medium.com/u/cc2eaf4f2cd2?source=post_page-----4d41ba12c2cb----------------------" target="_blank" rel="noreferrer noopener">James Kyle</a>&nbsp;tweet…</p>



<p>…which led to <a rel="noreferrer noopener" href="https://medium.com/u/908fb8fea30c?source=post_page-----4d41ba12c2cb----------------------" target="_blank">Max Stoiber</a> pointing out a problem…</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">Can&#39;t do <a href="https://twitter.com/apollographql?ref_src=twsrc%5Etfw">@apollographql</a> server-side rendering iirc? Is that a lazy reason?</p>&mdash; Max Stoiber (@mxstbr) <a href="https://twitter.com/mxstbr/status/953607229940338690?ref_src=twsrc%5Etfw">January 17, 2018</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div></figure>



<p>…which brought out <a rel="noreferrer noopener" href="https://medium.com/u/30b8f5921914?source=post_page-----4d41ba12c2cb----------------------" target="_blank">Jason Miller</a> to find a solution!</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">I&#39;d recommend changing this line to check for Component.prototype.render:<a href="https://t.co/o7CfiFgovb">https://t.co/o7CfiFgovb</a></p>&mdash; Jason Miller 🦊⚛ (@_developit) <a href="https://twitter.com/_developit/status/953646725327138817?ref_src=twsrc%5Etfw">January 17, 2018</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div></figure>



<p>Support for Preact has always been on the list of wants for React Apollo, but sometimes you need a little help from your friends. With Jason’s guidance, React Apollo 2.1 supports Preact (using&nbsp;<code>preact-compat</code>) for both client&nbsp;<em>and</em>&nbsp;server usage.</p>



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



<p>We are always looking to leverage the typed nature of GraphQL to make client apps type safe. For example, the work&nbsp;<a href="https://medium.com/u/a0ae4f5c7bc0?source=post_page-----4d41ba12c2cb----------------------" target="_blank" rel="noreferrer noopener">Grégoire Vda</a>&nbsp;has been doing with&nbsp;<a href="https://github.com/apollographql/reason-apollo" target="_blank" rel="noreferrer noopener">Reason Apollo</a>&nbsp;informed some of the work on the new React Apollo design. Now the React Apollo code base doesn’t use the&nbsp;<code>any</code>&nbsp;type at all, and the test suites are actually type-checked as well!</p>



<p>The&nbsp;<code>graphql</code>&nbsp;HOC parameterized types have been streamlined to support full typing, better ease of use, and consistency with the rest of the project. The new parameterized signature is<code>graphql&lt;TProps, TData, TGraphQLVariables, TChildProps&gt;</code>, where none are required and full typing only requires the<br>first three types. This means that your variables are now correctly checked when performing mutations or queries!</p>



<h2 class="wp-block-heading" id="7b4f"><a href="#the-road-ahead" aria-hidden="true" class="aal_anchor" id="the-road-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>The road ahead</h2>



<p>This is a first beta of this design and we are eager to get your feedback! Try installing&nbsp;<code>react-apollo@beta</code>today and report any issues you run into. The upgrade should work out of the box (no breaking changes) and an initial usage doc of the new&nbsp;<code>Query</code>&nbsp;component can be found&nbsp;<a href="https://github.com/apollographql/react-apollo/releases/tag/v2.1.0-beta.0" target="_blank" rel="noreferrer noopener">here</a>. I even updated&nbsp;<a href="https://medium.com/u/c827782c6410?source=post_page-----4d41ba12c2cb----------------------" target="_blank" rel="noreferrer noopener">Peggy Rayzis</a>’ famous bitcoin demo to show the new component in action:<a href="https://codesandbox.io/embed/71ro40qk16" target="_blank" rel="noreferrer noopener">CodeSandboxCodeSandbox is an online editor tailored for web applications.codesandbox.io</a></p>



<p>Thanks to all of the amazing contributors who have helped out on this release! We hope you love it!</p>


What’s next for React Apollo


<p>Over the holiday break, while the in-laws slept soundly and not a child was making a peep, I had the chance to play around with&nbsp;<a href="https://reasonml.github.io/" target="_blank" rel="noreferrer noopener">ReasonML</a>. Reason is a new programming language built on top of OCaml and designed to be compiled into JavaScript. After spending a couple of years with TypeScript over the development of Apollo, I thought it would be fun to try another compile to JavaScript language.</p>



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



<p>There are a&nbsp;<a href="https://reasonml.github.io/guide/what-and-why" target="_blank" rel="noreferrer noopener">lot of benefits</a>&nbsp;to choosing a language like Reason, but honestly I just wanted to try it out to see what all the excitement is about! After Cheng Lou’s talk at&nbsp;<a href="https://www.youtube.com/watch?v=_0T5OSSzxms" target="_blank" rel="noreferrer noopener">React Conf in 2017</a>&nbsp;I wanted to see for myself if it was an exciting, but shiny new toy, or if it could make a big difference in how we write and ship JavaScript.</p>



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



<p>I only had a few hours to play around with a project so I opted to rebuild something I know quite well, a GraphQL endpoint! I choose to remodel the <a rel="noreferrer noopener" href="https://launchpad.graphql.com/1jzxrj179" target="_blank">Authors and Posts</a> example from Apollo Launchpad. If you haven’t checked it out before, now is the time! The app is less than 80 lines of JavaScript so how hard could it be to model in Reason?</p>



<figure class="wp-block-embed is-type-photo is-provider-giphy"><div class="wp-block-embed__wrapper">
<a href="https://giphy.com/gifs/nfl-football-xTgeJd2Z2b5OA0H7Ik"><img loading="lazy" decoding="async" src="https://media4.giphy.com/media/xTgeJd2Z2b5OA0H7Ik/giphy.gif" alt="Pittsburgh Steelers Football GIF by NFL - Find &amp; Share on GIPHY" width="480" height="270" /></a>
</div></figure>



<p>Getting started was pretty easy thanks to the excellent documentation at&nbsp;<a href="https://reasonml.github.io/" target="_blank" rel="noreferrer noopener">https://reasonml.github.io</a>. I quickly bootstrapped a project using&nbsp;<code>bsb -init authors-and-posts -theme basic-reason</code>&nbsp;and I was off to the races!</p>



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



<p>The most jarring change for me as a JavaScript developer was the lack of explicit import definitions. In Reason, each module is available without manually requiring it and each file is converted into a module. Turns out this can be pretty great for GraphQL because you can easily model each type in its own module.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-">open Data;

let typeDef = {|
  type Author {
    id: Int!
    firstName: String
    lastName: String
    posts: [Post] # the list of Posts by this author
  }
|};

type resolvers = {. &quot;posts&quot;: Js.Array.t(post)};

let resolvers = {
  &quot;posts&quot;: (author: Data.author) =&gt;
    Js.Array.filter((post) =&gt; post##authorId === author##id, posts)
};</code></pre>



<p>Did you notice the&nbsp;<code>open Data;</code>&nbsp;at the top of that file? It acts kinda like a JavaScript&nbsp;<code>import</code>&nbsp;but allows you to access any named export from that file without having to manually reference it. Variables like&nbsp;<code>post</code>&nbsp;and values like&nbsp;<code>posts</code>&nbsp;are actually coming from the&nbsp;<code>Data</code>&nbsp;module! I left the&nbsp;<code>Data.author</code>&nbsp;to show that you can still use the module reference which can make the code easier to understand.</p>



<p>Defining types also shows where graphql-tools shines for building GraphQL schemas. Looking at this file, it is super easy to know what is being built and the default resolver from GraphQL means I only need to figure out how to link an author and post together!</p>



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



<p>At this point, everything is running super smoothly so surely something has to go wrong? Absolutely.</p>



<p>In the Authors and Posts example, we see there is some local data that is updated with a mutation:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">Mutation: {
  upvotePost: (_, { postId }) =&gt; {
    const post = find(posts, { id: postId });
    if (!post) {
      throw new Error(`Couldn&#039;t find post with id ${postId}`);
    }
    post.votes += 1;
    return post;
  },
},</code></pre>



<p>In Reason, when you are defining JavaScript objects, all of the fields are immutable by default. So trying to update the votes in the post will throw some errors in the console when you compile it. Luckily, there is a growing community of Reason developers in Discord that are happy to help! <a rel="noreferrer noopener" href="https://medium.com/u/516e71756f17?source=post_page-----ff877df60d2a----------------------" target="_blank">Yawar λmin</a> walked me through using <code>ref</code> to tell Reason that the <code>votes</code> field could be mutated in place. When defining a type, like on line 9, you pass the underlying mutable type, in this case int, to <code>ref</code> . When declaring data, like on line 12, you pass the initial value that can be mutated to the <code>ref</code> call. It’s a pretty cool way to be very specific about what can and cannot change in your data!</p>



<pre class="wp-block-prismatic-blocks"><code class="language-">type author = {. &quot;id&quot;: int, &quot;firstName&quot;: string, &quot;lastName&quot;: string};

let authors = [|
  {&quot;id&quot;: 1, &quot;firstName&quot;: &quot;Tom&quot;, &quot;lastName&quot;: &quot;Coleman&quot;},
  {&quot;id&quot;: 2, &quot;firstName&quot;: &quot;Sashko&quot;, &quot;lastName&quot;: &quot;Stubailo&quot;},
  {&quot;id&quot;: 3, &quot;firstName&quot;: &quot;Mikhail&quot;, &quot;lastName&quot;: &quot;Novikov&quot;}
|];

type post = {. &quot;id&quot;: int, &quot;authorId&quot;: int, &quot;title&quot;: string, &quot;votes&quot;: ref(int)};

let posts = [|
  {&quot;id&quot;: 1, &quot;authorId&quot;: 1, &quot;title&quot;: &quot;Introduction to GraphQL&quot;, &quot;votes&quot;: ref(2)},
  {&quot;id&quot;: 2, &quot;authorId&quot;: 2, &quot;title&quot;: &quot;Welcome to Apollo&quot;, &quot;votes&quot;: ref(3)},
  {&quot;id&quot;: 3, &quot;authorId&quot;: 2, &quot;title&quot;: &quot;Advanced GraphQL&quot;, &quot;votes&quot;: ref(1)},
  {&quot;id&quot;: 4, &quot;authorId&quot;: 3, &quot;title&quot;: &quot;Launchpad is Cool&quot;, &quot;votes&quot;: ref(7)}
|];</code></pre>



<pre class="wp-block-prismatic-blocks"><code class="language-">open Data;

let typeDef = {|
  type Mutation {
    upvotePost(postId: Int!): Post
  }
|};

type upvotePostArgument = {. &quot;postId&quot;: int};

type root;

type resolvers = {. &quot;upvotePost&quot;: (root, upvotePostArgument) =&gt; post};

exception MissingPost(string);

let resolvers: resolvers = {
  &quot;upvotePost&quot;: (_, filter) =&gt;
    switch (Js.Array.find((post) =&gt; post##id === filter##postId, posts)) {
    | None =&gt; raise(
      MissingPost(&quot;Couldn&#039;t find post with id &quot; ++ string_of_int(filter##postId))
    )
    | Some(p) =&gt;
      incr(p##votes);
      p
    }
};</code></pre>



<h3 class="wp-block-heading" id="2cc9"><a href="#putting-it-together" aria-hidden="true" class="aal_anchor" id="putting-it-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>Putting it together</h3>



<p>At this point my egg nog was getting warm and I had re-watched&nbsp;<a href="https://medium.com/u/25b2696a8b5d?source=post_page-----ff877df60d2a----------------------" target="_blank" rel="noreferrer noopener">Brandon Dail</a>’s videos on building with Reason (<a href="https://www.youtube.com/watch?v=Yflk43afWj4" target="_blank" rel="noreferrer noopener">here&nbsp;</a>and&nbsp;<a href="https://www.youtube.com/watch?v=k77aR_JyvEE" target="_blank" rel="noreferrer noopener">here</a>) a couple times, I was ready to fire up an express app and try it out! I opted to write the express portion in JavaScript to save time and the&nbsp;<a href="https://www.apollographql.com/docs/apollo-server/example.html" target="_blank" rel="noreferrer noopener">Apollo Server docs</a>&nbsp;are pretty much copy, paste, magic!</p>



<p>One of the coolest parts of Reason is its ability to compile into JavaScript using a tool called Bucklescript. By default, it will even place the generated JavaScript files right next to the Reason ones making it easy to understand what is happening under the hood, and so easy to use alongside existing JavaScript apps! All I had to do was import my schema from the generated JavaScript file and I had an app up and running!</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">const express = require(&quot;express&quot;);
const bodyParser = require(&quot;body-parser&quot;);
const { graphqlExpress, graphiqlExpress } = require(&quot;apollo-server-express&quot;);

// import schema from generated bucklescript files
const { schema } = require(&quot;./src/Schema.bs.js&quot;);

// Initialize the app
const app = express();

const { PORT = 3000 } = process.env;
const endpointURL = `/`;

// The GraphQL endpoint
app.post(endpointURL, bodyParser.json(), graphqlExpress({ schema }));

// GraphiQL, a visual editor for queries
app.get(endpointURL, graphiqlExpress({ endpointURL }));

// Start the server
app.listen(PORT);</code></pre>



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



<p>Now that I had this super cool little Reason and GraphQL app, I had to show it off! Luckily there is an incredible tool for setting up and deploying to AWS Lambda called <a rel="noreferrer noopener" href="https://github.com/apex/up" target="_blank">Up </a>by <a rel="noreferrer noopener" href="https://medium.com/u/bbb3c7ccb0a0?source=post_page-----ff877df60d2a----------------------" target="_blank">TJ Holowaychuk</a>. I setup my AWS credentials, bundled my app using browserify for node, and ran <code>up</code> in my console…</p>



<figure class="wp-block-embed is-type-photo is-provider-giphy"><div class="wp-block-embed__wrapper">
<a href="https://giphy.com/gifs/mrw-td-R8n7YlPHe34dy"><img loading="lazy" decoding="async" src="https://media0.giphy.com/media/R8n7YlPHe34dy/giphy.gif" alt="The Land Of Make Believe Wow GIF - Find &amp; Share on GIPHY" width="334" height="251" /></a>
</div></figure>



<p>In under a minute I had a working GraphQL app, built with Reason, running on AWS Lambda! You can check out the app in action&nbsp;<a href="https://rhi2j2y368.execute-api.us-east-1.amazonaws.com/development" target="_blank" rel="noreferrer noopener">here</a>&nbsp;and see the source code for it&nbsp;<a href="https://github.com/jbaxleyiii/authors-and-posts-reason" target="_blank" rel="noreferrer noopener">over here</a>.</p>



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



<p>I had a couple takeaways from this short, but fun, adventure into a new language. One is that the tooling for developers to learn and build products is absolutely incredible today. Auto formatting, strong editor integration, and helpful errors make a big difference in picking something up.</p>



<p>The other, and more important takeaway, is how important a community is to a project. Even as young as Reason and Up are, I was able to get help from people like&nbsp;<a href="https://medium.com/u/ecb657c8b22d?source=post_page-----ff877df60d2a----------------------" target="_blank" rel="noreferrer noopener">Jared Forsyth</a>&nbsp;and&nbsp;<a href="https://medium.com/u/bbb3c7ccb0a0?source=post_page-----ff877df60d2a----------------------" target="_blank" rel="noreferrer noopener">TJ Holowaychuk</a>&nbsp;when I ran into problems in almost no time. I’ve seen this time and time again in the Apollo community and in 2018 I hope that we all continue to explore and help each other as we build new things and try new ideas. Come find me in the Apollo Slack if you want to chat about GraphQL, Reason, or eating cookies for Santa while building an app.</p>


Exploring Reason and GraphQL


<p>When an application grows in size, its state often grows in complexity. As developers, we’re not only tasked with juggling data from multiple remote servers, but also with handling local data resulting from UI interactions. To top it off, we have to store all of this data in a way that’s easily accessible from any component in our application.</p>



<p>Thousands of developers have told us that Apollo Client excels at managing remote data, which equates to roughly&nbsp;<strong>80%</strong>&nbsp;of their data needs. But what about local data (like global flags and device API results) that make up&nbsp;<strong>the other 20%</strong>&nbsp;of the pie?</p>



<p>Historically, Apollo users managed that 20% in a separate Redux or MobX store. This was a doable solution for Apollo Client 1.0, but when Apollo Client 2.0 migrated away from Redux, syncing local and remote data between two stores became trickier.&nbsp;We often heard from our users that they wanted to encapsulate all of their application’s state inside Apollo Client and maintain&nbsp;<strong>one source of truth</strong>.</p>



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



<p>We knew we had to solve this problem, so we asked ourselves: What would it look like to manage state in Apollo Client? First, we thought about what we liked about Redux — features like its dev tools and binding state to components via connect. We also thought about some of our pain points with Redux, like its boilerplate and its do-it-yourself approach to core features like asynchronous action creators, caching, and optimistic UI.</p>



<p>To create our ideal state management solution, we wanted to build upon what makes Redux great while addressing some criticisms of it. We also wanted to leverage the power of GraphQL to request data from multiple sources in one query.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="523" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_ZHTs1iOH247NQLEOxXzHFw-1024x523.png" alt="" class="wp-image-871" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_ZHTs1iOH247NQLEOxXzHFw-1024x523.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_ZHTs1iOH247NQLEOxXzHFw-300x153.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_ZHTs1iOH247NQLEOxXzHFw-768x392.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_ZHTs1iOH247NQLEOxXzHFw-1536x784.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_ZHTs1iOH247NQLEOxXzHFw-1200x612.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_ZHTs1iOH247NQLEOxXzHFw.png 1740w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>An architecture diagram of the data flow in Apollo Client</figcaption></figure>



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



<p>One common misconception about GraphQL is that it’s coupled to a specific server implementation. In fact, it’s much more flexible than that. It doesn’t matter if you’re requesting from a&nbsp;<a href="https://github.com/iheanyi/go-grpc-graphql-simple-example" target="_blank" rel="noreferrer noopener">gRPC server</a>,&nbsp;<a href="https://github.com/apollographql/apollo-link-rest" target="_blank" rel="noreferrer noopener">REST endpoint</a>, or your&nbsp;<a href="https://github.com/apollographql/apollo-link-state" target="_blank" rel="noreferrer noopener">client-side cache</a>&nbsp;— GraphQL is a&nbsp;<strong>universal language for data</strong>&nbsp;that’s completely agnostic of its source.</p>



<p>This is why GraphQL queries and mutations are a perfect fit for describing what’s happening with our application’s state. Instead of dispatching actions, we use GraphQL mutations to express state changes. We can access our state by declaratively expressing our component’s data requirements with a GraphQL query.</p>



<p>One of the biggest advantages of GraphQL is that we can aggregate data from multiple sources, both local and remote, in one query by specifying GraphQL directives on our fields. 🎉 Let’s find out how!</p>



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



<p>Managing your local data in Apollo Client is made possible by&nbsp;<a rel="noreferrer noopener" href="https://www.apollographql.com/docs/link/" target="_blank">Apollo Link</a>, our modular network stack that allows you to hook into the GraphQL request cycle at any point. To request data from a GraphQL server, we use&nbsp;<code>HttpLink</code>, but to request local data from our cache we need to install a new link:&nbsp;<code>apollo-link-state</code>.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">import { ApolloClient } from &#039;apollo-client&#039;;
import { InMemoryCache } from &#039;apollo-cache-inmemory&#039;;
import { ApolloLink } from &#039;apollo-link&#039;;
import { withClientState } from &#039;apollo-link-state&#039;;
import { HttpLink } from &#039;apollo-link-http&#039;;

import { defaults, resolvers } from &#039;./resolvers/todos&#039;;

const cache = new InMemoryCache();

const stateLink = withClientState({ resolvers, cache, defaults });

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



<p>To create your state link, use the&nbsp;<code>withClientState</code>&nbsp;function and pass in an object with&nbsp;<code>resolvers</code>,&nbsp;<code>defaults</code>, and your Apollo&nbsp;<code>cache</code>. Then, concatenate your state link to your link chain. Your state link should come before your&nbsp;<code>HttpLink</code>&nbsp;so local queries and mutations are intercepted before they hit the network.</p>



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



<p>Your&nbsp;<code>defaults</code>&nbsp;are an object representing the initial state that you would like to write to the cache upon creation of the state link. While not required, it’s important to pass in&nbsp;<code>defaults</code>&nbsp;to warm the cache so that any components querying that data don’t error out. The shape of your&nbsp;<code>defaults</code>&nbsp;object should mirror how you plan to query the cache in your application.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">export const defaults = {
  visibilityFilter: &#039;SHOW_ALL&#039;,
  todos: [],
};</code></pre>



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



<p>When we manage state with Apollo Client, our Apollo cache becomes our single source of truth for all the local and remote data in our application. How do we update and access the data in the cache? That’s where our resolvers come in. If you’ve worked with&nbsp;<code>graphql-tools</code>&nbsp;on the server, the type signature of resolvers on the client are identical:</p>



<pre class="wp-block-preformatted">fieldName: (obj, args, context, info) =&gt; result;</pre>



<p>No worries if this is unfamiliar to you, the two most important things to note here are that your query or mutation variables are passed in as the second argument and the cache is automatically added to the context for you.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">export const defaults = { // same as before }
  
export const resolvers = {
  Mutation: {
    visibilityFilter: (_, { filter }, { cache }) =&gt; {
      cache.writeData({ data: { visibilityFilter: filter } });
      return null;
    },
    addTodo: (_, { text }, { cache }) =&gt; {
      const query = gql`
        query GetTodos {
          todos @client {
            id
            text
            completed
          }
        }
      `;
      const previous = cache.readQuery({ query });
      const newTodo = {
        id: nextTodoId++,
        text,
        completed: false,
        __typename: &#039;TodoItem&#039;,
      };
      const data = {
        todos: previous.todos.concat([newTodo]),
      };
      cache.writeData({ data });
      return newTodo;
    },
  }
}</code></pre>



<p>To write data to the root of the cache, we call&nbsp;<code>cache.writeData</code>&nbsp;and pass in our data. Sometimes what we’re writing to the cache depends on the data that was previously there, like in our mutation&nbsp;<code>addTodo</code>&nbsp;above. In that case, you can use&nbsp;<code>cache.readQuery</code>&nbsp;to read from the cache before you perform a write. If you would like to write a fragment to an existing object in the cache, you can optionally pass in an&nbsp;<code>id</code>, which corresponds to the object’s cache key. Since we’re using the&nbsp;<code>InMemoryCache</code>, the key is&nbsp;<code>__typename:id</code>.</p>



<p><code>apollo-link-state</code>&nbsp;supports asynchronous resolver functions, which is useful for performing async side effects like accessing device APIs. However, we don’t recommend calling REST endpoints in your resolvers. Instead, use&nbsp;<code>&lt;a href=&quot;https://github.com/apollographql/apollo-link-rest&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;apollo-link-rest&lt;/a&gt;</code>, which has its own&nbsp;<code>@rest</code>&nbsp;directive.</p>



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



<p>When we trigger a mutation from our UI, Apollo’s network stack needs to know whether to update the data on the client or the server.&nbsp;<code>apollo-link-state</code>&nbsp;uses an&nbsp;<code>@client</code>&nbsp;directive to specify client-only fields. Then,&nbsp;<code>apollo-link-state</code>&nbsp;calls the resolvers for those fields.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">const SET_VISIBILITY = gql`
  mutation SetFilter($filter: String!) {
    visibilityFilter(filter: $filter) @client
  }
`;

const setVisibilityFilter = graphql(SET_VISIBILITY, {
  props: ({ mutate, ownProps }) =&gt; ({
    onClick: () =&gt; mutate({ variables: { filter: ownProps.filter } }),
  }),
});</code></pre>



<p>Queries look very similar to mutations. If you are performing any asynchronous actions in your query, Apollo Client will track loading and error states for you. For React, you’ll find these states on&nbsp;<code>this.props.data</code>, along with numerous helper methods for refetching, pagination, and polling.</p>



<p>One exciting feature is that you can request from multiple data sources in one query! 😍 In this example, we’re requesting a&nbsp;<code>user</code>&nbsp;from our GraphQL server in addition to the&nbsp;<code>visibilityFilter</code>&nbsp;in the Apollo cache.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">const GET_USERS_ACTIVE_TODOS = gql`
  {
    visibilityFilter @client
    user(id: 1) {
      name
      address
    }
  }
`;

const withActiveState = graphql(GET_USERS_ACTIVE_TODOS, {
  props: ({ ownProps, data }) =&gt; ({
    active: ownProps.filter === data.visibilityFilter,
    data,
  }),
});</code></pre>



<p>For more examples and tips for integrating&nbsp;<code>apollo-link-state</code>&nbsp;into your application, head on over to our&nbsp;<a href="https://www.apollographql.com/docs/link/links/state.html" target="_blank" rel="noreferrer noopener">updated docs page</a>.</p>



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



<p>Even though&nbsp;<code>apollo-link-state</code>&nbsp;is stable enough to use in your application today, there are some features we’d like to tackle soon:</p>



<ul class="wp-block-list"><li><strong>Client-side schema:</strong>&nbsp;Right now, we don’t have support for type validation against a client-side schema. This is because including the&nbsp;<code>graphql-js</code>&nbsp;modules for constructing and validating a schema at runtime would dramatically increase your bundle size. Instead, we hope to move schema construction to build time with support for introspection so you can still take advantage of all the cool features in GraphiQL.</li><li><strong>Helper components:</strong>&nbsp;Our goal is to make state management in Apollo as seamless as possible. We’d like to write some React components to reduce some of the verbosity for performing common tasks like passing a variable into a mutation while still implementing it as a mutation under the hood.</li></ul>



<p>If these problems sound interesting to you, come join us on <a rel="noreferrer noopener" href="https://github.com/apollographql/apollo-link-state" target="_blank">GitHub</a> or the <code>#local-state</code> channel on <a href="https://www.apollographql.com/slack">Apollo Slack</a>. We’d love to have you on board to help shape the next generation of state management! 🚀</p>


The future of state management


<p>A couple of months ago, we started to use Apollo Client (+React Native) at&nbsp;<a href="https://werkspot.nl/" target="_blank" rel="noreferrer noopener">Werkspot</a>. From the very beginning, Apollo overwhelmed us by the simplicity and flexibility it provides. It inspired us to create our own vision about technology and experiment with various approaches to data fetching that we think are worth sharing.</p>



<p>Enjoy the ride! 🚀</p>



<figure class="wp-block-image alignfull size-large"><img loading="lazy" decoding="async" width="1024" height="590" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_jWjWcYFrb7dw1PSyNssrhQ-1024x590.jpg" alt="" class="wp-image-875" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_jWjWcYFrb7dw1PSyNssrhQ-1024x590.jpg 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_jWjWcYFrb7dw1PSyNssrhQ-300x173.jpg 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_jWjWcYFrb7dw1PSyNssrhQ-768x442.jpg 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_jWjWcYFrb7dw1PSyNssrhQ.jpg 1200w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Apollo + Query Components hype rocket!</figcaption></figure>



<h2 class="wp-block-heading" id="060c"><a href="#anatomy-of-query-components" aria-hidden="true" class="aal_anchor" id="anatomy-of-query-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>Anatomy of Query Components</h2>



<p>One of the very powerful concepts that we found for ourselves with Apollo is Query Components. These components are meant to express a domain-specific data logic in a clear, declarative way:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">const QUERY = gql`
  query allCities($country: String!) { 
    allCities { 
      id
      name
    }
  }
`;

class CitiesQuery extends Component {
  render() {
    return this.props.children(this.props.data);
  }
}

export default graphql(QUERY, {
  options: ({ country }) =&gt; ({ variables: { country } }),
})(CitiesQuery);</code></pre>



<p><code>CitiesQuery</code>&nbsp;component is an oversimplified example of an average Query Component. It exports a&nbsp;<code>Component</code>, enhanced by a&nbsp;<code>graphql</code>&nbsp;wrapper for fetching data. After Apollo takes care of fetching and mapping props to query parameters, query component uses “function-as-a-child” approach to expose a child-independent API with injected data.</p>



<p>Comparing to the standard approach where you add a&nbsp;<code>graphql</code>&nbsp;wrapper to your higher-order components, query components have a set of advantages:</p>



<ul class="wp-block-list"><li><strong>Testability</strong>. Unless you have a very good reason, you can test your components without any data management logic.</li><li><strong>Separation of concerns</strong>. From now on, higher-order components are no longer concerned about the way data is fetched/pushed to the server.</li><li><strong>Abstraction over data management layer</strong>. Frankly speaking, it doesn’t really matter which library you use under the hood. Query Components abstracts out your data management layer so you can focus on business logic and change underlying implementation if needed.</li></ul>



<p>Once a Query Component is defined, it can be used as any other component in your application:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-">class MapPicker extends PureComponent {
  render() {
    return (
      // ...
      &lt;CitiesQuery country=&quot;Netherlands&quot;&gt;
        {({ allCities }) =&gt; &lt;CitiesList cities={allCities} /&gt;}
      &lt;/CitiesQuery&gt;
      // ...
    );
  }
}</code></pre>



<p>A nice side effect of decoupling higher-order components into Query Components is minimizing bloat. If the data management layer grows, it won’t affect presenter components unless they have to reflect new data properties.</p>



<h2 class="wp-block-heading" id="78d8"><a href="#mutations-with-query-components" aria-hidden="true" class="aal_anchor" id="mutations-with-query-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>Mutations with Query Components</h2>



<p>Mutations are not that straightforward as queries. When a query component is mounted, Apollo immediately tries to fetch. However, when we talk about mutations, there is no need (in 99% of our cases) to perform any mutations at the mount time. This idea brings us to the point that we should have a way to control a moment when we execute our mutations. For example:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-">const MUTATION = gql`
  mutation (name: String!) {
    createProposal(input: $input) { clientMutationId }
  }
`;

class UserMutation extends Component {
  constructor(props, ctx) {
    super(props, ctx);

    this.execute = () =&gt; this.executeMutation();
  }

  executeMutation() {
    this.props.mutate({
      variables: {
        name: this.props.name
      },
    });
  }

  render() {
    return this.props.children(this.execute);
  }
}

export default graphql(MUTATION)(UserMutation);</code></pre>



<p>Therefore, you can use this component in a similar way:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-">class Profile extends PureComponent {
  render() {
    return (
      // ...
      &lt;UserMutation name=&quot;Alexey&quot;&gt;
        {execute =&gt; &lt;Button onPress={execute} /&gt;}
      &lt;/UserMutation&gt;
      // ...
    );
  }
}</code></pre>



<p>So the concept is the same: Query Component receives a bunch of props that are later on used as parameters for the mutation query.</p>



<figure class="wp-block-image alignfull size-large"><img loading="lazy" decoding="async" width="1024" height="585" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_AWcvWxN7S2ykK0bvKAVVVA-1024x585.jpg" alt="" class="wp-image-876" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_AWcvWxN7S2ykK0bvKAVVVA-1024x585.jpg 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_AWcvWxN7S2ykK0bvKAVVVA-300x172.jpg 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_AWcvWxN7S2ykK0bvKAVVVA-768x439.jpg 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_AWcvWxN7S2ykK0bvKAVVVA.jpg 1200w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Testing Query Components like a pro 😎</figcaption></figure>



<h2 class="wp-block-heading" id="d024"><a href="#how-to-test-query-components" aria-hidden="true" class="aal_anchor" id="how-to-test-query-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>How to test Query Components?</h2>



<p>When it comes to testing, Apollo-based components have a bunch of features that we need to take into account. The most complicated one is related to React context and Apollo Client reference in particular. All components that intent to use Apollo should be put into the subtree of&nbsp;<code>&lt;ApolloProvider /&gt;</code>&nbsp;which gives them a reference to the client through the React context. Hopefully, if we use Enzyme and shallow rendering, we can supply context object as one of the options.</p>



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



<p>One of the very first things we would like to test is that every Query Component is able to produce variables, required by a query. To ensure that, we check a shape of resulting variables.</p>



<p>Another assertion that we would like to make is about response shape. In other words, we check if given&nbsp;<code>data.x</code>&nbsp;complies with the shape of the mock that was passed to the fake client during initialization.</p>



<p>And the last, but not least: query component should call a function that we pass as a child with the data pulled from Apollo. Altogether, the test suit looks like this:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-">describe(&#039;CitiesQuery component&#039;, () =&gt; {
  it(&#039;renders children with a query result&#039;, () =&gt; {
    const spy = jest.fn(() =&gt; null);
    const config = {
      context: {
        client: makeFakeClient({
          resolveWith: {
            allCities: allCitiesFixture,
          },
        }),
      },
    };

    shallow(&lt;CitiesQuery country=&quot;Netherlands&quot;&gt;{spy}&lt;/CitiesQuery&gt;, config).render();

    expect(spy).toHaveBeenCalled();
    expect(spy.mock.calls[0][0].variables.country).toEqual(&#039;Netherlands&#039;);
    expect(spy.mock.calls[0][0].allCities).toMatchObject(allCitiesFixture);
  });
});</code></pre>



<p>The very last uncovered function is <code>makeFakeClient</code>. It is a self-written helper that generates an Apollo Client with a fake link:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-">import { ApolloLink, Observable } from &#039;apollo-link&#039;;
import { InMemoryCache } from &#039;apollo-cache-inmemory&#039;;
import ApolloClient from &#039;apollo-client&#039;;

function createMockLink(options) {
  return new ApolloLink(() =&gt;
    new Observable((observer) =&gt; {
      if (!options.fail) {
        observer.next({
          data: options.resolveWith,
        });
        observer.complete();
      } else {
        observer.error(options.failWith);
      }
    }),
  );
}

export default options =&gt; new ApolloClient({
  link: createMockLink(options).request,
  cache: new InMemoryCache(),
});</code></pre>



<p>This should be more or less it. I didn’t cover mutation components testing, but it isn’t anyhow different. The only thing I can foresee is an additional assertion that&nbsp;<code>execute</code>&nbsp;handler triggers Apollo fetcher, but I’ll leave it to the reader.</p>



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



<ul class="wp-block-list"><li><a href="http://engineering.khanacademy.org/posts/creating-query-components-with-apollo.htm" target="_blank" rel="noreferrer noopener">A great blog post from Khan Academy about their approach writing Query and Mutation components</a></li></ul>



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



<p>Don’t hesitate to ask questions, challenge this approach and share your ideas about Apollo and GraphQL overall. You can always find me on&nbsp;<a href="https://twitter.com/kureevalexey" target="_blank" rel="noreferrer noopener">Twitter</a>&nbsp;or Discord (<code>kureev</code>&nbsp;on&nbsp;<code>#reactiflux</code>).</p>



<p>Oh yeah, and last but not least: if you like this or any other of my articles, don’t hesitate to&nbsp;<a href="https://www.patreon.com/kureevalexey" target="_blank" rel="noreferrer noopener">become a part of it</a>! Your support is greatly appreciated!</p>


Query Components with Apollo


<p><em>This is a guest post from Apollo contributor&nbsp;</em><a href="https://medium.com/u/373d9846244b?source=post_page-----cb05aec16325----------------------" target="_blank" rel="noreferrer noopener"><em>James Reggio</em></a><em>, co-founder of&nbsp;</em><a href="http://banter.fm/" target="_blank" rel="noreferrer noopener"><em>Banter</em></a><em>, a podcasting client built with Apollo and React Native.</em></p>



<p>First impressions are important, but with mobile apps the second impression is sometimes what counts the most. From a user’s perspective, there’s nothing more frustrating than launching an app only to stare at a blank screen, waiting for data to load that’s already been fetched before. That’s why we’re introducing&nbsp;<code>&lt;a href=&quot;https://github.com/apollographql/apollo-cache-persist&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;apollo-cache-persist&lt;/a&gt;</code>, a library to seamlessly save and restore your Apollo cache from persistent storage.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="682" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_7dOxbzSuX7aejIehG2x4iQ-1024x682.jpg" alt="" class="wp-image-880" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_7dOxbzSuX7aejIehG2x4iQ-1024x682.jpg 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_7dOxbzSuX7aejIehG2x4iQ-300x200.jpg 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_7dOxbzSuX7aejIehG2x4iQ-768x512.jpg 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_7dOxbzSuX7aejIehG2x4iQ-1536x1024.jpg 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_7dOxbzSuX7aejIehG2x4iQ-2048x1365.jpg 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_7dOxbzSuX7aejIehG2x4iQ-1200x800.jpg 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_7dOxbzSuX7aejIehG2x4iQ-1980x1320.jpg 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>:’(</figcaption></figure>



<p>Whether you’re persisting data with&nbsp;<code>AsyncStorage</code>&nbsp;or&nbsp;<code>localForage</code>,&nbsp;<code>apollo-cache-persist</code>&nbsp;works with a&nbsp;<a href="https://github.com/apollographql/apollo-cache-persist#storage-providers" target="_blank" rel="noreferrer noopener">variety of storage providers</a>&nbsp;for the web and React Native. It also supports any cache that works with Apollo Client 2.0, including the default&nbsp;<code>&lt;a href=&quot;https://www.npmjs.com/package/apollo-cache-inmemory&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;InMemoryCache&lt;/a&gt;</code>&nbsp;and&nbsp;<code>&lt;a href=&quot;https://www.npmjs.com/package/apollo-cache-hermes&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;Hermes&lt;/a&gt;</code>, a community-built alternative.</p>



<p>Best of all, you can get started with just a couple lines of code:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">import { InMemoryCache } from ‘apollo-cache-inmemory’;
import { persistCache } from ‘apollo-cache-persist’;

// Set up your cache.
const cache = new InMemoryCache({...});

// Set up cache persistence.
persistCache({
  cache,
  storage: window.localStorage,
});

// Finish configuring Apollo.</code></pre>



<p><code>persistCache</code>&nbsp;will immediately restore your cache from storage, and automatically persist it after every update (with a short, configurable, debounce interval).</p>



<p>If you need more control over the process, we’ve got you covered. You can instantiate a&nbsp;<code>&lt;a href=&quot;https://github.com/apollographql/apollo-cache-persist#advanced-usage&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;CachePersistor&lt;/a&gt;</code>, which offers methods to explicitly extract, restore, purge, and measure the cache, as well as methods to pause and resume the automatic persistence.</p>



<p>Have specific storage needs?&nbsp;<code>apollo-cache-persist</code>&nbsp;is compatible with any storage provider that works with&nbsp;<code>&lt;a href=&quot;https://www.npmjs.com/package/redux-persist&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;redux-persist&lt;/a&gt;</code>, so there’s already a&nbsp;<a href="https://github.com/apollographql/apollo-cache-persist#storage-providers" target="_blank" rel="noreferrer noopener">suite of well-tested packages</a>&nbsp;at your disposal, including providers for compression and encryption.</p>



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



<p>The default persistence timing — after every write to the cache — rarely loses data, and performs well in modern browsers. However, in resource-constrained environments like React Native, it’s less than ideal.</p>



<p>Your app’s UI typically needs to update in response to a write to the cache, so it’s not the best time to send potentially hundreds of kilobytes over the native bridge. (It takes around 600ms to send 100kb over the bridge to AsyncStorage on an iPhone 6, during which your app will not be responsive to touch.)</p>



<p>That’s why we’ve included a <code>background</code> persistence trigger for React Native, which will persist the cache as soon as your app leaves the foreground. This happens whenever the phone is locked, or whenever the home screen, multitasking view, or another app is activated — all good times for an expensive operation.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">import { InMemoryCache } from ‘apollo-cache-inmemory’;
import { persistCache } from ‘apollo-cache-persist’;
import { AsyncStorage } from ‘react-native’;

// Set up your cache.
const cache = new InMemoryCache({...});

// Set up cache persistence.
persistCache({
  cache,
  storage: AsyncStorage,
  trigger: &#039;background&#039;,
});

// Finish configuring Apollo.</code></pre>



<p>I’ve been using the&nbsp;<code>background</code>&nbsp;persistence trigger in my app,&nbsp;<a href="https://banter.fm/" target="_blank" rel="noreferrer noopener">Banter</a>, for months without any issues. However, if the non-deterministic nature of these triggers worries you, you can always&nbsp;<a href="https://github.com/apollographql/apollo-cache-persist#advanced-usage" target="_blank" rel="noreferrer noopener">write your own</a>&nbsp;by passing a function as the&nbsp;<code>trigger</code>&nbsp;option.</p>



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



<p>The Apollo community is in the&nbsp;<a href="https://github.com/apollographql/apollo-cache-persist/issues/2" target="_blank" rel="noreferrer noopener">early stages</a>&nbsp;of designing fine-grained cache controls, including the ability to utilize directives and metadata to control cache policy on a per-key basis. In the meantime, we’re limited to persisting and restoring the entire cache, which will cause it to grow over time.</p>



<p>In my own usage, I haven’t seen this become a performance problem, even with hundreds of kilobytes in the cache. However, it’s good practice to set a high upper bound on its growth, which you can do with the&nbsp;<code>maxSize</code>&nbsp;option. When your cache exceeds the size limit, persistence will pause and the cache will be reset upon the next launch of the app. I recommend starting with 500kb (<code>512000</code>&nbsp;bytes) and tuning from there.</p>



<p>For further control, you can setup a background task to periodically reset the cache to contain only your app’s most important data. (On the web, you can use a service worker; on React Native, there’s&nbsp;<a href="https://www.npmjs.com/package/react-native-background-task" target="_blank" rel="noreferrer noopener">react-native-background-task</a>.) The background task would start with an empty cache, query the most important data from your GraphQL API, and then persist. This strategy has the added benefit of ensuring the cache is loaded with fresh data when your app launches.</p>



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



<p>This is just the first piece of the puzzle to providing a robust offline experience. Stay tuned for future releases, and if you want to help shape the future of partially-connected GraphQL, join us on&nbsp;<a href="https://www.apollographql.com/client/#slack" target="_blank" rel="noreferrer noopener">Apollo Slack</a>&nbsp;or tweet at me,&nbsp;<a href="https://twitter.com/jamesreggio" target="_blank" rel="noreferrer noopener">@jamesreggio</a>.<br></p>


Cache persistence for Apollo Client 2.0

Apollo Client 2.0: Beyond GraphQL APIs


<p><em>This is a guest post by Dan Shapiro, Senior eCommerce Engineer at&nbsp;</em><a href="https://www.express.com/" target="_blank" rel="noreferrer noopener"><em>Express</em></a><em>.</em></p>



<p>As one of the biggest specialty retail brands in the world, Express keeps up with both fashion and technology trends. Keeping pace technologically means balancing innovation with performance and security. Overhauling the architecture behind the shopping experience’s key eCommerce pages for&nbsp;<a href="https://www.express.com/" target="_blank" rel="noreferrer noopener">Express.com</a>&nbsp;is no task to be taken lightly.</p>



<p>I’m part of the team building a new shopping architecture. Today, Express leverages Adobe Experience Manager (AEM) as the customer-facing experience layer powered by our proprietary APIs built on Oracle’s ATG Web Commerce engine. We wanted to upgrade to a more responsive stack for the website’s experience to be “faster and snappier,” while also being flexible enough to react to changing design trends and customer experience patterns. To meet this goal, we formed a new product development team steeped in Javascript, React, and GraphQL expertise and focused on the product page to introduce a new technical stack.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="452" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_q4LCxA-gY9bWsszbzM4KpQ-1024x452.png" alt="" class="wp-image-927" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_q4LCxA-gY9bWsszbzM4KpQ-1024x452.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_q4LCxA-gY9bWsszbzM4KpQ-300x132.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_q4LCxA-gY9bWsszbzM4KpQ-768x339.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_q4LCxA-gY9bWsszbzM4KpQ-1536x677.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_q4LCxA-gY9bWsszbzM4KpQ-2048x903.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_q4LCxA-gY9bWsszbzM4KpQ-1200x529.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_q4LCxA-gY9bWsszbzM4KpQ-1980x873.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Product Page using our new architecture</figcaption></figure>



<p>We chose React as our foundational Javascript framework. Since more than 50% of our traffic is mobile, we selected GraphQL, which lets the client-side developer control how much data is flowing to the client. That optimization benefit alone was worth the integration. We considered other data orchestration engines, but GraphQL was selected as the best fit with our familiarity and general community acceptance and knowledge.</p>



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



<p>Since&nbsp;<a href="https://github.com/graphql/graphql-js" target="_blank" rel="noreferrer noopener"><em>graphql-js</em></a>&nbsp;is the reference implementation for a GraphQL server, but isn’t built to scale, we needed a production-tolerant solution. Apollo was new to the team. During GraphQL proof-of-concepting, we decided to explore&nbsp;<a href="https://github.com/apollographql/apollo-server" target="_blank" rel="noreferrer noopener">Apollo Server</a>&nbsp;based on its reputation as being very developer friendly and production ready. Apollo Server adds numerous features on top of that reference implementation, such as error handling and easy-to-understand responses. After selecting Apollo’s GraphQL Server,&nbsp;<a href="https://github.com/apollographql/apollo-client" target="_blank" rel="noreferrer noopener">Apollo Client</a>&nbsp;was an obvious choice. Elegant Apollo Client design choices (like the easy-to-use pagination model) made for a great developer experience as well as an efficient new tool in our tool-set.</p>



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



<p>Now GraphQL helps us move faster in product development. We recently had a scenario calling for a new field to be added to a product response to determine the products category. Our API team estimated two weeks to complete the addition. By simply creating a new resolver, we added the new Boolean value, specifying whether the product ID was one of a special set of 25 products, to the response. Within thirty minutes, everyone who uses that API on our side had access to the new field, instead of it being hidden in a client-side module. We saved two weeks of development time.</p>



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



<p>Early on in our POC we started using&nbsp;<a href="https://www.apollographql.com/engine/" target="_blank" rel="noreferrer noopener">Apollo Engine</a>&nbsp;(previously Apollo Optics) to understand performance of our new stack. During this proof of concept, we wrote a query to get product data which had a large variance in running time. As product developers, Engine helped us understand our backend APIs’ impact on performance. In production we now had the ability to see all the data thanks to Engine. Now we could see all the calls coming to the website and deeper specific traffic data. From a monitoring perspective, we are complementing our traffic and conversion data. We now have a view of how the stack is handling traffic that has illustrated where we need optimization and has provided a more accurate view of scale of traffic and any potential issues.</p>



<p>We leverage Akamai to cache our GraphQL queries every 24 hours. Each product on page is seen by Engine once every 24 hours. In Engine we should see a maximum of around 5,000 products if it’s cached properly. However, in Engine we were seeing around 300,000 a day. This called out a caching challenge we are still researching.</p>



<p>Another challenge Engine helped identify was backend API return errors. We were alerted to a window of 20-second responses that our API team verified as 503s. Those errors were impacting customer experiences, but we were not aware of them. Once identified we adjusted our integration. In short, Engine has been instrumental in identifying issues across our product architecture to improve the end user experience. It has given us confidence in the entire stack.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="450" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_roaRYVcn1L-SRPvKccZiTA-1024x450.png" alt="" class="wp-image-926" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_roaRYVcn1L-SRPvKccZiTA-1024x450.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_roaRYVcn1L-SRPvKccZiTA-300x132.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_roaRYVcn1L-SRPvKccZiTA-768x338.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_roaRYVcn1L-SRPvKccZiTA-1536x675.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_roaRYVcn1L-SRPvKccZiTA-2048x901.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_roaRYVcn1L-SRPvKccZiTA-1200x528.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_roaRYVcn1L-SRPvKccZiTA-1980x871.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Shopping Bag page using our new architecture</figcaption></figure>



<p>Next up, we are extending this stack further down the conversion funnel into the shopping bag and check out experiences. With React and GraphQL monitored by Apollo Engine, we are confident we will be delivering a fast, accessible customer experience<strong>.</strong></p>


Changing the architecture of Express.com

The GraphQL stack: How everything fits together

Apollo Client 2.0


<p>With the ever-nearing release of&nbsp;<a href="https://dev-blog.apollodata.com/whats-coming-in-apollo-client-2-0-bcd8ea64acbd" target="_blank" rel="noreferrer noopener">Apollo Client 2.0,</a>&nbsp;there’s no better time to learn some of the new features that make the 2.0 the most flexible and powerful version ever.</p>



<p>One of the ways to leverage this new flexibility is by using the&nbsp;<a href="https://github.com/apollographql/apollo-link" target="_blank" rel="noreferrer noopener">Apollo Link library</a>&nbsp;to customize what happens each time you send an operation to Apollo. Links are designed to be composed together to form control flow chains to manage a request, and they can be used as:</p>



<ul class="wp-block-list"><li>Middleware to perform side effects, modify the operation, or even just provide developer tools like logging.</li><li>Afterware which process the result of an operation, handle errors, or even save the data to multiple locations.</li><li>Network fetchers including HTTP, websockets, and even across the react-native bridge to the native network stack.</li></ul>



<p>This article will outline some of the core concepts to get you started. For a deeper dive, checkout the new&nbsp;<a href="https://www.apollographql.com/docs/link/" target="_blank" rel="noreferrer noopener">link docs!</a></p>



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



<p>One of the authors of Apollo Link,&nbsp;<a href="https://medium.com/u/712ce1f56160?source=post_page-----f0719d8193ee----------------------" target="_blank" rel="noreferrer noopener">Evans Hauser,</a>&nbsp;does a great job of outlining the goals of the package in his&nbsp;<a href="https://dev-blog.apollodata.com/apollo-link-the-modular-graphql-network-stack-3b6d5fcf9244" target="_blank" rel="noreferrer noopener">introductory post</a>. Building on top of that knowledge, the library is designed to be a powerful way to compose actions around data handling with GraphQL. Each link represents a subset of functionality that can be composed with other links to create complex control flows of data. At a basic level, a link is a function that takes a GraphQL request and returns an observable. To learn more about observables, take a look at the proposal&nbsp;<a href="https://github.com/tc39/proposal-observable" target="_blank" rel="noreferrer noopener">here</a>&nbsp;and read the incredible work of&nbsp;<a href="https://medium.com/u/da6839d28258?source=post_page-----f0719d8193ee----------------------" target="_blank" rel="noreferrer noopener">Ben Lesh</a>&nbsp;such as&nbsp;<a href="https://medium.com/@benlesh/learning-observable-by-building-observable-d5da57405d87" target="_blank" rel="noreferrer noopener">this article</a>.</p>



<p>A individual link isolate parts of the control flow of your GraphQL request into a single unit. For example, you could have a link that logs errors to your monitoring tool of choice. This error link doesn’t need to know anything else about how you are executing your request, just that it starts with an operation and eventually data will hopefully come back.</p>



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



<p>At the core of a link is the&nbsp;<code>request</code>&nbsp;method. A link’s request is called every time&nbsp;<code>execute</code>&nbsp;is run on that link chain. The request is where the operation is given to the link to return back data of some kind. Depending on where the link is in the stack, it will either use the second parameter to a link (the next link in the chain) or return back an&nbsp;<code>ExecutionResult</code>&nbsp;on its own.</p>



<p>The full description of a link’s request can be represented like this:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-typescript">type Context = { [key: string]: any };

interface Operation {
  query: DocumentNode;
  variables: { [key: string]: any };
  operationName: string;
  extensions?: { [key: string]: any };
  getContext(): Context;
  setContext(newContext: Context | (prevContext: Context) =&gt; Context): void;
  toKey(): string;
}

type NextLink = (operation: Operation) =&gt; Observable&lt;ExecutionResult&gt;

type RequestHandler = (operation: Operation, forward: NextLink) =&gt; Observable&lt;ExecutionResult&gt;
</code></pre>



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



<p>Since link chains have to fetch data at some point, they have the concept of a terminating link and non-terminating links. Simply enough, the terminating link is the one that doesn’t use the&nbsp;<code>forward</code>&nbsp;argument, but instead turns the operation into the result directly. Typically, this is done with a network request, but the possibilities are endless of how this can be done. The terminating link is the last link in the composed chain.</p>



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



<p>Links are meant to be composed into a single chain to handle an operation. Because of this, they need an easy way to send metadata about the request down the chain. They also need a way for the operation to send specific information to a link no matter where it was added to the chain. This is very similar to how context works in React. To accomplish this, each operation has a context object which can be accessed and manipulated by each link. For example:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-">const link = new ApolloLink((operation, forward) =&gt; {
  operation.setContext({ start: new Date() });
  return forward(operation).map((data) =&gt; {
    const time = new Date() - operation.getContext().start;
    console.log(`operation ${operation.operationName} took ${time} to complete`);
    return data;
  })
})</code></pre>



<p>Each context can be set by the operation it was started on. For example with Apollo Client:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-">const link = new ApolloLink((operation, forward) =&gt; {
  const { saveOffline } = operation.getContext();
  if (saveOffline) // do offline stuff
  return forward(operation);
})

const client = new ApolloClient({
  cache: new InMemoryCache()
  link,
});

// send context to the link
const query = client.query({
  query: MY_GRAPHQL_QUERY,
  context: {
    saveOffline: true
  }
});</code></pre>



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



<p>Since links represent small portions of how you want your GraphQL operation to be handled, in order to serve all of the needs of your app they designed to be composed with other links as needed. Composition is managed in two main ways: additive and directional. Additive composition is how you can combine multiple links into a single chain, and directional is how you can control which links are used depending on the operation.</p>



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



<p>Apollo Link ships with two ways to compose links. The first is a method called <code>from </code>which is both exported, and is on the <code>ApolloLink</code> interface. <code>from </code>takes an array of links and combines them all into a single link. For example:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-">import { ApolloLink } from &#039;apollo-link&#039;;
import { RetryLink } from &#039;apollo-link-retry&#039;;
import { HttpLink } from &#039;apollo-link-http&#039;;
import MyAuthLink from &#039;../auth&#039;;

const link = ApolloLink.from([
  new RetryLink(),
  new AuthLink(),
  new HttpLink({ uri: &#039;/graphql&#039; })
]);</code></pre>



<p><code>from</code> is typically used when you have many links to join together all at once. The alternative way to join links is the <code>concat</code> method which joins two links together into one.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">import { ApolloLink } from &#039;apollo-link&#039;;
import { RetryLink } from &#039;apollo-link-retry&#039;;
import { HttpLink } from &#039;apollo-link-http&#039;;

const link = ApolloLink.concat(new RetryLink(), (new HttpLink({ uri: &#039;/graphql&#039; }));</code></pre>



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



<p>Given that links are a way of implementing custom control flow for your GraphQL operation, Apollo Link provides and easy way to use different links depending on the operation itself (or any other global state). This is done using the <code>split</code> method which is exported as a function and is on the <code>ApolloLink</code> interface. Using the split function can be done like this:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">import { ApolloLink } from &#039;apollo-link&#039;;
import { RetryLink } from &#039;apollo-link-retry&#039;;
import { HttpLink } from &#039;apollo-link-http&#039;;

const link = new RetryLink().split(
  (operation) =&gt; operation.getContext().version === 1,
  new HttpLink({ uri: &quot;/v1/graphql&quot; }),
  new HttpLink({ uri: &quot;/v2/graphql&quot; })
);</code></pre>



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



<p>Links are typically created and shared between every request in your application. However, most links do the same thing for each request and don’t need any knowledge about other operations being performed. These links are called stateless links because they have no shared execution state between requests. Stateless links can be written as simple functions wrapped in the <code>ApolloLink</code> interface. For example:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">import { ApolloLink } from &#039;apollo-link&#039;;

const consoleLink = new ApolloLink((operation, forward) =&gt; {
  console.log(`starting request for ${operation.operationName}`);
  return forward(operation).map((data) =&gt; {
    console.log(`ending request for ${operation.operationName}`);
    return data;
  })
})</code></pre>



<p>Stateless links can also be written by extending the <code>ApolloLink</code> class and overwriting the request method. This is one way to store information about an individual link for each request.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-">import { ApolloLink } from &#039;apollo-link&#039;;

class ReportErrorLink extends ApolloLink {
  constructor(errorCallback) {
    super();
    this.errorCallback = errorCallback;
  }
  request(operation, forward) {
    const observer = forward(operation);
    // errors will be sent to the errorCallback
    observer.subscribe({ error: this.errorCallback })
    return observer;
  }
}

const link = new ReportErrorLink(console.error);</code></pre>



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



<p>Sometimes a link may have different behavior based on other requests that are being executed. One such example is a link to batch requests into a single HTTP request instead of sending many at slightly different times. In order to do this, links can keep track of all operations being sent through them. The operation has a <code>toKey</code> method which will return a unique string based on the operation. Using this, you can write a link that manages application state easily:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-">import { ApolloLink } from &#039;apollo-link&#039;;

class OperationTimingLink extends ApolloLink {
  constructor() {
    super();
    this.operations = {};
  }
  request(operation, forward) {
    const key = operation.toKey();
    if (!this.operations[key]) this.operations[key] = {}
    this.operations[key].start = new Date();
    return forward(operation).map((data) =&gt; {
        this.operations[key].elapsed = new Date() - this.operations[key].start;
        return data;
    });
  }
}

const link = new OperationTimingLink();</code></pre>



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



<p>The goal of Apollo Link is to provide a huge degree of flexibility to customize your GraphQL application to just what your app needs. In the future, we hope to see a number of links available on npm just like react components are today. Pick and choose what you want your app to be, compose them together, and let Apollo Client handle the rest!</p>



<p>Special thanks to&nbsp;<a href="https://medium.com/u/712ce1f56160?source=post_page-----f0719d8193ee----------------------" target="_blank" rel="noreferrer noopener">Evans Hauser</a>,&nbsp;<a href="https://medium.com/u/c827782c6410?source=post_page-----f0719d8193ee----------------------" target="_blank" rel="noreferrer noopener">Peggy Rayzis</a>&nbsp;and&nbsp;<a href="https://medium.com/u/803918030a60?source=post_page-----f0719d8193ee----------------------" target="_blank" rel="noreferrer noopener">Sashko Stubailo</a>&nbsp;for making Apollo Link such a powerful and fun library to work with!</p>


Creating a data component with Apollo Link


<p><em>This is a guest post from&nbsp;</em><a href="https://medium.com/u/cff8a83d5fc3?source=post_page-----f23bd884943e----------------------" target="_blank" rel="noreferrer noopener"><em>Peter Piekarczyk</em></a><em>, technical co-founder and Apollo / React Native guru at&nbsp;</em><a href="https://www.orchard.ai/" target="_blank" rel="noreferrer noopener"><em>Orchard.ai</em></a><em>.</em></p>



<p><a href="https://github.com/peterpme/apollo-tote" target="_blank" rel="noreferrer noopener">Apollo Tote</a>&nbsp;is a declarative React component. Take what you’ve been doing inside your “smart” containers and apply it with JSX! It’s meant to be a simple helper library for your Apollo queries until declarative components are released in Apollo 2.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>I created this because I don’t believe separate components and containers need to be applied everywhere. There are times where I’d prefer to see everything in one, succinct file.</p></blockquote>



<p>I came up with the idea for Apollo Tote while working on&nbsp;<a href="https://www.orchard.ai/" target="_blank" rel="noreferrer noopener">Orchard Ai</a>. We’re utilizing&nbsp;<a href="https://www.expo.io/" target="_blank" rel="noreferrer noopener">Expo</a>&nbsp;and&nbsp;<a href="https://apollodata.com/" target="_blank" rel="noreferrer noopener">Apollo</a>&nbsp;to help you stay on top of your relationships &amp; network the same way you do about diet, health and fitness.</p>



<p>At the very minimum, give it a query and a few render props:</p>



<pre class="wp-block-preformatted">&lt;ApolloTote<br>    query={`<br>      user {<br>        imageUrl<br>      }<br>    `}<br>    renderLoading={() =&gt; &lt;Avatar.Loading /&gt;}<br>    render={result =&gt; &lt;Avatar imageUrl={result.user.imageUrl /&gt;}<br>/&gt;</pre>



<p>Note: Apollo Tote is not meant to be used everywhere. We only support queries for now. That being said, there are places where Apollo Tote shines!</p>



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



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



<p>Authentication &amp; Authorization have always been a drag, for whatever reason. You’ll save a user token in localStorage, but you start to realize there’s a few cases you need to handle:</p>



<ul class="wp-block-list"><li>A token exists but the user no longer does (this sounds so dark IRL)</li><li>A token exists but has expired</li><li>There is no token (this one’s easy!)</li></ul>



<pre class="wp-block-prismatic-blocks"><code class="language-jsx">&lt;ApolloTote
    query={`
      query {
        user {
          id
        }
      }
    `}
    test={data =&gt; !!(data &amp;&amp; data.user &amp;&amp; data.user.id)}
    handleFail={() =&gt; Store.dispatch({ type: &#039;LOG_OUT&#039; })}
    handlePass={() =&gt; Store.dispatch({ type: &#039;LOG_IN&#039; })}
    renderError={error =&gt; this._renderError(error)}
    renderLoading={() =&gt; &lt;App.Loading /&gt;}
    render={() =&gt; &lt;App /&gt;}
/&gt;</code></pre>



<p><code>renderError, renderLoading, render</code>&nbsp;are all Apollo-specific and map directly to { error, loading, data }.</p>



<p><code>test, handleFail, handlePass</code>&nbsp;are additional helper methods you can use to test for something specific.</p>



<p>In this case I’m testing for&nbsp;<code>user.id</code>, but you can use it for anything where you might use&nbsp;<code>branch</code>&nbsp;in Recompose: anything that needs to pass or fail.</p>



<p>In this case, I’m dispatching&nbsp;<code>LOG_IN / LOG_OUT</code>&nbsp;with Redux, but feel free to use an event emitter or call a class method, etc.</p>



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



<p>I like to load a different component when I’m handling error state. My favorite way of doing that is by exporting a&nbsp;<code>Loading</code>&nbsp;component. This way I don’t have to fk around with any of the styling to get the loading state I’d like. It just works!</p>



<p>Apollo Tote makes that super easy for ya by giving you the <code>renderLoading</code> prop:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-jsx">&lt;ApolloTote
    query={`
      query {
        user {
          imageUrl
        }
      }
    `}
    renderLoading={() =&gt; &lt;Avatar.Loading /&gt;}
    render={value =&gt; &lt;Avatar imageUrl={value.user.imageUrl} /&gt;}
/&gt;</code></pre>



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



<p>Apollo Tote &amp; render props are a great option when it comes to working with a complex application structure. While Apollo Tote is around today, a version of it will appear in Apollo 2. I’ll keep the API as similar as I can so when its ready, all you’ll have to do is replace the import!</p>



<p>This is an awesome opportunity for the community to help make Apollo 2’s declarative components an awesome experience.</p>



<p>Shoutout to my friends&nbsp;<a href="https://medium.com/u/93de0780c5e6?source=post_page-----f23bd884943e----------------------" target="_blank" rel="noreferrer noopener">Kye Hohenberger</a>&nbsp;and&nbsp;<a href="https://medium.com/u/e55117c5994d?source=post_page-----f23bd884943e----------------------" target="_blank" rel="noreferrer noopener">Kyle Shevlin</a>&nbsp;for the feedback. It’s something I always appreciate!</p>



<p>If you want to find out more about Apollo Tote:</p>



<ul class="wp-block-list"><li>Check out Apollo Tote on&nbsp;<a href="https://github.com/peterpme/apollo-tote" target="_blank" rel="noreferrer noopener">Github</a>.</li><li>Sign up for the&nbsp;<a href="https://www.orchard.ai/" target="_blank" rel="noreferrer noopener">Orchard Ai</a>&nbsp;beta for a sneak peek of it in action. 🙂</li><li>Follow me on&nbsp;<a href="https://twitter.com/peterpme" target="_blank" rel="noreferrer noopener">Twitter</a>&nbsp;&amp;&nbsp;<a href="https://github.com/peterpme" target="_blank" rel="noreferrer noopener">Github</a>&nbsp;and learn more about what I’m working on!</li></ul>


Apollo Tote, Declarative Patterns and a Sneak Peek into Apollo 2.0

Tutorial: Pagination

Server Side Rendering with GraphQL


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



<p>The 2.0 version of Apollo Client brings a faster and more flexible experience while keeping the API you know and love. It adds features like modifiable request chains and custom data stores while providing production-tested defaults. The 2.0 is more performant, smaller, and just the beginning of what’s next for Apollo! The best news is that the new version is a minimal change to the API, so updating should take less than five minutes.</p>



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



<p>Apollo Client 2.0 will include lots of important changes that address the needs of current and future GraphQL developers.</p>



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



<p>The first large change for 2.0 is switching out the network interface for Apollo Link. Evans Hauser gives an overview of what the project is about&nbsp;<a href="https://dev-blog.apollodata.com/apollo-link-the-modular-graphql-network-stack-3b6d5fcf9244" target="_blank" rel="noreferrer noopener">here</a>, but in a nutshell links provide a way to compose actions around requesting data and handling results. The design is meant to allow for interoperability between links that you will one day be able to install from the community, and custom links specific to your application. We are excited to see the community start to publish links for common needs, like&nbsp;<code>apollo-link-sentry</code>&nbsp;to report errors to Sentry.io,&nbsp;<code>apollo-link-offline</code>&nbsp;to support handling request while offline, and even&nbsp;<code>apollo-link-local</code>&nbsp;to support managing your local application state using GraphQL!</p>



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



<p>The second important change was removing Apollo’s dependency on Redux, and allowing for custom cache implementations. The current normalized store is available as&nbsp;<code>apollo-cache-inmemory</code>&nbsp;and supports all of the features the 1.0 store supports. However, we’re excited to see new ideas and features come from custom stores!&nbsp;<a href="https://medium.com/u/6ca780f916b8?source=post_page-----bcd8ea64acbd----------------------" target="_blank" rel="noreferrer noopener">Ian MacLeod</a>&nbsp;has already done some incredible work on Hermes, a new caching package which is sooooo fast and handles large data sets especially well. We are currently trying out Hermes in our own products, like Apollo Optics. Custom caches open up a lot of new possibilities, including the use of native persistent storage instead of in-memory stores.</p>



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



<p>As a result of some internal reworking, the 2.0 benchmarks anywhere from 2x to 5x faster depending on the shape of your data. When coupled with different store implementations, some results are showing an over 10x speed improvement for large data sets! We would love to hear if you see these results in your application.</p>



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



<p>Execution speed is only one part of having a performant implementation. With 2.0 we took a focused approached on reducing the overall footprint of Apollo Client. The full 1.0 package weight of Apollo comes in around 45kb between Apollo Client, Redux, and graphql-tag with the core being 30kb on its own. The new 2.0 core is only 11kb, and getting smaller. When constructed to have all of the features of the 1.0 client, the new version adds less than 27kb to your app. Overall the new build is around 40% smaller.</p>



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



<p>When combined, links and custom stores can be used for incredible new features. We’ve factored some core functionality into a new package called&nbsp;<a href="https://www.npmjs.com/package/apollo-utilities" target="_blank" rel="noreferrer noopener">apollo-utilities</a>&nbsp;to make it easy to write custom features to suit your needs. Here are a few examples of possible customizations:</p>



<ul class="wp-block-list"><li>Sending mutations to traditional REST endpoints instead of a GraphQL server</li><li>Labeling data as user-specific with a&nbsp;<a href="http://twitter.com/user" target="_blank" rel="noreferrer noopener">@user</a>&nbsp;directive, and cleaning those fields out of the store when a user logs out</li><li>Racing a request between a service worker and a network call</li><li>Setting cache TTLs</li><li>Using&nbsp;<a href="http://twitter.com/defer" target="_blank" rel="noreferrer noopener">@defer</a>&nbsp;to lazy load data from heavy operations</li><li>Parsing of custom scalars like Dates</li><li>Managing application state using GraphQL (my personal favorite)</li></ul>



<p>And so many more!</p>



<p>To try out the beta, checkout the<a href="https://github.com/apollographql/apollo-client/blob/master/Upgrade.md" target="_blank" rel="noreferrer noopener">&nbsp;upgrade guide</a>! We would love your feedback as we work towards the official release!</p>



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



<p>Now that you are all excited about what can be done, let’s not delay the question you are most likely asking; what does my upgrade look like? I have good news for you: We expect nearly all of current Apollo Client users to only need to change one file! Here is an example showing before and after:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">import ApolloClient, { createNetworkInterface } from &quot;apollo-client&quot;;

const client = new ApolloClient({
  networkInterface: createNetworkInterface({ uri: &quot;/graphql&quot; }),
});</code></pre>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">import ApolloClient from &quot;apollo-client&quot;;
import HttpLink from &quot;apollo-link-http&quot;;
import InMemoryCache from &quot;apollo-cache-inmemory&quot;;

const client = new ApolloClient({
  link: new HttpLink({ uri: &quot;/graphql&quot; }),
  cache: new InMemoryCache(),
});</code></pre>



<p>It may not look like a lot, but these changes represent a large reworking of the core of Apollo Client. Instead of all of the features you&nbsp;<em>may&nbsp;</em>need being built into the core, we have split them out into new packages which can be picked and chosen as needed. Not using batching? No worries! Want to use a different store? No problem!</p>



<p>If you want to use a single package, we are working on an&nbsp;<code>apollo-client-preset</code>&nbsp;that will include all the defaults from the 1.0 version 🎉, making upgrading or getting started with all of the defaults even easier.</p>



<p>As you can see, we’ve set up Apollo Client 2.0 to become exactly the client your GraphQL application needs, and nothing more.</p>



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



<p>Earlier this month, I had the pleasure of being one of the speakers at the first ever&nbsp;<a rel="noreferrer noopener" href="https://www.meetup.com/GraphQL-NYC/" target="_blank">GraphQL NYC</a>&nbsp;meetup, put on by the incredible&nbsp;<a rel="noreferrer noopener" href="https://medium.com/u/8be181d9f877?source=post_page-----bcd8ea64acbd----------------------" target="_blank">kurtiskemple</a>! I gave an introduction to Apollo Client 2.0 and shared some of my excitement about what this will mean towards using GraphQL in production for you and your users. Check out the video, and if you find yourself in the NYC area,&nbsp;<a rel="noreferrer noopener" href="https://www.meetup.com/GraphQL-NYC/" target="_blank">try to make it to a meetup</a>!</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Apollo Client 2.0 - James Baxley" width="580" height="326" src="https://www.youtube.com/embed/WPwU_Jyhkk4?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



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



<p>The&nbsp;<a href="https://github.com/apollographql/apollo-client/pull/1941" target="_blank" rel="noreferrer noopener">2.0 pull request</a>&nbsp;is merged and the next version is now the master branch! During the beta, we will be shipping new builds under the&nbsp;<code>beta</code>tag (<code>npm install apollo-client@beta</code>) and we would&nbsp;<strong>love&nbsp;</strong>your feedback! Once the beta phase is done, we will formally recommend a release candidate so everyone can update! We will be writing upgrade guides and how-tos for the exciting new features like Apollo Link! After a few weeks in beta / release candidate, the 2.0 will be come the stable latest on npm! 🎉</p>



<p>Special thanks to&nbsp;<a href="https://medium.com/u/39cbd38c57c8?source=post_page-----bcd8ea64acbd----------------------" target="_blank" rel="noreferrer noopener">Jonas Helfer,</a>&nbsp;<a href="https://medium.com/u/712ce1f56160?source=post_page-----bcd8ea64acbd----------------------" target="_blank" rel="noreferrer noopener">Evans Hauser,</a>&nbsp;<a href="https://medium.com/u/47e634bb4796?source=post_page-----bcd8ea64acbd----------------------" target="_blank" rel="noreferrer noopener">Shadaj Laddad,</a>&nbsp;<a href="https://medium.com/u/803918030a60?source=post_page-----bcd8ea64acbd----------------------" target="_blank" rel="noreferrer noopener">Sashko Stubailo,</a>&nbsp;and&nbsp;<a href="https://medium.com/u/6ca780f916b8?source=post_page-----bcd8ea64acbd----------------------" target="_blank" rel="noreferrer noopener">Ian MacLeod</a>&nbsp;for their help and guidance on this effort!<br></p>


What’s coming in Apollo Client 2.0


<p>You’ve probably encountered a library before which serves all of your needs, except for a handful of unsupported corner cases. Even though they might not be widely needed features, they cause a huge pain in your app. That’s why we’re working on a library called Apollo Link, which addresses this issue for today’s GraphQL clients by providing a framework to give you complete control over GraphQL request control flow and result resolution.</p>



<p>To speed up development time, the Apollo Link package contains a collection of Links that each perform a discrete function commonly found in GraphQL network stacks. The behavior of these links ranges from simple HTTP requests, to subscriptions over websockets, to modifying request control flow with retrying, polling, batching, and deduplicating.</p>



<p>These basic links, together with any custom links you build for your app, can be composed together to combine their functionality, creating a GraphQL client with custom behavior. When a link is added to the middle of a chain, the link applies its modification to the request’s control flow, such as retrying. The resulting link can return a GraphQL&nbsp;<code>ExecutionResult</code>(data + errors). This can be anything from mocked data, local application state, or, more often, the result of a request to your GraphQL Server.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="829" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_rNvNCLyvcOtDmwn23Nyt0A-1024x829.png" alt="" class="wp-image-1027" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_rNvNCLyvcOtDmwn23Nyt0A-1024x829.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_rNvNCLyvcOtDmwn23Nyt0A-300x243.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_rNvNCLyvcOtDmwn23Nyt0A-768x621.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_rNvNCLyvcOtDmwn23Nyt0A.png 1048w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>The HTTP Link</figcaption></figure>



<p>To support the diverse behavioral requirements of GraphQL applications, each GraphQL response is represented by an Observable. Observables expose a subscribe method that takes three callbacks: next, error, and complete. Next can be called zero, once, or many times, until either the error or complete callbacks are made. This structure of callbacks is ideal because it provides the power to represent current and planned GraphQL results, including queries, mutations, subscriptions, and even live queries.</p>



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



<p>In this blog post, we will gradually build up a custom GraphQL client with Apollo Links that provides results to GraphiQL.</p>



<p>The foundation of all GraphQL clients, is fetching a GraphQL result. So we’ll start by building a link that can make an HTTP request. This link will be a helpful example for other custom transports, such as using a Firebase endpoint, XHR, a REST endpoint, or other GraphQL endpoint. All Links inherit from a base class that provides the methods for composition, and are required to implement the&nbsp;<code>request</code>&nbsp;method.</p>



<p>Check out the implementation in the CodeSandbox below:</p>



<figure class="wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-codesandbox"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" class="wp-embedded-content" sandbox="allow-scripts" security="restricted" title="Http Link" width="580" height="870" src="https://codesandbox.io/embed/59xjvgnwa#?secret=GNBLYtURm5" data-secret="GNBLYtURm5"></iframe>
</div></figure>



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



<p>Now that we have our custom transport link, the next goal is to add some request control flow with links. To illustrate, we are going to create one link that catches errors and routes them to GraphQL data and another link that logs the operations and results. The logging link will be applied first, then the catch link; finally, the http link will fetch the request.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="327" height="339" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_62VLGUaU-9ULCoBCGvgdkQ.png" alt="" class="wp-image-1026" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_62VLGUaU-9ULCoBCGvgdkQ.png 327w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_62VLGUaU-9ULCoBCGvgdkQ-289x300.png 289w" sizes="auto, (max-width: 327px) 100vw, 327px" /><figcaption>Ordering of Link Application</figcaption></figure>



<p>In order to make the chain work, the logging and catch link need access to the next link. To accomplish this, the&nbsp;<code>request</code>&nbsp;method has access to the&nbsp;<code>forward</code>&nbsp;argument, a function that pass the operation to the next link returns the observable result. Finally, we create a composed chain of the links with the static&nbsp;<code>from</code>&nbsp;method of&nbsp;<code>ApolloLink</code>.</p>



<p>See the implementation of the chain below:</p>



<figure class="wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-codesandbox"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" class="wp-embedded-content" sandbox="allow-scripts" security="restricted" title="Log, Catch, and Http Link" width="580" height="870" src="https://codesandbox.io/embed/wm5qq6vdm#?secret=iACm8M7yUE" data-secret="iACm8M7yUE"></iframe>
</div></figure>



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



<p>Great! Now we have the ability to control the flow of a request and response through our GraphQL client. What if we want different behavior for mutations and queries? This example uses a different endpoint for mutations, reroutes errors on queries only, and logs all requests. Additionally we might want to selectively modify an operation while using the same transport, for example adding another variable to a query with a certain operation name. ApolloLink provides the ability to specify a certain portion of a composition to run depending on the operation with the&nbsp;<code>split</code>&nbsp;method.</p>



<p>Look at the implementation below:</p>



<figure class="wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-codesandbox"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" class="wp-embedded-content" sandbox="allow-scripts" security="restricted" title="Splits, Log, Catch, and Http Link" width="580" height="870" src="https://codesandbox.io/embed/25zww2am#?secret=GjTWt8TI39" data-secret="GjTWt8TI39"></iframe>
</div></figure>



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



<p>Awesome! Now we have the ability to create a completely custom GraphQL client that can run logic and fetch results on a per query basis. Apollo Link provides many basic links that can be combine and extended with your own links to create the behavior required by your application. You can find the currently offered links in the&nbsp;<a href="https://github.com/apollographql/apollo-link/" target="_blank" rel="noreferrer noopener">Apollo Link repository</a>.</p>



<p>The Apollo Link ecosystem is constantly evolving, and entirely community driven. If you are interested in contributing, or shaping the future of GraphQL client customization, please open an issue or pull request. If you want some ideas of how to start contributing, join the&nbsp;<a href="https://www.apollodata.com/#slack" target="_blank" rel="noreferrer noopener">Apollo Slack</a>&nbsp;and send me (evans) a private message!</p>



<p>In the future, look out for posts about communicating between links using the context field in the GraphQL operation, stateful vs stateless links, publishing your own link configuration, adding type safety, and more!</p>



<p>If you want to keep updated on Apollo Link, make sure to click the “Follow” button below, and follow us on Twitter at&nbsp;<a href="https://twitter.com/apollographql" target="_blank" rel="noreferrer noopener">@apollographql</a>&nbsp;and the author at&nbsp;<a href="https://twitter.com/evanshauser" target="_blank" rel="noreferrer noopener">@evanshauser</a>.</p>



<p>Thank you to&nbsp;<a href="https://medium.com/u/803918030a60?source=post_page-----c865be0ce059----------------------" target="_blank" rel="noreferrer noopener">Sashko Stubailo</a>,&nbsp;<a href="https://medium.com/u/fd3d3dea3cd3?source=post_page-----c865be0ce059----------------------" target="_blank" rel="noreferrer noopener">James Baxley III</a>, and&nbsp;<a href="https://medium.com/u/39cbd38c57c8?source=post_page-----c865be0ce059----------------------" target="_blank" rel="noreferrer noopener">Jonas Helfer</a>&nbsp;for greatly informing the Apollo Link design process and their continued support of the author!</p>


Apollo Link: Creating your custom GraphQL client


<p>Scala is an excellent language for writing GraphQL apps, especially with the awesome&nbsp;<a href="http://sangria-graphql.org/" target="_blank" rel="noreferrer noopener">Sangria</a>&nbsp;library for writing GraphQL servers by&nbsp;<a href="https://medium.com/u/93c50e4b5ebe?source=post_page-----b066c6b09af4----------------------" target="_blank" rel="noreferrer noopener">Oleg Ilyenko</a>. Scala is a powerful language, combining object oriented and functional programming concepts to make writing complex applications easy. The functional programming aspects of Scala are especially helpful when writing GraphQL schemas, allowing you to declare resolvers without any boilerplate.</p>



<p>With&nbsp;<a href="https://www.scala-js.org/" target="_blank" rel="noreferrer noopener">Scala.js</a>, you can now use Scala to write client-side apps, by writing Scala code that compiles to JavaScript that runs in your browser. With a straightforward interop layer between Scala and JavaScript, it’s easy to use frameworks like React and Angular to create Scala.js apps. And starting today, Apollo joins in the fun with a new library for using Apollo Client with React in Scala:&nbsp;<a href="https://github.com/apollographql/react-apollo-scalajs" target="_blank" rel="noreferrer noopener">react-apollo-scalajs</a>!</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="550" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_Z2aNrRtgSImSfGA-G-_dBg-1024x550.png" alt="" class="wp-image-1032" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_Z2aNrRtgSImSfGA-G-_dBg-1024x550.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Z2aNrRtgSImSfGA-G-_dBg-300x161.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Z2aNrRtgSImSfGA-G-_dBg-768x412.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Z2aNrRtgSImSfGA-G-_dBg-1200x644.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Z2aNrRtgSImSfGA-G-_dBg.png 1278w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Adding the react-apollo graphql HOC in Scala</figcaption></figure>



<h2 class="wp-block-heading" id="03ef"><a href="#introducing-a-hrefhttps-github-com-apollographql-react-apollo-scalajs-target_blank-relnoreferrer-noopenerreact-apollo-scalajs-a" aria-hidden="true" class="aal_anchor" id="introducing-a-hrefhttps-github-com-apollographql-react-apollo-scalajs-target_blank-relnoreferrer-noopenerreact-apollo-scalajs-a"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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&nbsp;<code>&lt;a href=&quot;https://github.com/apollographql/react-apollo-scalajs&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;react-apollo-scalajs&lt;/a&gt;</code></h2>



<p>As its name suggests,&nbsp;<code>react-apollo-scalajs</code>&nbsp;provides the glue to use Apollo Client with React in your Scala.js app. Beyond providing static typing facades for Apollo Client,&nbsp;<code>react-apollo-scalajs</code>&nbsp;includes layers that allow you to use Apollo Client through idiomatic Scala code. For example, results of queries are returned as Scala&nbsp;<code>Futures</code>&nbsp;and query results can be implicitly converted into fragments they can be viewed as.</p>



<p>Through the excellent&nbsp;<code>&lt;a href=&quot;https://github.com/apollographql/apollo-codegen&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;apollo-codegen&lt;/a&gt;</code>&nbsp;tool, which is currently used for generating static types for Swift, TypeScript, and Flow, you can now generate Scala case classes which represent the responses of GraphQL queries you will be running in your app. With strong query typing, most issues can be caught at compile-time, with&nbsp;<code>react-apollo-scalajs</code>&nbsp;performing extra type checks as you set up React components to receive query results.</p>



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



<p><em>Download and run&nbsp;</em><a href="https://github.com/apollographql/react-apollo-scalajs/tree/master/example" target="_blank" rel="noreferrer noopener"><em>the example on GitHub</em></a><em>!</em></p>



<p>To demonstrate how you can use&nbsp;<code>react-apollo-scalajs</code>&nbsp;, let’s go through a quick example of putting together an app with queries and mutations targeting a GraphQL server on&nbsp;<a href="https://launchpad.graphql.com/" target="_blank" rel="noreferrer noopener">Apollo Launchpad</a>.</p>



<p>First, set up your project by installing the Scala.js plugin and the necessary library dependencies.</p>



<p>In your <code>project/plugins.sbt</code> add the Scala.js plugin and the <a rel="noreferrer noopener" href="https://scalacenter.github.io/scalajs-bundler/" target="_blank">Scala.js Bundler</a> plugin (for Webpack-based bundling):</p>



<pre class="wp-block-prismatic-blocks"><code class="language-scala">addSbtPlugin(&quot;org.scala-js&quot; % &quot;sbt-scalajs&quot; % &quot;0.6.18&quot;)

addSbtPlugin(&quot;ch.epfl.scala&quot; % &quot;sbt-scalajs-bundler&quot; % &quot;0.7.0&quot;)</code></pre>



<p>And in your <code>build.sbt</code> specify the Scala version, add NPM and Scala library dependencies, and configure the code generator:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-scala">
enablePlugins(ScalaJSBundlerPlugin)

resolvers += &quot;Apollo Bintray&quot; at &quot;https://dl.bintray.com/apollographql/maven/&quot;
libraryDependencies += &quot;com.apollographql&quot; %%% &quot;react-apollo-scalajs&quot; % &quot;0.1.0&quot;

libraryDependencies += &quot;me.shadaj&quot; %%% &quot;slinky-web&quot; % &quot;0.1.0&quot;

npmDependencies in Compile += &quot;react&quot; -&gt; &quot;15.6.1&quot;

npmDependencies in Compile += &quot;react-dom&quot; -&gt; &quot;15.6.1&quot;

npmDependencies in Compile += &quot;react-apollo&quot; -&gt; &quot;1.4.8&quot;

scalaJSUseMainModuleInitializer := true

val namespace = &quot;com.apollographql.scalajs&quot;

(sourceGenerators in Compile) += Def.task {
  import scala.sys.process._

  val out = (sourceManaged in Compile).value

  out.mkdirs()

  Seq(
    &quot;apollo-codegen&quot;, &quot;generate&quot;, ((sourceDirectory in Compile).value / &quot;graphql&quot;).getAbsolutePath + &quot;/*.graphql&quot;,
    &quot;--schema&quot;, (baseDirectory.value / &quot;schema.json&quot;).getAbsolutePath,
    &quot;--target&quot;, &quot;scala&quot;,
    &quot;--namespace&quot;, namespace,
    &quot;--output&quot;, (out / &quot;graphql.scala&quot;).getAbsolutePath
  ).!
  Seq(out / &quot;graphql.scala&quot;)
}

watchSources ++= ((sourceDirectory in Compile).value / &quot;graphql&quot; ** &quot;*.graphql&quot;).get</code></pre>



<p>Eventually, the source generators configuration at the end of the file will be moved into an SBT plugin, but for now it is necessary to include this in all projects.</p>



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



<p>Before we jump into using GraphQL for loading our data, let’s start by setting up a simple React UI to verify that our setup works. Create a file <code>src/main/scala/com/apollographql/scalajs/Main.scala</code> where we’ll put the initializer for our application. For using React in Scala, we’ll use <a rel="noreferrer noopener" href="https://github.com/shadaj/slinky" target="_blank">Slinky</a>, which makes React in Scala look very similar to React in plain JavaScript.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-scala">package com.apollographql.scalajs

import me.shadaj.slinky.web.ReactDOM
import me.shadaj.slinky.web.html._ // imports tags, such as &quot;h1&quot;

import scala.scalajs.js.JSApp
import org.scalajs.dom.{document, html}

import scala.scalajs.js

object Main extends JSApp {
  override def main(): Unit = { // called when the app launches
    val reactContainer = document.createElement(&quot;div&quot;)
    document.body.appendChild(reactContainer)

    ReactDOM.render(
      h1(&quot;hello!&quot;), // this is Scala&#039;s version of JSX!
      reactContainer
    )
  }
}</code></pre>



<p>If you run&nbsp;<code>sbt fastOptJS::startWebpackDevServer</code>&nbsp;you should be able to navigate to&nbsp;<a href="http://localhost:8080/webpack-dev-server," target="_blank" rel="noreferrer noopener">http://localhost:8080/webpack-dev-server,</a>&nbsp;select the&nbsp;<code>main-bundle</code>&nbsp;and see your app running live!</p>



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



<p>Now that we have a simple app set up, we can add use GraphQL to load data for it! For this example, we will be running GraphQL queries against the Apollo Launchpad at <a rel="noreferrer noopener" href="https://launchpad.graphql.com/1jzxrj179" target="_blank">https://launchpad.graphql.com/1jzxrj179</a>, loading and displaying posts in our app. First, we add the GraphQL query for loading all posts. In <code>src/main/graphql/posts.graphql</code> add the query:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">query AllPosts {
  posts {
    id
    title
    votes
  }
}</code></pre>



<p>If you run&nbsp;<code>sbt/compile</code>&nbsp;you’ll see that the code generator kicks in (make sure you have previously run&nbsp;<code>npm i -g apollo-codegen</code>&nbsp;) and emits static types for our query to&nbsp;<code>target/scala-2.12/src_managed/main/graphql.scala</code>&nbsp;. We can now use these static types to power our React app!</p>



<p>Wiring GraphQL data into a component through <code>react-apollo-scalajs</code> is just like using Apollo in your JS code. First, we create a component to receive the data from our query. In <code>src/main/scala/com/apollographql/scalajs/PostsView.scala</code> we set up a new component:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-scala">package com.apollographql.scalajs

import me.shadaj.slinky.core.StatelessComponent
import me.shadaj.slinky.core.facade.ReactElement
import me.shadaj.slinky.web.html._

import scala.scalajs.js
import scala.scalajs.js.annotation.ScalaJSDefined

object PostsView extends StatelessComponent {
  type Props = AllPostsQuery.Props // we use the static Props type from our generated code as the props for 
  // this is where we create the definition class, which maps to an ES6 class for defining a component
  
  @ScalaJSDefined
  class Def(jsProps: js.Object) extends Definition(jsProps) {
    override def render(): ReactElement = {
      div(
        props.data.map[ReactElement] { d =&gt; // if we have a result
          d.posts.toList.flatten.flatten.map { post =&gt;
            // for each not-null post (we use flattens here to remove the null values)
            div(key := post.id.toString)( // render the post
              h1(post.title.getOrElse[String](&quot;Unknown title&quot;)),
              h2(post.votes.getOrElse(0).toString)
            )
          }
        }.getOrElse[ReactElement](h1(&quot;loading!&quot;))
      )
    }
  }
  
  // wire the component to our query using the familiar graphql method
  val WithData = graphql(AllPostsQuery)(this)
}</code></pre>



<p>And that’s it! You now have a React component that’s wired to a GraphQL query. The last step is to adjust our application initializer to wrap the application inside an&nbsp;<code>ApolloProvider</code>&nbsp;and configure Apollo Client to run queries against the Launchpad server.</p>



<p>First, at the top of our main method, we initialize Apollo Client:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-scala">val client = ApolloClient(ApolloClientOptions(
  networkInterface = Some(createNetworkInterface(NetworkInterfaceOptions(
    uri = Some(&quot;https://1jzxrj179.lp.gql.zone/graphql&quot;)
  )))
))</code></pre>



<p>Then we replace the contents inside <code>ReactDOM.render</code> to render our new component inside an <code>ApolloProvider</code> wrapper.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-scala">ReactDOM.render(
  ApolloProvider(ApolloProvider.Props(client))(
    div(
      PostsView.WithData(()) // we pass in () because there are no variables for the query
    )
  ),
  reactContainer
)</code></pre>



<p>If you run&nbsp;<code>sbt fastOptJS::startWebpackDevServer</code>&nbsp;again and reload the application page you should see a working GraphQL app, showing “Loading” and then displaying the posts data!</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="432" height="472" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_Fe5MeClWAi2C8uKdEfTVxA.gif" alt="" class="wp-image-1031"/><figcaption>It works!</figcaption></figure>



<p>You now have a working GraphQL application written in Scala that uses Apollo Client and React! There are a lot more things that&nbsp;<code>react-apollo-scalajs</code>&nbsp;supports, such as query variables and mutations, so check out the&nbsp;<code>examples</code>&nbsp;folder in the&nbsp;<a href="https://github.com/apollographql/react-apollo-scalajs" target="_blank" rel="noreferrer noopener">repository</a>&nbsp;to see how to use those features. This is still a very initial release of Scala.js support for Apollo, so please let us know at&nbsp;<a href="http://github.com/apollographql/react-apollo-scalajs/issues" target="_blank" rel="noreferrer noopener">http://github.com/apollographql/react-apollo-scalajs/issues</a>&nbsp;if you find any bugs or have ideas for new features.</p>


Using Scala.js with React and GraphQL


<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>This is a follow up to a similar post on using Flow and Apollo which can be found&nbsp;<a href="https://dev-blog.apollodata.com/a-stronger-typed-react-apollo-c43bd52be0d8" target="_blank" rel="noreferrer noopener">here</a>.</p></blockquote>



<p>When the Apollo team started out to build a flexible and incrementally adoptable GraphQL client, one of the early&nbsp;<a href="https://github.com/apollographql/apollo-client/issues/6" target="_blank" rel="noreferrer noopener">discussions</a>&nbsp;centered around static typing for the library code. Since the library deals with a complex data types (like the parsed abstract syntax tree of a GraphQL operation), it seemed like making the code type safe was a needed addition.</p>



<p>The team investigated both Flow and TypeScript, and ultimately went with TypeScript for its active development, editor integration, and strong tooling. It’s been a huge help ever since.</p>



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



<p>Even though Apollo Client and React Apollo are both written in TypeScript, the actual type usage for application developers was not as strong as it should have been. In many places, React Apollo used either&nbsp;<code>any</code>, essentially bypassing static types, or left types off all together where allowed.</p>



<p>Luckily, thanks to the efforts of&nbsp;<a href="https://medium.com/u/ce97660ec72?source=post_page-----a9aa2c7dcf87----------------------" target="_blank" rel="noreferrer noopener">Ian Ker-Seymer,</a>&nbsp;these shortcomings were brought to the attention of the Apollo team. With his help, application developers can opt in to much stronger TypeScript checking of their React apps!</p>



<h2 class="wp-block-heading" id="360e"><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><strong>This article will follow the same progression as the&nbsp;</strong><a href="https://dev-blog.apollodata.com/a-stronger-typed-react-apollo-c43bd52be0d8" target="_blank" rel="noreferrer noopener"><strong>article on Flow</strong></a><strong>,&nbsp;</strong>and it also assumes you already have TypeScript configured in your project. If you don’t, check out this&nbsp;<a href="https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter" target="_blank" rel="noreferrer noopener">great starter tooling from Microsoft</a>.</p>



<p>We will start with a simple React component wrapped with the <code>graphql</code> higher order component (HOC) from React Apollo. This component will display a hero from Star Wars and their friends, with data returned from a GraphQL endpoint:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-jsx">import React from &quot;react&quot;;
import gql from &quot;graphql-tag&quot;;
import { graphql } from &quot;react-apollo&quot;;

export const HERO_QUERY = gql`
  query GetCharacter($episode: Episode!) {
    hero(episode: $episode) {
      name
      id
      friends {
        name
        id
        appearsIn
      }
    }
  }
`;

export const withCharacter = graphql(HERO_QUERY, {
  options: () =&gt; ({
    variables: { episode: &quot;JEDI&quot; },
  }),
});

export default withCharacter(({ data: { loading, hero, error } }) =&gt; {
  if (loading) return &lt;div&gt;Loading&lt;/div&gt;;
  if (error) return &lt;h1&gt;ERROR&lt;/h1&gt;;
  return (
    &lt;div&gt;
      {hero &amp;&amp;
        &lt;div&gt;
          &lt;h3&gt;{hero.name}&lt;/h3&gt;
          {hero.friends.map(friend =&gt;
            &lt;h6 key={friend.id}&gt;
              {friend.name}:
              {&quot; &quot;}{friend.appearsIn.map(x =&gt; x.toLowerCase()).join(&quot;, &quot;)}
            &lt;/h6&gt;
          )}
        &lt;/div&gt;}
    &lt;/div&gt;
  );
}</code></pre>



<p>The above code pulls some data from a GraphQL API using a query and includes lifecycle information, such as loading and error information. With a few minor changes, we can tell Typescript how to support us in writing code within this render function.</p>



<p>Let’s walk through what is happening in this diff.</p>



<ol class="wp-block-list"><li>We need to tell TypeScript what the shape of our data from our graphql server will look like. We manually write the types for our response data. Alternatively, you can use&nbsp;<a href="https://github.com/apollographql/apollo-codegen" target="_blank" rel="noreferrer noopener">apollo-codegen</a>&nbsp;to generate the types for you! Shoutout to&nbsp;<a href="https://medium.com/u/2ab2eb7f698c?source=post_page-----a9aa2c7dcf87----------------------" target="_blank" rel="noreferrer noopener">Lewis Chung</a>&nbsp;for working to make this easier and&nbsp;<a href="https://medium.com/u/592c66ff70d?source=post_page-----a9aa2c7dcf87----------------------" target="_blank" rel="noreferrer noopener">Martijn Walraven</a>&nbsp;and&nbsp;<a href="https://medium.com/u/abc034e10a70?source=post_page-----a9aa2c7dcf87----------------------" target="_blank" rel="noreferrer noopener">Robin Ricard</a>&nbsp;for the codegen framework!</li></ol>



<pre class="wp-block-preformatted">+ export type Hero = {
+   name: string;
+   id: string;
+   appearsIn: string[];
+   friends: Hero[];
+ };

+ export type Response = {
+   hero: Hero,
+ };</pre>



<p>2. The last line is where the magic happens. We tell TypeScript what the shape of the result will look like from the server when the graphql enhancer wraps a component.</p>



<p>If you already had your project set up with TypeScript, and have already typed your response data, all you have to do is add the type to the&nbsp;<code>graphql</code>&nbsp;HOC and you are off!</p>



<p>The immediate benefits can be seen by writing some bad code! Let’s make a mistake and see what happens:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-tsx">export default withCharacter(({ loading, hero, error }) =&gt; {
  // Operator &#039;&gt;&#039; cannot be applied to types &#039;boolean&#039; and &#039;number&#039;.
  if (loading &gt; 1) return &lt;div&gt;Loading&lt;/div&gt;;
  if (error) return &lt;h1&gt;error.name&lt;/h1&gt;;
  return ...;
}</code></pre>



<p>Since <code>withCharacter</code> is now typed, TypeScript will error out preventing a potential production bug!</p>



<figure class="wp-block-embed is-type-photo is-provider-giphy"><div class="wp-block-embed__wrapper">
<a href="https://giphy.com/gifs/what-hello-loki-Bjx0A3RTcVtUA"><img loading="lazy" decoding="async" src="https://media0.giphy.com/media/Bjx0A3RTcVtUA/giphy.gif" alt="Follow What GIF - Find &amp; Share on GIPHY" width="500" height="246" /></a>
</div></figure>



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



<p>Wrapped components are almost always exported and used by a component somewhere else in your tree, so if your exported component has prop requirements, we need to tell TypeScript so it can help prevent errors elsewhere in our tree. Since the <code>graphql</code> wrapper supports polymorphic types, we can use the second type parameter of it to do just that! Let’s make a change to our initial component that converts it to use a prop called <code>episode</code>:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-typescript">+ export type InputProps = {
+  episode: string,
+ };

+ export const withCharacter = graphql&lt;Response, InputProps&gt;(HERO_QUERY, {
- export const withCharacter = graphql&lt;Response&gt;(HERO_QUERY, {
+   options: ({ episode }) =&gt; ({
+     variables: { episode },
-   options: () =&gt; ({
-     variables: { episode: &quot;JEDI&quot; },
  }),
});</code></pre>



<p>We can define the props that our exported component will need (<code>InputProps</code>) and attach them to our enhancer using the second type argument. Now our component can pass <code>episode</code> to pick which characters to load and TypeScript can know how to enforce that! In practice it would look like this:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-tsx">import React from &quot;react&quot;;
import ApolloClient, { createNetworkInterface } from &quot;apollo-client&quot;;
import { ApolloProvider } from &quot;react-apollo&quot;;

import Character from &quot;./Character&quot;;

export const networkInterface = createNetworkInterface({
  uri: &quot;https://mpjk0plp9.lp.gql.zone/graphql&quot;,
});
export const client = new ApolloClient({ networkInterface });

export default () =&gt;
  &lt;ApolloProvider client={client}&gt;
    // Type &#039;{}&#039; is not assignable to type &#039;Readonly&lt;InputProps&gt;&#039;.
    // Property &#039;episode&#039; is missing in type &#039;{}&#039;.
    &lt;Character /&gt;
  &lt;/ApolloProvider&gt;;</code></pre>



<p>The other benefit we get is typing of the <code>options</code> function itself. Let’s say we forgot what props are passed into our component and we thought the episode was a number:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-typescript">export const withCharacter: OperationComponent&lt;Response, InputProps&gt; = graphql(HERO_QUERY, {
  options: ({ episode }) =&gt; ({
    // Operator &#039;&gt;&#039; cannot be applied to types &#039;string&#039; and &#039;number&#039;.
    variables: { episode: episode &gt; 1 },
  })
});</code></pre>



<p>Thanks TypeScript!</p>



<figure class="wp-block-embed is-type-photo is-provider-giphy"><div class="wp-block-embed__wrapper">
<a href="https://giphy.com/gifs/filmeditor-will-ferrell-elf-xUySTu7FXFYo6nXWWQ"><img loading="lazy" decoding="async" src="https://media0.giphy.com/media/xUySTu7FXFYo6nXWWQ/giphy.gif" alt="Will Ferrell Thank You GIF by filmeditor - Find &amp; Share on GIPHY" width="480" height="270" /></a>
</div></figure>



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



<p>GraphQL is awesome at allowing you to only request the data you want from the server. The client still often needs to reshape or do client side calculations based on these results. React Apollo has a handy dandy props function which lets you reshape the resulting props into a new object. In practice, I use this for almost every enhancer I write.</p>



<p><em>Note: It also pairs nicely with&nbsp;</em><a href="http://ramdajs.com/" target="_blank" rel="noreferrer noopener"><em>Ramda</em></a><em>&nbsp;for some fun, fun functional code.</em></p>



<p>Since this function can shape passed props, plus a potential data result, potential error, and loading state, having it strongly typed would prevent a lot of <em>save => see error => check data => save</em> workflows. Let’s take a look at how to set this up with React Apollo:</p>



<p>The most important part of the change above is including what the result of the props function will look like on line 5.</p>



<p>Now, let’s check it out in action a couple of weeks after we first wrote this file and forgot some things.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-typescript">export const withCharacter = graphql&lt;Response, InputProps, Props&gt;(HERO_QUERY, {
  options: ({ episode }) =&gt; ({
    variables: { episode },
  }),
  props: ({ data, ownProps }) =&gt; ({
    ...data,
    // Operator &#039;&gt;&#039; cannot be applied to types &#039;string&#039; and &#039;number&#039;.
    episode: ownProps.episode &gt; 1,
    // Property &#039;isHero&#039; does not exist on type &#039;Hero&#039;.
    isHero: data &amp;&amp; data.hero &amp;&amp; data.hero.isHero,
  }),
});</code></pre>



<ol class="wp-block-list"><li>The first error shows we don’t have a good memory around what an episode represents. Maybe we should change it to&nbsp;<code>episodeName</code>&nbsp;! Luckily, TypeScript has our back.</li><li>I really thought we had an isHero field in our query? Whelp, looks like we don’t based on the types.</li></ol>



<p>These two examples show type checking passed props and resulting data as well as the fact that data may not have arrived yet from the server!</p>



<figure class="wp-block-embed is-type-photo is-provider-giphy"><div class="wp-block-embed__wrapper">
https://giphy.com/gifs/broad-city-hillary-clinton-3osxYdwmc9Oy8H7h7i
</div></figure>



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



<p>I hope that this article shows both how awesome TypeScript is, and how subtle the differences between Flow and TypeScript can be for application developers. They are both amazing choices!</p>



<p>I’d like to give a special thanks to&nbsp;<a href="https://medium.com/u/39cbd38c57c8?source=post_page-----a9aa2c7dcf87----------------------" target="_blank" rel="noreferrer noopener">Jonas Helfer</a>,&nbsp;<a href="https://medium.com/u/2ab2eb7f698c?source=post_page-----a9aa2c7dcf87----------------------" target="_blank" rel="noreferrer noopener">Lewis Chung</a>,&nbsp;<a href="https://medium.com/u/b1f108c2bfa9?source=post_page-----a9aa2c7dcf87----------------------" target="_blank" rel="noreferrer noopener">Brett Jurgens</a>,&nbsp;<a href="https://github.com/ianks" target="_blank" rel="noreferrer noopener">Ian</a>, and&nbsp;<a href="https://medium.com/u/803918030a60?source=post_page-----a9aa2c7dcf87----------------------" target="_blank" rel="noreferrer noopener">Sashko Stubailo</a>&nbsp;for reviewing the initial type PR. I’ve also&nbsp;<a href="https://github.com/apollographql/react-docs/pull/258" target="_blank" rel="noreferrer noopener">started the effort to include documentation</a>&nbsp;for Flow and TypeScript in the official React docs.<br></p>


Getting started with TypeScript and Apollo


<p>When we started building Apollo Client, our goal was to empower people to use GraphQL in the way they want. This goal, and countless conversations with developers using GraphQL, drives all of our design decisions. (For example, we started by integrating with Redux because that’s what most React developers were familiar with.)</p>



<p>We found that there was a core set of data management features that people needed in a GraphQL client: caching, polling, pagination, batching and a few other things. One by one, the Apollo community added each of these to Apollo Client, culminating in the&nbsp;<a href="https://dev-blog.apollodata.com/apollo-client-1-0-a-flexible-community-focused-javascript-graphql-client-2253b90e6c84" target="_blank" rel="noreferrer noopener">1.0 release this April</a>. Thanks to your feedback and contributions, Apollo Client is now the most widely used GraphQL client solution for every platform!</p>



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



<p>Along with the features baked into Apollo Client, there have always been hooks and extension points to change the functionality. The most important is the network interface, which controls how GraphQL operations are converted into network requests, and has became the focal point for adding custom functionality to Apollo Client.</p>



<p>We’re learning that everyone needs a different mix of features and tradeoffs in their GraphQL client library. Aside a set of core needs, such as making basic queries and mutations, developers require a slightly different set of surrounding functionality, including retries, live queries, diverse transports, alternative caching layers, and offline support. It’s clear that a single, monolithic library won’t be able to support all of these needs at once, and that adding all of these features to one codebase won’t scale.</p>



<h2 class="wp-block-heading" id="db69"><a href="#the-solution-apollo-link" aria-hidden="true" class="aal_anchor" id="the-solution-apollo-link"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>The solution:&nbsp;<a href="https://github.com/apollographql/apollo-link" target="_blank" rel="noreferrer noopener">Apollo Link</a></h2>



<p>Today, we are introducing the first step towards a new GraphQL network management architecture that will allow you to compose modular parts to create the GraphQL client you want. In this architecture, you compose Links, which each implement one small part of a GraphQL network stack.</p>



<p>When you execute a GraphQL request, each Link’s functionality is applied one after the other. Links can perform polling, caching, retrying, queuing mutations, offline support and anything else by controlling the exact flow of each request.</p>



<p>Eventually, we plan to move more and more functionality that is currently in Apollo Client core into modular links, so you don’t have to rely on a single feature set built into the library. We believe this architecture will give you the best of both worlds — an easy get-started experience with a default set of features and the ability to add and remove functionality once you discover the specific needs of your app.</p>



<p>With Apollo Link, you will be able to access your GraphQL data exactly the way you want, completing our original goal.</p>



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



<p>Apollo Link is currently in&nbsp;<a href="https://github.com/apollographql/apollo-link/" target="_blank" rel="noreferrer noopener">prerelease</a>, and you can use it today in place of the network interface on the latest Apollo Client, or as a standalone library. The first new feature we are introducing is the&nbsp;<code>RetryLink</code>, which enables you to retry GraphQL queries in the case of a transient network error.</p>



<p>The HTTP link implementation uses&nbsp;<a href="https://github.com/apollographql/apollo-fetch" target="_blank" rel="noreferrer noopener">apollo-fetch</a>, which enables you to continue using middleware and afterware you’ve written for the current network interface.</p>



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



<p>Apollo Link isn’t just a new network layer for Apollo Client. We’ve designed it so that it can be used in any situation where you need to make GraphQL requests.</p>



<p>The simplest way to see Apollo Link in action is to use it with GraphiQL. You can easily try the <code>RetryLink</code> by composing it with an <code>HttpLink</code>, and the result can be passed into Graph<em>i</em>QL:</p>



<figure class="wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-codesandbox"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" class="wp-embedded-content" sandbox="allow-scripts" security="restricted" title="Simple Retry Http Composition" width="580" height="870" src="https://codesandbox.io/embed/mvmoeex1#?secret=Ruch87r6eL" data-secret="Ruch87r6eL"></iframe>
</div></figure>



<p>Along with retries, the first version of Apollo Link also supports the ability to split your control flow depending on the GraphQL operation. This makes it easy to create a hybrid network stack that uses split to support subscriptions over websockets and single result GraphQL requests over HTTP.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="726" height="349" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_KwnMO21k0d3UbyKWnlbeJg.png" alt="" class="wp-image-1036" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_KwnMO21k0d3UbyKWnlbeJg.png 726w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_KwnMO21k0d3UbyKWnlbeJg-300x144.png 300w" sizes="auto, (max-width: 726px) 100vw, 726px" /><figcaption>Apollo Client with a visualized hybrid link (<a href="https://github.com/apollographql/apollo-link/blob/master/docs/implementation.md" target="_blank" rel="noreferrer noopener">actual implementation</a>)</figcaption></figure>



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



<p>Now that we’ve put together the first version of the architecture, we’re excited to hear your feedback and hopefully see some of the first links built by the community. We’re going to follow up with some additional features, such as batching.</p>



<p>We’re excited by how many possibilities there are with the Apollo Link architecture: request deduplication, client-side execution, custom directives, simple offline support, pluggable caching, partial operation completion, sending a single request to multiple locations, and easy persisted queries.</p>



<p>Your contributions and suggestions are welcome in the&nbsp;<code>apollo-link</code>&nbsp;<a href="https://github.com/apollographql/apollo-link/" target="_blank" rel="noreferrer noopener">repository</a>.</p>



<p>If you want to keep updated on Apollo Link, make sure to click the “Follow” button below, and follow us on Twitter at&nbsp;<a href="https://twitter.com/apollographql" target="_blank" rel="noreferrer noopener">@apollographql</a>&nbsp;and the author at&nbsp;<a href="https://twitter.com/evanshauser" target="_blank" rel="noreferrer noopener">@evanshauser</a>.</p>



<p>Thank you to&nbsp;<a href="https://medium.com/u/803918030a60?source=post_page-----3b6d5fcf9244----------------------" target="_blank" rel="noreferrer noopener">Sashko Stubailo</a>,&nbsp;<a href="https://medium.com/u/fd3d3dea3cd3?source=post_page-----3b6d5fcf9244----------------------" target="_blank" rel="noreferrer noopener">James Baxley</a>, and&nbsp;<a href="https://medium.com/u/39cbd38c57c8?source=post_page-----3b6d5fcf9244----------------------" target="_blank" rel="noreferrer noopener">Jonas Helfer</a>&nbsp;for their design help and incredible support!</p>


Apollo Link: The modular GraphQL network stack


<p>Late last year,&nbsp;<a href="https://medium.com/u/47b3b199a712?source=post_page-----2481f8bcdd55----------------------" target="_blank" rel="noreferrer noopener">Danielle Man</a>&nbsp;blogged about the&nbsp;<a href="https://dev-blog.apollodata.com/apollo-client-developer-tools-ff89181ebcf" target="_blank" rel="noreferrer noopener">Apollo Client Developer Tools</a>&nbsp;Chrome extension, which helps you debug your Apollo-Client-based GraphQL app. The Dev Tools launched with three main features, and we’re excited to announce the first major addition today!</p>



<ol class="wp-block-list"><li>Built-in Graph<em>i</em>QL query IDE</li><li>Watched queries inspector</li><li><strong>Mutation log (</strong><a href="https://github.com/apollographql/apollo-client-devtools/pull/36" target="_blank" rel="noreferrer noopener"><strong>new</strong></a><strong>!)</strong></li><li>Store inspector</li></ol>



<p>It’s been really exciting to see the reception of this tool in the last few months, and it now has over 8,000 downloads on the Chrome store. In this post, we’ll highlight the purpose of each feature and walk you through how you might use it during app development.</p>



<p><em>If you want to follow along, get started by&nbsp;</em><a href="https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm?hl=en-US" target="_blank" rel="noreferrer noopener"><em>installing the Apollo Client Devtools extension</em></a><em>&nbsp;from the Chrome store.</em></p>



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



<p>The main use case of Graph<em>i</em>QL is to run queries against your server to explore the data available in the API. You can easily see if your client instance is configured correctly and if your sever is returning the data you expect.</p>



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



<p>The best part of having Graph<em>i</em>QL built into the dev tools is that queries are sent from your already configured Apollo Client instance, so you don’t have to manually pass in headers and other data or manually configure a Graph<em>i</em>QL page in your app. This makes it super easy to test different queries in your app and be confident that you’re using the correct setup.<br><br>To demonstrate this feature, let’s test out some queries in Graph<em>i</em>QL in&nbsp;<a href="http://www.githunt.com/" target="_blank" rel="noreferrer noopener">GitHunt</a>, our live Apollo Client example app. Once you’ve navigated to&nbsp;<a href="http://www.githunt.com/" target="_blank" rel="noreferrer noopener">www.githunt.com</a>, open the Apollo Client DevTools by opening the Chrome devtools console and clicking on the Apollo tab at the far right. This should take you right to Graph<em>i</em>QL. Now, we can query the server for the repository, name, and description of each element in the new repositories feed by writing the following query into the left side of the console and clicking the play button.</p>



<pre class="wp-block-preformatted">query {<br>  feed(type:NEW) {<br>    repository {<br>      name<br>      full_name<br>      description<br>    }<br>  }<br>}</pre>



<p>If you have the dev tools installed correctly, it will look like this:</p>



<figure class="wp-block-image alignfull size-large"><img loading="lazy" decoding="async" width="1024" height="704" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_4_QfLuxXM8jH2L_8LbnY-w-1024x704.png" alt="" class="wp-image-1050" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_4_QfLuxXM8jH2L_8LbnY-w-1024x704.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_4_QfLuxXM8jH2L_8LbnY-w-300x206.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_4_QfLuxXM8jH2L_8LbnY-w-768x528.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_4_QfLuxXM8jH2L_8LbnY-w-1536x1056.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_4_QfLuxXM8jH2L_8LbnY-w-2048x1409.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_4_QfLuxXM8jH2L_8LbnY-w-1200x825.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_4_QfLuxXM8jH2L_8LbnY-w-1980x1362.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>The data returned by the query will be displayed on the right side of the console.</figcaption></figure>



<p>The results returned by the query will be displayed on the right side of the console. This lets you easily test out different queries against your server’s schema while developing your frontend.</p>



<p>You can also try out Graph<em>i</em>QL’s auto-complete feature and see more about the schema for the GitHunt example app by typing&nbsp;<code>query { }</code>&nbsp;and then typing “ctrl+space” within the curly braces to see what fields pop up. You can also use the handy “Docs” button in the top right to see complete documentation about the schema.</p>



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



<p>The watched queries inspector allows us to view the watched queries and query variables on a page, as well as any errors thrown by that query. A&nbsp;<em>watched query</em>&nbsp;is a query that is currently being used by a component in the app.</p>



<p>Developers often split up the queries used by one page of an app into multiple files or fragments in the source code, making it cumbersome to view the entire query in one place and test out modifications. The watched queries inspector combines these fragmented queries into one query string in your developer console, saving you many roundtrips between the source code to collect the full query.</p>



<p>Try out the watched queries inspector on GitHunt by clicking on the “queries” button on the left panel of the extension. The left side of the new view will display a list of watched queries on the page. To view the query used to display the home page feed, click on the&nbsp;<code>Feed</code>&nbsp;query, and then open the “Query string” dropdown.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="800" height="550" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_uAO7svCttRwADHUf6aZGuw.gif" alt="" class="wp-image-1049"/></figure>



<p>One of our favorite features is that you can then easily run the query in the GraphiQL console with the “run in GraphiQL” button.</p>



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



<p>This is the newest feature of the dev tools released just a few days ago. Thanks to awesome contributors&nbsp;<a href="https://github.com/ryannealmes" target="_blank" rel="noreferrer noopener">Ryan-Neal Mes</a>&nbsp;and&nbsp;<a href="https://github.com/rrdelaney" target="_blank" rel="noreferrer noopener">Ryan Delaney</a>&nbsp;for contributing and reviewing this major new feature!</p>



<p>With the mutation log, you can see the most recent mutations done through Apollo Client, see the query and variables, and then test them out yourself via GraphiQL:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="669" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_F13vzDLyt0BmqXJp51jMKg-1024x669.png" alt="" class="wp-image-1048" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_F13vzDLyt0BmqXJp51jMKg-1024x669.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_F13vzDLyt0BmqXJp51jMKg-300x196.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_F13vzDLyt0BmqXJp51jMKg-768x502.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_F13vzDLyt0BmqXJp51jMKg-1200x784.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_F13vzDLyt0BmqXJp51jMKg.png 1338w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>This new panel has a ton of potential. For example, in the future it might be able to help you debug your mutation&nbsp;<code>update</code>&nbsp;functions or see how optimistic UI is working. If you have an idea, please&nbsp;<a href="https://github.com/apollographql/apollo-client-devtools" target="_blank" rel="noreferrer noopener">file an issue or open a PR</a>!</p>



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



<p>The store inspector allows you to view all data loaded from active queries and mutations and provides insight into how Apollo Client’s normalized caching works under the hood. Examples of these on the GitHunt site include 1) prefetching comment data into the store on comment mouse-over, and 2) the noticeable difference between temporary and permanent ID creation for comments while they are being saved to the server.<br><br>Let’s take a look. Navigate back to GitHunt, open the dev tools and click on the “Store” tab in the left panel. The left side of the newly-opened tab will display the root query object and a list of all object IDs currently in the store.</p>



<figure class="wp-block-image alignfull size-large"><img loading="lazy" decoding="async" width="1024" height="643" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_PoZ5g-jIoKO-fqI0bl847w-1024x643.png" alt="" class="wp-image-1047" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_PoZ5g-jIoKO-fqI0bl847w-1024x643.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_PoZ5g-jIoKO-fqI0bl847w-300x188.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_PoZ5g-jIoKO-fqI0bl847w-768x482.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_PoZ5g-jIoKO-fqI0bl847w-1536x964.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_PoZ5g-jIoKO-fqI0bl847w-2048x1285.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_PoZ5g-jIoKO-fqI0bl847w-1200x753.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_PoZ5g-jIoKO-fqI0bl847w-1980x1242.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>Clicking on each individual object will show you the data that Apollo Client has loaded for each entry in the feed.</p>



<p>Navigating to another page on the site and fetching new data will put that data in our store. For example, let’s look at&nbsp;<code>Entry63</code>, the object in the store that represents&nbsp;<code>facebook/graphql</code>. If we click on “view comments” on the&nbsp;<code>facebook/graphql</code>&nbsp;repository and submit a comment, we can see that the data from the added comment has been added to the store.</p>



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



<p>All of the data loaded with Apollo Client is actually being stored in Redux, so why not just use the Redux dev tools for this? Well, it’s actually possible to view the underlying Redux state directly, as shown below. That can be useful if you really want to dig into the implementation.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="636" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_ySv8CrMPbTUuWANBBve5dg-1024x636.png" alt="" class="wp-image-1046" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_ySv8CrMPbTUuWANBBve5dg-1024x636.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_ySv8CrMPbTUuWANBBve5dg-300x186.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_ySv8CrMPbTUuWANBBve5dg-768x477.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_ySv8CrMPbTUuWANBBve5dg-1536x955.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_ySv8CrMPbTUuWANBBve5dg-2048x1273.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_ySv8CrMPbTUuWANBBve5dg-1200x746.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_ySv8CrMPbTUuWANBBve5dg-1980x1230.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>However, it can be a bit difficult to decipher the data in that format. The store feature of the Apollo Client dev tools displays the same data in a more GraphQL-specific format, making it easier to read.</p>



<h3 class="wp-block-heading" id="d117"><a href="#inspecting-changes-during-mutations" aria-hidden="true" class="aal_anchor" id="inspecting-changes-during-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>Inspecting changes during mutations</h3>



<p>You can use the store inspector to see how the data in the store changes after mutations, as shown in the below gif. To test this out for yourself, try using the extension while doing&nbsp;<a href="https://dev-blog.apollodata.com/react-graphql-tutorial-mutations-764d7ec23c15" target="_blank" rel="noreferrer noopener">this tutorial</a>&nbsp;on GraphQL mutations, written by&nbsp;<a href="https://medium.com/@helfer" target="_blank" rel="noreferrer noopener">Jonas</a>. Here’s a quick preview:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="800" height="475" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_nFVkckF1dAVcvXB1C01b9w.gif" alt="" class="wp-image-1045"/></figure>



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



<p>We’ve heard from many people that the developer tools are one of the reasons they love using Apollo Client to load data in their app. We agree, and our ultimate goal is to create a GraphQL experience where you can easily understand and inspect what’s going on, every step of the way.</p>



<p>We’re excited to put some focused effort into the Apollo Client Dev Tools this summer, and we’ll keep you updated as we fix current issues and add new features. Next up: Better performance and stability in apps with a very large amount of data, and support for FireFox!</p>



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



<p><em>Ramya studies Computer Science at MIT and is joining us for the summer as an intern at Apollo. Be sure to follow along with her work on&nbsp;</em><a href="https://twitter.com/rrramyan" target="_blank" rel="noreferrer noopener"><em>Twitter</em></a><em>.</em></p>



<p><em>If you’re as excited about advancing GraphQL technology and enabling developers as we are,&nbsp;</em><a href="https://www.meteor.io/jobs/" target="_blank" rel="noreferrer noopener"><em>we’re hiring</em></a><em>!</em></p>


Inspecting your GraphQL client in the browser


<p><em>This is a guest post from Kurtis Kemple, tech lead on the UI team&nbsp;</em><a href="https://twitter.com/MLS" target="_blank" rel="noreferrer noopener"><em>@MLS</em></a><em>.</em></p>



<p>All jokes aside,&nbsp;<code>&lt;a href=&quot;http://dev.apollodata.com/react/&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;react-apollo&lt;/a&gt;</code>&nbsp;is an amazing tool that allows you to solve some really hard data fetching problems with very minimal code. It integrates very easily with existing and greenfield apps&nbsp;<em>and&nbsp;</em>supports Redux integration. If you want to use GraphQL, it’s a tool that I highly recommend investigating.</p>



<p>Over the last few months at&nbsp;<a href="https://labs.mlssoccer.com/" target="_blank" rel="noreferrer noopener">Major League Soccer</a>, we have been working a lot with GraphQL/Apollo and have discovered some really interesting tricks (and things that aren’t exactly “tricks”, but are still pretty awesome) you can use to solve some of the more common data fetching/handling issues in building highly dynamic applications. Here are our top five, along with code examples showing how they work.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>This is not an “intro to react-apollo” example, so if you’re unfamiliar with the project I highly recommend&nbsp;<a href="http://dev.apollodata.com/react/" target="_blank" rel="noreferrer noopener">reading the docs</a>&nbsp;first!</p></blockquote>



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



<p>A problem that most developers face is fetching paginated data. React-apollo makes this a pretty trivial thing with the <code>fetchMore</code> method off of the <code>data</code> prop. This method allows you to repeat the same query with new variables and then alter the original response, adding the new results to the old.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-jsx">import React, { Component } from &#039;react&#039;;
import { graphql } from &#039;react-apollo&#039;;
import { gql } from &#039;graphql-tools&#039;;

const QUERY = gql`
  query MatchesByDate($date: Int) {
    matches(date: $date) {
      id
      minute
      period
      highlights {
        ...
      }
      ...
    }
  }
`;

class MatchList extends Component {      
  render() {
    const ({ data: { loading, errors, matches } }) = this.props;

    return (
      &lt;div className=&quot;matchlist&quot;&gt;
        {loading &amp;&amp; &lt;div className=&quot;loader&quot; /&gt;}
        {errors &amp;&amp; &lt;div className=&quot;errors&quot;&gt;...&lt;/div&gt;}

        {!loading &amp;&amp; !matches &amp;&amp; &lt;span className=&quot;none&quot;&gt;No Matches Found!&lt;/span&gt;}

        {!loading &amp;&amp;
          matches &amp;&amp;
          matches.map(match =&gt; &lt;div className=&quot;match&quot;&gt;...&lt;/div&gt;)}

        {!loading &amp;&amp;
          matches &amp;&amp;
          &lt;button onClick={this.onFetchMore}&gt; 
            Fetch More Matches
          &lt;/button&gt;}
      &lt;/div&gt;
    );
  }
  
  onFetchMore = () =&gt; {
    const ({ data: { matches, fetchMore } }) = this.props;

    fetchMore({
      variables: { date: matches[matches.length - 1].date },
      updateQuery: (previousResult, { fetchMoreResult, queryVariables }) =&gt; {
        return {
          ...previousResult,
          // Add the new matches data to the end of the old matches data.
          matches: [
            ...previousResult.matches,
            ...fetchMoreResult.matches,
          ],
        };
      },
    });
  }
}

export default graphql(QUERY)(MatchList);</code></pre>



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



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



<p>There may be times when you only want to fetch data if some requirements are met — for example, one case might be offering more functionality for desktop users. We can accomplish things like this by using the <code>&lt;a rel=&quot;noreferrer noopener&quot; href=&quot;http://dev.apollodata.com/react/higher-order-components.html#compose&quot; target=&quot;_blank&quot;&gt;compose&lt;/a&gt;</code> higher order component that <code>react-apollo</code> provides in conjunction with the <code>skip</code> config property. The <code>skip</code> property allows you to tell <code>react-apollo</code> to skip queries based on certain parameters (in most cases based on the props passed to the component).</p>



<pre class="wp-block-prismatic-blocks"><code class="language-jsx">import React from &#039;react&#039;;
import { compose, graphql } from &#039;react-apollo&#039;;
import { gql } from &#039;graphql-tools&#039;;

import MatchSummary from &#039;...&#039;;
import MatchHighlights from &#039;...&#039;;

const MATCH_SUMMARY_QUERY = gql`
  query MatchSummary($id: Int) {
    match(id: $id) {
      minute
      period
      home {
        score
      }
      away { 
        score
      }
    }
  }
`;

const MATCH_HIGHLIGHTS_QUERY = gql`
  query MatchHighlights($id: Int) {
    match(id: $id) {
      highlights {
        ...
      }
    }
  }
`;

const Match = ({ media, data: { loading, errors, match } }) =&gt;
  &lt;div className=&quot;matchlist&quot;&gt;
    {loading &amp;&amp; &lt;div className=&quot;loader&quot; /&gt;}
    {errors &amp;&amp; &lt;div className=&quot;errors&quot;&gt;...&lt;/div&gt;}
    {!loading &amp;&amp; &lt;MatchSummary match={match} /&gt;}
     
    {/* if on desktop render highlights */}
    {!loading &amp;&amp; media === &#039;desktop&#039; &amp;&amp; &lt;MatchHighlights match={match} /&gt;}
  &lt;/div&gt;;

export default compose(
  graphql(MATCH_SUMMARY_QUERY),
  graphql(MATCH_HIGHLIGHTS_QUERY, {
    // skip passes props if given a function
    skip: ({ media }) =&gt; media !== &#039;desktop&#039;,
  }),
)(Match);</code></pre>



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



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



<p>Another common problem faced when building client applications is dealing with overly chatty networks. We need to be mindful of how much we talk to services, especially when target audiences may have low connection speeds or limited data plans.</p>



<p>To deal with this problem at MLS, we actually bring in <code>&lt;a rel=&quot;noreferrer noopener&quot; href=&quot;http://dev.apollodata.com/core/&quot; target=&quot;_blank&quot;&gt;apollo-client&lt;/a&gt;</code> directly. I’ve included it in this post because we’re going to create our own network interface to give to <code>react-apollo</code> — one that supports batching requests!</p>



<pre class="wp-block-prismatic-blocks"><code class="language-jsx">import React from &#039;react&#039;;
import { ApolloClient, ApolloProvider } from &#039;react-apollo&#039;;
import { createBatchingNetworkInterface } from &#039;apollo-client&#039;;

import App from &#039;...&#039;;

const client = new ApolloClient({
  networkInterface: createBatchingNetworkInterface({
    uri: &#039;...&#039;, // have to provide uri to interface!
    batchInterval: 100, // time in ms to throttle queries
  }),
});

export default () =&gt;
  &lt;ApolloProvider client={client}&gt;
    &lt;App /&gt;
  &lt;/ApolloProvider&gt;;</code></pre>



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



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



<p>Sometimes you may want to show a fallback to users when you get an empty response from a particular query. At MLS we faced an issue where we wanted to display a match timeline if there were no highlights available. To solve this we either have to 1) fetch the data for both upfront every time (not ideal), or 2) see if we got a result for the highlights, and if not, request the timeline instead.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-jsx">import React from &#039;react&#039;;
import { compose, graphql } from &#039;react-apollo&#039;;
import { gql } from &#039;graphql-tools&#039;;

import MatchSummary from &#039;...&#039;;
import MatchHighlights from &#039;...&#039;;
import MatchTimeline from &#039;...&#039;;

const MATCH_SUMMARY_QUERY = gql`
  query MatchSummary($date: Int) {
    match(date: $date) {
      id
      minute
      period
      home {
        score
      }
      away { 
        score
      }
    }
  }
`;

const MATCH_HIGHLIGHTS_QUERY = gql`
  query MatchHighlights($date: Int) {
    match(date: $date) {
      id
      highlights {
        ...
      }
    }
  }
`;

const MATCH_TIMELINE_QUERY = gql`
  query MatchTimeline($date: Int) {
    match(date: $date) {
      minute
      goals {
        ...
      }
      bookings {
        ...
      }
    }
  }
`;

// timeline component to render if no highlights
const Timeline = ({ data: { loading, errors, match } }) =&gt;
  &lt;div className=&quot;timeline&quot;&gt;
    {loading &amp;&amp; &lt;div className=&quot;loader&quot; /&gt;}
    {errors &amp;&amp; &lt;div className=&quot;errors&quot;&gt;...&lt;/div&gt;}

    {!loading &amp;&amp; &lt;MatchTimeline match={match} /&gt;}
  &lt;/div&gt;;

// connect to graphql, will only be called if this component is rendered
const TimelineWithData = graphql(MATCH_TIMELINE_QUERY)(Timeline);

const Match = ({ data: { loading, errors, match } }) =&gt;
  &lt;div className=&quot;match&quot;&gt;
    {loading &amp;&amp; &lt;div className=&quot;loader&quot; /&gt;}
    {errors &amp;&amp; &lt;div className=&quot;errors&quot;&gt;...&lt;/div&gt;}

    {!loading &amp;&amp; &lt;MatchSummary match={match} /&gt;}

    {/* if we have highlights, render them, never render timeline */}
    {!loading &amp;&amp; match.highlights &amp;&amp; &lt;MatchHiglights match={match} /&gt;}
     
    {
      /*
       * if we don&#039;t have highlights
       * render timeline instead and fetch timeline data
       */
    }
    {!loading &amp;&amp; !match.highlights &amp;&amp; &lt;TimelineWithData /&gt;}
  &lt;/div&gt;;

export default compose(
  graphql(MATCH_SUMMARY_QUERY),
  graphql(MATCH_HIGHLIGHTS_QUERY),
)(Match);</code></pre>



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



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



<p>At MLS we decided to move away from real-time push in favor of polling for a number of reasons, but a big driving factor was moving to GraphQL. Once we saw how easy it was to fine-tune data fetching in <code>react-apollo</code> via the <code>pollInterval</code> option on the config object, we knew we would easily be able to achieve that real-time feel that is necessary for our industry.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-jsx">import React from &#039;react&#039;;
import { graphql } from &#039;react-apollo&#039;;
import { gql } from &#039;graphql-tools&#039;;

import MatchSummary from &#039;...&#039;;

const MATCH_SUMMARY_QUERY = gql`
  query MatchSummary($date: Int) {
    match(date: $date) {
      id
      minute
      period
      home {
        score
      }
      away { 
        score
      }
      highlights {...}
      goals {...}
      bookings {...}
    }
  }
`;

const Match = ({ data: { loading, errors, match } }) =&gt;
  &lt;div className=&quot;match&quot;&gt;
    {loading &amp;&amp; &lt;div className=&quot;loader&quot; /&gt;}
    {errors &amp;&amp; &lt;div className=&quot;errors&quot;&gt;...&lt;/div&gt;}

    {!loading &amp;&amp; &lt;MatchSummary match={match} /&gt;}
  &lt;/div&gt;;

export default graphql(MATCH_SUMMARY_QUERY, {
  // options passes props if given a function
  options: props =&gt; ({ pollInterval: props.pollInterval }),
})(Match);</code></pre>



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



<p>If you’re curious about how we are implementing GraphQL on the backend, check out my other&nbsp;<a href="https://labs.mlssoccer.com/implementing-graphql-at-major-league-soccer-ff0a002b20ca" target="_blank" rel="noreferrer noopener">post</a>&nbsp;on the MLS engineering blog. If you want to know more about the benefits we saw from moving to GraphQL, take a look at my co-worker&nbsp;<a href="https://medium.com/u/c827782c6410?source=post_page-----6fab7a7bf22f----------------------" target="_blank" rel="noreferrer noopener">Peggy Rayzis</a>’s&nbsp;<a href="https://dev-blog.apollodata.com/reducing-our-redux-code-with-react-apollo-5091b9de9c2a" target="_blank" rel="noreferrer noopener">post</a>&nbsp;on the subject!</p>



<p>If you have any questions about our experience, please feel free to leave a comment or reach out to me on the&nbsp;<a href="https://twitter.com/kurtiskemple" target="_blank" rel="noreferrer noopener">Twitter</a>!</p>


5 things they don’t want you to know about React-Apollo

A stronger (typed) React Apollo


<p>React Native enables you to use the same programming language and mental model you use to write web applications to create great native mobile experiences. Similarly, GraphQL and&nbsp;<a href="http://dev.apollodata.com/" target="_blank" rel="noreferrer noopener">Apollo Client</a>&nbsp;are designed to make data loading and management simple and consistent, regardless of your client platform or backend data store.</p>



<p>In this post I’ll show you how these two technologies can work together seamlessly in React Native’s new FlatList component. As you follow along with the post, try the live demo and even run it on your mobile device with Expo Snack:&nbsp;<a href="https://snack.expo.io/HJc-0uygW" target="_blank" rel="noreferrer noopener">https://snack.expo.io/HJc-0uygW</a></p>



<figure class="wp-block-image size-large"><a href="https://snack.expo.io/HJc-0uygW"><img loading="lazy" decoding="async" width="1024" height="720" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_dot66NVkAguqiuTo9O48uw-1024x720.png" alt="" class="wp-image-1121" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_dot66NVkAguqiuTo9O48uw-1024x720.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_dot66NVkAguqiuTo9O48uw-300x211.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_dot66NVkAguqiuTo9O48uw-768x540.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_dot66NVkAguqiuTo9O48uw-1200x844.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_dot66NVkAguqiuTo9O48uw.png 1400w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></a></figure>



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



<p>One of the most common UI features in a mobile app is the scrollable list. Since most apps need to display long lists of data and mobile devices don’t have much screen space, it’s important to get the right user experience. Less than two months ago, around React Conf 2017, the React Native team announced a new set of components specifically made for building these views with React:&nbsp;<a href="https://facebook.github.io/react-native/blog/2017/03/13/better-list-views.html" target="_blank" rel="noreferrer noopener">FlatList and friends.</a></p>



<p>In this article, we’ll look at the convenient APIs FlatList provides, and how they pair nicely with the features provided by GraphQL and Apollo Client.&nbsp;With these tools, you can build great user experiences without introducing complicated, hard-to-maintain UI or data management code.</p>



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



<p>It has all of the features you need to build a great native list view, with all of the bells and whistles users expect: Infinite scroll pagination, pull to refresh, and smooth rendering performance. Here’s a minimal example from the&nbsp;<a href="https://facebook.github.io/react-native/docs/flatlist.html" target="_blank" rel="noreferrer noopener">React Native documentation</a>:</p>



<pre class="wp-block-preformatted">&lt;FlatList<br>  data={[{key: 'a'}, {key: 'b'}]}<br>  renderItem={({item}) =&gt; &lt;Text&gt;{item.key}&lt;/Text&gt;}<br>/&gt;</pre>



<p>Getting a basic list displayed is simple, but how do you take advantage of all of these nice features I just mentioned? Well, it can be helpful to have a data loading library that makes loading state, refetching, and pagination easy.</p>



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



<p>Today, we’re going to focus on the props needed to set up the above features in&nbsp;<code>FlatList</code>, and see how simple it is to wire up Apollo Client to interact with them.</p>



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



<p>To start, we need a GraphQL API from which we can load data. Since we’re focusing on the client we’ll just use the&nbsp;<a href="http://api.githunt.com/graphiql?query=%7B%0A%20%20feed%20(type%3A%20TOP%2C%20limit%3A%2020%2C%20offset%3A%200)%20%7B%0A%20%20%20%20repository%20%7B%0A%20%20%20%20%20%20owner%20%7B%20login%20%7D%0A%20%20%20%20%20%20name%0A%20%20%20%20%7D%0A%0A%20%20%20%20postedBy%20%7B%20login%20%7D%0A%20%20%7D%0A%7D%0A" target="_blank" rel="noreferrer noopener">API from our GitHunt example app</a>, but it’s not too hard to&nbsp;<a href="https://dev-blog.apollodata.com/react-graphql-tutorial-part-2-server-99d0528c7928" target="_blank" rel="noreferrer noopener">set up a server yourself</a>.</p>



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



<p>Before we can test out fancy features, we’ll need to load some initial data. With GraphQL and the&nbsp;<code>react-apollo</code>&nbsp;higher-order component, wiring up a query to our React component is just one function call:</p>



<pre class="wp-block-preformatted">const FeedWithData = graphql(<br>  gql`<br>    query Feed($pageSize: Int!, $offset: Int!) {<br>      feed (type: TOP, limit: $pageSize, offset: $offset) {<br>        repository {<br>          name<br>          owner { login }<br>          stargazers_count<br>        }<br>    <br>        postedBy { login }<br>      }<br>    }<br>  `,<br>  {<br>    options: {<br>      notifyOnNetworkStatusChange: true,<br>      variables: { offset: 0, pageSize: PAGE_SIZE },<br>    },<br>  }<br>)(Feed);</pre>



<p>This code looks simple because people like&nbsp;<a href="https://medium.com/u/fd3d3dea3cd3?source=post_page-----9646fa9a199b----------------------" target="_blank" rel="noreferrer noopener">James Baxley</a>&nbsp;in the Apollo community have worked hard to make the library easy to use, but it’s actually doing a lot under the hood:</p>



<ol class="wp-block-list"><li>Checking the cache of existing data to avoid extra data loading</li><li>Keeping track of fine-grained loading status for the query</li><li>Reading data out of the cache, delivering it to the&nbsp;<code>Feed</code>&nbsp;component, and watching for further cache updates</li></ol>



<p>In this code, we configure the query with two variables — a page size we’ll use as the&nbsp;<code>limit</code>&nbsp;argument, and the current&nbsp;<code>offset</code>&nbsp;we’re looking at. To achieve pagination, we’ll later pass new values for these variables.</p>



<p>In addition to doing a lot of helpful bookkeeping, Apollo also adds a lot of useful information and methods to the prop it passes down. Let’s see how we can connect those to&nbsp;<code>FlatList</code>&nbsp;to get the features we need.</p>



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



<p>Pull to refresh is the feature that enables you to pull down on the top of a list view to get fresh data.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="800" height="547" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_6d-B9eEjMaEc9pU-eednug.gif" alt="" class="wp-image-1120"/><figcaption>Try it yourself:&nbsp;<a href="https://snack.expo.io/HJc-0uygW" target="_blank" rel="noreferrer noopener">https://snack.expo.io/HJc-0uygW</a></figcaption></figure>



<p>To get this, you need to pass in two props to&nbsp;<code>FlatList</code>:</p>



<ol class="wp-block-list"><li><code>refreshing</code>&nbsp;— A boolean that indicates whether or not a pull to refresh is currently in progress. We can easily get this from&nbsp;<a href="http://dev.apollodata.com/react/api-queries.html#graphql-query-data-networkStatus" target="_blank" rel="noreferrer noopener">Apollo’s&nbsp;</a><code>&lt;a href=&quot;http://dev.apollodata.com/react/api-queries.html#graphql-query-data-networkStatus&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;networkStatus&lt;/a&gt;</code><a href="http://dev.apollodata.com/react/api-queries.html#graphql-query-data-networkStatus" target="_blank" rel="noreferrer noopener">&nbsp;prop</a>, which provides a value of&nbsp;<code>4</code>&nbsp;when a query is currently refetching.</li><li><code>onRefresh</code>&nbsp;— A callback for when pull to refresh is activated by a user swiping down. This can be wired directly to&nbsp;<a href="http://dev.apollodata.com/react/api-queries.html#graphql-query-data-refetch" target="_blank" rel="noreferrer noopener">Apollo’s refetch method</a>, which will also set the network status for the&nbsp;<code>refreshing</code>&nbsp;prop above.</li></ol>



<p>So, all together, it’s only<em>&nbsp;two lines of code</em>&nbsp;to connect Apollo and the React Native FlatList to add pull to refresh:</p>



<pre class="wp-block-preformatted">refreshing={data.networkStatus === 4}<br>onRefresh={() =&gt; data.refetch()}</pre>



<p>And with that, we get fully native pull to refresh behavior!</p>



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



<p>For application performance, it’s important to not load or display data the user isn’t looking at yet. A common technique for this is&nbsp;<em>infinite scroll pagination</em>&nbsp;— giving the impression of an unending list by loading new items just in time when we are about to run out of content to display:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="800" height="548" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_iH7rz7vabHW7opH1noDfCQ.gif" alt="" class="wp-image-1119"/><figcaption>Try it yourself:&nbsp;<a href="https://snack.expo.io/HJc-0uygW" target="_blank" rel="noreferrer noopener">https://snack.expo.io/HJc-0uygW</a></figcaption></figure>



<p>Adding this is almost as simple as pull to refresh above. We just need to provide one prop to&nbsp;<code>FlatList</code>, the&nbsp;<code>onEndReached</code>&nbsp;callback. Here’s the code:</p>



<pre class="wp-block-preformatted">onEndReached={() =&gt; {<br>  data.fetchMore({<br>    variables: { offset: data.feed.length + 1 },<br>    updateQuery: (previousResult, { fetchMoreResult }) =&gt; {<br>      // Don't do anything if there weren't any new items<br>      if (!fetchMoreResult || fetchMoreResult.feed.length === 0) {<br>        return previousResult;<br>      }      return {<br>        // Append the new feed results to the old one<br>        feed: previousResult.feed.concat(fetchMoreResult.feed),<br>      };<br>    },<br>  });<br>}}</pre>



<p>The callback from&nbsp;<code>FlatList</code>&nbsp;wires up nicely to the&nbsp;<code>fetchMore</code>&nbsp;method from the Apollo Client data object. It reuses the same query we saw above, but passes in a new&nbsp;<code>offset</code>&nbsp;variable to fetch a page of data after the items we have already seen. Then, we use a simple concat to add the items to the end, and they show up in the UI seamlessly!</p>



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



<p>In the Apollo community, we’re passionate about doing for data loading what React Native is doing for native UI development. We want to enable product developers to spend less time managing data and more time building a great application. Because Apollo Client includes critical boilerplate-reducing features such as network status tracking, refetching, pagination, caching, and more, building a fully-functional list view in React native on top of your GraphQL API is just a few lines of code, and that leaves you with a lot less code to worry about and maintain.</p>



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



<p><em>If you’re excited about developer ergonomics and you want to help build a next-generation data loading experience, please join the Apollo community and contribute, or&nbsp;</em><a href="https://www.meteor.io/jobs/#5e11e6cf-5303-4c12-a3e7-11e5f8da4be1" target="_blank" rel="noreferrer noopener"><em>apply for a full-time job</em></a><em>&nbsp;as an open source engineer!</em></p>


Building a great scrollable list in React Native with FlatList


<p>This is part 4 of our Full-stack React + GraphQL tutorial series. Each part is self-contained and introduces one new, key concept, so you can either do each part separately or follow the entire series — it’s up to you!</p>



<p>Here are the sections we’ve covered so far:</p>



<ul class="wp-block-list"><li><a href="https://dev-blog.apollodata.com/full-stack-react-graphql-tutorial-582ac8d24e3b" target="_blank" rel="noreferrer noopener">Part 1: The Frontend</a></li><li><a href="https://dev-blog.apollodata.com/react-graphql-tutorial-part-2-server-99d0528c7928" target="_blank" rel="noreferrer noopener">Part 2: The Server</a></li><li><a href="https://dev-blog.apollodata.com/react-graphql-tutorial-mutations-764d7ec23c15" target="_blank" rel="noreferrer noopener">Part 3: Basic GraphQL Mutations</a></li><li>Part 4: Optimistic UI (you’re here)</li><li><a href="https://medium.com/p/tutorial-graphql-input-types-and-client-caching-f11fa0421cfd" target="_blank" rel="noreferrer noopener">Part 5: Input Types and Custom Resolvers</a></li><li><a href="https://dev-blog.apollodata.com/tutorial-graphql-subscriptions-server-side-e51c32dc2951" target="_blank" rel="noreferrer noopener">Part 6: Subscriptions on the server</a></li><li><a href="https://dev-blog.apollodata.com/tutorial-graphql-subscriptions-client-side-40e185e4be76" target="_blank" rel="noreferrer noopener">Part 7: GraphQL Subscriptions on the Client</a></li><li><a href="https://dev-blog.apollodata.com/tutorial-pagination-d1c3b3ee2823" target="_blank" rel="noreferrer noopener">Part 8: Pagination</a></li></ul>



<p>In this part, we’re going to dive a little bit deeper into how GraphQL mutations are handled on the client. We’ll take the list view and mutation from&nbsp;<a href="https://dev-blog.apollodata.com/react-graphql-tutorial-mutations-764d7ec23c15" target="_blank" rel="noreferrer noopener">part 3</a>, simulate a network latency of 500 milliseconds, and then use store updates and Optimistic UI to make the latency all but disappear from the perspective of the user.</p>



<p>By the end of this tutorial, you’ll know how to use store updates and Optimistic UI to deal with network latency.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Hint: If something doesn’t work quite as expected, you can always check out the “solution” by running&nbsp;<code>&lt;em&gt;git checkout t4-end&lt;/em&gt;</code></p></blockquote>



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



<p>To get started, let’s clone the tutorial git repo and install the dependencies:</p>



<pre class="wp-block-preformatted">git clone <a href="https://github.com/apollographql/graphql-tutorial.git" target="_blank" rel="noreferrer noopener">https://github.com/apollographql/graphql-tutorial.git</a><br>cd graphql-tutorial<br>git checkout t4-start<br>cd server &amp;&amp; npm install &amp;&amp; cd ../client &amp;&amp; npm install &amp;&amp; cd ..</pre>



<p>To make sure it all worked as intended, let’s start the server and the client each in a separate terminal:</p>



<pre class="wp-block-preformatted">cd server<br>npm start</pre>



<p>In another terminal:</p>



<pre class="wp-block-preformatted">cd client<br>npm start</pre>



<p>If it worked, you should now see the ChannelsView from the end of part 3 in your browser:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="516" height="326" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_qAO-W1EVUaahaxDaoZ5dew.gif" alt="" class="wp-image-1126"/><figcaption>Adding a new channel — no latency</figcaption></figure>



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



<p>As you can see in the image above, any new channels you add show up in the list instantly. That’s great, because reactivity helps with great UX.</p>



<p>However, if you followed along in part 3, you might remember that this update actually does&nbsp;<strong>two roundtrips&nbsp;</strong>right now! One for the mutation request, and a second one to refetch the list after the mutation completed. The second roundtrip is currently necessary because there’s no way for the client to know that the new item you just added should be in the list. GraphQL simply doesn’t have any way of encoding that information because it treats the backend as a black box: query in → data out. Before we fix that, let’s see why it’s a problem.</p>



<p>In order to see what the UX would be like if the network was slower, we’re going to simulate a network latency of 500ms in Apollo’s network interface by adding a middleware.</p>



<p>To do so, add the following lines to&nbsp;<code>client/src/App.js</code>&nbsp;right after declaring the&nbsp;<code>networkInterface</code>&nbsp;constant.</p>



<pre class="wp-block-preformatted">// const networkInterface = ...<br>networkInterface.use([{<br>  applyMiddleware(req, next) {<br>    setTimeout(next, 500);<br>  },<br>}]);</pre>



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



<p>Now that we’ve added 500 ms of latency to every request, adding a new channel feels a bit different:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="434" height="326" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_GjaTShD0QgO8wPL2aQRF-A.gif" alt="" class="wp-image-1125"/><figcaption>Adding a new channel — 500 ms latency</figcaption></figure>



<p>The delay you see from the time the word “tennis” fades to the time it disappears is the time it takes for the mutation to complete its server roundtrip. The delay from the time the word “tennis” disappears in the input box until the time it appears is the latency of the list refetch query.</p>



<p>Even though refetching made it really easy and quick for us to build this feature in the first place, we need a better solution in a production app with users that experience latency. Right now, the experience for those users is not great: First, they wait and nothing happens; then, they see their input disappear completely, before it finally appears where they expected it.</p>



<p>Given that especially on mobile networks a few hundred milliseconds of latency is not uncommon, we need a way to deal with it. The first thing we can do is avoid the second roundtrip to refetch the list.</p>



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



<p>Lucky for us, the mutation already returns all the information we need to incorporate the new item into the list. We just have to tell Apollo Client how to do it for us!</p>



<p>For mutations and other cases where you need to update the store based on an action on the client, Apollo provides a set of powerful tools to perform imperative store updates:&nbsp;<code>readQuery</code>,<code>writeQuery</code>,&nbsp;<code>readFragment</code>&nbsp;and&nbsp;<code>writeFragment</code>. You can read all about them&nbsp;<a href="http://dev.apollodata.com/core/read-and-write.html" target="_blank" rel="noreferrer noopener">here</a>.</p>



<p>Because updating the store after a mutation is such a common use-case, Apollo Client makes it really easy to use these functions via the&nbsp;<code>update</code>&nbsp;property exposed in&nbsp;<code>mutate</code>.</p>



<p>To use it, let’s replace the&nbsp;<code>refetchQueries</code>&nbsp;option in&nbsp;<code>AddChannel.js</code>&nbsp;with the following call to&nbsp;<code>update</code>:</p>



<pre class="wp-block-preformatted">const handleKeyUp = (evt) =&gt; {<br>    if (evt.keyCode === 13) {<br>      evt.persist();<br>      mutate({ <br>        variables: { name: evt.target.value },<br>        <strong>update</strong>: (store, { data: { addChannel } }) =&gt; {<br>            // Read the data from the cache for this query.<br>            const data = store.readQuery({query: channelsListQuery });<br>            // Add our channel from the mutation to the end.<br>            data.channels.push(addChannel);<br>            // Write the data back to the cache.<br>            store.writeQuery({ query: channelsListQuery, data });<br>          },<br>      })<br>      .then( res =&gt; {<br>        evt.target.value = '';  <br>      });<br>    }<br>  };</pre>



<p>Now as soon as the mutation completes, we read the current result for the&nbsp;<code>channelsListQuery</code>&nbsp;out of the store, append the new channel to it, and tell Apollo Client to write it back to the store. That’s all we have to do! Our&nbsp;<code>ChannelsListWithData</code>&nbsp;component automatically will automatically get updated with the new data.</p>



<p>If you run another mutation, you’ll notice that there is no longer any delay between the time the input disappears and re-appears at the end of the list. It’s practically instantaneous, which is great!</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="434" height="326" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_G8RNiFHyjUiWTMgYICcB2w.gif" alt="" class="wp-image-1124"/><figcaption>Adding a channel with “update”— 500 ms latency</figcaption></figure>



<p>The latency of the initial mutation is still there, but fortunately there’s a way to deal with that, too!</p>



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



<p>Apollo Client can simulate zero-latency server responses with a trick that’s generally called Optimistic UI. Optimistic UI is pretty tricky to set up manually, but thanks to the fact that Apollo manages both the store and the network requests for you, using Optimistic UI is really easy.</p>



<p>All you have to do to simulate a zero-latency server response is add the&nbsp;<code>optimisticResponse</code>&nbsp;property to your&nbsp;<code>mutate</code>&nbsp;call.&nbsp;<code>optimisticResponse</code>&nbsp;should be the response that you expect from the server. We already know the channel name that we expect. The ID isn’t that important yet, so we just take a random value to make sure there are no collisions. Finally, we also have to specify the&nbsp;<code>__typename</code>&nbsp;to make sure Apollo Client knows what kind of object it is:</p>



<pre class="wp-block-preformatted">mutate({ <br>  variables: { name: evt.target.value },<br>  <strong>optimisticResponse</strong>: {<br>     addChannel: {<br>       name: evt.target.value,<br>       id: Math.round(Math.random() * -1000000),<br>       __typename: 'Channel',<br>     },<br>   },<br>   update: ...<br>})</pre>



<p>If add the optimisticResponse to your code, you’ll notice that there’s no more delay between the time you hit return and the time the item shows up at the bottom of the list.</p>



<p>In fact, the optimisticResponse is so fast that the item will appear in the list even before it’s removed from the input field. This is because we have a snippet of code that clears the input field when the mutation successfully returned. Now that we have optimistic UI, that’s not really appropriate anymore. Instead, let’s give the user some visual feedback about which list items have already been confirmed by the server, and which ones haven’t.</p>



<p>To let the user know when a channel has not yet been confirmed by the server, we’ll need to somehow add that information to the item. Instead of modifying the server schema to keep track of some client state, we’re going to use a little hack here to keep track of which items are optimistic.</p>



<p>We know that all server-generated ids are positive integers, but the optimistically “generated” ids are all negative — how lucky! 😉</p>



<pre class="wp-block-preformatted">id: Math.round(Math.random() * -1000000),</pre>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Note: There are cleaner ways to keep track of optimistic items in your UI, but they require a bit more setup, so we’ll leave that for a future tutorial.</p></blockquote>



<p>To make the optimistic channels visually distinct, we give them an extra CSS class in&nbsp;<code>ChannelsListWithData.js</code>:</p>



<pre class="wp-block-preformatted">return (<br>    &lt;div className="channelsList"&gt;<br>      &lt;AddChannel /&gt;<br>      { channels.map( ch =&gt; <br>        (&lt;div key={ch.id} <strong>className={'channel ' + (ch.id &lt; 0 ? 'optimistic' : '')}</strong>&gt;{ch.name}&lt;/div&gt;)<br>      )}<br>    &lt;/div&gt;<br>  );</pre>



<p>Finally, we just have to define what that class looks like in&nbsp;<code>App.css</code>. For our purposes, we just make the text a bit more greyed out:</p>



<pre class="wp-block-preformatted">div.optimistic {<br>  color: rgba(255, 255, 255, 0.5);<br>}</pre>



<p>And that’s it! With these changes, the addChannel mutation should now look much better!</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="434" height="326" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_fPHhXYMZOtpZzC9DY2KCsg.gif" alt="" class="wp-image-1123"/><figcaption>Adding a channel with “update” and “optimisticResponse” — 500 ms latency</figcaption></figure>



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



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



<p>And with that, you’ve reached the end of part 4 in this tutorial series! You’ve learned how to use store updates and optimistic UI to hide network latency from your users. Together with Parts 1, 2 and 3 of this tutorial series, you’re now familiar with all the basics of writing a simple React + GraphQL app with great UX using Apollo.</p>



<p>In the&nbsp;<a href="https://medium.com/p/tutorial-graphql-input-types-and-client-caching-f11fa0421cfd" target="_blank" rel="noreferrer noopener">next part</a>&nbsp;of this series we’ll add a second view to the app and learn how to use cached data and prefetching to show previews and load pages faster. Make sure to subscribe if you don’t want to miss future parts!</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>If you liked this tutorial and want to keep learning about Apollo and GraphQL, make sure to click the “Follow” button below, and follow us on Twitter at <a rel="noreferrer noopener" href="https://twitter.com/apollographql" target="_blank">@apollographql</a> and <a rel="noreferrer noopener" href="https://twitter.com/helferjs" target="_blank">@helferjs</a>.</p></blockquote>


Tutorial: Speeding up GraphQL Mutations with optimistic UI


<p>Earlier this month we launched&nbsp;<a href="https://dev-blog.apollodata.com/apollo-client-1-0-a-flexible-community-focused-javascript-graphql-client-2253b90e6c84" target="_blank" rel="noreferrer noopener">Apollo Client 1.0</a>, and it was super exciting: There were some great comments on the&nbsp;<a href="https://news.ycombinator.com/item?id=13998010" target="_blank" rel="noreferrer noopener">Hacker News thread</a>, a ton of new downloads, and many new developers joined the Apollo community.</p>



<p>Our core idea — that&nbsp;<strong>managing data in your frontend should be simple&nbsp;</strong>— has really resonated with people. That’s what Apollo is all about. We’re working hard with the GraphQL community to make data loading and management straightforward, so you can focus on building a great app.</p>



<p>While Apollo Client for JavaScript is the most well-known of the&nbsp;<a href="https://github.com/apollographql" target="_blank" rel="noreferrer noopener">Apollo projects</a>, we also have two excellent, rapidly-growing native clients for&nbsp;<a href="https://github.com/apollographql/apollo-ios" target="_blank" rel="noreferrer noopener">iOS</a>&nbsp;and&nbsp;<a href="https://github.com/apollographql/apollo-android" target="_blank" rel="noreferrer noopener">Android</a>. Just last week, we announced&nbsp;<a href="https://medium.com/p/launching-apollo-graphql-on-android-40ee0b5789bd" target="_blank" rel="noreferrer noopener">Apollo Android 0.3</a>, the first release ready for public use!</p>



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



<p>Today, we want to tell you about one of the most exciting initiatives we’re working on in the coming months, and how we’re collaborating with teams at companies like Airbnb, New York Times, Shopify, and Coursera to make it happen:&nbsp;<strong>Unifying Apollo Client across all JavaScript and native platforms.</strong></p>



<p>Read on to hear about why we think a cross-platform client is important, the use case for teams like Airbnb, and how you can get involved.</p>



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



<p>Two big trends are currently happening in web application development:</p>



<ol class="wp-block-list"><li>Mobile is now the dominant platform. In fact, phone and tablet usage surpassed desktop computer usage in 2016.</li><li>React Native is becoming an increasingly popular choice among mobile developers due to its simplicity, cross-platform compatibility, and code push capabilities.</li></ol>



<p>This means more and more companies are now building apps for at least three platforms: Web, iOS, and Android. Even though the different platforms conceptually represent just one application, they usually end up with three separate codebases. Having multiple implementations of the same thing always leads to inconsistencies. That’s frustrating for users, and it’s a waste of time and source of bugs for developers.</p>



<p>React Native helps with the frontend part of that question, since it lets you share knowledge, code, and perhaps even entire UI components across platforms. But most mobile apps today are still built with native technologies, and sharing UI code only solves half of the problem. The other half is data loading and management.</p>



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



<p>The Apollo community wouldn’t exist without GraphQL. We owe a great deal of gratitude to its creators at Facebook, and people in the decades before who worked on technologies that inspired it. Here are three things that make GraphQL a game changer:</p>



<ol class="wp-block-list"><li>GraphQL&nbsp;<strong>gives frontend teams the</strong>&nbsp;<strong>power&nbsp;</strong>to develop new products without waiting for backend changes.</li><li>GraphQL&nbsp;<strong>enables great performance and caching on mobile</strong>&nbsp;with very little effort thanks to its simple query language and type system.</li><li>The emerging ecosystem and tooling around GraphQL&nbsp;<strong>makes developers vastly more productive</strong>.</li></ol>



<p>Looking at these advantages, GraphQL is a no-brainer for most teams starting new projects, and more and more teams are incrementally adding it to their existing infrastructure. Because every team is different and there is no one-size-fits-all solution, we work hard to make Apollo technologies easy to start with while being as flexible and modular as possible. Compatibility and flexibility have been in our&nbsp;<a href="https://github.com/apollographql/apollo-client/blob/master/DESIGN.md" target="_blank" rel="noreferrer noopener">design principles</a>&nbsp;from day one.</p>



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



<p>One of the best parts of GraphQL is that it can be added incrementally on top of any API or backend data source. Companies that are already at the scale and complexity where you really start to feel the pain of REST or an ad-hoc API can add GraphQL a little bit at a time.</p>



<p>React Native can be the same way — most companies are currently writing one codebase each for web, iOS, and Android, but you can incrementally move your mobile apps over to React to start duplicating less and less logic. That’s exactly what Airbnb are doing with their mobile apps, but as they have started sharing more of their business logic and components, they’ve found that it still makes sense to implement some infrastructure in native code. Leland Richardson from Airbnb explained this concept in his talk earlier this year at React Conf,&nbsp;<a href="https://www.youtube.com/watch?v=tWitQoPgs8w" target="_blank" rel="noreferrer noopener">“React Native in the Brown Field”</a>.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="539" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_Vwt3VLOhc-T6jpw3m12xKw-1024x539.png" alt="" class="wp-image-1131" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_Vwt3VLOhc-T6jpw3m12xKw-1024x539.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Vwt3VLOhc-T6jpw3m12xKw-300x158.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Vwt3VLOhc-T6jpw3m12xKw-768x404.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Vwt3VLOhc-T6jpw3m12xKw-1200x632.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Vwt3VLOhc-T6jpw3m12xKw.png 1400w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>A diagram of native vs. JavaScript code in React Native from Leland’s talk.</figcaption></figure>



<p>Leland also announced one of Airbnb’s newest open source efforts,&nbsp;<a href="https://github.com/airbnb/native-navigation" target="_blank" rel="noreferrer noopener">Native Navigation</a>&nbsp;— a navigation package for React Native that allows both JS and native code to interact with navigation, enabling applications where views are mixed between React and native code to still have smooth transitions between these views.</p>



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



<p>Airbnb has a desktop web application that uses React and mobile apps for iOS and Android. Parts of these apps are starting to migrate to React Native, which lets them develop much faster and share more code between platforms. That means that in their apps, React Native and native code live side by side and need to integrate seamlessly. This integration needs to extend to data loading and caching as well: If a React Native view loads data into the GraphQL cache, they need that data to be available in native views and vice versa.</p>



<p>Imagine, for example, a native view that displays apartment listings in a city, along with a picture, the price, and some preview text. When you click on a listing, it takes you to a detail view written in React Native. The app already loaded enough data to show you a nice preview (picture, price, title) while fetching the complete listing, but it can only do that if the React Native view has access to the data loaded in the native view.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="574" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_CPhRdLNQwomuVOghD8tpuA-1024x574.png" alt="" class="wp-image-1130" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_CPhRdLNQwomuVOghD8tpuA-1024x574.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_CPhRdLNQwomuVOghD8tpuA-300x168.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_CPhRdLNQwomuVOghD8tpuA-768x431.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_CPhRdLNQwomuVOghD8tpuA-1200x673.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_CPhRdLNQwomuVOghD8tpuA.png 1400w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Airbnb’s GraphQL client requirements (slide from&nbsp;<a href="https://www.youtube.com/watch?v=4cDEfB1xcLc" target="_blank" rel="noreferrer noopener">Ben Schwab’s presentation on Apollo Android</a>)</figcaption></figure>



<p>The best way to make this possible is to share the same GraphQL data store between all platforms. If, in addition to sharing the same store, those platforms also provide the same semantics for data fetching and cache policy, it becomes much easier to migrate views between platforms as necessary. You can use native UI code in one component, and React Native in another, wherever it makes sense.</p>



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



<p>With the help of developers from Airbnb, Shopify, The New York Times, and the whole Apollo community, we’re currently improving all three Apollo client designs and implementations to satisfy these requirements. The core of the architecture we’re building towards is a clean GraphQL store API that lets us share a pluggable cache between the three platforms.</p>



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



<p>The heart of the uniform client architecture will be a shared global cache. It stores all normalized data and has a standardized API for reading and writing data. The store is composed of two levels: The higher level, which we currently call the Apollo Store, provides thread-safety and methods for manipulating the data using GraphQL primitives, while the lower level, the Normalized Cache, is a pluggable key-value store used for persisting individual records. This architecture will be identical across all platforms:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="636" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_W7ColK8Ru_TG1Rs5cnlmJQ-1024x636.png" alt="" class="wp-image-1129" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_W7ColK8Ru_TG1Rs5cnlmJQ-1024x636.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_W7ColK8Ru_TG1Rs5cnlmJQ-300x186.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_W7ColK8Ru_TG1Rs5cnlmJQ-768x477.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_W7ColK8Ru_TG1Rs5cnlmJQ.png 1140w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Apollo Client’s new store architecture</figcaption></figure>



<p>Having a clear contract between the store, the normalized cache, and the rest of the client implementation makes it easy to plug in any store: SQLite, IndexedDB, Realm, Mobx, Redux, NgRX, a plain in-memory dictionary, or anything else that suits your needs.</p>



<p>This design will make it easy to share the cache between native and React Native. In a typical mobile app with React Native, we expect the native client will handle the persistent store, and the JavaScript client will communicate with the native store over the React Native bridge to read and write data. We believe this will result in a lot of positive aspects even for apps built fully in React Native, including easy offline data management, smoother UI from offloading work away from JS, and prefetching data from native code before React Native has even finished initializing.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="571" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_uI3cTRd98ppW60TUBnsmFQ-1024x571.png" alt="" class="wp-image-1128" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_uI3cTRd98ppW60TUBnsmFQ-1024x571.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_uI3cTRd98ppW60TUBnsmFQ-300x167.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_uI3cTRd98ppW60TUBnsmFQ-768x428.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_uI3cTRd98ppW60TUBnsmFQ.png 1198w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Sharing GraphQL data between JavaScript and native code</figcaption></figure>



<p>This new decoupled cache API is at the core of the new client architecture, but it is just one part of our uniform data loading plan. We are also working on making sure that fetch policies and cache invalidation/eviction strategies are consistent across platforms. We need this symmetry to make sure that views or data management logic can be moved across the platform boundary without leading to unpredictable errors. But on a more basic level, we’ve found that people contributing to the different client implementations learn a ton about the GraphQL client design space by sharing designs informed by the advantages and limitations of three very different platforms.</p>



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



<p>I’m extremely excited about the future of Apollo and GraphQL. I think the new modular architecture and pluggable GraphQL store API we are working on will offer more flexibility without making Apollo Client any harder to use. You’ll still be able to get started with&nbsp;<a href="http://dev.apollodata.com/react/simple-example.html" target="_blank" rel="noreferrer noopener">just a few lines of code</a>, and then pull in packages from the ecosystem to expand Apollo Client with better interactivity, offline data, and more.</p>



<p>If you’re excited about Apollo and GraphQL as well, let us know in the comments, and&nbsp;<a href="http://www.apollodata.com/#slack" target="_blank" rel="noreferrer noopener">join our active community on Slack</a>! In addition to all of the Apollo contributors, there are tons of developers on there excited to talk about GraphQL and help new developers get started.</p>



<p>Have an idea for how to improve Apollo? Found a bug or have some spare time to give back to the community? Then join our #contributors channel on&nbsp;<a href="http://www.apollodata.com/#slack" target="_blank" rel="noreferrer noopener">Slack</a>, file an issue or make a PR directly on GitHub (<a href="https://github.com/apollographql/apollo-client" target="_blank" rel="noreferrer noopener">JS</a>,&nbsp;<a href="https://github.com/apollographql/apollo-ios" target="_blank" rel="noreferrer noopener">iOS</a>,&nbsp;<a href="https://github.com/apollographql/apollo-android" target="_blank" rel="noreferrer noopener">Android</a>)!</p>


One GraphQL client for JavaScript, iOS, and Android

Exploring GraphQL Relay – Modern vs. Classic


<p>The entirety of my Android career has been spent hitting RESTful APIs. No matter the app, the general setup was the same: Using get/post/delete with a predefined set of endpoints in a RESTful api. Recently, The New York Times started looking at other ways to transfer data between our servers and clients. One of our current problems is that we have a team dedicated to creating templates and endpoints for all of our mobile clients on Android and iOS. As a result, we had quite a few permutations of data feeds to manage, including: Android tablet, Android phone, iOS phone, etc. This meant that any time we wanted to request a different set of data, like new language for an article, we had to wait for one of our teams to make another template and endpoint. As you can imagine, this became&nbsp;<strong>inefficient</strong>.</p>



<p>Ideally, we needed a way for each client to request or&nbsp;<strong>query</strong>&nbsp;the data that they need without having to change anything on the server. If one Android phone needs small crops of images while another Android phone needs large crops, we should be able to use the same article API to fulfill the request. Of course, a single variation between different requests can be accomplished with request params but that didn’t quite fit our use case. We request up to 200 fields for any given article. 90% of the fields are not required for all articles, and a third of them have some special configuration. It would be nice to get only the necessary fields on a per request basis.</p>



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



<p>It became clear that REST is not the right tool for the job. We dug around for other options and landed on the GraphQL spec created by Facebook. For those that are unfamiliar, GraphQL is a query language for domain driven requests from a client to a server. Here’s a simple example from the front page of&nbsp;<a href="http://graphql.org/" target="_blank" rel="noreferrer noopener">graphql.org</a>:</p>



<p>Describe your data by making a schema:</p>



<pre class="wp-block-preformatted">type Project {<br>  name: String<br>  tagline: String<br>  contributors: [User]<br>}</pre>



<p>Ask for what you want by writing a query:</p>



<pre class="wp-block-preformatted">{<br>  project(name: "GraphQL") {<br>    tagline<br>  }<br>}</pre>



<p>Get predictable results:</p>



<pre class="wp-block-preformatted">{<br>  "project": {<br>    "tagline": "A query language for APIs"<br>  }<br>}</pre>



<p>The way that GraphQL works is that you have a pre-defined schema of all the things a client can request. Then, clients can make a query which asks for only the fields that they need. The query is posted to a server which executes that query, pulling from any backends or databases to retrieve exactly the data the client asked for.</p>



<p>So a query like {a, b, c} returns {a: 1, b: 2, c: 3}. Or, you can query {a, c} and get back only {a: 1, c: 3}. This seemed perfect for us, and there was only one problem &#8211; there didn’t seem to be any clients for Android. After trying to create our own implementation internally, we realized why one didn’t exist yet: The GraphQL specification has a lot of things to implement, including fragments, union types, mutations, custom fields, nullable types, etc. Working in a statically typed language where reflection is expensive did not make anything easier.</p>



<h2 class="wp-block-heading" id="7617"><a href="#working-with-the-community" aria-hidden="true" class="aal_anchor" id="working-with-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>Working with the community</h2>



<p>Rather than creating something internally, we felt that the community as a whole would benefit from an open source GraphQL client. So we looked around for anyone else that might have the same needs. Through an Android Slack, I was connected with Felipe Lima from Airbnb who told me about Apollo GraphQL, a rather robust client implementation, first in&nbsp;<a href="http://dev.apollodata.com/react/" target="_blank" rel="noreferrer noopener">JavaScript</a>&nbsp;and recently also in&nbsp;<a href="http://dev.apollodata.com/ios/" target="_blank" rel="noreferrer noopener">Swift for iOS</a>. He said that he had worked a bit with them trying to bootstrap an Android version together. We ended up taking a call, and tried to figure out what direction to go to start working on a GraphQL client for Android. After looking around a bit more we found another partner, Shopify, who had a developer also interested in creating an Apollo Android client. The base contributor team had been formed.</p>



<p>Five months, 200+ commits, and 13 contributors later, we have released&nbsp;<strong>version 0.30</strong>, which is the first version ready for public consumption. While there might be a few minor API changes we are feature complete for 1.0.</p>



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



<p>Apollo Android is a GraphQL compliant client library that generates Java models from standard GraphQL queries. These models give you a typesafe API to work with GraphQL servers. Apollo will help you keep your GraphQL query statements together, organized, and easy to access from Java. Here are some of the features you get:</p>



<p><strong>Code generation:&nbsp;</strong>You can just change a query and recompile your project, and Apollo codegen will rebuild your data model. Code generation also allows Apollo to read and unmarshal responses from the network without the need of any reflection (<a href="https://github.com/apollographql/apollo-android" target="_blank" rel="noreferrer noopener">see the README for an example</a>).</p>



<p><strong>Network calls and caching:</strong>&nbsp;Apollo-Android also includes a runtime to execute queries and cache the results. The client can be configured with three levels of caching:</p>



<ol class="wp-block-list"><li>HTTP response cache: This stores raw HTTP responses.</li><li>Normalized disk cache: This does per-node caching of results in SQL.</li><li>Normalized in memory: This is an optimized Guava in-memory cache.</li></ol>



<p><strong>RxJava:&nbsp;</strong>We have included RxJava wrappers to work with RxJava 1 and RxJava 2.</p>



<p><strong>Optionals:&nbsp;</strong>Optional support is here as well. We work with Guava Optionals, Java optionals or our own shaded version. We are 100% ProGuard compatible with no configuration.</p>



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



<p>Check out the&nbsp;<a href="https://github.com/apollographql/apollo-android/blob/master/README.md" target="_blank" rel="noreferrer noopener">example in the README</a>. The majority of your interactions will look something like:</p>



<p><strong>Step 1:</strong>&nbsp;Add a query to your project:</p>



<pre class="wp-block-preformatted">query FeedQuery($type: FeedType!, $limit: Int!) {<br>  feed(type: $type, limit: $limit) {<br>    comments {<br>      id<br>    }<br>    postedBy {<br>      login<br>    }<br>  }<br>}</pre>



<p><strong>Step 2:</strong>&nbsp;Compile your project to get generated code for the query.</p>



<p><strong>Step 3:</strong>&nbsp;Interact with the generated type safe QueryBuilder and response:</p>



<pre class="wp-block-preformatted">apolloClient.newCall(FeedQuery.builder()<br>    .limit(10)<br>    .type(FeedType.HOT)<br>    .build())<br>    .enqueue(new ApolloCall.Callback&lt;FeedQuery.Data&gt;(){<br>        public void onResponse(Response&lt;FeedQuery.Data&gt; response) {}<br>        public void onFailure(@Nonnull Throwable t) {}<br>     });</pre>



<p>or the RxJava version</p>



<pre class="wp-block-preformatted">Rx2Apollo.from(apolloClient<br>                  .newCall(FeedQuery<br>                  .builder()<br>                  .limit(10)<br>                  .type(FeedType.HOT)                 <br>                  .build()))<br>         .subscribe()</pre>



<p>You can also find a sample project in the&nbsp;<a href="https://github.com/apollographql/apollo-android/tree/master/apollo-sample" target="_blank" rel="noreferrer noopener">repository on GitHub</a>.</p>



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



<p>We believe we made this library simple yet powerful. A developer can go from writing a GraphQL query to being up and running in a manner of minutes. We’d love to hear from you on how to make Apollo-Android better, and we’re currently working on a roadmap of features for the coming months.</p>



<p>It was incredible to work with talented developers from various companies to create an open source project. I’d like to recognize the main contributors on the project:</p>



<ul class="wp-block-list"><li><a href="https://github.com/sav007" target="_blank" rel="noreferrer noopener"><strong>Ivan Savytskyi</strong></a>, who was by far the top contributor, main developer of the code generation through a few rewrites, and generally an awesome guy. This project would not be a reality without the insane amounts of time he put in.</li><li><a href="https://github.com/felipecsl" target="_blank" rel="noreferrer noopener"><strong>Felipe Lima</strong></a>&nbsp;for getting the project off the ground.</li><li><a href="https://github.com/BenSchwab" target="_blank" rel="noreferrer noopener"><strong>Ben Schwab</strong></a>&nbsp;for implementing the caching layer and countless other things.</li><li><a href="https://github.com/martijnwalraven" target="_blank" rel="noreferrer noopener"><strong>Martijn Walraven</strong></a>&nbsp;from the Apollo team for offering us guidance, check out his iOS library&nbsp;<a href="https://github.com/apollographql/apollo-ios" target="_blank" rel="noreferrer noopener">here</a>.</li><li><a href="https://github.com/marwanad" target="_blank" rel="noreferrer noopener"><strong>Marwan Ahmed</strong></a>&nbsp;for creating the Gradle plugin to run our code generation.</li><li><a href="https://github.com/VisheshVadhera" target="_blank" rel="noreferrer noopener"><strong>Vishesh Vadhera</strong></a>&nbsp;for giving a big helping hand in documentation.</li></ul>



<p>Learn more about the project and contribute on our&nbsp;<a href="https://github.com/apollographql/apollo-android" target="_blank" rel="noreferrer noopener">GitHub repository</a>!</p>


Introducing the Apollo Android GraphQL client


<p>If you’ve heard about GraphQL, you’ve likely also heard about GraphQL clients such as&nbsp;<a href="http://dev.apollodata.com/" target="_blank" rel="noreferrer noopener">Apollo Client</a>&nbsp;or&nbsp;<a href="https://facebook.github.io/relay/" target="_blank" rel="noreferrer noopener">Relay</a>. GraphQL is an API technology, so you can always access your API with a simple HTTP fetch. These client implementations offer a large number of data management features, so their core purpose can become a bit muddled. In this short post, I’ll go through why sophisticated GraphQL client clients are useful, and what they will and won’t do for you.</p>



<p>The best way to understand the value of something is to lose it.&nbsp;So, let’s first imagine a world where GraphQL clients didn’t exist and then, from that point of view, figure out what a GraphQL client implementation would have to do to be useful.</p>



<p><em>If you haven’t tried GraphQL or Apollo Client yet, check out the&nbsp;</em><a href="http://dev.apollodata.com/" target="_blank" rel="noreferrer noopener"><em>interactive example on our website</em></a><em>.</em></p>



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



<p>Say you’re building a web application and you want to interact with a GraphQL backend. At the very basic level, all you have to do is construct POST requests with your query document, send them to the server and get a response back.</p>



<p>For example, you might send a JSON object like this:</p>



<pre class="wp-block-preformatted">{<br>  query: "query { <br>     authors {<br>       firstName<br>       lastName<br>     }<br>  }"<br>}</pre>



<p>And receive something back from the server that looks like this:</p>



<pre class="wp-block-preformatted">{<br>  data: {<br>    authors: [<br>      { firstName: 'Alfred', lastName: 'Aho' },<br>      { firstName: 'Ravi', lastName: 'Sethi' }    <br>    ],<br>  } <br>}</pre>



<p>It would be nice to have something that would just construct this JSON object, send it down to the server, wait for a result and error in a reasonable way in case something goes wrong. In addition, you’ll want this process of constructing the HTTP request and handling corresponding response to be pluggable with middlewares and afterwares, so that you can do authentication by adding an HTTP header.</p>



<p>Once you start adding additional features to your GraphQL implementation, like subscriptions, a simple HTTP fetch is no longer sufficient. In this case, a great network interface implementation can really help you out.</p>



<p>That’s what&nbsp;<a href="http://dev.apollodata.com/core/network.html" target="_blank" rel="noreferrer noopener">Network Interfaces</a>&nbsp;do in Apollo Client. You could use these independently of the rest of the implementation and still have something useful, and we’re hoping to make that component more independent in the future.</p>



<h2 class="wp-block-heading" id="b77e"><a href="#2-keeping-your-ui-consistent-across-queries" aria-hidden="true" class="aal_anchor" id="2-keeping-your-ui-consistent-across-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>2. Keeping your UI consistent across queries</h2>



<p>You don’t just want to fetch data; you also want to show this data to your users through a UI component. Let’s say that you have two components within your UI that each display a list of authors. So, you have two components that ask for this query to be sent to the server:</p>



<pre class="wp-block-preformatted">query {<br>  authors {<br>    firstName<br>    lastName<br>  }<br>}</pre>



<p>Let’s call these two components UI Component #1 and UI Component #2.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="562" height="287" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_0nHslOyAgJdikBPd-LR4hg-1.png" alt="" class="wp-image-1145" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_0nHslOyAgJdikBPd-LR4hg-1.png 562w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_0nHslOyAgJdikBPd-LR4hg-1-300x153.png 300w" sizes="auto, (max-width: 562px) 100vw, 562px" /><figcaption>The initial UI after we’ve loaded our authors’ names.</figcaption></figure>



<p>Let’s say the user clicks the “reload list” button. List #1 has to reload its list of authors’ names and display the new ones to the user. The result it now gets back looks like this:</p>



<pre class="wp-block-preformatted">{<br>  data: {<br>    authors: [<br>      { firstName: 'Alfred', lastName: 'Aho' },<br>      { firstName: 'Ravi', lastName: 'Sethi' } ,<br>      { firstName: 'Jeffrey', lastName: 'Ullman' },   <br>    ],<br>  } <br>}</pre>



<p>So, #1’s view will update to include this new author by the name of “Jeffrey Ullman.” But, “#2” will still be stuck in the past.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="562" height="287" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_fiBuE94ZsLRolybhwwfdww.png" alt="" class="wp-image-1143" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_fiBuE94ZsLRolybhwwfdww.png 562w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_fiBuE94ZsLRolybhwwfdww-300x153.png 300w" sizes="auto, (max-width: 562px) 100vw, 562px" /><figcaption>Disaster strikes when we hit “reload” on the first author list</figcaption></figure>



<p>We don’t want this to happen, because the application user might get confused about the state of the server. Is that author in there or not? Ideally, both “#1” and “#2” would update with the latest data and our UI wouldn’t fall out of sync. This is what Apollo Client’s “reactive cache” accomplishes.</p>



<p>The reactive cache is a collection of GraphQL query results held on the client that’s updated as the client fetches more information. We sometimes call it a “reactive” cache since it allows us to make sure that when a single piece of data is updated, every query watching that piece of data is updated as well. When you fire queries and mutations through Apollo Client, the results are written to the cache and it is used to make sure that all of the “active” queries on your page are up-to-date with each other. There are some more details as to&nbsp;<a href="https://dev-blog.apollodata.com/the-concepts-of-graphql-bc68bd819be3" target="_blank" rel="noreferrer noopener">how exactly the reactive cache works</a>&nbsp;but the core idea is that keeps the different parts of your UI in sync.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="562" height="293" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_xJeOLJE-Vewb45tiNfRoxw.png" alt="" class="wp-image-1142" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_xJeOLJE-Vewb45tiNfRoxw.png 562w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_xJeOLJE-Vewb45tiNfRoxw-300x156.png 300w" sizes="auto, (max-width: 562px) 100vw, 562px" /><figcaption>Happy days are here again when a GraphQL client preserves consistency</figcaption></figure>



<p>To learn more about how the cache works in Apollo, fire up an example app and install the&nbsp;<a href="https://dev-blog.apollodata.com/apollo-client-developer-tools-ff89181ebcf" target="_blank" rel="noreferrer noopener">Apollo Client Devtools</a>. You’ll see how the query results are decomposed into a normalized structure that allows objects to be shared across queries.</p>



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



<p>Of course, in order for the reactive cache to work, we need to be able to update it with information returned from the server. In most cases, this is as easy as fetching a GraphQL query or running a mutation. When the result from the query is returned, your GraphQL client will automatically update the cache entries associated with the query. For mutations as well, if the results match up with current cache entries, they are incorporated automatically.</p>



<p>But, in cases where the data returned is something that includes completely new objects, for example pagination and mutation that create new items, more information is needed to specify how exactly the cache should be updated. So, we want our GraphQL client to give us a way to update the cache with new information from the server and allow us to handle these special cases. For Apollo Client,&nbsp;<a href="http://dev.apollodata.com/react/cache-updates.html" target="_blank" rel="noreferrer noopener">we’ve documented</a>&nbsp;these cases and how to deal with them.</p>



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



<p>That gives us the three core responsibilities of a GraphQL client:</p>



<ol class="wp-block-list"><li>Allow the application developer to easily execute GraphQL queries, and configure transport-specific features like headers.</li><li>Ensure that all GraphQL results currently being displayed in an app are consistent with one another.</li><li>Provide flexible ways to update the cache with results from the server when using mutations, pagination, subscriptions, and more.</li></ol>



<p>The structure inherent in GraphQL makes it possible for libraries like Apollo Client to implement the above properties to make your development experience more pleasant. In particular, the most useful property of GraphQL that enables this is that GraphQL can be used both to request the data from the server and to read data from the cache for the UI components.</p>



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



<p>We now know that GraphQL clients are fundamentally responsible for these three requirements. Let’s dig into the details a bit and clear up some existing misconceptions around the role of client implementations.</p>



<ol class="wp-block-list"><li><strong>Performance is the main reason to use a GraphQL client.&nbsp;</strong>These GraphQL clients are often referred to as “caches”. Caches are generally used to speed things up. So, many assume that the primary benefit of Apollo Client or Relay comes from the fact that it is able to improve the performance of your application by lowering roundtrips. It is certainly the case that this&nbsp;<em>may</em>&nbsp;occur: if you’re fetching data you have already requested before, Apollo Client will happily resolve it from the cache for you and save you a server roundtrip. But, this is not the primary goal of the reactive cache. The cache is meant to keep your UI consistent and predictable, and most implementations will prioritize doing that over saving your application a roundtrip to the server.</li><li><strong>Consistency between client and server.&nbsp;</strong>Apollo Client’s cache is currently concerned with consistency at the UI level, not at the client-server level. This means that the client will not automatically receive updates from the server in order to update your UI components. Live updates can be implemented with polling or&nbsp;<a href="https://github.com/apollographql/graphql-subscriptions" target="_blank" rel="noreferrer noopener">GraphQL subscriptions</a>. These aren’t too hard to set up, but they require the developer to opt in and do some extra work.</li></ol>



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



<p>Physicists sometimes use a term for a description of something that’s simplified to the point where it might only capture a very vague view of a reality: a&nbsp;<a href="https://en.wikipedia.org/wiki/Spherical_cow" target="_blank" rel="noreferrer noopener">spherical cow</a>. In this post, I’ve essentially presented such a model of Apollo Client and other GraphQL client implementations. There’s a lot of stuff it does under the hood to make your GraphQL app consistent, performant and pleasant to develop that I’ve just ignored.</p>



<p>But, the core responsibilities described make it clear what Apollo Client’s role is: fetch some GraphQL queries and keep them in sync with one another. Hopefully this simple mental model makes it a bit easier to navigate the maze of tools, libraries, etc. exist and get you to productivity more quickly.</p>



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



<p>If you want to learn more about concepts like this, and hear from both production GraphQL users and contributors from the Apollo community, please sign up for our free 1-day event on April 12, Apollo Day: <a rel="noreferrer noopener" href="https://www.eventbrite.com/e/apollo-day-graphql-developer-event-tickets-32267399661" target="_blank">Apollo Day: GraphQL Developer EventJoin us for a special developer event to celebrate the Apollo project&#8217;s first anniversary and the official launch of…www.eventbrite.com<br></a></p>


Why you might want a GraphQL client


<p>Today, we are proud to announce Apollo Client 1.0, “Pink Panther”! Apollo Client is now fully featured, stable and production-ready. If you’ve been holding off on trying GraphQL or Apollo, now’s a great time to check it out.</p>



<figure class="wp-block-image size-large"><a href="http://dev.apollodata.com/"><img loading="lazy" decoding="async" width="1024" height="632" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_id-H3CB90YGpUyuwf2W7zQ-1024x632.png" alt="" class="wp-image-1147" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_id-H3CB90YGpUyuwf2W7zQ-1024x632.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_id-H3CB90YGpUyuwf2W7zQ-300x185.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_id-H3CB90YGpUyuwf2W7zQ-768x474.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_id-H3CB90YGpUyuwf2W7zQ-1200x741.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_id-H3CB90YGpUyuwf2W7zQ.png 1400w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></a></figure>



<p>Apollo Client is a client-side library that leverages the power of a GraphQL API to handle data fetching and management for you, so that you can spend less time plumbing data and more on building your application.</p>



<p><a href="http://dev.apollodata.com/" target="_blank" rel="noreferrer noopener">Try it now with the interactive example on our home page.</a></p>



<h2 class="wp-block-heading" id="530f"><a href="#the-apollo-community" aria-hidden="true" class="aal_anchor" id="the-apollo-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>The Apollo community</h2>



<p>I’m absolutely amazed and humbled by how far Apollo Client has come since the project’s start a little over a year ago. We set out to build a modular and powerful GraphQL client that works with any view layer.</p>



<p>What we’ve achieved is much more than that: Not only have we built a fully-featured GraphQL client together with over&nbsp;<strong>450 contributors</strong>, we’ve even advanced the state of GraphQL by working on new, cutting-edge features like&nbsp;<a href="https://dev-blog.apollodata.com/the-next-step-for-realtime-data-in-graphql-b564b72eb07b" target="_blank" rel="noreferrer noopener">subscriptions</a>. And the GraphQL community is more exciting than ever before, with new tech released every day, and the&nbsp;<a href="https://github.com/facebook/relay/commit/9f74316918be1833861a4f326e535e8d5ab9de59" target="_blank" rel="noreferrer noopener">next generation “Relay Modern”</a>&nbsp;coming out soon.</p>



<p>Today Apollo Client has had over 3,000 commits, 2,000 stars on GitHub and 100,000 monthly downloads on npm. None of this would have been possible without an amazing open source community. We feel privileged to work with so many users and contributors from all over the world, including engineers from companies such as Airbnb, Coursera, CreditKarma, Google, the New York Times, OpenTable, Shopify and Zendesk.</p>



<p>Read on to find out what this amazing community has built together.</p>



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



<ul class="wp-block-list"><li>It works with any GraphQL server and schema.</li><li>It’s&nbsp;<a href="https://dev-blog.apollodata.com/full-stack-react-graphql-tutorial-582ac8d24e3b" target="_blank" rel="noreferrer noopener">easy to get started with</a>, and&nbsp;<a href="http://dev.apollodata.com/react/" target="_blank" rel="noreferrer noopener">extensively documented</a>.</li><li>It works seamlessly with your favorite&nbsp;<a href="http://dev.apollodata.com/react/" target="_blank" rel="noreferrer noopener">React</a>&nbsp;community tools like&nbsp;<a href="http://dev.apollodata.com/react/redux.html" target="_blank" rel="noreferrer noopener">Redux</a>&nbsp;and&nbsp;<a href="https://medium.com/p/simplify-your-react-components-with-apollo-and-recompose-8b9e302dea51" target="_blank" rel="noreferrer noopener">Recompose</a>.</li><li>It has integrations for&nbsp;<a href="https://github.com/apollographql/apollo-angular" target="_blank" rel="noreferrer noopener">Angular</a>,&nbsp;<a href="https://github.com/bgentry/ember-apollo-client" target="_blank" rel="noreferrer noopener">Ember</a>,&nbsp;<a href="https://github.com/Akryum/vue-apollo" target="_blank" rel="noreferrer noopener">Vue</a>,&nbsp;<a href="http://dev.apollodata.com/core/meteor.html" target="_blank" rel="noreferrer noopener">Meteor</a>,&nbsp;<a href="https://github.com/zeit/next.js/tree/master/examples/with-apollo" target="_blank" rel="noreferrer noopener">Next.js</a>, and more.</li><li>It has built-in tools for&nbsp;<a href="http://dev.apollodata.com/react/optimistic-ui.html" target="_blank" rel="noreferrer noopener">optimistic UI</a>,&nbsp;<a href="http://dev.apollodata.com/react/server-side-rendering.html" target="_blank" rel="noreferrer noopener">SSR</a>,&nbsp;<a href="http://dev.apollodata.com/react/pagination.html" target="_blank" rel="noreferrer noopener">pagination</a>, loading state, and everything else you need to build an app.</li><li>It supports&nbsp;<a href="https://medium.com/p/the-next-step-for-realtime-data-in-graphql-b564b72eb07b" target="_blank" rel="noreferrer noopener">GraphQL subscriptions</a>&nbsp;out of the box.</li><li>It gives you&nbsp;<a href="https://dev-blog.apollodata.com/apollo-clients-new-imperative-store-api-6cb69318a1e3" target="_blank" rel="noreferrer noopener">full control over your GraphQL store</a>.</li><li>It has its own&nbsp;<a href="https://medium.com/p/apollo-client-developer-tools-ff89181ebcf" target="_blank" rel="noreferrer noopener">Apollo Developer Tools</a>&nbsp;to help you understand your app.</li></ul>



<p>If you’ve been using Apollo Client since 0.x, make sure to read&nbsp;<a href="http://dev.apollodata.com/react/migration.html" target="_blank" rel="noreferrer noopener">our guide on migrating to 1.0</a>. We’ve also significantly improved the documentation, so even if you’ve read it before you might find something new.</p>



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



<p>If you’re new to Apollo or GraphQL, you’re really going to like what we have to offer! Here are some great resources for getting started:</p>



<ul class="wp-block-list"><li><a href="https://learngraphql.com/" target="_blank" rel="noreferrer noopener">Learngraphql.com</a>: a course that teaches you the basics of GraphQL.</li><li><a href="http://graphql.org/" target="_blank" rel="noreferrer noopener">GraphQL.org</a>: the official GraphQL specification and documentation.</li><li><a href="https://dev-blog.apollodata.com/full-stack-react-graphql-tutorial-582ac8d24e3b" target="_blank" rel="noreferrer noopener">Full-stack React + GraphQL tutorial</a>: A short tutorial (by yours truly).</li><li><a href="https://www.learnapollo.com/" target="_blank" rel="noreferrer noopener">Learnapollo.com</a>: A longer tutorial built by the&nbsp;<a href="https://www.graph.cool/" target="_blank" rel="noreferrer noopener">Graphcool</a>&nbsp;community.</li></ul>



<p>Once you’ve gotten an initial impression, reading&nbsp;<a href="http://dev.apollodata.com/react/" target="_blank" rel="noreferrer noopener">the Apollo documentation</a>&nbsp;is a great way to learn about the more advanced features of Apollo Client.</p>



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



<p>The 1.0 version number means Apollo Client is stable and being used in production apps around the world. As we’ve said before, reaching 1.0 doesn’t mean we’ll stop improving Apollo and adding new features — quite the opposite. We’re excited to start working with the community on next-generation features like cache invalidation, persistent offline caching, file upload handling, a streaming network interface, built-in prefetching and more, so stay tuned!</p>



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



<p>There’s still plenty of opportunity to join us in working on Apollo Client. If you have a few spare minutes every now and then, we’d love for you to join our community and become a contributor by joining our&nbsp;<a href="https://www.apollographql.com/slack" target="_blank" rel="noreferrer noopener">Slack channel</a>&nbsp;and helping the project with issues and pull requests. Read our recent post to&nbsp;<a href="https://dev-blog.apollodata.com/keeping-up-with-apollo-and-graphql-1510dc9314a8" target="_blank" rel="noreferrer noopener">discover all of the ways to stay up to date with Apollo</a>.</p>


Apollo Client 1.0: A flexible, community-focused JavaScript GraphQL client


<p>GraphQL is strongest when it is a unified access point to your organization’s entire data universe: You may have a plethora of micro-services churning away in the background, but your GraphQL consumer doesn’t need to know those details. Instead, they can focus on being productive using your organization’s single, cohesive, data model.</p>



<p>Often, an app’s entire data universe is&nbsp;<em>way</em>&nbsp;too large to reasonably download and manage entirely in an app, but at the same time we want to fool our users into&nbsp;<em>thinking</em>&nbsp;that we’ve done just that. To build an app that creates this kind of user perception, it is not enough to just layer on some consistency features at the end of the development cycle — you must fundamentally build paradigms into the application’s infrastructure that allow your front-end engineers to efficiently operate a subset of your data universe locally.</p>



<p>This is where a GraphQL client comes in. A GraphQL client should allow you to take a slice of your GraphQL data universe and make it accessible on the client. Clients like Apollo store your data in a normalized form where the id is computed by the user defined function&nbsp;<code>dataIdFromObject</code>. In this way, Apollo Client acts very similarly to a database. It saves data using a query language, and provides an interface for you to read that data back out.</p>



<p>However, before Apollo Client 0.10.0 there were only two ways for you to access and modify the data in this database: You&nbsp;<em>could</em>&nbsp;try reading data with a query by setting<code>noFetch</code>, or writing data with a call to<code>updateQueries</code>. While these features are great in the context for which they were designed, they were not built to offer complete control over the client-side cache.</p>



<p>Instead, Apollo Client now provides the ability to control the store with four new methods:&nbsp;<code>readQuery()</code>,&nbsp;<code>readFragment()</code>,&nbsp;<code>writeQuery()</code>, and&nbsp;<code>writeFragment()</code>.</p>



<p>These methods are available on your&nbsp;<code>ApolloClient</code>&nbsp;instance and allow you to read and write directly to your cache. Together, they will allow you to provide a compelling experience to your users by empowering you to update the data in your cache in any way you choose. These methods expose enough power that you may, in fact, be able to write your own customized GraphQL client API on top of them!</p>



<p>Let’s dive into the details of each method and how you may use them together to build great experiences.</p>



<figure class="wp-block-image alignfull size-large"><img loading="lazy" decoding="async" width="1024" height="682" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_lhyq5UlJMbiVE0PyDVEy0Q-1024x682.jpg" alt="" class="wp-image-1175" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_lhyq5UlJMbiVE0PyDVEy0Q-1024x682.jpg 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_lhyq5UlJMbiVE0PyDVEy0Q-300x200.jpg 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_lhyq5UlJMbiVE0PyDVEy0Q-768x512.jpg 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_lhyq5UlJMbiVE0PyDVEy0Q-1536x1024.jpg 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_lhyq5UlJMbiVE0PyDVEy0Q-1200x800.jpg 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_lhyq5UlJMbiVE0PyDVEy0Q-1980x1320.jpg 1980w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_lhyq5UlJMbiVE0PyDVEy0Q.jpg 2000w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>The goal is for these methods to give you as much creative power as a pen on paper.</figcaption></figure>



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



<p>The first method for interacting directly with your cache is <code>readQuery()</code>. This method will read data from your cache starting at your root query type. To use the method, you provide it the query you want to read as a named argument like so:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">const data = client.readQuery({
  query: gql`
    {
      todo(id: 1) {
        id
        text
        completed
      }
    }
  `,
});</code></pre>



<p>If the data exists in your cache then it will be returned and you may interact with the&nbsp;<code>data</code>&nbsp;object however you like! If not, all of the data exists in your store the query can not be fulfilled so an error will be thrown.</p>



<p>You may use a query from anywhere in your app with this method. You may also pass in variables:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">import { TodoQuery } from &#039;./TodoGraphQL&#039;;

const data = client.readQuery({
  query: TodoQuery,
  variables: { id: 5 },
});</code></pre>



<p><code>readQuery()</code>&nbsp;is similar to the existing&nbsp;<code>query()</code>&nbsp;method on Apollo Client, except that&nbsp;<code>readQuery()</code>&nbsp;will&nbsp;<em>never</em>&nbsp;send a request using your network interface. It will&nbsp;<em>always</em>&nbsp;try to read from only the cache, and if that read fails then an error will be thrown.</p>



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



<p>Sometimes, however, you want to read from an arbitrary point in your store and not just from your root query type. For that there is the new <code>readFragment()</code> method. This method accepts a GraphQL fragment and an id and returns you the data at that id matching the provided fragment:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">client.readFragment({
  id: &#039;5&#039;,
  fragment: gql`
    fragment todo on Todo {
      id
      text
      completed
    }
  `,
});</code></pre>



<p>The <code>id</code> should be a string that is returned by the <code>dataIdFromObject</code> function you defined when initializing an instance of <code>ApolloClient</code>. For instance, if you use this common <code>dataIdFromObject</code> function:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">const client = new ApolloClient({
  dataIdFromObject: o =&gt; {
    if (o.__typename != null &amp;&amp; o.id != null) {
      return `${o.__typename}-${o.id}`;
    }
  },
});</code></pre>



<p>Then your id might be&nbsp;<code>Todo5</code>&nbsp;instead of just&nbsp;<code>5</code>&nbsp;because you added the&nbsp;<code>__typename</code>&nbsp;to beginning of the id.</p>



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



<p>Both&nbsp;<code>readQuery()</code>&nbsp;and&nbsp;<code>readFragment()</code>&nbsp;have analogous methods for writing:&nbsp;<code>writeQuery()</code>&nbsp;and&nbsp;<code>writeFragment()</code>. These methods allow you to update the data in your local cache, to simulate an update from the server. However, beware: these updates are not actually persisted to your backend! That means if you reload your JavaScript environment the updates will be gone. Also, no other users will be able to see the changes you made with these methods. If you want all of your users to see modified data then you need to send a mutation to update it on the server.</p>



<p>The advantage of&nbsp;<code>writeQuery()</code>&nbsp;and&nbsp;<code>writeFragment()</code>&nbsp;is that they allow you to exactly modify the data in your cache to make sure it is in sync with the server in cases where you do not want to do a full server refetch. Or, in cases where you want to slightly modify some data on the client so that the user may have a better experience.</p>



<p><code>writeQuery()</code> has the same interface as <code>readQuery()</code>, except that it also takes a named argument called <code>data</code>. The <code>data</code> object must be in the same shape as the JSON result your server would return for this query.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">client.writeQuery({
  query: gql`
    {
      todo(id: 1) {
        completed
      }
    }
  `,
  data: {
    todo: {
      completed: true,
    },
  },
});</code></pre>



<p>Likewise, <code>writeFragment()</code> has the same interface as <code>readFragment()</code> except for the named argument <code>data</code>. The <code>id</code> follows the same rules as it does in <code>readFragment()</code>:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">client.writeFragment({
  id: &#039;5&#039;,
  fragment: gql`
    fragment todo on Todo {
      completed
    }
  `,
  data: {
    completed: true,
  },
});</code></pre>



<p>These four methods will allow you to&nbsp;<em>completely</em>&nbsp;control the data in your cache. You no longer have to guess at what your cache contains, as you may now simply read out any data and write back any modifications to remove inconsistencies.</p>



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



<p>We have made it easy to use these methods anywhere in your app, and especially in the context of mutation results.</p>



<p>Since the data you get out of the cache is a copy, you can mutate it without affecting the underlying store. This makes imperative updates simple. Here’s something you could not do before in Apollo Client:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">const query = gql`
  {
    todos {
      id
      text
      completed
    }
  }
`;

const data = client.readQuery({
  query,
});

data.todos.push({
  id: 5,
  text: &#039;Hello, world!&#039;,
  completed: false,
});

client.writeQuery({
  query,
  data,
});</code></pre>



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



<p>The most common place where you might want to update your store is during the lifecycle of a mutation. You often need to do this twice: first, when you immediately execute the mutation with an optimistic response (if you have one), and then a second time after your mutation has completed. Apollo Client now provides an <code>update</code> method that passes in a proxy object with the four read and write methods which allows you to update your cache in whichever way you choose.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">const text = &#039;Hello, world!&#039;;

client.mutate({
  mutation: gql`
    mutation ($text: String!) {
      createTodo(text: $text) {
        id
        text
        completed
      }
    }
  `,
  variables: {
    text,
  },
  optimisticResponse: {
    createTodo: {
      id: -1, // Fake id
      text,
      completed: false,
    },
  },
  update: (proxy, mutationResult) =&gt; {
    const query = gql`
      {
        todos {
          id
          text
          completed
        }
      }
    `;
    
    const data = proxy.readQuery({
      query,
    });
    
    data.todos.push(mutationResult.createTodo);
    
    proxy.writeQuery({
      query,
      data,
    });
  },
});</code></pre>



<p>We first got the idea for using a proxy to do imperative cache updates in Greg Hurrell’s presentation on&nbsp;<a href="https://youtu.be/OEfUBN9dAI8?t=49m54s" target="_blank" rel="noreferrer noopener">Relay 2</a>. We then developed the idea into a full implementation which you can now use in&nbsp;<code>ApolloClient</code>&nbsp;today! In Apollo Client, the main advantage of using a proxy object in&nbsp;<code>update</code>&nbsp;is to apply and roll back optimistic mutation updates in a way that’s completely transparent for developers.</p>



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



<p>The&nbsp;<code>update</code>&nbsp;function on mutations provides a more flexible alternative to the&nbsp;<code>updateQueries</code>&nbsp;callback people currently use to update their store after a mutation. There have been some issues, both in the general approach and in the specific design of&nbsp;<code>updateQueries</code>, that led the Apollo team to keep looking for better options for updating your store after a mutation. We think that the&nbsp;<code>update</code>&nbsp;function, combined with the new reading and writing methods, is a good path forward.</p>



<p>But we want to know what&nbsp;<em>you</em>&nbsp;think! Do you like&nbsp;<code>updateQueries</code>? Do you prefer&nbsp;<code>updateQueries</code>&nbsp;to&nbsp;<code>update</code>&nbsp;for some use-cases? We are always interested in improving Apollo Client’s API to make it better for developers, so we depend on your feedback!</p>



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



<p>With the new methods, you now have&nbsp;<em>complete</em>&nbsp;control over the data in your cache, allowing you to use Apollo Client as a GraphQL-shaped client side database.</p>



<p>For more information, read the documentation for these new features.</p>



<ul class="wp-block-list"><li><a href="http://dev.apollodata.com/core/read-and-write.html" target="_blank" rel="noreferrer noopener">An introduction article to the read and write methods.</a></li><li><code>&lt;a href=&quot;http://dev.apollodata.com/core/apollo-client-api.html#ApolloClient.readQuery&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;ApolloClient.readQuery&lt;/a&gt;</code></li><li><code>&lt;a href=&quot;http://dev.apollodata.com/core/apollo-client-api.html#ApolloClient.readFragment&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;ApolloClient.readFragment&lt;/a&gt;</code></li><li><code>&lt;a href=&quot;http://dev.apollodata.com/core/apollo-client-api.html#ApolloClient.writeQuery&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;ApolloClient.writeQuery&lt;/a&gt;</code></li><li><code>&lt;a href=&quot;http://dev.apollodata.com/core/apollo-client-api.html#ApolloClient.writeFragment&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;ApolloClient.writeFragment&lt;/a&gt;</code></li></ul>


Apollo Client’s new imperative store API


<p>Today I have an exciting announcement: After almost a year,&nbsp;<a href="https://github.com/apollographql/apollo-client" target="_blank" rel="noreferrer noopener">2,800 commits</a>, 100 releases, and the work of over 100 amazing contributors, we are getting ready to launch&nbsp;<strong>Apollo Client 1.0</strong>!</p>



<p>We and many others have been using Apollo Client in production for almost a year now, and we’re very happy with the current API. The transition to 1.0 means we are sticking with this API for a while, even as we continue making incremental changes.</p>



<p>The publication of our first release candidate marks the start of the final testing period before the official release. During this period, we want as many people as possible to try it out and report bugs and other issues so we can make sure Apollo Client is in great shape for the launch.</p>



<figure class="wp-block-image alignfull size-large"><img loading="lazy" decoding="async" width="1024" height="389" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_kRon2km84sStzsj1ZfJzlA-1024x389.png" alt="" class="wp-image-1184" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_kRon2km84sStzsj1ZfJzlA-1024x389.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_kRon2km84sStzsj1ZfJzlA-300x114.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_kRon2km84sStzsj1ZfJzlA-768x291.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_kRon2km84sStzsj1ZfJzlA-1536x583.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_kRon2km84sStzsj1ZfJzlA-1200x455.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_kRon2km84sStzsj1ZfJzlA-1980x751.png 1980w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_kRon2km84sStzsj1ZfJzlA.png 2000w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption><a href="https://npm-stat.com/charts.html?package=graphql-tag&amp;from=2016-01-01&amp;to=2017-02-28" target="_blank" rel="noreferrer noopener">Apollo Client now has more than 300&#8217;000 downloads on npm</a>!</figcaption></figure>



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



<p>Apollo Client 1.0 contains the best features from the 0.x series, and more:</p>



<ul class="wp-block-list"><li>Works with any GraphQL server and schema</li><li><a href="https://medium.com/p/full-stack-react-graphql-tutorial-582ac8d24e3b" target="_blank" rel="noreferrer noopener">Easy to get started with</a>, and&nbsp;<a href="http://dev.apollodata.com/react/" target="_blank" rel="noreferrer noopener">well-documented</a></li><li>Seamless integration with&nbsp;<a href="https://github.com/apollographql/react-apollo" target="_blank" rel="noreferrer noopener">React</a>,&nbsp;<a href="https://facebook.github.io/react/" target="_blank" rel="noreferrer noopener">React Router</a>,&nbsp;<a href="https://medium.com/p/apollo-client-0-5-f1eb3f122ace" target="_blank" rel="noreferrer noopener">Redux</a>,&nbsp;<a href="https://medium.com/p/simplify-your-react-components-with-apollo-and-recompose-8b9e302dea51" target="_blank" rel="noreferrer noopener">Recompose</a>, etc.</li><li>Integrations for&nbsp;<a href="https://github.com/apollographql/apollo-angular" target="_blank" rel="noreferrer noopener">Angular</a>,&nbsp;<a href="https://github.com/bgentry/ember-apollo-client" target="_blank" rel="noreferrer noopener">Ember</a>,&nbsp;<a href="https://github.com/Akryum/vue-apollo" target="_blank" rel="noreferrer noopener">Vue</a>,&nbsp;<a href="http://dev.apollodata.com/core/meteor.html" target="_blank" rel="noreferrer noopener">Meteor</a>,&nbsp;<a href="https://github.com/zeit/next.js/tree/master/examples/with-apollo" target="_blank" rel="noreferrer noopener">Next.js</a>, etc.</li><li>Patterns for&nbsp;<a href="http://dev.apollodata.com/react/optimistic-ui.html" target="_blank" rel="noreferrer noopener">optimistic UI</a>,&nbsp;<a href="http://dev.apollodata.com/react/server-side-rendering.html" target="_blank" rel="noreferrer noopener">SSR</a>,&nbsp;<a href="http://dev.apollodata.com/react/pagination.html" target="_blank" rel="noreferrer noopener">pagination</a>, loading state, etc.</li><li>Built-in support for&nbsp;<a href="https://medium.com/p/the-next-step-for-realtime-data-in-graphql-b564b72eb07b" target="_blank" rel="noreferrer noopener">GraphQL subscriptions</a></li><li><a href="https://medium.com/p/apollo-client-developer-tools-ff89181ebcf" target="_blank" rel="noreferrer noopener">Apollo Developer Tools</a>&nbsp;to help you understand your app</li></ul>



<p>Apollo Client 1.0 will also have a few significant improvements over the 0.x series:</p>



<ul class="wp-block-list"><li>New functions for fine-grained cache reads and writes</li><li>A vastly simplified client API with&nbsp;<a href="https://gist.github.com/helfer/3bbd1a727e30bbad9d2873803855fb91" target="_blank" rel="noreferrer noopener">new patterns</a>&nbsp;for&nbsp;<code>returnPartialData</code>,&nbsp;<code>reduxRootKey</code>&nbsp;and&nbsp;<code>resultTransformer</code>&nbsp;and better defaults for&nbsp;<code>queryDeduplication</code>&nbsp;and&nbsp;<code>notifyOnNetworkStatusChange</code>.</li><li><code>fetchPolicy</code>&nbsp;replaces&nbsp;<code>noFetch</code>&nbsp;and&nbsp;<code>forceFetch</code>.</li></ul>



<p>To get a full list of the features of Apollo Client, make sure to read our&nbsp;<a href="https://medium.com/p/apollo-client-0-5-f1eb3f122ace" target="_blank" rel="noreferrer noopener">previous</a>&nbsp;<a href="https://medium.com/p/apollo-client-0-8-e8db5efc75fb" target="_blank" rel="noreferrer noopener">posts</a>&nbsp;and&nbsp;<a href="http://dev.apollodata.com/" target="_blank" rel="noreferrer noopener">check out the docs</a>.</p>



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



<p>For a successful launch, a lot of things have to be right. We wouldn’t have gotten to where we are today without our amazing community, and we’re counting on you again to make this launch a success. Here are some of the things you can help us with:</p>



<ul class="wp-block-list"><li>Take Apollo Client for a spin and&nbsp;<strong>try it out in an app</strong>&nbsp;to provide feedback on developer ergonomics. If you‘re just getting started, try&nbsp;<a href="https://medium.com/p/full-stack-react-graphql-tutorial-582ac8d24e3b" target="_blank" rel="noreferrer noopener">the tutorial</a>.</li><li><strong>Write a blog post</strong>&nbsp;about interesting things you did with Apollo</li><li><strong>Find edge-cases</strong>&nbsp;that break Apollo Client and&nbsp;<a href="https://github.com/apollographql/apollo-client/issues/new" target="_blank" rel="noreferrer noopener">write up an issue</a>.</li><li>Choose&nbsp;<strong>a small bug to fix</strong>&nbsp;from&nbsp;<a href="https://github.com/apollographql/apollo-client/issues?q=is%3Aissue+is%3Aopen+label%3Aeasy" target="_blank" rel="noreferrer noopener">this list</a></li><li><strong>Build a reproduction</strong>&nbsp;for an open issue</li><li>Tell us about your&nbsp;<a href="https://github.com/apollographql/apollo-client/issues/1391" target="_blank" rel="noreferrer noopener"><strong>use-cases</strong></a></li><li>Help us spread the word and&nbsp;<strong>tell your friends</strong></li></ul>



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



<p>During the run-up to the release, we’ll freeze new feature development on the 1.x branch to thoroughly test Apollo Client, collect feedback from the community and fix any major bugs that are found. Once we’re getting close to launch, we’ll send out an invitation for the release event 🎉 to all the contributors and users who have made this possible. Look forward to a presentation about Apollo Client’s internal architecture, hearing a Q&amp;A with core contributors, learning about some apps that use Apollo in production today, and (hopefully) cake!</p>



<p>Reaching 1.0 doesn’t mean we stop improving Apollo and adding new features though, quite the opposite. We’re already working on cache invalidation, a persistent offline caching, a streaming network interface, native prefetching and more, so stay tuned!</p>



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



<p>The work on Apollo Client is far from over. If you have a few spare minutes every now and then, we’d love for you to become a contributor by joining our&nbsp;<a href="http://www.apollodata.com/#slack" target="_blank" rel="noreferrer noopener">Slack channel</a>&nbsp;and helping us with issues and pull requests. If you’d like to work on open-source software full-time, apply for one of our&nbsp;<a href="http://jobs.meteor.com/" target="_blank" rel="noreferrer noopener">open positions</a>!</p>



<p>If you want to be notified about the 1.0 release and future GraphQL blog posts, make sure to click “Follow” below, and follow us on Twitter at @<a href="https://twitter.com/apollographql" target="_blank" rel="noreferrer noopener">apollographql</a>.</p>


Apollo Client 1.0 is coming

Full-stack React + GraphQL Tutorial

Apollo Angular 0.11


<p>One of the main goals of&nbsp;<a href="http://dev.apollodata.com/" target="_blank" rel="noreferrer noopener">Apollo Client</a>&nbsp;and the Apollo project in general is to fit seamlessly into the modern React developer’s toolbox. That’s why we’ve invested in simple&nbsp;<a href="https://dev-blog.apollodata.com/seamless-integration-for-graphql-and-react-6ffc0ad3fead#.h3dquahg5" target="_blank" rel="noreferrer noopener">higher-order components</a>,&nbsp;<a href="http://dev.apollodata.com/react/server-side-rendering.html" target="_blank" rel="noreferrer noopener">server-side rendering</a>, and&nbsp;<a href="http://dev.apollodata.com/react/react-native.html" target="_blank" rel="noreferrer noopener">React Native</a>.</p>



<p>Increasingly, React developers are working more and more with small, focused components, and the&nbsp;<a href="https://github.com/acdlite/recompose" target="_blank" rel="noreferrer noopener">Recompose</a>&nbsp;library by&nbsp;<a href="https://medium.com/u/6025bd347b9a?source=post_page-----8b9e302dea51----------------------" target="_blank" rel="noreferrer noopener">Andrew Clark</a>&nbsp;takes that to the next level. When Andrew&nbsp;<a href="https://www.youtube.com/watch?v=zD_judE-bXk" target="_blank" rel="noreferrer noopener">presented it at React Europe last year</a>, he referred to it as a toolbox like Underscore or Lodash, but for React components. Here are some things you can do with Recompose:</p>



<ul class="wp-block-list"><li>Optimize your React components by making them pure-rendered</li><li>Set default props</li><li>Add limited state variables</li></ul>



<p>And you can do all of this while using the&nbsp;<a href="https://facebook.github.io/react/docs/components-and-props.html#functional-and-class-components" target="_blank" rel="noreferrer noopener">React functional component syntax</a>, which makes your code much more straightforward and reduces your chances of accidentally introducing some state or complexity into your UI rendering.</p>



<p>The React higher order component you use from&nbsp;<code>react-apollo</code>&nbsp;fits this mold. It just does one thing well: It enables you to co-locate your GraphQL query with your React component and get that data in your&nbsp;<code>props</code>, while handling all of the details like fetching and caching the data. It doesn’t do anything else, like manage variable state. That’s where React component composition and Recompose come in.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="363" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_-5OaljKSRCfHxtThFZIFhQ-1024x363.png" alt="" class="wp-image-527" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_-5OaljKSRCfHxtThFZIFhQ-1024x363.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_-5OaljKSRCfHxtThFZIFhQ-300x106.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_-5OaljKSRCfHxtThFZIFhQ-768x272.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_-5OaljKSRCfHxtThFZIFhQ-1536x544.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_-5OaljKSRCfHxtThFZIFhQ-2048x726.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_-5OaljKSRCfHxtThFZIFhQ-1200x425.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_-5OaljKSRCfHxtThFZIFhQ-1980x702.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>We can attach GraphQL data, loading management, variable state, or pure rendering in just one function call!</figcaption></figure>



<p>Without further ado, here is our first end-to-end example of how to use Recompose together with React Apollo to have a nice, concise UI with GraphQL!</p>



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



<p>The best feature of functional components is that they are stateless. This means for a certain set of props you will always get the same output, making the component predictable and easy to test. However, sometimes you still want some temporary state, and it’s best to put that outside of the component that handles rendering to keep things clean.</p>



<p>Let’s look how we can use the <code>withState</code> container from Recompose to build a React component that has both a search box and a GraphQL query that uses that search term:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">import React from &#039;react&#039;;
import { withState, pure, compose } from &#039;recompose&#039;;
import gql from &#039;graphql-tag&#039;;
import { graphql } from &#039;react-apollo&#039;;
import { Link } from &#039;react-router&#039;;

// The data prop, which is provided by the wrapper below, contains
// a `loading` key while the query is in flight, and the bookSearch
// results when they are ready
const BookSearchResultsPure = ({ data: { loading, bookSearch } }) =&gt; {
  if (loading) {
    return &lt;div&gt;Loading&lt;/div&gt;;
  } else {
    return (
      &lt;ul&gt;
        {bookSearch.map(book =&gt;
          &lt;li key={book.id}&gt;
            &lt;Link to={`/details/${book.id}`}&gt;
              {book.title} by {book.author.name}
            &lt;/Link&gt;
          &lt;/li&gt;
        )}
      &lt;/ul&gt;
    );
  }
};

// The `graphql` wrapper executes a GraphQL query and makes the results
// available on the `data` prop of the wrapped component.
//
// Note that if you type a search field and then hit backspace, the
// Apollo cache kicks in and no actual data loading is done.
const data = graphql(gql`
  query BookSearchQuery($keyword: String!) {
    bookSearch(keyword: $keyword) {
      id
      image
      title
      author {
        id
        name
      }
    }
  }
`, {
  // The variable $keyword for the query is computed from the
  // React props passed to this container.
  options: (props) =&gt; ({
    variables: { keyword: props.keyword },
  }),
});

// Attach the data HoC to the pure component
const BookSearchResults = compose(
  data,
  pure,
)(BookSearchResultsPure);

// Use recompose to keep the state of the input so that we
// can use functional component syntax
const keyword = withState(&#039;keyword&#039;, &#039;setKeyword&#039;, &#039;&#039;);

const BookSearchPure = ({ keyword, setKeyword }) =&gt; (
  &lt;div&gt;
    &lt;input
      type=&quot;text&quot;
      value={ keyword }
      onChange={(e) =&gt; setKeyword(e.target.value)}
    /&gt;

    &lt;BookSearchResults keyword={keyword} /&gt;
  &lt;/div&gt;
);

// Attach the state to the pure component
const BookSearch = compose(
  keyword,
  pure,
)(BookSearchPure);

export default BookSearch;</code></pre>



<p>One nice side effect is that since we are keeping all of the state and data loading outside of the component, we can drop in the&nbsp;<code>pure</code>&nbsp;mix-in everywhere to make sure our components don’t rerender when they don’t need to.</p>



<p>In the above code snippet, all of our concerns are very nicely separated through the React component paradigm. We have two components for rendering HTML, one for keeping track of the search box state, and one for data loading. We can test and inspect each one separately.</p>



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



<p>One thing that’s not so nice about the <code>BookSearchResultsPure</code> component above is that it has an if statement with multiple returns. This means you have to interpret that logic in your mind to see what the result might look like. We could also use an HoC to flatten this out:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">import React from &#039;react&#039;;
import { pure, branch, renderComponent, compose } from &#039;recompose&#039;;
import gql from &#039;graphql-tag&#039;;
import { graphql } from &#039;react-apollo&#039;;
import { Link } from &#039;react-router&#039;;

// Define a very basic loading state component - you could make this
// a nice animation or something
const Loading = () =&gt; (
  &lt;div&gt;Loading&lt;/div&gt;
);

// Define an HoC that displays the Loading component instead of the
// wrapped component when props.data.loading is true
const displayLoadingState = branch(
  (props) =&gt; props.data.loading,
  renderComponent(Loading),
);

// The pure component that renders UI
const BookSearchResultsPure = ({ data: { bookSearch } }) =&gt; (
  &lt;ul&gt;
    {bookSearch.map(book =&gt;
      &lt;li key={book.id}&gt;
        &lt;Link to={`/details/${book.id}`}&gt;
          {book.title} by {book.author.name}
        &lt;/Link&gt;
      &lt;/li&gt;
    )}
  &lt;/ul&gt;
);

// The GraphQL query wrapper, provides a data prop with a loading
// field on it
const data = graphql(gql`
  query BookSearchQuery($keyword: String!) {
    ...
  }
`, {
  options: ({ keyword }) =&gt; ({ variables: { keyword } }),
});

// Put everything together!
const BookSearchResults = compose(
  data,
  displayLoadingState,
  pure,
)(BookSearchResultsPure);</code></pre>



<p>Now, we can very easily share a common&nbsp;<code>loading</code>&nbsp;component between all of our UI that uses data from React-Apollo, and the logic is contained in a separate chunk that isn’t obscuring the structure of our pure component!</p>



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



<p>The&nbsp;<code>react-apollo</code>&nbsp;API was designed to be the best way to pull GraphQL data into the props of a React component. Combined with a library like Recompose, it gives you an incredibly powerful and flexible way to declaratively connect server-side data to your react components while keeping them pure.</p>



<p><a href="https://medium.com/u/6d7ee7c0b225?source=post_page-----8b9e302dea51----------------------" target="_blank" rel="noreferrer noopener">Abhi Aiyer&nbsp;</a>has already written a great follow-up about how to use Recompose to work nicely with mutations:<a href="https://medium.com/front-end-developers/how-i-write-mutations-in-apollo-w-recompose-1c0ab06ef4ea" target="_blank" rel="noreferrer noopener">How I write Mutations in Apollo w/ RecomposeSince Sashko Stubailo launched his post about Apollo + Recompose, which is a great blog post by the way, I wanted to show everyone how I…medium.com</a></p>



<p>Thanks Abhi! And if anyone else has great ideas about how to use Apollo and Recompose together, please let me know in the responses!</p>



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



<p><em>Want to work full-time on GraphQL technology, collaborate with the open source community, and write articles like these? We’re actively hiring for a variety of positions!&nbsp;</em><a href="http://jobs.meteor.com/" target="_blank" rel="noreferrer noopener"><em>Check them out.</em></a></p>


Simplify your React components with Apollo and Recompose


<p>In my&nbsp;<a href="https://dev-blog.apollodata.com/apollo-client-0-5-f1eb3f122ace" target="_blank" rel="noreferrer noopener">last blog post</a>&nbsp;I wrote about how Apollo Client had passed feature parity with Relay and was ready for production use. In the three months since, Apollo Client has become a lot&nbsp;<strong>smaller, faster and better</strong>&nbsp;thanks to hard work from our engineers and the projects’ many open source contributors. Apollo Client even has its own&nbsp;<a href="https://dev-blog.apollodata.com/apollo-client-developer-tools-ff89181ebcf" target="_blank" rel="noreferrer noopener"><strong>developer tools</strong></a>now! All of this makes me very excited and optimistic about the future of Apollo Client and our plans to make it even better.</p>



<p>In this release, we focused on three things:</p>



<ul class="wp-block-list"><li><strong>size</strong></li><li><strong>speed</strong></li><li><strong>simplicity</strong></li></ul>



<p>The goal is to make Apollo Client the fastest, smallest and simplest caching GraphQL client. To get there, we’re simplifying the core and making it incredibly fast. On top of that, we’re making Apollo Client modular so it will be easy to get just the functionality that you need in your app without any extra weight.</p>



<p>Why are we doing all of this?</p>



<ol class="wp-block-list"><li>We believe that&nbsp;<strong>data loading shouldn’t get in your way</strong>&nbsp;when you’re building an app. It should be simple, fast and work out of the box.</li><li><a href="http://radar.oreilly.com/2009/06/bing-and-google-agree-slow-pag.html" target="_blank" rel="noreferrer noopener"><strong>Page load times and fast UI really matter</strong></a>when it comes to user retention. Amazon found that just a&nbsp;<a href="http://blog.gigaspaces.com/amazon-found-every-100ms-of-latency-cost-them-1-in-sales/" target="_blank" rel="noreferrer noopener">100ms increase in page load times cost them 1%</a>&nbsp;in sales!</li></ol>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="768" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_Kk9YdWXsVU_ZEvxqur6PFQ-1024x768.jpg" alt="" class="wp-image-499" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_Kk9YdWXsVU_ZEvxqur6PFQ-1024x768.jpg 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Kk9YdWXsVU_ZEvxqur6PFQ-300x225.jpg 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Kk9YdWXsVU_ZEvxqur6PFQ-768x576.jpg 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Kk9YdWXsVU_ZEvxqur6PFQ-1536x1152.jpg 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Kk9YdWXsVU_ZEvxqur6PFQ-1200x900.jpg 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Kk9YdWXsVU_ZEvxqur6PFQ-1980x1485.jpg 1980w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Kk9YdWXsVU_ZEvxqur6PFQ.jpg 2048w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Apollo Client’s codebase after refactoring 😉</figcaption></figure>



<p>Now that you know what we’re trying to do, here’s a quick overview of the most important improvements, bug fixes and stats for Apollo Client 0.8.</p>



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



<ul class="wp-block-list"><li>By removing lodash,&nbsp;<a href="https://medium.com/u/d7533f31b8ab?source=post_page-----e8db5efc75fb----------------------" target="_blank" rel="noreferrer noopener">Caleb</a>&nbsp;managed to&nbsp;<strong>bring the gzipped bundle size down to 23.6Kb</strong>. We’re working on making it even smaller by removing more dependencies and refactoring some of the larger modules. All of this was made possible by a PR from community member&nbsp;<a href="https://github.com/jaydenseric" target="_blank" rel="noreferrer noopener">Jayden Seric</a>. He added a script which let us analyze the bundle size and produce these cool visualizations:</li></ul>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="555" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_gmeg1Vr0P8tqkvysojzdnA-1024x555.png" alt="" class="wp-image-498" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_gmeg1Vr0P8tqkvysojzdnA-1024x555.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_gmeg1Vr0P8tqkvysojzdnA-300x162.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_gmeg1Vr0P8tqkvysojzdnA-768x416.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_gmeg1Vr0P8tqkvysojzdnA-1536x832.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_gmeg1Vr0P8tqkvysojzdnA-2048x1109.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_gmeg1Vr0P8tqkvysojzdnA-1200x650.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_gmeg1Vr0P8tqkvysojzdnA-1980x1072.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>How much each part of Apollo Client contributes to its current bundle size of 23.6 Kb</figcaption></figure>



<ul class="wp-block-list"><li>Thanks to a PR by&nbsp;<a href="https://medium.com/u/627fc8b15105?source=post_page-----e8db5efc75fb----------------------" target="_blank" rel="noreferrer noopener">Kamil</a>, Apollo Client now supports&nbsp;<a href="https://medium.com/@Rich_Harris/tree-shaking-versus-dead-code-elimination-d3765df85c80#.6lzm9v299" target="_blank" rel="noreferrer noopener"><strong>tree shaking</strong></a><strong>&nbsp;and code splitting</strong>, which means that your app will be even smaller and load even faster if your build process is set up for it. You now have the choice between AMD, CommonJS and ES6 modules when you bundle Apollo Client. If you’re not sure what those are, read this&nbsp;<a href="https://medium.com/@brianleroux/es6-modules-amd-and-commonjs-c1acefbe6fc0" target="_blank" rel="noreferrer noopener">excellent post on the topic</a>.</li></ul>



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



<ul class="wp-block-list"><li>Since 0.7, Apollo Client returns&nbsp;<strong>referentially equal results</strong>&nbsp;when parts of a query result haven’t changed. That means that if you’re using it in a React component, you can use triple equals (===) instead of doing a deep comparison in your&nbsp;<code>shouldComponentUpdate</code>&nbsp;to check if the props have changed. That makes your app simpler and can speed up your UI a lot.</li><li>Apollo Client has also gotten smarter at figuring out when it needs to re-run a query against the store, and it no longer does so when an external Redux action did not affect the Apollo part of the store.</li></ul>



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



<ul class="wp-block-list"><li>We’ve introduced a&nbsp;<strong>new fragment syntax</strong>&nbsp;and deprecated the old one. You can now declare fragments anywhere to&nbsp;<a href="http://dev.apollodata.com/react/fragments.html" target="_blank" rel="noreferrer noopener">share them between modules</a>, use them to&nbsp;<a href="http://dev.apollodata.com/react/fragments.html#creating-fragments" target="_blank" rel="noreferrer noopener">generate prop types</a>, and even to&nbsp;<a href="http://dev.apollodata.com/react/fragments.html#filtering-with-fragments" target="_blank" rel="noreferrer noopener">filter props for components</a>. This was the main feature people said they missed from Relay, and now you can use it in Apollo!</li><li>We’ve added&nbsp;<strong>support for GraphQL null input values&nbsp;</strong>and optional arguments.</li><li>To make Apollo even better for our TypeScript and Visual Studio Code users, we turned on&nbsp;<strong>strict null checks</strong>,&nbsp;<strong>updated typings</strong>&nbsp;Apollo Client depends on, and&nbsp;<strong>added generic types</strong>&nbsp;to queries and mutations. That means you can now get type safety for your GraphQL results. Special thanks to&nbsp;<a href="https://medium.com/u/b1f108c2bfa9?source=post_page-----e8db5efc75fb----------------------" target="_blank" rel="noreferrer noopener">Brett Jurgens</a>&nbsp;for the PR!</li><li>We’ve also added a&nbsp;<a href="http://dev.apollodata.com/react/cache-updates.html#refetchQueries" target="_blank" rel="noreferrer noopener">more flexible way to refetch data after a mutation returns</a>. Instead of referring to the refetch query by name, you can now provide the query and variables directly, giving you a lot more freedom to handle things the way you want.</li><li>We’re now&nbsp;<strong>deep freezing query results in development mode</strong>&nbsp;to prevent developers from accidentally modifying the result object, which is supposed to be immutable.</li></ul>



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



<ul class="wp-block-list"><li>We&nbsp;<a href="https://github.com/apollographql/apollo-client/pull/1144" target="_blank" rel="noreferrer noopener">fixed a sneaky bug</a>&nbsp;that led to store inconsistencies after optimistic updates if a certain race condition occurred.</li><li>We’ve added code to make Apollo Client handle invalid server responses more gracefully.</li></ul>



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



<ul class="wp-block-list"><li>We’ve changed the way Apollo Client calculates the loading state of a query and aligned it with networkStatus, probably killing a few bugs in the process.</li><li>We’ve removed an undocumented feature in preparation for rewriting the way we update the store after a mutation. I’ll write more on that in a future blog post.</li></ul>



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



<p>We wouldn’t be where we are today without our amazing community of&nbsp;<a href="https://github.com/apollostack/apollo-client/graphs/contributors" target="_blank" rel="noreferrer noopener">contributors</a>. In the last three months you’ve helped us merge over 200 PRs and close over 200 issues on GitHub. Thanks for being awesome!</p>



<p>Do you want to become an open source contributor? We’re always looking for more contributors to work on cool GraphQL projects like this one. Make the first step today by joining our&nbsp;<a href="http://www.apollodata.com/#slack" target="_blank" rel="noreferrer noopener">Slack channel</a>,&nbsp;<a href="https://github.com/apollostack/apollo-client/issues" target="_blank" rel="noreferrer noopener">filing an issue</a>&nbsp;or&nbsp;<a href="https://github.com/apollostack/apollo-client/pulls" target="_blank" rel="noreferrer noopener">making a pull request</a>!</p>



<p>Our&nbsp;<a href="https://dev-blog.apollodata.com/save-the-date-apollo-contributor-week-eef66d09f0e6" target="_blank" rel="noreferrer noopener">first-ever Contributor Week</a>&nbsp;is starting on Feb 7th 2017, so if you’re new to Open Source, GraphQL or Apollo, that would be a great time to get started!</p>



<p>Our top priority is to build the GraphQL client that developers need, so if you have ideas, suggestions, or time to contribute, we want to hear from you. Please fill out this survey to help us improve Apollo Client:</p>



<p><a href="https://goo.gl/forms/ekX98kbJbDK55h733" target="_blank" rel="noreferrer noopener">Click here to fill out the survey</a></p>



<p>Thanks for helping us make Apollo Client more simple and elegant!</p>



<figure class="wp-block-image alignwide size-large"><img loading="lazy" decoding="async" width="1024" height="678" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_4d7Ap4Y1V0w18BVT67BIyw-1024x678.jpg" alt="" class="wp-image-497" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_4d7Ap4Y1V0w18BVT67BIyw-1024x678.jpg 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_4d7Ap4Y1V0w18BVT67BIyw-300x199.jpg 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_4d7Ap4Y1V0w18BVT67BIyw-768x509.jpg 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_4d7Ap4Y1V0w18BVT67BIyw-1536x1017.jpg 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_4d7Ap4Y1V0w18BVT67BIyw-2048x1356.jpg 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_4d7Ap4Y1V0w18BVT67BIyw-1200x795.jpg 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_4d7Ap4Y1V0w18BVT67BIyw-1980x1311.jpg 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>First completed in 1397, Kinkaku-ji was rebuilt many times before reaching its current form</figcaption></figure>



<p>Made it all the way down here? You must be really interested in GraphQL or Apollo! Did you know&nbsp;<a href="https://www.meteor.com/careers#open-source-engineer" target="_blank" rel="noreferrer noopener">we’re hiring</a>?</p>


Apollo Client 0.8


<p>When building a GraphQL application, there are benefits that come from placing your GraphQL query documents in their own files rather than inline with your view components. For example, you can get simpler editor and tooling support since the tools can look at static files instead of trying to parse application code. Also, it prevents you from&nbsp;<a href="https://dev-blog.apollodata.com/5-benefits-of-static-graphql-queries-b7fa90b0b69a#.9okwzr2dn" target="_blank" rel="noreferrer noopener">accidentally manipulating queries at runtime</a>. However, until now it has been difficult to do with our GraphQL webpack loader since there was no way to have different queries share GraphQL fragments.</p>



<p>This is a short post that describes one of the features we recently built into our Webpack loader for GraphQL documents —&nbsp;<a href="https://github.com/apollostack/graphql-tag" target="_blank" rel="noreferrer noopener">graphql-ta</a>g — that solves this problem.</p>



<p>Until now, the loader only gave you the ability to load a query from a single file, but with a recent update you can now import fragment definitions from other&nbsp;<code>.graphql</code>&nbsp;files. This makes it easy to place GraphQL documents outside of your view component definitions and share fragments across those documents. Now that the support for these files is fully featured, you can easily take advantage of built-in editor code highlighting for&nbsp;<code>.graphql</code>&nbsp;files, for example on GitHub:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="729" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_w64zULCm_M_1lXhjrDmbGg-1024x729.png" alt="" class="wp-image-487" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_w64zULCm_M_1lXhjrDmbGg-1024x729.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_w64zULCm_M_1lXhjrDmbGg-300x214.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_w64zULCm_M_1lXhjrDmbGg-768x547.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_w64zULCm_M_1lXhjrDmbGg-1536x1094.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_w64zULCm_M_1lXhjrDmbGg-1200x855.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_w64zULCm_M_1lXhjrDmbGg-1980x1410.png 1980w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_w64zULCm_M_1lXhjrDmbGg.png 2016w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>That sweet, sweet highlighting.</figcaption></figure>



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



<p>Right now, most Apollo Client apps are written by putting queries inside JavaScript template literals with a&nbsp;<code>gql</code>&nbsp;tag:</p>



<pre class="wp-block-preformatted">export const COMMENT_QUERY = gql`<br>  query Comment($repoName: String!) {<br>    …<br>  }<br>}`;const withData = graphql(COMMENT_QUERY, {<br> // options<br>});</pre>



<p>This is a reasonable approach. But, if we don’t want to place our queries inline with our React components, we can do that with&nbsp;<code>graphql-tag/loader.</code>To start using it, we edit the Webpack config so that it looks like this:</p>



<pre class="wp-block-preformatted">module.exports = {<br>  …<br>  module: {<br>    loaders: [{<br>      test: /\.(graphql|gql)$/,<br>      exclude: /node_modules/,<br>      loader: ‘graphql-tag/loader’<br>    }]<br>   },<br>  …<br>}</pre>



<p>Now, we can place our query document in a file called&nbsp;<code>CommentQuery.graphql,</code>&nbsp;and then import it within our Javascript code:</p>



<pre class="wp-block-preformatted">import COMMENT_QUERY from '../graphql/CommentQuery.graphql';</pre>



<p>When the bundle is created, Webpack will load the&nbsp;<code>.graphql</code>&nbsp;file and use the GraphQL parser in order to set&nbsp;<code>COMMENT_QUERY</code>&nbsp;to a parsed version of the query contained within the&nbsp;<code>.graphql</code>&nbsp;file. Now, let’s say that this query used a fragment spread internally:</p>



<pre class="wp-block-preformatted">query Comment($repoName: String!) {<br>  …<br>  ...CommentsPageComment<br>  …<br>}fragment CommentsPageComment {<br>  …<br>} </pre>



<p>We could put both the query definition and the fragment definition in the same file. But, if the fragment is shared across multiple queries, we’d have to define it with every query that used. Instead, we can use&nbsp;<code>graphql-tag/loader</code>’s preprocessor&nbsp;<code>#import</code>&nbsp;statement. This is what our query file would look like:</p>



<pre class="wp-block-preformatted">#import "./CommentsPageComment.graphql"query Comment($repoName: String!) {<br> …<br> ...CommentsPageComment<br> …<br>}</pre>



<p>and the file&nbsp;<code>CommentsPageComment.graphql</code>&nbsp;would contain:</p>



<pre class="wp-block-preformatted">fragment CommentsPageComment on Comment {<br>  id<br>  postedBy {<br>    login<br>    html_url<br>  }<br>  createdAt<br>  content<br>}</pre>



<p>This allows us to import&nbsp;<code>COMMENT_QUERY</code>&nbsp;as we did previously without worrying about having to import the fragment separately within our Javascript code.</p>



<p>That’s all you need to understand to start using&nbsp;<code>graphql-tag/loader</code>&nbsp;in your projects. If you’d like to see an example, you can check out how we use&nbsp;<code>.graphql</code>&nbsp;files and preprocessor&nbsp;<code>#import</code>&nbsp;statements within our example app,&nbsp;<a href="https://github.com/apollostack/GitHunt-React" target="_blank" rel="noreferrer noopener">GitHunt-React</a>.</p>



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



<p>The implementation of&nbsp;<code>graphql-tag/loader</code>&nbsp;is incredibly simple. Since it is a Webpack loader, it has to turn each&nbsp;<code>.graphql</code>&nbsp;into a bit of Javascript code that Webpack can place into the bundle it creates. Let’s consider what happens when we try to import this file:</p>



<pre class="wp-block-preformatted">#import "./CommentsPageComment.graphql"query Comment($repoName: String!) {<br> …<br> ...CommentsPageComment<br> …<br>}</pre>



<p>Notice that the first line is a GraphQL comment. This means that to an ordinary GraphQL parser, the import statement would be ignored entirely. But,&nbsp;<code>graphql-tag/loader</code>&nbsp;will process it and replace it with a&nbsp;<code>require</code>&nbsp;statement in the outputted code. It will then parse the whole document contained in this file and combine it with the definitions in the imported file. The Javascript code that&nbsp;<code>graphql-tag/loader</code>&nbsp;outputs should look like this:</p>



<pre class="wp-block-preformatted">var doc = // JSON object that represents the parsed GraphQL document<br>doc.definitions = doc.definitions<br>  .concat(<br>    require('CommentsPageComment.graphql').definitions<br>  );<br>module.exports = doc;</pre>



<p>Notice that with the&nbsp;<code>require</code>&nbsp;statement,&nbsp;<code>graphql-tag/loader</code>&nbsp;will be executed again on&nbsp;<code>CommentsPageComment.graphql</code>&nbsp;by Webpack. This makes it possible to have&nbsp;<code>#import</code>&nbsp;statements within that file too. By generating this Javascript code, the loader makes it possible to import your&nbsp;<code>.graphql</code>&nbsp;files from your Javascript code.</p>



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



<p>Importing files that contain static queries makes it possible to&nbsp;<a href="https://dev-blog.apollodata.com/5-benefits-of-static-graphql-queries-b7fa90b0b69a#.tu5h811jv" target="_blank" rel="noreferrer noopener">build all kinds of neat tools</a>, including support for persisted queries. We’ve actually built support for persisted queries on top of this improved Webpack loader, and we’ll have a blog post explaining how to use them soon!</p>


Webpack’ing your GraphQL Documents


<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>This is a guest post by&nbsp;<a href="https://www.graph.cool/" target="_blank" rel="noreferrer noopener">Graphcool</a>&nbsp;founder&nbsp;<a href="https://twitter.com/_schickling" target="_blank" rel="noreferrer noopener">Johannes Schickling</a>, who is working on making an awesome GraphQL backend platform, as well as community resources and events.</p></blockquote>



<p>GraphQL is a massive paradigm shift in software development defining a new standard for client-server communication. Apollo Client is the easiest way to use GraphQL for your own frontend applications.</p>



<p>To make it even easier possible to get started with Apollo, we’re thrilled to announce <a rel="noreferrer noopener" href="https://www.graph.cool/" target="_blank">Graphcool</a>’s newest community project: <a rel="noreferrer noopener" href="https://www.learnapollo.com/" target="_blank"><strong>Learn Apollo</strong></a><strong>.</strong></p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Learn Apollo - Introduction" width="580" height="435" src="https://www.youtube.com/embed/UNoHVLrItXQ?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



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



<p>Learn Apollo is an interactive tutorial introducing all Apollo’s core concepts. Step by step, you will build a fully-fledged application guided by practical examples. By the end of this tutorial you’ll be ready to build your own apps with Apollo.</p>



<p><em>Note: Learn Apollo is not meant as a replacement for the&nbsp;</em><a href="http://dev.apollodata.com/" target="_blank" rel="noreferrer noopener"><em>Apollo documentation</em></a><em>&nbsp;but as an easier entry point to get started.</em></p>



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



<p>Apollo can be used with many different frameworks, so when you start the tutorial we ask you to pick the&nbsp;<em>track</em>&nbsp;you want to follow. As of today you can choose React, React Native or Exponent, and we are already working on tracks for Angular and Vue.js.</p>



<p>Each track comes prepared with a example codebase (a Pokedex app) which you’ll extend throughout the tutorial as new concepts are introduced.</p>



<figure class="wp-block-image size-large"><a href="https://demo.learnapollo.com/"><img loading="lazy" decoding="async" width="668" height="526" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_-elBh3BgQnldU4YYgr2DTg.gif" alt="" class="wp-image-469"/></a><figcaption>We’re providing the UI and structure of the Pokedex app, so you can focus on learning Apollo</figcaption></figure>



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



<p>To help you focus entirely on using Apollo in a frontend application, we’ve included a pre-configured GraphQL backend endpoint which works out of the box with every example app. Your backend can be accessed via GraphiQL or the integrated data browser. All you need to do is to authenticate with Github to get your personal GraphQL endpoint.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="478" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_4391sUODacK3eDkmW_aWbA-1024x478.gif" alt="" class="wp-image-470" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_4391sUODacK3eDkmW_aWbA-1024x478.gif 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_4391sUODacK3eDkmW_aWbA-300x140.gif 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_4391sUODacK3eDkmW_aWbA-768x358.gif 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>After authenticating via Github you’ll get a pre-configured GraphQL endpoint</figcaption></figure>



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



<p>After the&nbsp;<a href="https://twitter.com/LearnRelay/status/786639860744482816" target="_blank" rel="noreferrer noopener">successful launch of Learn Relay</a>&nbsp;we’re now applying the same tutorial format to other great technologies. Learn Apollo is made possible by great contributions from our amazing community. The entire tutorial and all its resources are open source and&nbsp;<a href="https://github.com/learnapollo" target="_blank" rel="noreferrer noopener">available on Github</a>.</p>



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



<p>To make Learn Apollo as useful as possible, we are looking forward to create tracks for all major technologies making Apollo as approachable as possible for all frontend developers.</p>



<p>If your favorite technology (Angular, Vue, iOS, Android…) is not covered yet, please go ahead and&nbsp;<a href="https://github.com/learnapollo/learnapollo/issues/new" target="_blank" rel="noreferrer noopener">request a new track by filing an issue</a>. Also, if you have any feedback or suggestions on how to improve Learn Apollo, please&nbsp;<a href="https://github.com/learnapollo/learnapollo/issues/new" target="_blank" rel="noreferrer noopener">create an issue here</a>.</p>



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



<p>We couldn’t have done Learn Apollo on our own, so a big thank you to everybody involved:&nbsp;<a href="https://medium.com/u/1d2c02c75335?source=post_page-----4787269a4747----------------------" target="_blank" rel="noreferrer noopener">Tycho Tatitscheff</a>,&nbsp;<a href="https://medium.com/u/b4a7cffadc02?source=post_page-----4787269a4747----------------------" target="_blank" rel="noreferrer noopener">Nilan Marktanner</a>,&nbsp;<a href="https://medium.com/u/803918030a60?source=post_page-----4787269a4747----------------------" target="_blank" rel="noreferrer noopener">Sashko Stubailo</a>,&nbsp;<a href="https://medium.com/u/14d61b8e085c?source=post_page-----4787269a4747----------------------" target="_blank" rel="noreferrer noopener">Julian Tapales Maxwell</a>,&nbsp;<a href="https://medium.com/u/53d22f80f3b5?source=post_page-----4787269a4747----------------------" target="_blank" rel="noreferrer noopener">Julian Bauer</a>&nbsp;and&nbsp;<a href="https://medium.com/u/ff75ba3095a6?source=post_page-----4787269a4747----------------------" target="_blank" rel="noreferrer noopener">Johannes Schickling</a>. 🙏</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="549" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_eWQHv-S7l7qFa__NTlNN0g-1024x549.png" alt="" class="wp-image-471" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_eWQHv-S7l7qFa__NTlNN0g-1024x549.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_eWQHv-S7l7qFa__NTlNN0g-300x161.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_eWQHv-S7l7qFa__NTlNN0g-768x411.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_eWQHv-S7l7qFa__NTlNN0g.png 1120w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>We hope this tutorial helps you to get started with Apollo quickly in order to use it in your next project. If you have questions about Learn Apollo or need help to get started, let’s&nbsp;<a href="http://slack.graph.cool/" target="_blank" rel="noreferrer noopener">chat</a>. 🙌</p>


Learn Apollo: Build GraphQL Apps with React, React Native or Exponent


<p>Last week I got the chance to work with&nbsp;<a href="https://medium.com/u/803918030a60?source=post_page-----ff89181ebcf----------------------" target="_blank" rel="noreferrer noopener">Sashko</a>&nbsp;and&nbsp;<a href="https://medium.com/u/228e21ff506a?source=post_page-----ff89181ebcf----------------------" target="_blank" rel="noreferrer noopener">David</a>&nbsp;on a project idea that the Apollo team has been thinking about for a while now:&nbsp;<a href="https://github.com/apollostack/apollo-client-devtools" target="_blank" rel="noreferrer noopener">Apollo Client Chrome DevTools</a>. We were able to start executing some of our ideas thanks to a company-wide engineering hack week, and today we’re excited that the first version of the DevTools is&nbsp;<a href="https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm" target="_blank" rel="noreferrer noopener">now available on the Chrome Web Store</a>, and can be used with Apollo Client version 0.5.18 and above! If you haven’t used Apollo Client before,&nbsp;<a href="http://dev.apollodata.com/" target="_blank" rel="noreferrer noopener">check it out</a>.</p>



<p>The Apollo Client Developer Tools have a&nbsp;<strong>built-in</strong>&nbsp;<strong>GraphiQL console</strong>, a&nbsp;<strong>store inspector</strong>, and a&nbsp;<strong>watched queries inspector</strong>. Read on to learn more about how all this works, and let us know if you have any ideas about how we can make these tools even better!</p>



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



<figure class="wp-block-image alignfull size-large"><img loading="lazy" decoding="async" width="1024" height="640" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_GASERXq3nBfhLoRfGUnJCw-1024x640.png" alt="" class="wp-image-462" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_GASERXq3nBfhLoRfGUnJCw-1024x640.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_GASERXq3nBfhLoRfGUnJCw-300x188.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_GASERXq3nBfhLoRfGUnJCw-768x480.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_GASERXq3nBfhLoRfGUnJCw-1200x750.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_GASERXq3nBfhLoRfGUnJCw.png 1280w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>GraphiQL integration in the Chrome devtools: query to your Server or Cache directly</figcaption></figure>



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



<p>You can now make requests against either your app’s GraphQL server or the Apollo Client cache through the Chrome developer console. The best part is that this version of GraphiQL leverages your app’s network interface, so there’s no configuration necessary — it automatically passes along the proper HTTP headers, etc. using the same logic your Apollo Client app does.</p>



<p>We decided that we wanted to put the GraphiQL IDE into the Chrome console because it’s a key player for most GraphQL developer workflows (ours included), and we wanted to make it even easier to use. Setting up GraphiQL for an app typically takes a few steps. You need to include an npm package and often customize in GraphiQL itself to pass things like authentication headers through HTTP requests. Even then, you can’t easily simulate different app states if you have complex logic for sending headers.</p>



<p>Additionally, if your client is making large queries with a lot of variables and fragments, it can be cumbersome to replicate those in the GraphiQL IDE. By putting GraphiQL in console, we can use the fact that Apollo Client already knows about your queries, and copy them into GraphiQL for you from the watched query inspector to make it easy to experiment with different modifications.</p>



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



<figure class="wp-block-image alignfull size-large"><img loading="lazy" decoding="async" width="1024" height="640" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1__YfQ67SK5M6DXaIqM6it9g-1024x640.png" alt="" class="wp-image-463" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1__YfQ67SK5M6DXaIqM6it9g-1024x640.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1__YfQ67SK5M6DXaIqM6it9g-300x188.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1__YfQ67SK5M6DXaIqM6it9g-768x480.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1__YfQ67SK5M6DXaIqM6it9g-1200x750.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1__YfQ67SK5M6DXaIqM6it9g.png 1280w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Redux store visualization in an Apollo-Client-friendly way, with key/value searching!</figcaption></figure>



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



<p>Through the Apollo Client Developer Tools, you can now easily view the state of your client-side cache and search for specific keys/values within it. Apollo Client uses Redux for the store, and while we love the Redux devtools, we found that they weren’t always useful for inspecting the state of your Apollo cache using&nbsp;<a href="https://dev-blog.apollodata.com/the-concepts-of-graphql-bc68bd819be3#.hq75qx3g5" target="_blank" rel="noreferrer noopener">our mental model of GraphQL</a>.</p>



<p>We think of the GraphQL data store as a tree, and wanted to be able to view it as such. Thus, we’ve created a way for you to very easily inspect all the objects being held in the Apollo Client cache at a given time, search through them, and traverse through their various references as if the cache were actually stored in tree form. You can continue to use the Redux devtools to see the underlying storage format.</p>



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



<figure class="wp-block-image alignfull size-large"><img loading="lazy" decoding="async" width="1024" height="640" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_08jY1TQyr661m6pQUXSGHQ-1024x640.png" alt="" class="wp-image-464" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_08jY1TQyr661m6pQUXSGHQ-1024x640.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_08jY1TQyr661m6pQUXSGHQ-300x188.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_08jY1TQyr661m6pQUXSGHQ-768x480.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_08jY1TQyr661m6pQUXSGHQ-1200x750.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_08jY1TQyr661m6pQUXSGHQ.png 1280w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Watched query inspection: view active queries with their variables and associated components</figcaption></figure>



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



<p>Finally, we’ve created a way for you to view all the queries being watched on any given page, including their loading state, what variables they’re using, and, if you’re using React, which React component they’re attached to (Angular support for this feature coming soon).</p>



<p>This feature is particularly useful for larger apps that may have multiple queries feeding data into one page. It helps you understand exactly what queries your app is requesting, and how they map to specific UI components. My favorite part of this feature is the “Run in GraphiQL” button, which will copy your query and variables directly into GraphiQL and fetch the result for you.</p>



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



<p>We’ve had a great time working on this extension so far, and are very excited to be releasing it today. There’s a lot more that can be done on this project, and we’d love to see your pull requests or feature ideas in the&nbsp;<a href="https://github.com/apollostack/apollo-client-devtools" target="_blank" rel="noreferrer noopener">project repository on Github</a>.</p>



<p><em>If you’re excited about GraphQL and interested in working on open-source full time,&nbsp;</em><a href="https://www.meteor.com/careers" target="_blank" rel="noreferrer noopener"><em>we’re hiring</em></a><em>!</em></p>


Apollo Client Developer Tools


<p><em>Guest post by Robin Ricard&nbsp;</em>(<a href="https://github.com/rricard" target="_blank" rel="noreferrer noopener">Github</a>,&nbsp;<a href="https://twitter.com/r_ricard" target="_blank" rel="noreferrer noopener">Twitter</a>,&nbsp;<a href="http://rricard.me/" target="_blank" rel="noreferrer noopener">Website</a>)<em>, community contributor to the Apollo project.</em></p>



<p>A few months ago,&nbsp;<a href="https://dev-blog.apollodata.com/@stubailo" target="_blank" rel="noreferrer noopener">Sashko Stubailo</a>&nbsp;wrote&nbsp;<a href="https://dev-blog.apollodata.com/5-benefits-of-static-graphql-queries-b7fa90b0b69a#.l39oyryt4" target="_blank" rel="noreferrer noopener">an excellent article about the benefits of static GraphQL queries</a>. After seeing that article, I immediately wanted to get that great development experience he was talking about in my own projects. Unfortunately, all of this tooling was only available for Swift and Xcode, until now…</p>



<figure class="wp-block-image alignfull size-large"><img loading="lazy" decoding="async" width="1024" height="429" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/0_YZQiz9A8jNqNXrWm-1024x429.png" alt="" class="wp-image-459" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/0_YZQiz9A8jNqNXrWm-1024x429.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/0_YZQiz9A8jNqNXrWm-300x126.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/0_YZQiz9A8jNqNXrWm-768x321.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/0_YZQiz9A8jNqNXrWm-1536x643.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/0_YZQiz9A8jNqNXrWm-1200x502.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/0_YZQiz9A8jNqNXrWm.png 1806w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>A complete development experience based on GraphQL types</figcaption></figure>



<p>Today, I’m happy to announce that a complete GraphQL developer experience for Typescript is available! (with Flow coming soon…)</p>



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



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



<p>In my latest job, I worked on a large GraphQL project where we had a lot of fragments. This rapidly became a pain to work with. We had many issues to correctly import those fragments in files scattered around the project. This made most of our fragment resolution not static at all.&nbsp;<code>&lt;a href=&quot;https://github.com/apollostack/graphql-document-collector&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;graphql-document-collector&lt;/a&gt;</code>&nbsp;has been created to solve this problem: instead of storing queries and fragments in js files, we can now store them in static graphql files around the project. The collector will gather all documents (fragments, queries, mutations, etc) found in the project and put them in a single file containing all of the project documents with their fragments auto-resolved!</p>



<p>This is usually done using a single command:</p>



<pre class="wp-block-preformatted">graphql-document-collector '**/*.graphql' &gt; documents.json</pre>



<p>This JSON file contains all of the documents you may want to use, let’s see how I would use that in my project:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">// ...
import {graphql} from &#039;react-apollo&#039;;
const graphqlDocuments = require(&#039;./documents.json&#039;);

// ...

const FeedWithData = graphql(graphqlDocuments[&#039;Feed.graphql&#039;])(Feed);

// ...</code></pre>



<p>That’s pretty straightforward; you don’t even need to use the&nbsp;<code>gql</code>&nbsp;tag. In this case,&nbsp;<code>Feed.graphql</code>&nbsp;can use fragments located in a file named&nbsp;<code>fragments/Item.graphql</code>: the collector will handle that for us. The only limitation is that you can&#8217;t have two fragments with the same name in your project.</p>



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



<p>Another issue we had was in guaranteeing the data we were accessing in our UI was corresponding to the query we just had fetched, even when we changed our queries in our codebase. Alongside our operations and fragments we added type annotations corresponding to the graphql document. Unfortunately, the annotations and the queries stopped matching each other over time. Either we forgot to report a field removal or we just misinterpreted the type from the schema, for instance, making something non-nullable that should be nullable.</p>



<p>Since GraphQL is a completely typed language and our queries are now completely static, we can now generate those annotations automatically! In order to do that in a TypeScript project, I added to&nbsp;<code>&lt;a href=&quot;https://github.com/apollostack/apollo-codegen&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;apollo-codegen&lt;/a&gt;</code>&nbsp;a generator that converts GraphQL documents and schema to typescript interfaces.</p>



<p>Let’s take this simple query with a fragment:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">fragment DescribeHero on Character {
  name
  appearsIn
}

query HeroName($episode: Episode) {
  hero(episode: $episode) {
    ...DescribeHero
  }
}</code></pre>



<p>With the following schema:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">enum Episode {
  NEWHOPE
  EMPIRE
  JEDI
}

type Character {
  id: ID!
  name: String!
  friends: [Character]
  appearsIn: [Episode]
}

type Query {
  hero(episode: Episode): Character!
}</code></pre>



<p>With those, using <code>apollo-codegen</code> for TypeScript, we can generate this annotations file:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-typescript">//  This file was automatically generated and should not be edited.

// The episodes in the Star Wars trilogy
export type Episode =
  &quot;NEWHOPE&quot; | // Star Wars Episode IV: A New Hope, released in 1977.
  &quot;EMPIRE&quot; | // Star Wars Episode V: The Empire Strikes Back, released in 1980.
  &quot;JEDI&quot;; // Star Wars Episode VI: Return of the Jedi, released in 1983.


export interface HeroNameQueryVariables {
  episode: Episode | null;
}

export interface HeroNameQuery {
  hero: DescribeHeroFragment;
}

export interface DescribeHeroFragment {
  name: string;
  appearsIn: Array&lt; Episode | null &gt;;
}</code></pre>



<p>All you have to do is pull your schema with an introspection query from your server:</p>



<pre class="wp-block-preformatted">apollo-codegen download <a href="http://localhost:8080/graphql" target="_blank" rel="noreferrer noopener">http://localhost:8080/graphql</a> \<br>  --output schema.json</pre>



<p>Once you have the schema, generate the annotations:</p>



<pre class="wp-block-preformatted">apollo-codegen generate **/*.graphql \<br>  --schema schema.json \<br>  --target ts \<br>  --output schema.ts</pre>



<p>You can now import and use those annotations in your codebase to ensure your GraphQL results are used safely. For instance, now, if I try to type this:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-typescript">import {
  HeroNameQueryVariables,
  HeroNameQuery,
} from &#039;./schema&#039;;

// ...

const variables: HeroNameQueryVariables = {
  episode: &#039;JARJAR&#039;,
};
// [ts] Type &#039;{ episode: &quot;JARJAR&quot;; }&#039; is not assignable to type &#039;HeroNameQueryVariables&#039;.
//      Types of property &#039;episode&#039; are incompatible.
//      Type &#039;&quot;JARJAR&quot;&#039; is not assignable to type &#039;Episode&#039;.

client.query({
  query: graphqlDocuments[&#039;DescribeHero.graphql&#039;],
  variables,
})
.then(({data}: {data: HeroNameQuery}) =&gt; {
  data.hero.friends.forEach(friend =&gt; console.log(friend.name));
  // [ts] Property &#039;friends&#039; does not exist on type &#039;DescribeHeroFragment&#039;.
});</code></pre>



<p>I’ll can see errors telling me I made some mistakes.</p>



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



<p>Since we just downloaded a&nbsp;<code>schema.json</code>, it&#8217;s good to know we can use it to type check our GraphQL documents as well. Just use the&nbsp;<a href="https://github.com/apollostack/eslint-plugin-graphql" target="_blank" rel="noreferrer noopener">GraphQL ESLint plugin</a>&nbsp;against your&nbsp;<code>.graphql</code>&nbsp;documents! (you will need to configure your editor to consider graphql files as javascript files.) You can then write correct queries from the start without having to type them in Graph<em>i</em>QL since ESLint will show you errors directly:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">fragment DescribeHero on Character {
  name
  appearsIn
  isJarJar
  # [eslint] Cannot query field &quot;isJarJar&quot; on type &quot;Character&quot;. (graphql/template-strings)
}

query HeroName {
  hero(episode: JARJAR) {
  # [eslint] Argument &quot;episode&quot; has invalid value JARJAR.
  #          Expected type &quot;Episode&quot;, found JARJAR. (graphql/template-strings)
    ...DescribeHero
  }
}</code></pre>



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



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



<p>As you can see, your development experience can be improved using static GraphQL documents.&nbsp;For now, though, all of this requires some important setup work that can be daunting at first. We’ll work on streamlining this process soon. In the meantime, you can always try our sample repository with all of the tooling you need to try out those features:&nbsp;<code>&lt;a href=&quot;https://github.com/apollostack/typed-graphql-client-example&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;typed-graphql-client-example&lt;/a&gt;</code>. You should try to open it with VSCode to get the best out of the type system.</p>



<p>Have fun developing awesome GraphQL apps!</p>


An enhanced GraphQL developer experience with TypeScript


<p>GraphQL is a powerful API system based around declaring a schema describing the capabilities of your backend, and then querying that schema with a nice language that projects the data into the shape you want. But that’s just one way to use it. There are so many other uses for the GraphQL query language, especially for cases on the client where importing and running your whole GraphQL schema doesn’t make sense. Enter&nbsp;<a href="https://github.com/apollostack/graphql-anywhere" target="_blank" rel="noreferrer noopener"><em>graphql-anywhere</em></a>, the library that powers&nbsp;<a href="http://dev.apollodata.com/" target="_blank" rel="noreferrer noopener">Apollo Client</a>.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="464" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_sxMljQ8wgso4cG3PxufTmQ-1024x464.png" alt="" class="wp-image-449" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_sxMljQ8wgso4cG3PxufTmQ-1024x464.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_sxMljQ8wgso4cG3PxufTmQ-300x136.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_sxMljQ8wgso4cG3PxufTmQ-768x348.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_sxMljQ8wgso4cG3PxufTmQ-1536x696.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_sxMljQ8wgso4cG3PxufTmQ-1200x543.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_sxMljQ8wgso4cG3PxufTmQ.png 1908w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



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



<p>As you may recall, writing a GraphQL schema on the server requires you to declare a set of types with fields and resolvers. Since&nbsp;<em>graphql-anywhere</em>&nbsp;doesn’t use a schema, instead you can write just one resolver that is called for every field of the query:</p>



<pre class="wp-block-preformatted">(fieldName, rootValue, args, context, info) =&gt; any</pre>



<p>Then, you can run this resolver with a GraphQL query like so:</p>



<pre class="wp-block-preformatted">import graphql from 'graphql-anywhere'<br><br>graphql(resolver, query)</pre>



<p>It supports all of the features of GraphQL, including fragments, variables, directives, aliases, and more. Read the&nbsp;<a href="https://github.com/apollostack/graphql-anywhere" target="_blank" rel="noreferrer noopener">full docs</a>&nbsp;for all the boring details, but let’s look at some exciting examples!</p>



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



<p>It turns out you can do a lot of useful things with a library that traverses GraphQL queries for you.</p>



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



<p>One of the best features of GraphQL is that you only get the data you ask for. Now you can take advantage of this even without a GraphQL server, by writing just two lines of code using <em>graphql-anywhere</em> (all the other lines set up the data):</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">import gql from &#039;graphql-tag&#039;;
import graphql from &#039;graphql-anywhere&#039;;

// I don&#039;t need all this stuff!
const gitHubAPIResponse = {
  &quot;url&quot;: &quot;https://api.github.com/repos/octocat/Hello-World/issues/1347&quot;,
  &quot;title&quot;: &quot;Found a bug&quot;,
  &quot;body&quot;: &quot;I&#039;m having a problem with this.&quot;,
  &quot;user&quot;: {
    &quot;login&quot;: &quot;octocat&quot;,
    &quot;avatar_url&quot;: &quot;https://github.com/images/error/octocat_happy.gif&quot;,
    &quot;url&quot;: &quot;https://api.github.com/users/octocat&quot;,
  },
  &quot;labels&quot;: [
    {
      &quot;url&quot;: &quot;https://api.github.com/repos/octocat/Hello-World/labels/bug&quot;,
      &quot;name&quot;: &quot;bug&quot;,
      &quot;color&quot;: &quot;f29513&quot;
    }
  ],
};

// Write a query that gets just the fields we want
const query = gql`
  {
    title
    user {
      login
    }
    labels {
      name
    }
  }
`;

// Define a resolver that just returns a property
const resolver = (fieldName, root) =&gt; root[fieldName];

// Filter the data!
const result = graphql(
  resolver,
  query,
  gitHubAPIResponse
);

assert.deepEqual(result, {
  &quot;title&quot;: &quot;Found a bug&quot;,
  &quot;user&quot;: {
    &quot;login&quot;: &quot;octocat&quot;,
  },
  &quot;labels&quot;: [
    {
      &quot;name&quot;: &quot;bug&quot;,
    }
  ],
});</code></pre>



<p>You can also use this feature as part of a utility to filter props for your React components,&nbsp;<a href="http://dev.apollodata.com/react/fragments.html#filtering-with-fragments" target="_blank" rel="noreferrer noopener">as documented here</a>!</p>



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



<p>If you use&nbsp;<a href="https://github.com/apollostack/apollo-client" target="_blank" rel="noreferrer noopener">Apollo Client</a>&nbsp;already, then your Redux GraphQL data is managed for you. But if you’re using some other method to populate your Redux store and want to use GraphQL just to read from it (perhaps in preparation for getting started with a real GraphQL API on the server), you’ll need something to read that data out of the store and make it match the shape of a GraphQL query. You can use&nbsp;<em>graphql-anywhere</em>&nbsp;for that as well!</p>



<p>Here’s an example of reading from a store generated with the Redux companion <a rel="noreferrer noopener" href="https://github.com/paularmstrong/normalizr" target="_blank">Normalizr</a>:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">const data = {
  result: [1, 2],
  entities: {
    articles: {
      1: { id: 1, title: &#039;Some Article&#039;, author: 1 },
      2: { id: 2, title: &#039;Other Article&#039;, author: 1 },
    },
    users: {
      1: { id: 1, name: &#039;Dan&#039; },
    },
  },
};

const query = gql`
  {
    result {
      title
      author {
        name
      }
    }
  }
`;

const schema = {
  articles: {
    author: &#039;users&#039;,
  },
};

// This resolver is a bit more complex than others, since it has to
// correctly handle the root object, values by ID, and scalar leafs.
const resolver = (fieldName, rootValue, args, context): any =&gt; {
  if (!rootValue) {
    return context.result.map((id) =&gt; assign({}, context.entities.articles[id], {
      __typename: &#039;articles&#039;,
    }));
  }

  const typename = rootValue.__typename;
  // If this field is a reference according to the schema
  if (typename &amp;&amp; schema[typename] &amp;&amp; schema[typename][fieldName]) {
    // Get the target type, and get it from entities by ID
    const targetType: string = schema[typename][fieldName];
    return assign({}, context.entities[targetType][rootValue[fieldName]], {
      __typename: targetType,
    });
  }

  // This field is just a scalar
  return rootValue[fieldName];
};

const result = graphql(
  resolver,
  query,
  null,
  data // pass data as context since we have to access it all the time
);

// This is the non-normalized data, with only the fields we asked for in our query!
assert.deepEqual(result, {
  result: [
    {
      title: &#039;Some Article&#039;,
      author: {
        name: &#039;Dan&#039;,
      },
    },
    {
      title: &#039;Other Article&#039;,
      author: {
        name: &#039;Dan&#039;,
      },
    },
  ],
});</code></pre>



<p>Depending on the shape of your Redux store, you might need different code in the resolver.</p>



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



<p>If you follow the generally accepted style for writing React code, you probably put prop type declarations on all of your components. Since GraphQL results are deeply nested and sometimes complex, you might end up typing a lot of boilerplate if you want to be explicit about your props. What if you could just use the query you used to get the data as the validator for that prop? Now you can!</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">import { propType } from &#039;graphql-anywhere&#039;;

const CommentView = ({ comment }) =&gt; (
  &lt;div&gt;
    &lt;p&gt;{ comment.content }&lt;/p&gt;
    &lt;p&gt;Posted by { comment.postedBy.login } on {comment.createdAt }&lt;/p&gt;
  &lt;/div&gt;
);

CommentView.commentFragment = gql`
  fragment CommentView on Comment {
    id
    postedBy {
      login
    }
    createdAt
    content
  }
`;

CommentView.propTypes = {
  // Works with both queries and fragments!
  comment: propType(CommentView.commentFragment).isRequired,
};

const goodData = {
  id: &#039;asdf&#039;, postedBy: { login: &#039;sashko&#039; },
  createdAt: &#039;2016-12-05T19:32:21+00:00&#039;, content: &#039;I love GraphQL!&#039;,
};

&lt;CommentView comment={goodData} /&gt; // OK

const badData = {
  id: &#039;asdf&#039;,
  createdAt: &#039;2016-12-05T19:32:21+00:00&#039;, content: &#039;I love GraphQL!&#039;,
};

&lt;CommentView comment={badData} /&gt; // PropType error! postedBy missing.</code></pre>



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



<p>So at this point we’ve seen that we can use&nbsp;<em>graphql-anywhere</em>&nbsp;for three things you need to do in almost every app: filtering, denormalization, and argument validation. Since you can use the same GraphQL query or fragment to do all of these things at once, that makes it a pretty convenient technology to work with.</p>



<h2 class="wp-block-heading" id="7da9"><a href="#writing-your-own-utilities" aria-hidden="true" class="aal_anchor" id="writing-your-own-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>Writing your own utilities</h2>



<p>The execution process of a query using the&nbsp;<em>graphql-anywhere</em>&nbsp;library is similar to regular GraphQL, except there is no type information and it doesn’t support async data loading (since it’s designed for the client). Basically, the resolver is called once for every field on the query with the arguments provided, and the result from that field is passed into any children as the&nbsp;<em>rootValue</em>.</p>



<p>Because there is no schema involved, we can’t have separate resolvers for different types and fields. Instead, we get the&nbsp;<em>fieldName</em>&nbsp;as an argument, and we can pass down type information in an ad-hoc way through the root value. The first step to designing your&nbsp;<em>graphql-anywhere&nbsp;</em>utility is to ask: what should the root value contain? Since that’s the information passed down to the children, which powers the recursive nature of GraphQL, it’s the core consideration.</p>



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



<p>Want to work on tools like this? Contribute on GitHub or&nbsp;<a href="https://jobs.lever.co/meteor/5e11e6cf-5303-4c12-a3e7-11e5f8da4be1" target="_blank" rel="noreferrer noopener">get a job working on Apollo!</a></p>


Read from Redux, declare PropTypes, and filter data with GraphQL

Apollo Client 0.5


<p><em>Editor’s note: This post is from Guillaume Chau, an Apollo contributor who built an integration package between VueJS and Apollo. Check it out and contribute to it&nbsp;</em><a href="https://github.com/Akryum/vue-apollo" target="_blank" rel="noreferrer noopener"><em>here</em></a><em>!</em></p>



<p>As you may know, the Apollo team has built a great GraphQL client and tooling that makes it easy to use data from your server in any JavaScript app. Why not use it with another amazing technology like&nbsp;<a href="https://vuejs.org/" target="_blank" rel="noreferrer noopener">VueJS</a>?</p>



<p>Now you can do just that with&nbsp;<a href="https://github.com/Akryum/vue-apollo" target="_blank" rel="noreferrer noopener">vue-apollo</a>, an npm package I wrote that allows you to write GraphQL queries in your VueJS components while using Apollo under the hood.</p>



<figure class="wp-block-image"><img decoding="async" src="https://miro.medium.com/max/60/1*H9AANoofLqjS10Xd5TwRYw.png?q=20" alt=""/></figure>



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



<p>First, install these packages in your project folder:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>npm install — save apollo-client vue-apollo</p></blockquote>



<p>Then, you need to create an Apollo client and install the vue-apollo plugin into VueJS:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">import Vue from &#039;vue&#039;;
import App from &#039;./App.vue&#039;;
import ApolloClient, { createNetworkInterface, addTypename } from &#039;apollo-client&#039;;
import VueApollo from &#039;vue-apollo&#039;;

// Create the apollo client
const apolloClient = new ApolloClient({
  networkInterface: createNetworkInterface({
    uri: &#039;http://localhost:8080/graphql&#039;,
    transportBatching: true,
  }),
  queryTransformer: addTypename,
  dataIdFromObject: r =&gt; r.id,
});

// Install the vue plugin
// With the apollo client instance
Vue.use(VueApollo, {
  apolloClient,
});

// Start the Vue app
new Vue({
  el: &#039;#app&#039;,
  render: h =&gt; h(App)
});</code></pre>



<h3 class="wp-block-heading" id="8aba"><a href="#fetch-data-with-graphql-queries" aria-hidden="true" class="aal_anchor" id="fetch-data-with-graphql-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>Fetch data with GraphQL queries</h3>



<p>You can now use Apollo directly in your components to query your GraphQL server. Inside a component, the Apollo client can be accessed with ‘this.$apollo’:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-markup">&lt;script&gt;
export default {
  created() {
    this.$apollo.watchQuery({
      /* options */
    }).then(data =&gt; {
      console.log(data);
    });
  },
};
&lt;/script&gt;</code></pre>



<p>But the preferred way to make queries is to declare them with the ‘apollo’ option in the component definition:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-markup">&lt;script&gt;
import gql from &#039;graphql-tag&#039;;
// GraphQL query
const postsQuery = gql`
  query allPosts {
    posts {
      id
      title
      votes
      author {
        id
        firstName
        lastName
      }
    }
  }
`;
// Vue component definition
export default {
  // Local state
  data: () =&gt; ({
    // You can initialize the &#039;posts&#039; data here
    posts: [],
    loading: 0,
  }),
  // Apollo GraphQL
  apollo: {
    // Local state &#039;posts&#039; data will be updated
    // by the GraphQL query result
    posts: {
      // GraphQL query
      query: postsQuery,
      // Will update the &#039;loading&#039; attribute
      // +1 when a new query is loading
      // -1 when a query is completed
      loadingKey: &#039;loading&#039;,
    },
  },
};
&lt;/script&gt;

&lt;template&gt;
  &lt;div class=&quot;post-list&quot;&gt;
    &lt;!-- If there is one or more queries loading --&gt;
    &lt;template v-if=&quot;loading &gt; 0&quot;&gt;
      Loading
    &lt;/template&gt;
    &lt;!-- Actual view --&gt;
    &lt;template v-else&gt;
      &lt;ul&gt;
        &lt;!-- Post list items --&gt;
        &lt;li v-for=&quot;post in posts&quot; :key=&quot;post.id&quot;&gt;
          {{ post.title }} by
          {{ post.author.firstName }} {{ post.author.lastName }}
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/template&gt;
  &lt;/div&gt;
&lt;/template&gt;</code></pre>



<p>Thanks to the VueJS reactivity system, the ‘posts’ local data will be automatically updated with the GraphQL query result and your DOM updated.</p>



<p>You can initialize the corresponding data attribute in the ‘data’ hook with a default value:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">
  // Local state
  data: () =&gt; ({
    // You can initialize the &#039;posts&#039; data here
    posts: [],
    loading: 0,
  }),</code></pre>



<p>If you want to update your data automatically when another user changes it, you can poll the server with the ‘pollInterval’ option, specifying an interval duration in milliseconds:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">
  apollo: {
    posts: {
      query: postsQuery,
      loadingKey: &#039;loading&#039;,
      // Polling query
      pollInterval: 300, // ms
    },
  },</code></pre>



<h3 class="wp-block-heading" id="b1b9"><a href="#update-your-data-with-graphql-mutations" aria-hidden="true" class="aal_anchor" id="update-your-data-with-graphql-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>Update your data with GraphQL mutations</h3>



<p>In the component methods and hooks, you can use the ‘$apollo’ object to call mutations:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-markup">&lt;script&gt;
import gql from &#039;graphql-tag&#039;;
// GraphQL Mutation with one parameter
const upvoteMutation = gql`
  mutation upvotePost($postId: Int!) {
    upvotePost(postId: $postId) {
      id
      votes
    }
  }
`;
export default {
  // Attribute
  props: {
    // Post id passed down to this component
    postId: {
      type: Number,
      required: true,
    },
  },
  methods: {
    upvote() {
      // Mutation
      this.$apollo.mutate({
        mutation: upvoteMutation,
        variables: {
          postId: this.postId,
        },
      }).then(data =&gt; {
        console.log(&#039;Done upvoting.&#039;);
      });
    },
  },
};
&lt;/script&gt;

&lt;template&gt;
  &lt;button @click=&quot;upvote&quot;&gt;Upvote&lt;/button&gt;
&lt;/template&gt;</code></pre>



<p>In this component, we call the ‘upvotePost’ mutation on the GraphQL server, that returns the updated post data. That way, the Apollo cache is up-to-date, and again, thanks to VueJS reactivity system, your view should reflect the new votes count.</p>



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



<p>These are just the basics of using Apollo in your VueJS components. The more advanced features in vue-apollo are documented&nbsp;<a href="https://github.com/Akryum/vue-apollo#configuration" target="_blank" rel="noreferrer noopener">here</a>, and you can take a look at the&nbsp;<a href="https://github.com/Akryum/frontpage-vue-app" target="_blank" rel="noreferrer noopener">hello world example</a>&nbsp;to have a better idea of how things work.</p>


Use Apollo in your VueJS app


<p>One of the most powerful concepts introduced by Angular 2 is the move to a Component based architecture.</p>



<p>Components are pieces of UI and logic bound together into&nbsp;<strong>reusable</strong>&nbsp;and&nbsp;<strong>self contained</strong>&nbsp;units.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="470" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_-xibJG0BNHwXZxEvOwadIQ-1024x470.png" alt="" class="wp-image-322" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_-xibJG0BNHwXZxEvOwadIQ-1024x470.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_-xibJG0BNHwXZxEvOwadIQ-300x138.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_-xibJG0BNHwXZxEvOwadIQ-768x352.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_-xibJG0BNHwXZxEvOwadIQ.png 1140w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Components in Angular 2 and data flow between them</figcaption></figure>



<p>There are two important benefits about Components:</p>



<ol class="wp-block-list"><li>We can&nbsp;<strong>reuse</strong>&nbsp;Components throughout our apps</li><li>When something changes in the inner logic and UI of a Component, it&nbsp;<strong>shouldn’t affect</strong>&nbsp;the other Components outside of it</li></ol>



<p>Those are great benefits, but are they still valid when we start interacting with the server?</p>



<p>I’ll argue in this article that the current way of calling the server with REST API through central Angular services is not a good fit and that co-locating queries with view logic is the natural extension to the component based architecture.</p>



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



<p>Currently in Angular apps, in order to fetch data from the server, we usually import a service that handle the fetching logic for us:</p>



<pre class="wp-block-preformatted">var app = angular.module('myApp', ['ngResource']);app.factory("Friend", function($resource) {<br>  return $resource("/api/friend/:id");<br>});app.controller("FriendListItemCtrl", function($scope, Friend) {<br>  Friend.get({ id: 1 }, function(data) {<br>    $scope.friend = data;<br>  });<br>});</pre>



<p>When we moved to Component based architecture, we switched the Controller to the Component class, but in most examples out there, the way we fetch data hasn’t really changed.</p>



<pre class="wp-block-preformatted">...<br>import { Headers, Http } from '@angular/http';<br>import 'rxjs/add/operator/toPromise';import { Friend } from ‘./friend’;@Injectable()<br>export class FriendService {<br>  constructor(private http: Http) { }  getFriend(id: string): Promise&lt;Friend[]&gt; {<br>    return this.http.get(`/api/friend/${id}`)<br>                    .toPromise()<br>                    .then(res =&gt; res.json().data as Friend[]);<br>  }<br>}........................import { Component } from ‘@angular/core’;<br>import { FriendService } from ‘./friend.service’;...@Component({<br>  selector: ‘friend’,<br>  templateUrl: ......<br>})<br>export class FriendComponent implements OnInit {<br>  friend: Friend;  constructor(private friendService: FriendService){<br>    this.friendService.getFriend(id)<br>                      .then(friend =&gt; this.friend = friend);<br>  }<br>}</pre>



<p>And that introduces an issue — What happens if now we need to get different data from the server?</p>



<p><strong>Let’s look at an example of the issue,&nbsp;</strong>we’ll use this Component tree as an example:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="768" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_FBqKwp2v4wvhFEGYtUGDgg.jpg" alt="" class="wp-image-323" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_FBqKwp2v4wvhFEGYtUGDgg.jpg 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_FBqKwp2v4wvhFEGYtUGDgg-300x225.jpg 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_FBqKwp2v4wvhFEGYtUGDgg-768x576.jpg 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>and let’s say the we call a service on the parent `FriendsList` Component that fetches all the data for the Component tree.</p>



<p>Now let’s ask two simple questions:</p>



<ol class="wp-block-list"><li><strong>What happens when we need to change &lt;FriendInfo&gt; Component to display new fields?</strong></li><li><strong>How do we reuse &lt;FriendInfo&gt; Component in a different place in our app and still fetch the data it needs?</strong></li></ol>



<p><strong>For the first question</strong>, we will need to change the server endpoint to either:</p>



<ul class="wp-block-list"><li>Change the existing one to fetch the new data (might change other Components who use the same endpoint and service)</li></ul>



<p>or</p>



<ul class="wp-block-list"><li>Add a new endpoint with the new data structure we want and change the service to support the new endpoint</li></ul>



<p>In either of those solutions — Our Components are no longer&nbsp;<strong>self contained</strong></p>



<p><strong>As for the second question</strong>, we would need to create or change the service to support the new Component tree that &lt;FriendInfo&gt; in under, making it&nbsp;<strong>not reusable!</strong></p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="990" height="308" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_zOY5GybNa8FxdBiLQCa9pw.png" alt="" class="wp-image-324" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_zOY5GybNa8FxdBiLQCa9pw.png 990w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_zOY5GybNa8FxdBiLQCa9pw-300x93.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_zOY5GybNa8FxdBiLQCa9pw-768x239.png 768w" sizes="auto, (max-width: 990px) 100vw, 990px" /><figcaption>A diagram I stole from a talk (referenced at the end) that shows that if child component’s AJAX requirements has changed, it will change the whole tree and the server as well</figcaption></figure>



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



<p>So what do we need that is missing with current solutions:</p>



<ol class="wp-block-list"><li>Each Component could&nbsp;<strong>specify its own data dependencies</strong>&nbsp;without knowing a central service or another parent Component in the current render tree</li><li>When we render a tree of Components, we will&nbsp;<strong>fetch exactly</strong>&nbsp;the information that this Component tree needs which is a&nbsp;<strong>combination of the requirements of each Component</strong></li><li>We would do that in&nbsp;<strong>one single request</strong></li><li>We need an&nbsp;<strong>API layer</strong>&nbsp;that will bring us&nbsp;<strong>new fields without changing</strong>&nbsp;existing and exposing new endpoint</li></ol>



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



<p>With GraphQL, we can&nbsp;<strong>co-locate the server data requirements</strong>&nbsp;for each Component, and then use a GraphQL Client like&nbsp;<a href="https://github.com/apollostack/angular2-apollo" target="_blank" rel="noreferrer noopener">angular2-apollo</a>&nbsp;to handle the merging of those needs into one single request that gets exactly what we need.</p>



<p>Let’s have a look:</p>



<p><strong>&lt;FriendsList&gt;</strong></p>



<pre class="wp-block-preformatted">import { Component } from '@angular/core';<br>import { Angular2Apollo } from 'angular2-apollo';<br>import gql from 'graphql-tag';<br><br>const FriendsQuery = gql`<br>  query getFriends {<strong><br>    friends {<br>      id<br>    }<br></strong>  }<br>`;<br><br>@Component({<br>  selector: 'friends-list',<br>  template: `<br>    &lt;div *ngFor="let friend of friends"&gt;<br>      &lt;friends-list-item [friendId]="friend.<strong>id</strong>"&gt;&lt;/friends-list-item&gt;<br>    &lt;/div&gt;<br>  `<br>})<br>export class FriendsListComponent {<br>  friends: FriendId[];<br><br>  constructor(private apollo: Angular2Apollo) {<br>    this.friends = this.apollo.watchQuery({<br>      query: <strong>FriendsQuery</strong><br>    });<br>  }<br>}</pre>



<p><strong>&lt;FriendsListItem&gt;</strong></p>



<pre class="wp-block-preformatted">import { Component, Input } from '@angular/core';<br>import { Angular2Apollo } from 'angular2-apollo';<br>import gql from 'graphql-tag';<br><br>const FriendItemQuery = gql`<br>  query getFriendItem($id: Int!) {<br><strong>    Friend(id: $id) {<br>      id<br>      is_viewer_friend<br>      profilePicture {<br>        url      <br>      }<br>    }</strong><br>  }<br>`;<br><br>@Component({<br>  selector: 'friends-list-item',<br>  template: `<br>    &lt;div&gt;<br>      &lt;img src="friend.<strong>profilePicture.url</strong>"/&gt;<br>      &lt;friend-info [friendId]="friend.<strong>id</strong>"&gt;&lt;/friend-info&gt;<br>      {{friend.<strong>is_viewer_friend</strong>}}       <br>    &lt;/div&gt;<br>  `<br>})<br>export class FriendListItemComponent {<br>  @Input() friendId: number;<br>  friend: FriendListItem;constructor(private  apollo: Angular2Apollo) {<br>    this.friend = this.apollo.watchQuery({<br>      query: <strong>FriendItemQuery</strong>,<br>      variables: {id: this.friendId}<br>    });<br>  }  <br>}</pre>



<p><strong>&lt;FriendInfo&gt;</strong></p>



<pre class="wp-block-preformatted">import { Component, Input } from '@angular/core';<br>import { Angular2Apollo } from 'angular2-apollo';<br>import gql from 'graphql-tag';<br><br>const FriendInfoQuery = gql`<br>  query getFriendInfo($id: Int!) {<br><strong>    Friend(id: $id) {<br>      id<br>      name<br>      mutual_friends {<br>        count      <br>      }<br>    }</strong><br>  }<br>`;<br><br>@Component({<br>  selector: 'friends-info',<br>  template: `<br>    &lt;div&gt;<br>      &lt;p&gt;{{friend.<strong>name</strong>}}&lt;/p&gt;<br>      &lt;p&gt;{{friend.<strong>mutual_friends.count</strong>}} mutual friends&lt;/p&gt;<br>    &lt;/div&gt;<br>  `<br>})<br>export class FriendInfoComponent {<br>  @Input() friendId: number;<br>  friend: FriendInfo;<br><br>  constructor(private  apollo: Angular2Apollo) {<br>    this.friend = this.apollo.watchQuery({<br>      query: <strong>FriendInfoQuery</strong>,<br>      variables: {id: this.friendId}<br>    });<br>  }  <br>}</pre>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>this is of course not a full working app, I’ll add links to full implementation at the end</p></blockquote>



<p>Now let’s get back to our original questions:</p>



<ol class="wp-block-list"><li><strong>What happens when we need to change &lt;FriendInfo&gt; Component to display new fields?</strong></li><li><strong>How do we reuse &lt;FriendInfo&gt; Component in a different place in our app and still fetch the data it needs?</strong></li></ol>



<p>The answer now, is that you only need to change &lt;FriendInfo&gt; Component itself and that’s it:</p>



<pre class="wp-block-preformatted">const FriendInfoQuery = gql`<br>  query getFriendInfo($id: Int!) {<br>    Friend(id: $id) {<br>      id<br>      name<br>      mutual_friends {<br>        count      <br>      }<strong><br>      age<br></strong>    }<br>  }<br>`;<br>...<br>  template: `<br>    &lt;div&gt;<br>      &lt;p&gt;{{friend.name}}&lt;/p&gt;<br>      &lt;p&gt;{{friend.mutual_friends.count}} mutual friends&lt;/p&gt;<br>      &lt;p&gt;{{friend.<strong>age</strong>}} years old&lt;/p&gt;<br>    &lt;/div&gt;<br>  `<br>})<br>export class FriendInfoComponent {<br>...  <br>}</pre>



<p>That’s it!</p>



<ul class="wp-block-list"><li>We don’t need to change any of its parent Components</li><li>We don’t need to change the API endpoint</li><li>We can move it around and reuse it in any Component tree</li></ul>



<p>It is now a true&nbsp;<strong>reusable, self contained</strong>&nbsp;Component.</p>



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



<p>In this article I’ve tried to make the point that we should adjust our way of fetching data from the server to the new paradigms Angular 2.0 introduced.</p>



<p>It’s Important to note that those concepts and solutions are also true and valid in an&nbsp;<strong>Angular 1.x</strong>&nbsp;app that is Component based (and Apollo Client work with it as well).</p>



<p>Also, an important point is that you can use this solution alongside your regular REST services and not instead of them, add it where it fits and make sense to you.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>There are many more benefits for this type of architecture and more details about how we manage those queries and app state which I’ll touch on&nbsp;<a href="https://medium.com/apollo-stack/" target="_blank" rel="noreferrer noopener">later posts</a></p></blockquote>



<p>Here are few notable talks and resources about those techniques, some are for React but the concepts are still the same:</p>



<ul class="wp-block-list"><li><a href="https://www.youtube.com/watch?v=9sc8Pyc51uU" target="_blank" rel="noreferrer noopener">Data fetching for React applications at Facebook</a></li><li><a href="https://www.youtube.com/watch?v=qpGnPbpkcZM&amp;index=3&amp;list=PLhCf3AUOg4PgQoY_A6xWDQ70yaNtPYtZd" target="_blank" rel="noreferrer noopener">Modernize your Angular apps with GraphQL</a></li><li><a href="https://github.com/apollostack/GitHunt-angular2" target="_blank" rel="noreferrer noopener">Angular2-Githunt example</a></li></ul>



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



<p><em>To learn more about how Angular works with GraphQL, hear directly from Angular core team member Jeff Cross at the upcoming&nbsp;</em><a href="http://graphqlsummit.com/" target="_blank" rel="noreferrer noopener"><em>GraphQL Summit</em></a><em>&nbsp;in San Francisco on October 26th!</em></p>


Data management and AJAX server fetching for Angular Component based apps


<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>This post was written as a response to Kin Lane’s post,&nbsp;<a href="http://apievangelist.com/2016/08/30/graphql-seems-like-we-do-not-want-to-do-the-hard-work-of-api-design/" target="_blank" rel="noreferrer noopener">“GraphQL Seems Like We Do Not Want To Do The Hard Work Of API Design.”</a>&nbsp;Since then, Kin has published a follow-up,&nbsp;<a href="https://apievangelist.com/2016/09/02/i-am-keeping-my-mind-open-and-looking-forward-to-learning-more-about-graphql/" target="_blank" rel="noreferrer noopener">“I Am Keeping My Mind Open And Looking Forward To Learning More About GraphQL”</a></p></blockquote>



<p>I sometimes hear people talk about how GraphQL is too complicated to be a good replacement for REST. I strongly disagree, and felt it would be useful to present an alternative point of view on the topic.</p>



<p>APIs are a core building block of the Internet as we know it, and the methods by which different services interact enable a lot of the information sharing and gathering we have come to take for granted. It’s important that the technologies with which we build and use APIs are as helpful and simple as possible.</p>



<p>A little background: I have always identified as a frontend developer — a person primarily interested in delivering great products to people and sweating the details of user experience, interactions, and performance. I’ve never written a database or a high-performance messaging system, and other than an academic interest, I’m not particularly knowledgeable about how they work.</p>



<p>I’m a frontend developer. GraphQL makes my life easy.</p>



<p>This post caught my eye because it seemed like a great way to analyze how people familiar with other kinds of APIs might respond to an initial look at GraphQL, and the misconceptions that might make it seem like an overly complex solution to a simple problem. But, as anyone who has spent a lot of time working with APIs will know, getting the right data to the right place (with any technology) can be anything but simple.</p>



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



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>GraphQL seems like the numerous TEXTAREAS I’ve deployed behind the firewall to allow trusted users to write SQL to get at the database — which is just poking a hole, not very evolutionary at all.</p></blockquote>



<p>While GraphQL looks like a query language at first, I think its name might be one of the things that gets people off on the wrong foot. GraphQL is not at all like SQL:</p>



<ul class="wp-block-list"><li>You don’t connect GraphQL directly to your backend or database. It’s an API layer, just like REST.</li><li>GraphQL intentionally doesn’t include built-in filtering, sorting, computations, or joins. You carefully design all of those yourself to fit the needs of the API consumer, just like REST.</li><li>GraphQL can be layered over multiple backends and databases, without the client being aware of where the data is coming from, just like REST.</li></ul>



<p>So GraphQL is a “query language” just like URLs are the “query language” of REST—it’s a contract that describes how to tell the API server what you’re looking for.</p>



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



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>It seems like you would attract 5 very technical API developers who would love it, but then exclude 5 non-technical users.</p></blockquote>



<p>This is a very real concern whenever a new technology is introduced. Is this going to make stuff more complicated for everyone who isn’t in the know? Will it exclude people who don’t care about the finer points of graphs, nodes, and edges?</p>



<p>But the best part about GraphQL is exactly this point: It’s built from the ground up to make life easy for people who are trying to query it.</p>



<ul class="wp-block-list"><li>It’s the only API platform that comes with a fully-featured data explorer out of the box (<a href="https://github.com/graphql/graphiql" target="_blank" rel="noreferrer noopener">GraphiQL</a>). People who use technologies like Firebase are often excited about how easy it is to explore their data directly from a dashboard. GraphQL is intentionally designed to enable tools like this, and GraphiQL is only the beginning.</li><li>Even though you can easily send a GraphQL query with&nbsp;<em>curl —&nbsp;</em>no special tools needed — you don’t have to worry about the details of HTTP. Once you learn the language of GraphQL, you’re done. People often like to say that REST is “just HTTP”, but it turns out HTTP is not that simple — you have to know which method (GET? POST? PUT? PATCH? DELETE? can I even call these from my browser?) to use for each endpoint. You need to have some way of identifying which query parameters can be passed in the URL, and how they need to be serialized to avoid errors with special characters.</li><li>GraphQL always returns what you expect. Depending on how principled the REST API you’re calling is, it could give you back basically anything for every request. In GraphQL, you’ll never be surprised by what you get back from the server.</li></ul>



<p>There are a whole lot of companies out there with a whole business model of helping you describe your REST API and make it easier to get started with, because the base technology doesn’t provide these tools. To me, that’s the ultimate mark of a great tool — the language you use to interact with GraphQL is something you actually want to use directly (once you get used to it, of course), rather than immediately hiding it under layers of client abstractions.</p>



<p>If you want to try out writing some GraphQL queries, check out&nbsp;<a href="https://learngraphql.com/" target="_blank" rel="noreferrer noopener">https://learngraphql.com/</a>.</p>



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



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>GraphQL feels like a quick fix to me and not one that looks to the future</p></blockquote>



<p>The most exciting thing to me is that GraphQL has been publicly available for barely more than a year, and already a huge number of people I respect for their technical abilities and design thinking are trying to figure out ways to add it to their architecture. Part of the reason is that Facebook has been using it internally since 2012, so they’ve had a lot of time to iron out the kinks.</p>



<p>We’ve only scratched the surface of where it can go and how its clean, standardized way of describing and querying APIs can revolutionize data sharing on the internet. We’ve only seen one or two great tools extracted from this absolute gold mine of possibilities. Where REST was an ad-hoc philosophy that spawned many incompatible ways to describe, build, and consume APIs, GraphQL is a well-specified standard designed from the ground up to enable people to easily describe, understand, and retrieve their data with a shared language.</p>



<p>That’s why we spend so much time at&nbsp;<a href="https://medium.com/apollo-stack" target="_blank" rel="noreferrer noopener">Apollo</a>&nbsp;doing our best to bring GraphQL to its full potential. I hope the above has started to convince any newcomers to the technology that it’s not all just a waste of time.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="937" height="493" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_sZYgCHu2Tx4RS9USCQFuZg.png" alt="" class="wp-image-319" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_sZYgCHu2Tx4RS9USCQFuZg.png 937w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_sZYgCHu2Tx4RS9USCQFuZg-300x158.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_sZYgCHu2Tx4RS9USCQFuZg-768x404.png 768w" sizes="auto, (max-width: 937px) 100vw, 937px" /></figure>


GraphQL: The next generation of API design


<figure class="wp-block-image"><img decoding="async" src="https://miro.medium.com/max/600/1*RCeGDSIqqW68bS5kYucTvA.png" alt=""/><figcaption>best friends</figcaption></figure>



<p>One of the things that makes React wonderful is how everything you need to know about a view is all in one place. The logic behind the view, the markup it creates, and even the css is all in one file. This idea is called colocation, and it makes your application much more testable and understandable.</p>



<p>GraphQL, as a declarative query language, brings clarity to the data you are requesting and will receive on a request. When combined, GraphQL and React can give you a full picture of what is going on in a single file.</p>



<p>One of the troubles people experience when joining React and GraphQL is in finding an easy way to convert GraphQL data into the prop shape you want. In many cases, you could end up with a lot of prop reshaping logic in components, or you might need to write your UI components to match the shape of the GraphQL result.</p>



<p><strong>The goal of&nbsp;</strong><a href="http://www.apollostack.com/" target="_blank" rel="noreferrer noopener"><strong>Apollo</strong></a><strong>&nbsp;is to make working with GraphQL simple and productive, and the&nbsp;</strong><a href="https://github.com/apollostack/react-apollo" target="_blank" rel="noreferrer noopener"><strong>react-apollo project</strong></a><strong>&nbsp;tries to do the same for React integration. The new API allows you to describe your data requirements and convert the results into the shape your components need, making it an even better way to connect your app to server-side data!</strong></p>



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



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



<p>React components (stateless or class-based) are reusable and testable. The props can be defined (using PropTypes, Typescript, or Flow), and they can be rendered on the server or in a browser, or they can be compiled to native code using&nbsp;<a href="https://paper.dropbox.com/doc/GraphQL.org-outline-1EyGUhX47SAaTFWkXEIBJ" target="_blank" rel="noreferrer noopener">react native</a>.</p>



<p>Any integration with GraphQL should keep these benefits while making it clear what data you will receive from a query or change via a mutation. It should be both declarative and located next to the component.</p>



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



<p>The new version of react-apollo solves this with the&nbsp;<strong>graphql</strong>&nbsp;<a href="https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html#subscriptions-and-side-effects" target="_blank" rel="noreferrer noopener">higher order component</a>. It solves a number of difficulties related to combining GraphQL and React, which I’ll describe below.</p>



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



<p>Keeping the query close to the component allows a developer to know what data they have available in the component, as well as making changes much easier. It reduces side effects (this query is used only by this component) and makes it easy to mock and test individual components.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">const Container = graphql(gql`query GetUser { person { firstName } }`)(({ data }) =&gt; {
  const { loading, person } = data;
     
    if (loading) return &lt;div&gt;Loading...&lt;div&gt;
    return &lt;h1&gt;Hello {person.firstName}&lt;/h1&gt;
});</code></pre>



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



<p>Given that react components are so reusable, it is a lot easier if you can adjust the shape of your data to fit the needs of the component, instead of making a number of prop options or tedious logic within shared components. This is why React Apollo lets you change the shape of your props to fit the needs of your components by passing a transformer function in the <em>props</em> option to the container:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">import React, { Component } from &#039;react&#039;;
import { graphql } from &#039;react-apollo&#039;;
import gql from &#039;graphql-tag&#039;;

const GET_USER_WITH_ID = gql`
  query getUser(id: $ID!) {
    user { name }
  }
`;

const withUser = graphql(GET_USER_WITH_ID, {
  // `ownProps` are the props passed into `MyComponentWithData`
  // `data` is the result data (see above)
  props: ({ ownProps, data }) =&gt; {
    if (data.loading) return { userLoading: true };
    if (data.error) return { hasErrors: true };
    return {
      currentUser: data.user,
      refetchUser: data.refetch,
    };
  }
});

class MyComponent extends Component { ... }

const MyComponentWithData = withUser(MyComponent);

MyComponent.propTypes = {
  userLoading: React.PropTypes.boolean,
  hasErrors: React.PropTypes.boolean,
  currentUser: React.PropTypes.object,
  refetchUser: React.PropTypes.func,
};</code></pre>



<p>This is also really helpful for making sure your presentational components aren’t aware of your mutation logic. Using the same&nbsp;<em>props</em>&nbsp;option, you can create custom functions which accept the minimal arguments needed to create a mutation.</p>



<p>For example, look at this mutation from <a rel="noreferrer noopener" href="https://github.com/apollostack/GitHunt/blob/master/ui/CommentsPage.js" target="_blank">GitHunt</a>, the official Apollo example app:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">const SUBMIT_COMMENT_MUTATION = gql`
  mutation submitComment($repoFullName: String!, $commentContent: String!) {
    submitComment(repoFullName: $repoFullName, commentContent: $commentContent) {
      postedBy {
        login
        html_url
      }
      createdAt
      content
    }
  }
`;

// used to update the Comment query after the muation runs
const updateQueries = {
  Comment: (prev, { mutationResult }) =&gt; {
    const newComment = mutationResult.data.submitComment;
    return update(prev, {
      entry: { comments: { $unshift: [newComment] } },
    });
  },
};

const CommentsPageWithMutations = graphql(SUBMIT_COMMENT_MUTATION, {
  props: ({ ownProps, mutate }) ({
    submit: ({ repoFullName, commentContent }) =&gt; mutate({
      variables: { repoFullName, commentContent },
      optimisticResponse: {
        __typename: &#039;Mutation&#039;,
        submitComment: {
          __typename: &#039;Comment&#039;,
          postedBy: ownProps.currentUser,
          createdAt: +new Date,
          content: commentContent,
        },
      },
      updateQueries,
    });
  }),
})(CommentsPage);</code></pre>



<p>The CommentsPage component can now call&nbsp;<a href="https://github.com/apollostack/GitHunt/blob/react-apollo-next/ui/CommentsPage.js#L41" target="_blank" rel="noreferrer noopener"><strong>this.props.submit</strong></a>with just the name of the repo and the content of the comment. Thanks to the custom function wrapping the mutation, it will have an optimistic response and update query results without the component needing to worry about it.</p>



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



<p>Apollo Client gives a ton of power to client side GraphQL usage. It allows for passing variables, batching, polling, sharing fragments and more. The React integration also allows for skipping a full query and turning off SSR on a per query basis. You can customize these features by passing options to the&nbsp;<strong>graphql</strong>&nbsp;container. Options can be based on the component’s props, allowing you to get them from anywhere you need, including your Redux state.</p>



<p>Here’s an example of adding polling:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">const withPollingQuery = graphql(GET_USER_WITH_ID, {
  options: () =&gt; ({ pollInterval: 1000 })
});

// alternatively you can pass an object
// const withPollingQuery = graphql(GET_USER_WITH_ID, {
//   options: { pollInterval: 1000 }
// });

const MyComponentWithData = withPollingQuery(MyComponent);</code></pre>



<p>Here’s an example of skipping a query:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">const withUser = graphql(GET_USER_DATA, {
  options: (ownProps) =&gt; ({ skip: !ownProps.authenticated })
});
const MyComponentWithData = withUser(MyComponent);</code></pre>



<h3 class="wp-block-heading" id="5bd0"><a href="#server-side-rendering" aria-hidden="true" class="aal_anchor" id="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>Server-side rendering:</h3>



<p>Server side rendering in React is&nbsp;<strong>powerful,</strong>&nbsp;but is also often hard to configure. If you want to do more than render a lot of loading icons, you need to prefetch all of your data for your entire tree before you render it. This is commonly done by fetching all data at the top of your router component, then long passing that data all the way through the app tree. However, this is inefficient on the client, and hard to keep track of with a larger page / app.</p>



<p>With react-apollo, you can declare your data needs all throughout your react tree. When you get ready to render on the server, run&nbsp;<em>getDataFromTree</em>&nbsp;or&nbsp;<em>renderToStringWithData</em>&nbsp;to fetch all data throughout your tree and render your entire app! This makes your client best practices useable during server rendering; everything stays small and where it belongs.</p>



<p>Your users will thank you for the faster time to action and your site/app will benefit from better SEO support.</p>



<p>Even though you get all these benefits from server-side rendering, setting it up is super easy. This is what is looks like on the server:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">import { renderToStringWithData } from &quot;react-apollo/server&quot;

// during request
renderToStringWithData(app).then(markup =&gt; {
  // send markup to client
});</code></pre>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>The method for SSR in react-apollo isn’t hard-coded to this library. Any component with a static fetchData method can return a promise that will block the request until it is resolved. At some point in the future, the SSR methods can become aliases to a generic getDataFromTree method for all React apps and data loading methods.</p></blockquote>



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



<p>Since data is next to the component, you can mock your network requests and write unit test and integration tests for components easily. This means you can test mutation handling, changing data, and in the near future, reactive data in your component. You can check out the <a rel="noreferrer noopener" href="https://github.com/apollostack/react-apollo/tree/master/test" target="_blank">test directory of the react-apollo repo</a> for lots of examples, but here is one to showcase how this can be really easy:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">it(&#039;executes a query&#039;, (done) =&gt; {
  
  const query = gql` query people { allPeople(first: 1) { people { name } } }`;
  const data = { allPeople: { people: [ { name: &#039;Luke Skywalker&#039; } ] } };
  const networkInterface = mockNetworkInterface({ request: { query }, result: { data } });
  const client = new ApolloClient({ networkInterface });
  
  const withGraphQL = graphql(query);
  
  class Container extends Component {
    componentWillReceiveProps(props) {
      expect(props.data.loading).to.be.false;
      expect(props.data.allPeople).to.deep.equal(data.allPeople);
      done();
    }
    render() {
      return null;
    }
  };
  
  const ContainerWithData = withGraphQL(Container);
  
  mount(&lt;ApolloProvider client={client}&gt;&lt;ContainerWithData /&gt;&lt;/ApolloProvider&gt;);
  
});</code></pre>



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



<p>The full discussion around the integration can be found on the&nbsp;<a href="https://github.com/apollostack/react-apollo/pull/120" target="_blank" rel="noreferrer noopener">GitHub repo</a>&nbsp;and the docs can be found&nbsp;<a href="http://docs.apollostack.com/apollo-client/react.html" target="_blank" rel="noreferrer noopener">here</a>. I hope you get a chance to try it out and find that it makes development easier! Special thanks to&nbsp;<a href="https://medium.com/u/803918030a60?source=post_page-----6ffc0ad3fead----------------------" target="_blank" rel="noreferrer noopener">Sashko Stubailo</a>,&nbsp;<a href="https://medium.com/u/994bfa6cc0a8?source=post_page-----6ffc0ad3fead----------------------" target="_blank" rel="noreferrer noopener">Maxime Quandalle</a>,&nbsp;<a href="https://medium.com/u/9ef1d7baf4fe?source=post_page-----6ffc0ad3fead----------------------" target="_blank" rel="noreferrer noopener">Tom Coleman</a>, and all who helped with the design and testing!</p>



<p>Finally, I really wanted to make sure that the client worked great on the server, the client, and in react native. Thanks to&nbsp;<a href="https://medium.com/u/9ea60eb6fc7c?source=post_page-----6ffc0ad3fead----------------------" target="_blank" rel="noreferrer noopener">Christoph Pojer</a>&nbsp;and&nbsp;<a href="http://facebook.github.io/jest/" target="_blank" rel="noreferrer noopener">Jest</a>, tests run in all of&nbsp;<a href="https://github.com/apollostack/react-apollo/tree/master/test" target="_blank" rel="noreferrer noopener">these environments</a>&nbsp;on all commits!</p>


Seamless integration for GraphQL and React


<p>In this post, I’ll make the case for why Angular needs a best practice for communicating with the server, and why GraphQL should be that best practice.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="608" height="311" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_yTMBzO8zfEhKr4Lky6pjZQ.png" alt="" class="wp-image-290" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_yTMBzO8zfEhKr4Lky6pjZQ.png 608w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_yTMBzO8zfEhKr4Lky6pjZQ-300x153.png 300w" sizes="auto, (max-width: 608px) 100vw, 608px" /></figure>



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



<p>The Angular community is establishing best practices so that we all can benefit from making our apps more performant, easier to maintain, and more modern.</p>



<p>Some of the current best practices include composing everything into&nbsp;<a href="https://docs.angularjs.org/guide/component" target="_blank" rel="noreferrer noopener">Components</a>, using one-way data binding, lazy loading, having an immutable global state management (Redux &amp; ng-rx), and more…</p>



<p>That is all great, and means that if we will follow those best practices our apps will behave better and will look more modern…</p>



<p>…until we get to data fetching from the server.</p>



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



<p>Today, whether we are developing in a large company, consulting, or writing our own app, when we fetch data from the server we are often left with old practices that don’t address the needs of a modern app.</p>



<p>Also, we are kind of powerless and unable to decide how the data will be supplied to our apps by the server, even though the way we fetch the data to our app is at least as meaningful to the way our app behaves as how we present it.</p>



<p><strong>We should come up with best practices for data fetching that is more in line with the modern way we write our apps. These should take into consideration the following needs: data documentation, network latency, server side rendering and faster initial loading, real time communication patterns, latency compensation, and optimistic UI.</strong></p>



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



<p>REST is the current protocol we go around when we talking about app data fetching. REST has its benefits, but it was evolved in a time where the web was very different from today, when everything was about static HTML and forms and not about apps.</p>



<p>Here are the areas where REST is currently lacking:</p>



<ul class="wp-block-list"><li><strong>self documentation</strong>&nbsp;— when you send a request to a REST endpoint, there is nothing in the protocol that tells you what you are going to get (and not everyone has the resources to create a nice, updated documentation like Twitter)</li><li>REST doesn’t support&nbsp;<strong>real time data</strong>&nbsp;fetching</li><li>tough choices when designing your REST endpoint, which I’ll elaborate on below</li></ul>



<p><strong>Over-fetching</strong>&nbsp;— When one endpoint serves all the data, each Component calls it again and again. This means it serves more fields than the component needed&nbsp;<em>and</em>&nbsp;we call it many times, creating more load on the server</p>



<p><strong>Under-fetching</strong>&nbsp;— When many endpoints serve multiple resources and fields. This creates many round trips for one Component as well as complex joins on the client.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="413" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_d7JZJH23iJZONJV536q2iQ-1024x413.png" alt="" class="wp-image-291" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_d7JZJH23iJZONJV536q2iQ-1024x413.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_d7JZJH23iJZONJV536q2iQ-300x121.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_d7JZJH23iJZONJV536q2iQ-768x310.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_d7JZJH23iJZONJV536q2iQ-1200x484.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_d7JZJH23iJZONJV536q2iQ.png 1499w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>The Discourse REST API — look on the links at the bottom on the GraphQL version of this</figcaption></figure>



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



<p>So it looks like we need to rethink data fetching, just like we rethought web apps.</p>



<p>Luckily, Facebook ran into the same problem in 2012 when they needed to rethink the way they fetch data as they wrote their mobile apps on top of their existing stack.</p>



<p>They developed a solution, and open sourced it as&nbsp;<a href="http://graphql.org/" target="_blank" rel="noreferrer noopener">GraphQL</a>.</p>



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



<p>GraphQL is the new data communication protocol for modern apps.</p>



<p>The server communicates what data it can provide and the client specifies what data it needs in a&nbsp;<strong>simple, graph-like structure</strong>, in&nbsp;<strong>one round trip</strong>, no matter how deep, how complex, or how many resources the data contains.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="572" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_vPIBVnQZAlRws-aXo6kksQ-1024x572.gif" alt="" class="wp-image-292" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_vPIBVnQZAlRws-aXo6kksQ-1024x572.gif 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_vPIBVnQZAlRws-aXo6kksQ-300x168.gif 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_vPIBVnQZAlRws-aXo6kksQ-768x429.gif 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>GraphQL has built in documentation so any server can use the GraphiQL editor without the need of setup</figcaption></figure>



<p>This means: one request to get exactly the information the app needs, when it needs it.&nbsp;<strong>No over-fetching and under-fetching.</strong></p>



<p>With that, each component needs to specify its data dependencies and a client library will merge them into one request. There’s no need for a shared service with prepared fetching functions.</p>



<p>GraphQL is also not a storage engine! You can connect it to an existing REST endpoint or SQL and NoSql databases.</p>



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



<p>For all the reasons above, GraphQL is already the best practice for fetching data with React. Also, all the Facebook apps and clients use GraphQL.</p>



<p>If the Angular community embraces GraphQL as a best practice, it would open the door to sharing more tools and knowledge with the React community.</p>



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



<p>To start learning about GraphQL, take a look at these sources:</p>



<ul class="wp-block-list"><li><a href="https://medium.com/apollo-stack/why-graphql-is-the-future-3bec28193807#.3wpy7r34b" target="_blank" rel="noreferrer noopener">Why GraphQL is the future</a></li><li><a href="https://medium.com/apollo-stack/the-basics-of-graphql-in-5-links-9e1dc4cac055#.uvh5c43kt" target="_blank" rel="noreferrer noopener">The basics of GraphQL in 5 minutes</a></li><li><a href="https://medium.com/apollo-stack/discourse-in-graphql-part-1-ee1ffd8a22df#.ehvb5vgl1" target="_blank" rel="noreferrer noopener">Replacing Discourse REST API with GraphQL</a></li><li><a href="http://docs.apollostack.com/apollo-client/angular2.html" target="_blank" rel="noreferrer noopener">Angular-Apollo Docs</a>&nbsp;and&nbsp;<a href="https://github.com/apollostack/angular2-apollo" target="_blank" rel="noreferrer noopener">Github Repo</a></li><li><a href="http://www.graphql.com/articles/angular-graphql-faster-modern-apps" target="_blank" rel="noreferrer noopener">Building faster modern apps with Angular and GraphQL</a></li></ul>



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



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Join the fastest-growing GraphQL community on&nbsp;<a href="http://www.apollostack.com/#slack" target="_blank" rel="noreferrer noopener">Apollo Slack</a>&nbsp;or&nbsp;<a href="https://medium.com/apollo-stack" target="_blank" rel="noreferrer noopener">subscribe to this publication</a>&nbsp;for more articles like this and get involved!</p></blockquote>


GraphQL as a best practice for modern Angular apps?


<p>Apollo Client is a simple yet functional GraphQL client that works with any front-end and any GraphQL spec-compliant server.</p>



<p>Part of the reason developers choose to work with GraphQL, a fairly new technology, is the ease of querying nested application data while specifying only the fields that you need.</p>



<p>But hardly any application on the modern web is read-only. Handling users’ interactions often requires modifications to server-side data, keeping the browser’s state in sync, while looking fast and responsive to any actions.</p>



<p>As of a recent release, Apollo Client now provides simple tools to work with mutations while keeping store updates and rerenders efficient.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Interested in learning more about Apollo and our future goals? Ask questions during our&nbsp;<a href="https://hashnode.com/ama/with-apollo-team-ciqanu1mh002l8b53of65z3da" target="_blank" rel="noreferrer noopener">AMA on Hashnode</a>&nbsp;on July 26, 2016 — it starts at 11 AM Pacific time!</p></blockquote>



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



<p>A typical GraphQL mutation has two major parts: what mutation to call with what parameters, and what the mutation should return on its success.</p>



<p>Here is what a mutation call looks like in Apollo Client using the GraphQL mutation syntax:</p>



<pre class="wp-block-preformatted">client.mutate({<br>  mutation: gql`<br>    mutation ($text: String!, $list_id: ID!) {<br>      addNewTask(text: $text, list_id: $list_id) {<br>        id<br>        text<br>        completed<br>        createdAt<br>      }<br>    }<br>  `,<br>  variables: {<br>    text: 'walk the dog',<br>    list_id: '123',<br>  },<br>})</pre>



<p>It is a standard GraphQL mutation query string, with arguments passed via variables — just like what you would type in GraphiQL.</p>



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



<p>After a mutation has fired and the data has changed on the server, users expect all parts of the UI to reflect the changes that they have made. If we don’t need to be efficient, the easiest way to do this is simply to refetch all of the queries we are currently looking at. But if we want to transfer the minimal information over the wire to keep the client in sync, we need to manually handle the mutation return value and update our results in a fine-grained way.</p>



<p>Apollo Client now gives you a way to update any queries currently being watched with the result of a mutation. This way, you can append a newly created object to the correct location, or update some specific fields without having to refetch anything.</p>



<p>Let’s look at an example. Let’s say there is a query that fetches the list of tasks for the currently selected list:</p>



<pre class="wp-block-preformatted">query todos($list_id: ID!) {<br>  todo_list(id: $list_id) {<br>    title<br>    tasks {<br>      id<br>      text<br>      completed<br>      createdAt<br>    }<br>  }<br>}</pre>



<p>… then when you call a mutation creating a new task, you can easily update the query above using the new&nbsp;<em>updateQueries</em>&nbsp;option to&nbsp;<em>client.mutate</em>:</p>



<pre class="wp-block-preformatted">client.mutate({<br>  mutation: ...,  // same as above<br>  variables: ..., // same as above<br>  updateQueries: {<br>    todos: (previousQueryResult, { mutationResult }) =&gt; {<br>      return {<br>        title: previousQueryResult.title,<br>        tasks: [...previousQueryResult.tasks, mutationResult],<br>      };<br>    },<br>  },<br>});</pre>



<p>You can see above that updating a query result is as simple as writing a reducer function, a concept borrowed from&nbsp;<a href="http://redux.js.org/docs/basics/Reducers.html" target="_blank" rel="noreferrer noopener">Redux reducers</a>: it is a function that takes the old query result, a new object (in this case, the mutation result) and combines them together into the new query result.</p>



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



<p>The story about mutations would have ended here if the Internet operated with zero latency from any part of the world. Unfortunately, that’s not the case, which means that every communication with the server takes a significant delay.</p>



<p>Users have grown to expect an instant response to most trivial interactions with a website or an app. They expect the UI to react immediately and the changes to persist in the background.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="768" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_RouBLrh2fM1wYjx6Af8Gfg.png" alt="" class="wp-image-284" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_RouBLrh2fM1wYjx6Af8Gfg.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_RouBLrh2fM1wYjx6Af8Gfg-300x225.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_RouBLrh2fM1wYjx6Af8Gfg-768x576.png 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>Turns out, this is something an application can deliver most of the time. Whenever we create a new task in a todo list, or remove an image from a grid — we can simulate the result by guessing what will happen, and then validate the behavior with the server. The trick is to update the UI state with a fake response first, and then re-validate it once the server responses. This is what we call&nbsp;<a href="http://info.meteor.com/blog/optimistic-ui-with-meteor-latency-compensation" target="_blank" rel="noreferrer noopener">Optimistic UI</a>.</p>



<p>Apollo Client gives a very simple way to specify what is the “guesstimate” response from the server. The optimistic update is always rolled back once we find out the real result from the server, so the user sees the “fake” only until the request to the server returns or times out.</p>



<p>To specify the predicted server result, just use the new&nbsp;<em>optimisticResponse</em>&nbsp;option to&nbsp;<em>client.mutate</em>:</p>



<pre class="wp-block-preformatted">client.mutate({<br>  mutation: ...,            // same as above<br>  variables: ...,           // same as above<br>  updateQueries: ...,       // same as above<br>  optimisticResponse: {<br>    id: generatedId,<br>    text: text,             // this is one of the arguments<br>    createdAt: +(new Date), // not accurate, but close<br>    completed: false,       // assume task is created not completed<br>  },<br>});</pre>



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



<p>As you might have noticed, your reducer function always operates on the query result, and not some normalized format. But don’t be fooled! Internally, Apollo Client normalizes the results of both queries and mutation updates into a store, to get benefits such as query caching and consistency across the store. You can open up Redux dev-tools and inspect how Apollo Client’s integrates these results into the internal state format.</p>



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



<p>Apollo Client now gives application developers convenient tools to work with GraphQL mutations, taking care of maintaining the intermediate state, applying an optimistic result, and finally replacing it with a server response.</p>



<p>Importantly, Apollo Client provides a familiar interface (reducer functions) to a mechanism to keep the queries used on the screen in sync after every mutation, so you don’t have to learn about cache internals to update your screen.</p>


Mutations and Optimistic UI in Apollo Client


<p>We&nbsp;<a href="https://www.youtube.com/watch?v=xwz1aXkJLLA" target="_blank" rel="noreferrer noopener">recently reimplemented</a>&nbsp;parts of the UI for&nbsp;<a href="https://www.meteor.com/hosting" target="_blank" rel="noreferrer noopener">Meteor Galaxy</a>&nbsp;using Apollo Client and GraphQL. This gives us a great platform to experiment with performance improvements within Apollo Client and see immediate impact.</p>



<p>Now that the world considers Javascript a Real Language™ and web applications Real Software™, there is some great performance tooling for Javascript. Armed with the Chrome CPU profiler and the network requests tab, I set out to see how we could improve Apollo Client performance. As the first batch of work, we discovered and eliminated no-op re-renders and implemented a simple scheduling system for polling queries that relies on&nbsp;<a href="https://medium.com/apollo-stack/query-batching-in-apollo-63acfd859862" target="_blank" rel="noreferrer noopener">Apollo’s query batching</a>&nbsp;to reduce server roundtrips.</p>



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



<p>The Galaxy UI uses React as the view layer. Here’s what it looks like:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="589" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_Bml88jBHUiboztgMh8Fdmw-1024x589.png" alt="" class="wp-image-281" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_Bml88jBHUiboztgMh8Fdmw-1024x589.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Bml88jBHUiboztgMh8Fdmw-300x173.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Bml88jBHUiboztgMh8Fdmw-768x442.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Bml88jBHUiboztgMh8Fdmw-1200x690.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Bml88jBHUiboztgMh8Fdmw.png 1333w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>There are many components being rendered on this page but only a few important ones. We have the app list component:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="481" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_rP3GOY4EKlwCHDT7WBAffw-1024x481.png" alt="" class="wp-image-280" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_rP3GOY4EKlwCHDT7WBAffw-1024x481.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_rP3GOY4EKlwCHDT7WBAffw-300x141.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_rP3GOY4EKlwCHDT7WBAffw-768x361.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_rP3GOY4EKlwCHDT7WBAffw.png 1030w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>App list</figcaption></figure>



<p>And the user activity feed:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="306" height="338" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_hO5VujFAPNb7TlVNRKE0yA.png" alt="" class="wp-image-279" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_hO5VujFAPNb7TlVNRKE0yA.png 306w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_hO5VujFAPNb7TlVNRKE0yA-272x300.png 272w" sizes="auto, (max-width: 306px) 100vw, 306px" /><figcaption>User activity feed</figcaption></figure>



<p>Each of these components have their own GraphQL query attached via&nbsp;<a href="http://docs.apollostack.com/apollo-client/react.html" target="_blank" rel="noreferrer noopener">react-apollo</a>, and update periodically using the&nbsp;<em>pollInterval</em>&nbsp;option provided by Apollo Client. It turns out that the app list gets new information pretty frequently, whereas the information within the activity feed stays relatively stable.</p>



<p>While looking at the Chrome profiler to investigate performance, we noticed that the user activity feed component was re-rendered on each result from a polling query even if there were no changes in the data. We hypothesized we could eliminate these useless re-renders if we could prevent query observers getting notified unless the query result had actually changed.</p>



<p>It isn’t immediately clear if this helps performance. React first renders components to a virtual DOM, diffs this against the real DOM and then only applies the updates to the real DOM. So, if we were to do a deep comparison of data in order to prevent a React render, we might not end up with a significant improvement in performance since we might replace the virtual DOM diffing with a different type of deep comparison. On the other hand, the DOM representation of a data object is probably significantly more complicated than the data object itself so it is reasonable to expect some performance improvement.</p>



<p>Fortunately, the data spoke for itself. With the Chrome CPU profiler, we measured CPU usage in the Galaxy UI before the deep data comparison:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="570" height="626" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_HpvT2RnWmsFIIGAIktDvAQ.png" alt="" class="wp-image-278" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_HpvT2RnWmsFIIGAIktDvAQ.png 570w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_HpvT2RnWmsFIIGAIktDvAQ-273x300.png 273w" sizes="auto, (max-width: 570px) 100vw, 570px" /><figcaption>Before</figcaption></figure>



<p>As you can see, there are multiple React renders for our two primary components and the update for all of the items takes about 80 ms to render. With deep data comparison, we had a different story:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="880" height="628" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_Nl7-FuXm7N8XO902mB7hbw.png" alt="" class="wp-image-277" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_Nl7-FuXm7N8XO902mB7hbw.png 880w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Nl7-FuXm7N8XO902mB7hbw-300x214.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Nl7-FuXm7N8XO902mB7hbw-768x548.png 768w" sizes="auto, (max-width: 880px) 100vw, 880px" /><figcaption>After</figcaption></figure>



<p>We eliminated the rendering of the user activity feed and also reduced rendering time for the container items to about 40 ms since not all of the container had to re-render. This is a pretty simple page with only a couple of polling queries. A more complicated component tree with more queries would see even more significant performance improvements.</p>



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



<p>The app list and the user activity feed are also involved in another performance feature we added to Apollo Client.</p>



<p>If you switch tabs in Galaxy UI and then switch back to the container list tab, the app list polling query will be stopped and then started again. This means that the user activity feed polling query and the app list polling query can get pretty badly out of sync. This what that looks like in Chrome Dev Tools network tab:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="295" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_1Qa2vR2c0S7ExmRPYS7P8A-1024x295.png" alt="" class="wp-image-276" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_1Qa2vR2c0S7ExmRPYS7P8A-1024x295.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_1Qa2vR2c0S7ExmRPYS7P8A-300x86.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_1Qa2vR2c0S7ExmRPYS7P8A-768x221.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_1Qa2vR2c0S7ExmRPYS7P8A.png 1088w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Out of sync polling queries</figcaption></figure>



<p>These queries run on the same interval (5 seconds) but still fire separately with a chunk of time in between. This means that they can’t be batched together automatically with the&nbsp;<a href="https://medium.com/apollo-stack/query-batching-in-apollo-63acfd859862" target="_blank" rel="noreferrer noopener">Apollo query batching feature</a>. There are number of complicated things we could do to solve this problem. For example, we could ask app developers to pick polling intervals that are multiples of one another and attempt to align the intervals.</p>



<p>But, there’s a much simpler solution that will improve performance most of the time. Most polling queries that we have any hope of batching together probably run on the same time interval in most applications. Given this hunch, it makes sense to just fire all the queries on the same polling interval at the same time. This means that they’ll be placed in the same tick of the batcher and will be dealt with in a single server roundtrip.</p>



<p>Here’s what that it looks like in the network tab after we implemented polling interval alignment:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="174" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_Ez4Yofc7v0z1Au6y_t9W_g-1024x174.png" alt="" class="wp-image-275" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_Ez4Yofc7v0z1Au6y_t9W_g-1024x174.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Ez4Yofc7v0z1Au6y_t9W_g-300x51.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Ez4Yofc7v0z1Au6y_t9W_g-768x131.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Ez4Yofc7v0z1Au6y_t9W_g.png 1076w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>In sync polling queries</figcaption></figure>



<p>You can’t tell from this picture, but each of these requests now consists of two GraphQL queries batched together. So, with this simple change, all the queries on a page that operate on the same interval will fire in a single server roundtrip. We didn’t have to change any of the application code: Apollo Client just made it work.</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Building Galaxy with GraphQL and Apollo - Rohit Bakhshi, MDG" width="580" height="326" src="https://www.youtube.com/embed/xwz1aXkJLLA?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



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



<p>Both of these features are now available starting with version 0.4.6 of Apollo Client. This means you just need an&nbsp;<em>npm update</em>&nbsp;to eliminate no-op UI re-renders and reduce roundtrips to your server.</p>



<p>We’re now looking at improving GraphQL server side performance with data collected from&nbsp;<a href="http://www.apollostack.com/optics" target="_blank" rel="noreferrer noopener">Apollo Optics</a>&nbsp;and we’ll post about what we find. If this and other GraphQL-related stuff sounds cool, follow us on Medium!</p>


Snappier UIs with Apollo Client + GraphQL


<p>By now you’ve almost certainly heard of&nbsp;<a href="http://graphql.org/" target="_blank" rel="noreferrer noopener">GraphQL</a>, an open-source data query language and runtime. There’s been a lot of buzz about it lately — at&nbsp;<a href="https://www.react-europe.org/" target="_blank" rel="noreferrer noopener">React Europe</a>, which took place in Paris last week, there were&nbsp;<a href="https://www.youtube.com/watch?v=etax3aEe2dA" target="_blank" rel="noreferrer noopener">three</a>&nbsp;<a href="https://www.youtube.com/watch?v=ViXL0YQnioU" target="_blank" rel="noreferrer noopener">full</a>&nbsp;<a href="https://www.youtube.com/watch?v=z5rz3saDPJ8" target="_blank" rel="noreferrer noopener">talks</a>&nbsp;about GraphQL. After reading this post, you will know why.</p>



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



<p>In case this is the first time you’re hearing about GraphQL, here’s an interesting fact: You’ve been using it every day for the last few years. Facebook has more than 1 billion daily active users, and GraphQL is fundamental to how Facebook works. Using Facebook means using GraphQL.</p>



<p>Facebook has been using GraphQL since 2012 — well before it was open-sourced in July of last year. Since then, there’s been a flurry of activity, and the open-source ecosystem around GraphQL has grown rapidly.</p>



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



<p>It’s not just React developers who are getting excited about GraphQL. Angular, iOS and Android developers are equally interested in what GraphQL has to offer. Its popularity is rapidly growing, and for a good reason: GraphQL has solutions for some very real problems that developers grapple with every day. That’s why companies like&nbsp;<strong>Twitter</strong>,&nbsp;<a href="https://twitter.com/madhavn/status/725880367970848768" target="_blank" rel="noreferrer noopener"><strong>Intuit</strong></a>&nbsp;and&nbsp;<a href="https://www.drupal.org/project/graphql" target="_blank" rel="noreferrer noopener"><strong>Drupal</strong></a>&nbsp;are adopting it.</p>



<p><a rel="noreferrer noopener" href="https://get.fabric.io/" target="_blank">Fabric</a>, Twitter’s mobile development platform, just announced that they are using GraphQL:</p>



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



<p>Since we started building&nbsp;<a href="http://www.apollostack.com/" target="_blank" rel="noreferrer noopener">Apollo</a>, an open-source GraphQL data stack, we’ve been approached almost daily by companies who want to adopt GraphQL for building a new product, or even rewrite their entire production infrastructure to use GraphQL.</p>



<p>These companies are very diverse, but they have one thing in common — they all have at least one of the following:</p>



<ul class="wp-block-list"><li>They have more than one client (e.g. web + iOS)</li><li>They have a mobile client and care about latency and bandwidth</li><li>They are moving to a microservices architecture</li><li>Their REST API has gotten so complicated that it’s a significant drag on product development.</li><li>They want to decouple frontends and backends to speed up development</li></ul>



<p>Companies turn to GraphQL because they realize that REST can’t help them solve these problems, but GraphQL can. Which brings me to my next point…</p>



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



<p>Here’s the difference between REST and GraphQL in a nutshell:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="642" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_aE40t8NcePLKWKjUx-8IgA-1024x642.png" alt="" class="wp-image-223" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_aE40t8NcePLKWKjUx-8IgA-1024x642.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_aE40t8NcePLKWKjUx-8IgA-300x188.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_aE40t8NcePLKWKjUx-8IgA-768x481.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_aE40t8NcePLKWKjUx-8IgA-1536x963.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_aE40t8NcePLKWKjUx-8IgA-1200x752.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_aE40t8NcePLKWKjUx-8IgA.png 1742w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Where REST has only an ad-hoc approach, GraphQL has a clean layer of abstraction</figcaption></figure>



<p>GraphQL is the clean layer of abstraction between servers and clients that an ad-hoc REST approach will never be able to provide.</p>



<p>This post isn’t going to go into more detail about how GraphQL compares to REST, but if you’re interested in digging deeper, we’ve written several of&nbsp;<a href="https://medium.com/apollo-stack/the-basics-of-graphql-in-5-links-9e1dc4cac055" target="_blank" rel="noreferrer noopener">blog</a>&nbsp;<a href="https://medium.com/apollo-stack/how-do-i-graphql-2fcabfc94a01" target="_blank" rel="noreferrer noopener">posts</a>&nbsp;<a href="https://medium.com/apollo-stack/graphql-explained-5844742f195e" target="_blank" rel="noreferrer noopener">about</a>&nbsp;<a href="https://medium.com/apollo-stack/power-tools-for-your-api-42529706ae78" target="_blank" rel="noreferrer noopener">it</a>.</p>



<p>Don’t take it from me. Ask any of these people:</p>



<ul class="wp-block-list"><li><a href="https://blog.jacobwgillespie.com/from-rest-to-graphql-b4e95e94c26b" target="_blank" rel="noreferrer noopener">From REST to GraphQL</a>&nbsp;by&nbsp;<a href="https://medium.com/u/cae5dd810cc0?source=post_page-----3bec28193807----------------------" target="_blank" rel="noreferrer noopener">Jacob Gillespie</a></li><li><a href="https://www.youtube.com/watch?v=S0s935RKKB4" target="_blank" rel="noreferrer noopener">GraphQL at The Financial Times</a>&nbsp;by Victor Charypar</li><li><a href="https://medium.com/apollo-stack/the-business-case-for-graphql-cc7a2b93148d" target="_blank" rel="noreferrer noopener">The Business Case for GraphQL</a>&nbsp;by&nbsp;<a href="https://medium.com/u/fd3d3dea3cd3?source=post_page-----3bec28193807----------------------" target="_blank" rel="noreferrer noopener">James Baxley III</a></li><li><a href="https://voice.kadira.io/adopting-graphql-2f00dfe0fda2" target="_blank" rel="noreferrer noopener">Adopting GraphQL</a>&nbsp;by&nbsp;<a href="https://medium.com/u/233a53961f2f?source=post_page-----3bec28193807----------------------" target="_blank" rel="noreferrer noopener">Arunoda Susiripala</a></li></ul>



<p>There are many more examples out there if you care to look for them. Twitter, Intuit, and Drupal are only the beginning (and in Drupal’s case, their GraphQL module is&nbsp;<a href="http://buytaert.net/advancing-drupal-web-services" target="_blank" rel="noreferrer noopener">only the beginning</a>). I could tell you the names of at least a dozen more well-known companies who just haven’t publicly announced their GraphQL use yet. There’s no doubt about it, GraphQL is the future.</p>



<p>You might be thinking, “That’s great, but why should I care?”</p>



<h2 class="wp-block-heading" id="e06f"><a href="#4-graphql-is-great-news-for-developers" aria-hidden="true" class="aal_anchor" id="4-graphql-is-great-news-for-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>4. GraphQL is great news for developers.</h2>



<p>GraphQL brings order to the chaos:</p>



<ul class="wp-block-list"><li>Clean API between backends and frontends</li><li>Less communication overhead and fewer meetings</li><li>No more time spent writing API documentation</li><li>No more time spent trying to figure out an API</li><li>Great tooling for your API</li></ul>



<p>With GraphQL, it takes literally 5 minutes for a new engineer to learn how to use your API. And that includes the time they need to understand how to write basic GraphQL queries.</p>



<p>So whether you’re a React, Angular, Ember, iOS or Android developer: take some time to learn about GraphQL, use it in your next project and try to convince your colleagues or your boss to start adopting it. You won’t regret it.</p>



<p>The best news is — you’re not alone! There are many devs who are just discovering GraphQL, and they’re finding a very friendly and supportive community out there of other newcomers. Some are in our&nbsp;<a href="http://slack.apollostack.com/" target="_blank" rel="noreferrer noopener">Slack channel</a>, and others are joining a very active group of users and contributors in the&nbsp;<a href="https://github.com/apollostack" target="_blank" rel="noreferrer noopener">Apollo</a>&nbsp;and&nbsp;<a href="https://github.com/graphql" target="_blank" rel="noreferrer noopener">GraphQL</a>&nbsp;GitHub organizations.</p>



<p>And if you run into a member of the REST police or a professional curmudgeon, just remember this:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p><strong>A new scientific truth does not triumph by convincing its opponents and making them see the light, but rather because its opponents eventually die out, and a new generation grows up that is familiar with it.</strong></p><p>— Max Planck</p></blockquote>


Why GraphQL is the future


<p>Last week, we had a great conversation with&nbsp;<a href="https://medium.com/u/1a3894eae0ac?source=post_page-----48e8349fd75----------------------" target="_blank" rel="noreferrer noopener">Ben Strahan</a>, Paul Dowman, and&nbsp;<a href="https://medium.com/u/60ad00146009?source=post_page-----48e8349fd75----------------------" target="_blank" rel="noreferrer noopener">Martijn Walraven</a>&nbsp;about the tradeoffs between Cordova, fully native apps, and React Native in the Meteor context, and how Apollo fits into that story as a unified data loading system.</p>



<p>Check it out to hear about how all of the pieces fit together:</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Transmission - Ep 11: Apollo, GraphQL, React Native, and the future of Meteor" width="580" height="326" src="https://www.youtube.com/embed/J4ma5Qow34M?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<p>Martijn most recently finished rewriting Meteor’s Cordova integration to use native code to securely and incrementally ship new JavaScript code for production mobile apps. Now, he’s setting his sights on enabling Apollo to work well with hybrid native apps built with frameworks like React Native and NativeScript, as well as building fully native shells so that iOS and Android apps can easily integrate GraphQL data.</p>



<p>If you want to hear more from Martijn, catch his upcoming talk:</p>



<p><strong>“Progressive enhancement for mobile apps: exploring the continuum between Cordova and React Native.”</strong></p>



<p>First, on May 19th at&nbsp;<a href="http://pgday.phonegap.com/eu2016/speaker/martijnwalraven" target="_blank" rel="noreferrer noopener">PhoneGap Day EU</a>, then June 3rd at&nbsp;<a href="https://www.react-europe.org/#schedule" target="_blank" rel="noreferrer noopener">React Europe</a>. Good luck on the talks, Martijn!</p>


Apollo, GraphQL, React Native, and Meteor


<p>Today, I’m excited to announce a technical preview release of the&nbsp;<a href="https://medium.com/apollo-stack/apollo-8b7215bcab1c#.z33k0hqpt" target="_blank" rel="noreferrer noopener">Apollo data stack</a>. There is still a lot of work to do before Apollo is production ready, but we think the components we have now are a great first step.</p>



<p>Our main goal today is to enable people to get their hands dirty experimenting with the different parts, and to seek out contributors who are excited about such a project. If you check out our&nbsp;<a href="http://docs.apollostack.com/" target="_blank" rel="noreferrer noopener">new documentation</a>&nbsp;and you like the direction, please don’t hesitate to join our&nbsp;<a href="http://slack.apollostack.com/" target="_blank" rel="noreferrer noopener">Slack team</a>&nbsp;or file&nbsp;<a href="https://github.com/apollostack" target="_blank" rel="noreferrer noopener">issues or PRs on GitHub</a>.</p>



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



<p>Apollo is our vision for the data stack of the future. It includes both client and server-side components that live between your UI (React, Angular, Reduxor anything else) and your backend services (MongoDB, SQL, REST, etc), shuttling data between the two. You query your data with GraphQL, and the data stack handles the rest.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="576" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_qfcrwiwerEGyg-30BOuPkQ-2-1024x576.png" alt="" class="wp-image-176" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_qfcrwiwerEGyg-30BOuPkQ-2-1024x576.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_qfcrwiwerEGyg-30BOuPkQ-2-300x169.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_qfcrwiwerEGyg-30BOuPkQ-2-768x432.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_qfcrwiwerEGyg-30BOuPkQ-2-1536x864.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_qfcrwiwerEGyg-30BOuPkQ-2-1200x675.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_qfcrwiwerEGyg-30BOuPkQ-2.png 1920w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>An architectural diagram from the Apollo talk.</figcaption></figure>



<p>Check out our earlier&nbsp;<a href="https://medium.com/apollo-stack/apollo-8b7215bcab1c#.63eabc3il" target="_blank" rel="noreferrer noopener">post and talk about Apollo</a>&nbsp;to learn about why we are building it, what it is, and where it’s going.</p>



<p>So, what can you start using and looking at today?</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="64" height="64" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/0_2nk_66xbe36mavAb.png" alt="" class="wp-image-175"/></figure>



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



<p>First and foremost, there is now a set of packages you can install from NPM and start experimenting with. The main components are the client and server:</p>



<ol class="wp-block-list"><li><a href="http://docs.apollostack.com/apollo-client/index.html" target="_blank" rel="noreferrer noopener">Apollo Client</a>, a simple, incrementally adoptable GraphQL client built on Redux.</li><li><a href="http://docs.apollostack.com/apollo-server/index.html" target="_blank" rel="noreferrer noopener">GraphQL Tools</a>, a set of useful utilities for GraphQL-JS that enable you to declaratively specify your schema, easily mock data, and enjoy improved error reporting.</li></ol>



<p>We also have native integrations for a variety of environments:</p>



<ol class="wp-block-list"><li><a href="https://github.com/apollostack/react-apollo" target="_blank" rel="noreferrer noopener">react-apollo</a>, a React integration for the Apollo Client heavily inspired by react-redux.</li><li><a href="https://github.com/apollostack/angular2-apollo" target="_blank" rel="noreferrer noopener">angular2-apollo</a>, an integration for Angular 2.</li><li><a href="http://docs.apollostack.com/apollo-client/meteor.html" target="_blank" rel="noreferrer noopener">Meteor integration</a>, with easy conventions for working with the Meteor accounts system and web server.</li><li><a href="http://docs.apollostack.com/apollo-client/redux.html" target="_blank" rel="noreferrer noopener">Redux integration</a>, which lets you keep your client and server data in the same place, and track them with the spectacular Redux DevTools.</li></ol>



<p>If you don’t see your favorite technology here yet, don’t worry — more integrations are coming, and it’s easy to build your own on top of the core packages.</p>



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



<h2 class="wp-block-heading" id="2248"><a href="#three-example-apps-to-get-you-started" aria-hidden="true" class="aal_anchor" id="three-example-apps-to-get-you-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>Three example apps to get you started</h2>



<p>We’ve whipped together a few small example apps to show how the different parts might fit together. We’re always looking for improvements and feedback on these apps, and they’ll get better as Apollo progresses. We plan to start integrating Apollo into our own production apps in the very short term, and we’re going to bring those learnings back to the packages and examples.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="794" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_hhrEz_FUTUyoZH4Wae5cyQ-1024x794.png" alt="" class="wp-image-174" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_hhrEz_FUTUyoZH4Wae5cyQ-1024x794.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_hhrEz_FUTUyoZH4Wae5cyQ-300x233.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_hhrEz_FUTUyoZH4Wae5cyQ-768x596.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_hhrEz_FUTUyoZH4Wae5cyQ-1536x1191.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_hhrEz_FUTUyoZH4Wae5cyQ-1200x931.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_hhrEz_FUTUyoZH4Wae5cyQ.png 1550w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>The Discourse example app, linked to try.discourse.org.</figcaption></figure>



<p>Here are the three examples we have today:</p>



<ul class="wp-block-list"><li><a href="https://github.com/apollostack/apollo-demo" target="_blank" rel="noreferrer noopener">A full-stack app with a Material UI React frontend on top of Discourse</a></li><li><a href="https://github.com/apollostack/apollo-server-tutorial" target="_blank" rel="noreferrer noopener">A GraphQL server example that uses SQL, MongoDB + REST</a></li><li><a href="https://github.com/apollostack/meteor-starter-kit" target="_blank" rel="noreferrer noopener">A bare-bones Meteor starter kit</a></li></ul>



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



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



<p>In order to make it as easy as possible to try this stuff out, we’ve put together a&nbsp;<a href="http://docs.apollostack.com/" target="_blank" rel="noreferrer noopener">detailed documentation site</a>&nbsp;for the current set of packages. The APIs will change frequently at this early stage, so check back often to see what we’re cooking!</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="683" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_Nj_FdDmt2V-jrtXp1NSCPw-1024x683.png" alt="" class="wp-image-173" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_Nj_FdDmt2V-jrtXp1NSCPw-1024x683.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Nj_FdDmt2V-jrtXp1NSCPw-300x200.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Nj_FdDmt2V-jrtXp1NSCPw-768x512.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Nj_FdDmt2V-jrtXp1NSCPw-1536x1025.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Nj_FdDmt2V-jrtXp1NSCPw-1200x800.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Nj_FdDmt2V-jrtXp1NSCPw-1980x1321.png 1980w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Nj_FdDmt2V-jrtXp1NSCPw.png 2000w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>docs.apollostack.com</figcaption></figure>



<p>And to top it off, we now have&nbsp;<a href="http://www.apollostack.com/" target="_blank" rel="noreferrer noopener">a beautiful new website</a>&nbsp;to introduce people to the project!</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="598" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_mG-H0n0wM44a4v20au_9Mg-1024x598.png" alt="" class="wp-image-172" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_mG-H0n0wM44a4v20au_9Mg-1024x598.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_mG-H0n0wM44a4v20au_9Mg-300x175.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_mG-H0n0wM44a4v20au_9Mg-768x448.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_mG-H0n0wM44a4v20au_9Mg-1536x897.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_mG-H0n0wM44a4v20au_9Mg-2048x1195.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_mG-H0n0wM44a4v20au_9Mg-1200x700.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_mG-H0n0wM44a4v20au_9Mg-1980x1156.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>apollostack.com</figcaption></figure>



<p>For the near future, we are focused on building a full-stack solution for GraphQL that’s easy to get started with and scales as your app grows, both in the number of users and complexity of the code.</p>



<p>This whole journey started with a post called&nbsp;<a href="http://info.meteor.com/blog/reactive-graphql" target="_blank" rel="noreferrer noopener">Reactive GraphQL</a>, and we’re always keeping that goal in mind. Even though reactivity is not in the immediate plans, you can achieve it today by refetching data or mixing Meteor subscriptions with your GraphQL queries, and we plan to make this approach much better in the short term.</p>



<p><strong>Join us on Slack:&nbsp;</strong>If the projects we are working on right now sound like something you need, and you want to get started with it right away or contribute to the project,&nbsp;<a href="http://slack.apollostack.com/" target="_blank" rel="noreferrer noopener">drop us a line on Slack</a>&nbsp;and we’ll set you up.</p>



<p><strong>Follow us on Medium:&nbsp;</strong>We’re going to keep blogging about our progress with Apollo and what we learn along the way&nbsp;<a href="https://medium.com/apollo-stack" target="_blank" rel="noreferrer noopener">right here on Medium</a>. Let’s keep in touch and build the future together!</p>



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



<p><em>Big thanks to all of the contributors who have helped us get this preview together:&nbsp;</em><a href="https://medium.com/u/fd3d3dea3cd3?source=post_page-----5d005312cbd0----------------------" target="_blank" rel="noreferrer noopener"><em>James Baxley III</em></a><em>,&nbsp;</em><a href="https://medium.com/u/2a8267bb006f?source=post_page-----5d005312cbd0----------------------" target="_blank" rel="noreferrer noopener"><em>John Pinkerton</em></a><em>,&nbsp;</em><a href="https://medium.com/u/994bfa6cc0a8?source=post_page-----5d005312cbd0----------------------" target="_blank" rel="noreferrer noopener"><em>Maxime Quandalle</em></a><em>,&nbsp;</em><a href="https://medium.com/u/2237c12ffc9c?source=post_page-----5d005312cbd0----------------------" target="_blank" rel="noreferrer noopener"><em>Brady Whitten</em></a><em>,&nbsp;</em><a href="https://medium.com/u/4ef692b3f3a0?source=post_page-----5d005312cbd0----------------------" target="_blank" rel="noreferrer noopener"><em>Louis DeScioli</em></a><em>, and&nbsp;</em><a href="https://github.com/kamilkisiela" target="_blank" rel="noreferrer noopener"><em>Kamil Kisiela</em></a><em>.</em></p>


Introducing the Apollo GraphQL data stack

Apollo, the data stack for modern apps


<p>Last week in my post about converting the&nbsp;<a href="https://medium.com/apollo-stack/discourse-in-graphql-part-1-ee1ffd8a22df#.g32dvatjn" target="_blank" rel="noreferrer noopener">Discourse API to GraphQL</a>, I promised a part 2 this week. But we’re going to take a detour first and think about one answer to the question: what does it look like to cache a GraphQL result on the client? How does this relate to similar systems like Redux and Meteor?</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Welcome to&nbsp;<a href="https://medium.com/apollo-stack" target="_blank" rel="noreferrer noopener">Building Apollo</a>, a publication where we share what we’ve learned about all things GraphQL as we work on Apollo: a data stack for modern apps.</p></blockquote>



<p>Let’s think about some of the goals we might have for caching on the client:</p>



<ol class="wp-block-list"><li>Reducing the amount of data we load by using data we already have on the client</li><li>Refetching data that might have changed when we mutate the server-side data</li><li>Optimistic UI by operating on the cache directly while we wait for (2)</li><li>Pre-loading data we might want later</li></ol>



<p>This points to the need for having a relatively smart library on the client that can manage your data lifecycle so that you don’t have to.</p>



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



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



<p>Let’s remind ourselves what a GraphQL query and response looks like:</p>



<pre class="wp-block-preformatted">// The query<br>query {<br>  item(id: 1) {<br>    id<br>    stringField<br>    numberField<br>    nestedObj {<br>      id<br>      stringField<br>      numberField<br>    }<br>  }<br>}// The result<br>{<br>  item: {<br>    id: '5',<br>    stringField: 'Hello',<br>    numberField: 6,<br>    nestedObj: {<br>      id: '7',<br>      stringField: 'World',<br>      numberField: 99<br>    }<br>  }<br>}</pre>



<p>OK, so let’s think of the first thing that comes to mind when we think about reducing the amount of data loading we want to do: Let’s store the whole query result, and have the cache key be the query, or maybe a query ID.</p>



<p>This will actually already help a lot to reduce roundtrips to the server. For example, if we were looking at a particular view in our app, navigated away, then returned immediately, it’s likely that we would be interested in exactly the same result as before. I’m pretty sure that this will work well for a lot of apps.</p>



<p>This achieves goal 1, because we load less data than before. What about the others — refetching after a mutation, optimistic UI, and preloading?</p>



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



<p>Let’s say we have done a mutation that we expect will mutate the nested object in the result, the one with an ID of ‘7’. How would we refetch just that part of our object tree?</p>



<p>We’d have to work backwards and use the original query somehow, or do a new query and patch that into the response. Wouldn’t it be nice if we could just reach in and say “update field ‘stringField’ on object with ID 7”? Same goes for optimistic UI, where it is probably easiest to think in terms of fields on specific objects. What if our cache let us do that? Well, maybe it can.</p>



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



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



<p>On the server, GraphQL objects are defined using GraphQLObjectType. They have a certain set of fields. If you follow the&nbsp;<a href="https://facebook.github.io/relay/docs/graphql-object-identification.html#content" target="_blank" rel="noreferrer noopener">Relay Object Identification spec</a>, they even have IDs. Dealing with objects like this is much more useful than just having a tree-shaped blob of JSON!</p>



<p>Let’s make a basic sketch of what a cache that stores objects and fields might look like:</p>



<pre class="wp-block-preformatted">{<br>  '5': {<br>    id: '5',<br>    stringField: 'Hello',<br>    numberField: 6,<br>    nestedObj: '7'<br>  },<br>  '7': {<br>    id: '7',<br>    stringField: 'World',<br>    numberField: 99<br>  }<br>}</pre>



<p>It turns out this contains all of the information we need to reconstruct the original result given the query! It also has some nice properties:</p>



<ol class="wp-block-list"><li>It’s trivial to integrate the results of new queries into this cache, for example the result of refetching an object after a mutation.</li><li>Making an optimistic update on this data is simple — you just specify which object you want to temporarily modify, and which fields you want to set on that object. The format of the cache is simple enough to understand directly without needing special tools to manipulate it.</li></ol>



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



<p>Let’s be clear — I didn’t invent this concept, this comes straight out of how Relay’s store works, as described in&nbsp;<a href="http://hueypetersen.com/posts/2015/09/30/quick-look-at-the-relay-store/" target="_blank" rel="noreferrer noopener">this spectacular article by Huey Petersen</a>.</p>



<p>It also happens to be extremely similar to the recommendation from the&nbsp;<a href="http://redux.js.org/docs/basics/Reducers.html" target="_blank" rel="noreferrer noopener">Redux docs</a>:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>In a more complex app, you’re going to want different entities to reference each other. We suggest that you keep your state as normalized as possible, without any nesting. Keep every entity in an object stored with an ID as a key, and use IDs to reference it from other entities, or lists. Think of the app’s state as a database.</p></blockquote>



<p>Sounds like we’re really on to something! And to add even more, this is very similar to how Meteor’s client-side cache, Minimongo, is usually used, where people use tools like&nbsp;<a href="https://atmospherejs.com/reywood/publish-composite" target="_blank" rel="noreferrer noopener">publish-composite</a>&nbsp;to load tree-shaped data into a flat cache.</p>



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



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



<p>These are just the first steps, what does it look like when you expand the concept? Well, you’ll see very soon, since we are hard at work on a simple implementation of a caching GraphQL client:</p>



<ul class="wp-block-list"><li>See the&nbsp;<a href="https://github.com/apollostack/apollo-client" target="_blank" rel="noreferrer noopener">repository on GitHub</a></li><li>Read about our&nbsp;<a href="https://github.com/apollostack/apollo-client/blob/master/design.md" target="_blank" rel="noreferrer noopener">design principles</a></li></ul>



<p>It uses a cache structure very similar to the above, and stores the cache data in a Redux store to get nice features like the redux dev tools, time traveling, and optimistic UI via a transactional library like&nbsp;<a href="https://github.com/ForbesLindesay/redux-optimist" target="_blank" rel="noreferrer noopener">Redux-Optimist</a>.</p>



<p>We’re focusing on making all of the components very easy to understand, so there is no magic under the hood about how the queries are managed. You’ll be able to inspect how your query results are put into the cache, how they are read out, and how queries are diffed against the existing data to reduce unnecessary fetching.</p>



<p>Here’s a quick sneak peek, hot off the presses (literally got this working yesterday!), of what it looks like in the&nbsp;<a href="https://github.com/gaearon/redux-devtools" target="_blank" rel="noreferrer noopener">Redux devtools</a>&nbsp;when a query result arrives from the server:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="248" height="243" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_H9BS2Vp9ZK1SRuzHQwO_oQ.png" alt="" class="wp-image-131"/></figure>



<p>We’re working towards having an end-to-end demo of a real app built with our tools as soon as we can — get excited! I know some of you are wondering where you’ll get a GraphQL server; that’s the other half of what we’re up to.</p>



<p>See you next time on&nbsp;<a href="https://medium.com/apollo-stack" target="_blank" rel="noreferrer noopener">Building Apollo</a>!</p>


Frontend