Enhance customer experiences with Apollo GraphOS


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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



<p>Then</p>



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



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



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



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



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



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



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



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



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

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

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

type Currency {
   symbol: String
   name: String
}

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



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



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



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



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



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



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



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



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



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



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



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



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



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


Effortless Data Fetching: Introducing Apollo Connectors for REST APIs


<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="573" src="https://wp.apollographql.com/wp-content/uploads/2024/04/API-Days-NY-Apollo-GraphQL-Speakers-1024x573.png" alt="" class="wp-image-23618" srcset="https://wp.apollographql.com/wp-content/uploads/2024/04/API-Days-NY-Apollo-GraphQL-Speakers-1024x573.png 1024w, https://wp.apollographql.com/wp-content/uploads/2024/04/API-Days-NY-Apollo-GraphQL-Speakers-300x168.png 300w, https://wp.apollographql.com/wp-content/uploads/2024/04/API-Days-NY-Apollo-GraphQL-Speakers-768x430.png 768w, https://wp.apollographql.com/wp-content/uploads/2024/04/API-Days-NY-Apollo-GraphQL-Speakers.png 1186w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>API Days NY is a must-attend for those looking to network with API leaders and learn how top enterprises are leveraging federated GraphQL in their API platforms. As you can see from the agenda highlights below, it will be an exciting two day event.&nbsp;</p>



<ul class="wp-block-list">
<li>Our founder and CTO, Matt DeBergalis, will share his keynote &#8220;The Year Ahead for GraphQL Federation: Uniting APIs for the AI Era”</li>



<li>API leaders from Netflix, Wayfair and Apollo will present sessions on optimizing performance, creating effective api schemas and building an internal community for effective API governance</li>



<li>Apollo is offering a free workshop to guide you through building your first GraphQL query and beyond</li>



<li><a href="https://bit.ly/43IhuX4">Register to join us for a meetup &amp; happy hour</a> to meet with peer API leaders and GraphQL experts</li>
</ul>



<p>Swing by the Apollo booth to connect, and read on for more details.</p>



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



<p><em>Matt DeBergalis, Founder and CTO, Apollo GraphQL</em></p>



<p>Forget what you’ve heard about GraphQL – it’s not a REST alternative, graph database, or just for front-end developers. GraphQL is about combining the APIs you already have.</p>



<p>In this talk, you’ll learn how a federated GraphQL architecture brings a platform approach to API composition, where it fits into the API stack, and what is coming next to help teams build tomorrow’s AI products and experiences on today’s APIs.</p>



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



<p><em>Marc-André Grioux, Senior Software Engineer &amp; Author, Netflix</em></p>



<p>GraphQL is a powerful tool to enable declarative data fetching on the client and dynamic data representation on the server. This power must have an overhead. In this talk, investigate what this overhead is made of, how impactful it can be to scaling an API platform and services, and how to mitigate it as much as possible while retaining the benefits of GraphQL.</p>



<h3 class="wp-block-heading"><a href="#session-the-secrets-to-graph-success-from-inception-to-general-availability" aria-hidden="true" class="aal_anchor" id="session-the-secrets-to-graph-success-from-inception-to-general-availability"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>Session: The Secrets to Graph Success, from Inception to General Availability</strong></h3>



<p><em>Leah Hurwich-Adler, Senior Product Leader</em></p>



<p>Building an API platform for a Fortune 100 retailer, capable of handling over 600 million requests per day, requires a highly distributed ecosystem and Federated GraphQL. Drawing from firsthand experience, Leah will share insights on building an internal API community, setting up governance models, and igniting leaders&#8217; enthusiasm for your platform vision. Join this talk to uncover the keys to launching a successful GraphQL platform, through lessons that merge technology with strategic and leadership insights.</p>



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



<p><em>Derek Kuc, Principal Engineer, Apollo GraphQL</em></p>



<p>When building a GraphQL server, two main approaches exist: starting with an SDL and matching resolver logic, or generating the schema directly from code. In this talk, explore the benefits of idiomatic code-first GraphQL development, focusing on GraphQL Kotlin examples. Discover how this approach enhances developer experience and API consistency.</p>



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



<p><em>Michael Berger, Solutions Engineer, Apollo GraphQL</em></p>



<p>Use GraphQL to accelerate developer velocity by creating a composition layer for your microservices. Orchestrate data by creating a query that spans your REST APIs and delivers exactly the data your application requires. Learn how to build your first GraphQL query and why GraphQL is valuable to your microservice architecture.</p>



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



<p><a href="https://bit.ly/43IhuX4">Register to join the Apollo team, Graph Champions, and apidays attendees</a> on April 30 at 6 PM following the conference for bites and beverages at nearby restaurant The Reading Room (16 E 46th St, New York, NY 10017 &#8211; located in the Gotham Hotel)</p>



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



<p>The full conference ticket includes access to the Keynotes, Track Sessions, Workshops and Networking Breakfasts and Lunches on April 30 &amp; May 1. Email <a href="mailto:champions@apollographql.com">champions@apollographql.com</a> to learn more and request a pass.</p>


Join Us at API Days in New York City, April 30 & May 1, 2024


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



<p>GraphQL streamlines data flow between clients and services, acting as the composition layer in the middle. As businesses strive for scalable and maintainable solutions as their services grow, a federated GraphQL API is becoming the go-to architecture to meet these evolving demands.&nbsp;</p>



<p>If you&#8217;re searching for helpful beginner resources to dive into GraphQL and Apollo Federation, we&#8217;ve got you. <a href="https://www.apollographql.com/tutorials/">Odyssey</a> is Apollo&#8217;s official learning platform, where you can boost your developer skills with hands-on GraphQL tutorials and trainings.</p>



<p>Over the past year, Apollo’s Education team has helped close to 40,000 learners on their GraphQL learning journey, starting with JavaScript and Apollo Server implementations.&nbsp;</p>



<p>Because GraphQL&#8217;s potential stretches far beyond the JavaScript realm, we&#8217;ve expanded our curriculum to support three new languages: Java, .NET (C#) and TypeScript.</p>



<h3 class="wp-block-heading"><a href="#what-youll-learn-build" aria-hidden="true" class="aal_anchor" id="what-youll-learn-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 learn &amp; build</h3>



<h4 class="wp-block-heading"><a href="#getting-to-know-graphql" aria-hidden="true" class="aal_anchor" id="getting-to-know-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>Getting to know GraphQL</h4>



<p>In the first course, &#8220;Intro to GraphQL&#8221;, you&#8217;ll build the core of a music catalog API: showcasing featured playlists, listing a playlist&#8217;s tracks, and adding tracks. Along the way, you&#8217;ll learn how to:</p>



<ul class="wp-block-list">
<li>Implement a GraphQL server</li>



<li>Use an existing REST API as a data source</li>



<li>Describe the journey of a GraphQL operation from client to server and back</li>



<li>Follow best practices for writing and designing queries and mutations</li>
</ul>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="728" src="https://wp.apollographql.com/wp-content/uploads/2024/03/graphql-server-request-response-1024x728.png" alt="" class="wp-image-23476" srcset="https://wp.apollographql.com/wp-content/uploads/2024/03/graphql-server-request-response-1024x728.png 1024w, https://wp.apollographql.com/wp-content/uploads/2024/03/graphql-server-request-response-300x213.png 300w, https://wp.apollographql.com/wp-content/uploads/2024/03/graphql-server-request-response-768x546.png 768w, https://wp.apollographql.com/wp-content/uploads/2024/03/graphql-server-request-response-1536x1093.png 1536w, https://wp.apollographql.com/wp-content/uploads/2024/03/graphql-server-request-response-2048x1457.png 2048w, https://wp.apollographql.com/wp-content/uploads/2024/03/graphql-server-request-response-1200x854.png 1200w, https://wp.apollographql.com/wp-content/uploads/2024/03/graphql-server-request-response-1980x1409.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



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



<p>In the second course, you&#8217;ll learn about federation and add a new domain to your GraphQL API. You&#8217;ll learn how to:</p>



<ul class="wp-block-list">
<li>Describe the architecture of a supergraph (subgraphs and the router)</li>



<li>Create entities in a federated schema</li>



<li>Explore graph insights and schema delivery</li>



<li>Ship features safely using the Rover CLI&#8217;s features to publish subgraphs, run schema checks and facilitate local development</li>
</ul>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="604" src="https://wp.apollographql.com/wp-content/uploads/2024/03/router-subgraphs-1-1024x604.png" alt="" class="wp-image-23480" srcset="https://wp.apollographql.com/wp-content/uploads/2024/03/router-subgraphs-1-1024x604.png 1024w, https://wp.apollographql.com/wp-content/uploads/2024/03/router-subgraphs-1-300x177.png 300w, https://wp.apollographql.com/wp-content/uploads/2024/03/router-subgraphs-1-768x453.png 768w, https://wp.apollographql.com/wp-content/uploads/2024/03/router-subgraphs-1-1200x708.png 1200w, https://wp.apollographql.com/wp-content/uploads/2024/03/router-subgraphs-1.png 1440w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>These courses are currently offered in three different flavors, depending on which language you&#8217;re most comfortable with. Each language uses a specific framework or library:</p>



<ul class="wp-block-list">
<li>.NET (C#) &amp; Hot Chocolate</li>



<li>Java &amp; DGS</li>



<li>TypeScript &amp; Apollo Server</li>
</ul>



<p>&gt; Coming soon: Python &amp; Strawberry! Let us know if you want to see other languages or frameworks.</p>



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



<p>Each lesson ends with a <strong><em>Practice</em></strong> section to assess your knowledge and understanding. By answering the multiple choice questions or fill-in-the-blank quizzes, you&#8217;ll reinforce the concepts you&#8217;ve learned about. Don&#8217;t worry, you&#8217;ve got three tries to get it right, and the course contents have the answers!</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="2403" height="1502" src="https://wp.apollographql.com/wp-content/uploads/2024/03/practice-example-edited.png" alt="" class="wp-image-23474" srcset="https://wp.apollographql.com/wp-content/uploads/2024/03/practice-example-edited.png 2403w, https://wp.apollographql.com/wp-content/uploads/2024/03/practice-example-edited-300x188.png 300w, https://wp.apollographql.com/wp-content/uploads/2024/03/practice-example-edited-1024x640.png 1024w, https://wp.apollographql.com/wp-content/uploads/2024/03/practice-example-edited-768x480.png 768w, https://wp.apollographql.com/wp-content/uploads/2024/03/practice-example-edited-1536x960.png 1536w, https://wp.apollographql.com/wp-content/uploads/2024/03/practice-example-edited-2048x1280.png 2048w, https://wp.apollographql.com/wp-content/uploads/2024/03/practice-example-edited-1200x750.png 1200w, https://wp.apollographql.com/wp-content/uploads/2024/03/practice-example-edited-1980x1238.png 1980w" sizes="auto, (max-width: 2403px) 100vw, 2403px" /></figure>



<p>Completing each <strong><em>Practice</em></strong> section brings you one step closer to overall course completion status!</p>



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



<p>We all get stuck sometimes; it&#8217;s part of the process! You&#8217;ve got a few different ways to reach out:</p>



<ul class="wp-block-list">
<li><strong><em>In-lesson comments</em></strong><em>:</em> At the bottom of each lesson, you&#8217;ll find a space to share your thoughts, questions or issues. You can read other learners&#8217; comments and contribute answers too.</li>



<li><a href="https://discord.gg/graphos"><strong><em>Discord</em></strong></a><em>:</em> Find thousands of other GraphQL developers, including Apollo engineers, to discuss topics and share experiences.</li>



<li><a href="https://community.apollographql.com/"><strong><em>Community forum</em></strong></a><em>:</em> Don&#8217;t forget to tag your post with <code>odyssey</code>!</li>
</ul>



<p>You can use these channels to share your feedback too! These courses are currently still in beta, and we&#8217;ll continue to iterate based on your experiences.</p>



<h3 class="wp-block-heading"><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>Ready to learn? Find your language of choice and get started:</p>



<p><strong>For those new to GraphQL, try </strong><strong><em>Intro to GraphQL with…</em></strong></p>



<ul class="wp-block-list">
<li><a href="https://www.apollographql.com/tutorials/intro-hotchocolate">.NET (C#) and Hot Chocolate</a></li>



<li><a href="https://www.apollographql.com/tutorials/intro-dgs">Java and DGS</a></li>



<li><a href="https://www.apollographql.com/tutorials/intro-typescript">TypeScript and Apollo Server</a></li>
</ul>



<p><strong>For those already familiar with GraphQL, try </strong><strong><em>Federation with…</em></strong></p>



<ul class="wp-block-list">
<li><a href="https://www.apollographql.com/tutorials/federation-hotchocolate">.NET (C#) and Hot Chocolate</a></li>



<li><a href="https://www.apollographql.com/tutorials/federation-dgs">Java and DGS</a></li>



<li><a href="https://www.apollographql.com/tutorials/federation-typescript">TypeScript and Apollo Server</a></li>
</ul>



<p>Looking forward to reading your feedback!</p>


Learn GraphQL & Federation with .NET, Java, or TypeScript

Office Hours: Apollo Server with Trevor Scheer

The main title stands out brightly near the middle: "Office Hours" with the subtitle "Apollo iOS". In the top right corner, two astronauts help assemble a GraphQL logo, with an Apollo logo at the center of it.

Office Hours: Apollo iOS – 16 June 2023

Office Hours: Apollo Client


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



<p>There’s a <a href="https://www.apollographql.com/tutorials/graphos-growing-supergraph" target="_blank" rel="noreferrer noopener">fresh new course</a> in Odyssey all about expanding an existing supergraph. Add a new subgraph and walk through the composition and query-planning processes. Check it out and let us know what you think!</p>



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



<ul class="wp-block-list">
<li><a href="https://discord.gg/NEPmWUdKn7?event=1109171270769201252" target="_blank" rel="noreferrer noopener">Ask the Apollo Client (web) maintainers anything during the next office hours on Tuesday, May 30, at 14:00 UTC.</a> Can’t make it? Drop your question in the <code>#frontend</code> channel!</li>
</ul>



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



<ul class="wp-block-list">
<li>Jeff Auriemma published a <a href="https://www.apollographql.com/blog/apollo-client/community-update-apollo-client-apollo-ios-and-apollo-kotlin/" target="_blank" rel="noreferrer noopener">community update</a> for all Apollo Client users (web, iOS, and Kotlin).</li>



<li><a href="https://github.com/apollographql/apollo-client/releases/tag/v3.7.15" target="_blank" rel="noreferrer noopener">Apollo Client (web) 3.7.15 was released </a>with a couple of bug fixes.</li>



<li><a href="https://github.com/apollographql/apollo-client/blob/release-3.8/CHANGELOG.md#380-beta0" target="_blank" rel="noreferrer noopener">Apollo Client (web) 3.8.0 is now in beta!</a> If you haven’t tried out <code>useSuspenseQuery</code> yet, now’s a great time to test it and send us feedback.</li>



<li><a href="https://github.com/apollographql/apollo-kotlin/releases/tag/v3.8.2" target="_blank" rel="noreferrer noopener">Apollo Kotlin 3.8.2 brings several fixes</a>, mainly around websockets and subscriptions.</li>



<li><a href="https://github.com/apollographql/apollo-kotlin/releases/tag/v4.0.0-alpha.1" target="_blank" rel="noreferrer noopener">Apollo Kotlin 4.0 is now in alpha! </a>Test it early to send us your feedback.</li>
</ul>



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



<ul class="wp-block-list">
<li><a href="https://github.com/apollographql/router/releases" target="_blank" rel="noreferrer noopener">Apollo Router 1.19.1 is available </a>with improvements to coprocessors, query plan caches, federated fragments, and many more!</li>



<li><a href="https://github.com/apollographql/apollo-rs/releases/tag/apollo-compiler%400.9.2" target="_blank" rel="noreferrer noopener">Apollo Compiler 0.9.2 </a>brings quality-of-life improvements for tool-makers and a few bug fixes.</li>
</ul>



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



<p>There’s been a lot of talk recently about the pros and cons of introspection, and one of the biggest reasons to disable it is to hide features you don’t want users to know about (e.g., before a new product launches). In <a rel="noreferrer noopener" href="https://engineering.hashnode.com/keep-parts-of-your-graphql-introspection-query-hidden" target="_blank">a recent blog post</a>, Florian Fuchs at HashNode shared how they hide only certain schema pieces from introspection using a custom directive and plugin with Apollo Server. If you’re interested in <code>@hidden</code>, be sure to also check out <a rel="noreferrer noopener" href="https://www.apollographql.com/docs/federation/federated-types/federated-directives#inaccessible" target="_blank">the <code>@inaccessible</code></a><a href="https://www.apollographql.com/docs/federation/federated-types/federated-directives#inaccessible" target="_blank" rel="noreferrer noopener"> </a><a rel="noreferrer noopener" href="https://www.apollographql.com/docs/federation/federated-types/federated-directives#inaccessible" target="_blank">Federation directive</a>!</p>


A gradient fades from white in the lower left to purple in the top right, where the outline of a space shuttle flies off of the screen. An Apollo logo is in the top left, and centered is the text "May 26, 2023" followed by "Apollo Changelog"

Apollo Changelog: May 26, 2023

Line drawing of a space shuttle, the Apollo lettermark, and the text: Community Update: Apollo Client, Apollo iOS, and Apollo Kotlin

Community Update: Apollo Client, Apollo iOS, and Apollo Kotlin

Office Hours: Apollo Kotlin

Office Hours: Apollo iOS


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



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



<p>This is the last week to <a href="https://summit.graphql.com/event/c51538f6-4b76-44e3-871e-54180c77cad8/websitePage:ee8a1bc8-1286-4106-b34b-f28798e56f93">submit a talk</a> for this years GraphQL Summit! We will officially be closing down the submission form on 4/10 at 11:59 PM PST. If you have a talk that you are unsure of or want some help, we’re here to help! Jump into <a href="https://discord.gg/graphos">our Discord server</a> and ping @admin &#8211; our Developer Advocates. We can start up a private thread with you and discuss your talk to help with the submission.</p>



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



<p>Did you know you can quickly play around with any schema files (<code>.graphql</code> files) and run the Apollo Router locally with <code>rover dev</code>? This is a great way to test out modularizing your schema, introduce entities and try out things like <code>@defer</code>!</p>



<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Build: Modularize your schema with GraphOS" width="580" height="326" src="https://www.youtube.com/embed/EhF_QcRMy64?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"><a href="#apollo-router-apollo-explorer-with-graphos" aria-hidden="true" class="aal_anchor" id="apollo-router-apollo-explorer-with-graphos"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Apollo Router + Apollo Explorer with GraphOS</h2>



<p>We introduced the <code>graph_ref</code> option to the <code>homepage</code> configuration of the Apollo Router which will use an Apollo Explorer version connected to GraphOS. Just add this to your routers config:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-yaml">homepage:
  graph_ref: { graph_id }@{ variant }</code></pre>



<p>This exposes the Apollo Studio Explorer URL to the end user on the default landing page:</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="875" height="491" src="https://wp.apollographql.com/wp-content/uploads/2023/04/Screenshot-2023-04-03-at-9.10.50-AM.png" alt="" class="wp-image-20546" srcset="https://wp.apollographql.com/wp-content/uploads/2023/04/Screenshot-2023-04-03-at-9.10.50-AM.png 875w, https://wp.apollographql.com/wp-content/uploads/2023/04/Screenshot-2023-04-03-at-9.10.50-AM-300x168.png 300w, https://wp.apollographql.com/wp-content/uploads/2023/04/Screenshot-2023-04-03-at-9.10.50-AM-768x431.png 768w" sizes="auto, (max-width: 875px) 100vw, 875px" /></figure>



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



<p>The team just released <a href="https://www.apollographql.com/tutorials/graphos-shipping-supergraph">a new tutorial on shipping your supergraph in GraphOS</a>. This tutorial includes using the Rover CLI to run schema checks, publish schema changes and launch our changes confidently. You&#8217;ll walk through an example of how to deprecate a field in your schema safely using helpful tools and metrics from GraphOS. The course is in beta and we&#8217;re looking for feedback. Jump into our<a href="https://discord.gg/graphos"> Discord server</a> and let us know what you think!</p>



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



<p>There is <a href="https://github.com/apollographql/apollo-kotlin/releases/tag/v3.8.0">a new release</a> of Apollo Kotlin and it is jam packed with cool new things:</p>



<ol class="wp-block-list">
<li>Multipart subscriptions support 🤯</li>



<li>🧪 New Jetpack Compose artifacts in <code>apollo-compose-support</code> artifact</li>



<li><a href="https://github.com/apollographql/apollo-kotlin/pull/4796">New Gradle plugin: run codegen after gradle sync</a></li>



<li><a href="https://github.com/apollographql/apollo-kotlin/releases/tag/v3.8.0">Much more</a></li>
</ol>



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



<ul class="wp-block-list">
<li><a href="https://github.com/apollographql/apollo-client/releases/tag/v3.7.11"><code>@apollo/client</code> v3.7.11 released</a> which fixes a couple of tricky bugs in <code>useQuery</code> and <code>useLazyQuery</code> , making error message generation more reliable. It also improves WebSocket error handling!</li>



<li>Last week <a href="https://twitter.com/danimman">Danielle</a> wrote a <a href="https://www.apollographql.com/blog/life-at-apollo/why-isnt-apollo-explorer-open-source/">blog post</a> about Apollo Explorer and her thoughts on how that project has developed over time. It’s a great read!</li>



<li><a href="https://www.youtube.com/watch?v=4JMgeRM-n7c">Stephen Spalding’s 2022 GraphQL Summit talk</a> on sharing Netflix’s learnings on how to avoid GraphQL pitfalls was highlighted in <a href="https://www.graphqlweekly.com/issues/309#content">this weeks GraphQL weekly</a>!</li>
</ul>



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



<p>The GraphQL Working Group has the next <a href="https://github.com/graphql/graphql-wg/blob/main/agendas/2023/04-Apr/06-wg-primary.md">upcoming meeting on 4/6 at 10:30-12:00 PM PST</a>. There is a block of time dedicated to field merging in incremental delivery (<em>hint: they’re talking about <code>@stream</code> and <code>@defer</code></em>). This is an exciting area of the spec that is rapidly evolving 😍</p>



<p><a href="https://dev.to/matthewwilson">Matthew Wilson</a> wrote a great <a href="https://dev.to/aws-builders/zero-to-serverless-car-insurance-part-1-cml">blog post</a> on tips for running GraphQL on AWS Lambda. The information is great for anyone interested in running <a href="https://www.apollographql.com/docs/apollo-server">Apollo Server</a> on <a href="https://github.com/apollo-server-integrations/apollo-server-integration-aws-lambda">AWS Lambda</a> 🙌</p>



<p>A big shoutout to our <a href="https://discord.gg/graphos">Discord community</a> users and all of their great questions this last week. We’re seeing more engagement and we have more things planned that we’ll be dropping soon. We hope to see you there!</p>


Apollo Changelog: April 3, 2023


<p>Let’s consider the core promise of GraphQL:</p>



<p><strong>Get exactly what you need and nothing more with a single query.</strong></p>



<p>Does it sound amazing? Absolutely. But if you’ve ever tried to implement GraphQL for an entire engineering team, you’ve probably realized that it’s not quite as simple as it sounds to achieve. For any dev in the organization to be able to get everything they need in a single query, <em>everything</em> that anyone could need has to exist in a single graph.&nbsp;</p>



<p>The concept of a single graph for everything seems all but impossible when you think about it from a compliance perspective, and that was one of the biggest challenges we faced when we started to scale up our use of GraphQL at Priceline. As a travel booking platform that supports millions of customers around the world, our backend services contain quite a bit of PCI data that can’t be made accessible to our client apps.&nbsp;</p>



<p>One graph → one endpoint → client apps have access to everything, including cardholder information and other sensitive data. Right?</p>



<p>Well it turns out, not necessarily. With a <a href="https://www.apollographql.com/blog/announcement/backend/the-supergraph-a-new-way-to-think-about-graphql/">supergraph</a>, we can have a single graph that unifies all of all of our data and services, including sensitive data, but we can selectively choose which parts of the graph are exposed to various audiences, like app devs. In this post I’ll walk you through how we did this for the Priceline supergraph and how you can set it up yourself using contracts in Apollo Studio.</p>



<h2 class="wp-block-heading"><a href="#is-a-supergraph-worth-it" aria-hidden="true" class="aal_anchor" id="is-a-supergraph-worth-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>Is a supergraph worth it?</h2>



<p>Let’s take a step back – is it even worth it to put everything into one graph? Couldn’t we just have entirely separate graphs for internal systems that require sensitive data and for client apps that don’t? We could, and at Priceline we actually did at first, but we would end up with a lot of duplicative maintenance work that could be avoided.</p>



<p>There’s always going to be overlap between what internal systems need and what client apps need. For example, our booking graph, which was not part of the supergraph, contained airline policy schema used for display when a customer was booking a flight. Our native apps teams wanted to display this information to a customer viewing flight information, earlier in the funnel. However, they did not want the overhead of multiple network requests. Normally this would result in duplicating the airline policy schema inside the supergraph. Not ideal.</p>



<p>And that’s just one example. To provide a specific subset of services for a certain audience or experience that differed from an already existing graph, we either had to use preexisting REST APIs or create an entirely new graph to support it. IT systems app? Separate graph. Partner API? Separate graph.&nbsp;</p>



<p>With a supergraph, we could create a single source of truth for definitions of every entity in our data model (hotel, flight, rental car, customer, etc), eliminating a huge amount of maintenance work associated with these disparate graphs. For us, it was worth it.</p>



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



<p>As a single source of truth, our supergraph schema contains everything, including sensitive data. So we can’t just have every application query the endpoint for the entire supergraph directly. Instead, we need to define which parts of the supergraph certain applications are allowed to access. We can do this by creating contract graphs in Apollo Studio.</p>



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



<p>Contract graphs are variants of the overall supergraph that only contain a filtered subset of the fields and types defined in the supergraph schema. Deriving a contract graph’s schema from the supergraph schema requires two things:</p>



<ol class="wp-block-list"><li>Using the <code>@tag</code> directive to apply tags to fields, interfaces, objects, and unions in your subgraph schemas.</li><li>Creating a contract in Apollo Studio that defines which tags should be included or excluded from the contract schema</li></ol>



<p>Once you’ve tagged your subgraph schemas and created your contract in Apollo Studio, the contract graph schema will automatically be derived from the supergraph schema whenever it’s composed in Studio. The contract schema can be used to power Apollo Router or Apollo Gateway to create a running contract graph with its own endpoint.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="470" src="https://wp.apollographql.com/wp-content/uploads/2022/09/image1-1024x470.png" alt="" class="wp-image-15806" srcset="https://wp.apollographql.com/wp-content/uploads/2022/09/image1-1024x470.png 1024w, https://wp.apollographql.com/wp-content/uploads/2022/09/image1-300x138.png 300w, https://wp.apollographql.com/wp-content/uploads/2022/09/image1-768x353.png 768w, https://wp.apollographql.com/wp-content/uploads/2022/09/image1-1536x705.png 1536w, https://wp.apollographql.com/wp-content/uploads/2022/09/image1-1200x551.png 1200w, https://wp.apollographql.com/wp-content/uploads/2022/09/image1-1980x909.png 1980w, https://wp.apollographql.com/wp-content/uploads/2022/09/image1.png 1999w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<h3 class="wp-block-heading"><a href="#using-contracts-to-filter-out-pci-data" aria-hidden="true" class="aal_anchor" id="using-contracts-to-filter-out-pci-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>Using contracts to filter out PCI data</h3>



<p>At Priceline, we use a contract graph to prevent clients from sending and requesting cardholder data through the supergraph, to the booking subgraph. The fewer touchpoints with this sensitive information, the better. As I mentioned earlier, the booking subgraph also contains airline policy information which we do need client apps to have access to so that we can display it to customers on a variety of pages</p>



<p>Using the <code>@tag</code> directive, we tagged all of the sensitive entities in the Checkout subgraph with <code>PCI</code>. Then, we defined a contract in Apollo Studio that excludes anything tagged with <code>PCI</code>. The derived contract graph is what our client apps query rather than the supergraph itself.</p>



<p><strong>That’s it.</strong></p>



<p>Applying tags within your subgraph schemas and creating a contract in Studio is all you need to do to create contract graphs that remove access to sensitive data. And, because contract graphs derive their schema from the supergraph, they are automatically kept up-to-date with any changes in the supergraph schema. Modifying the entities included in a contract graph is as easy as editing tags in your subgraph schema or the filters in Apollo Studio.</p>



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



<p>At Priceline, our supergraph already powers nearly all of our experiences, but we’re still just getting started. In the future, we’re planning on using contract graphs to improve our Travel Agents API, our internal customer support application, and more.</p>


How Priceline.com manages PCI compliance with GraphQL

Introducing Apollo Kotlin

Using GraphQL with Ruby on Rails


<p>Whether you&#8217;re trying to build a demo, create a workshop, or learn how GraphQL works, it&#8217;s nice to have some examples to reference instead of having to build your own. While <a href="https://www.apollographql.com/docs/apollo-server/">Apollo Server</a> makes building your own API a delight, sometimes you don&#8217;t want to get your hands dirty if you don&#8217;t have to. As luck would have it, some really awesome GraphQL APIs are available that you can use for free!</p>



<p>Here&#8217;s 8 of them you can use today along with an example query for each one to get you started:</p>



<h2 class="wp-block-heading"><a href="#space-x-api" aria-hidden="true" class="aal_anchor" id="space-x-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>Space X API</h2>



<p>Get all sorts of information about previous Space X launches, like information about the rocket, astronauts, and more! <a href="https://studio.apollographql.com/public/SpaceX-pxxbxen">Try it out here!</a></p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">{
  launchesPast(limit: 10) {
    mission_name
    launch_date_local
    launch_site {
      site_name_long
    }
    links {
      article_link
      video_link
    }
    rocket {
      rocket_name
    }
  }
}</code></pre>



<h2 class="wp-block-heading"><a href="#swapi-star-wars-api" aria-hidden="true" class="aal_anchor" id="swapi-star-wars-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>SWAPI (Star Wars API)</h2>



<p>Are you a fan of Star Wars? The SWAPI API provides a wealth of information about some of the older Star Wars movies. It&#8217;s a great API for showing how relationships work in GraphQL. <a href="https://studio.apollographql.com/public/star-wars-swapi/home?variant=current">Try it out here!</a></p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">{
  allFilms {
    films {
      title
    }
  }
}</code></pre>



<h2 class="wp-block-heading"><a href="#rick-and-morty-api" aria-hidden="true" class="aal_anchor" id="rick-and-morty-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>Rick and Morty API</h2>



<p>Get information about episodes, characters, and even their last known location! <a href="https://studio.apollographql.com/public/rick-and-morty-a3b90u">Try it out here!</a></p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">{
  characters(page: 2, filter: { name: &quot;rick&quot; }) {
    info {
      count
    }
    results {
      name
    }
  }
}</code></pre>



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



<p>Get country codes, emoji, and more for every country. <a href="https://studio.apollographql.com/public/countries">Try it out here!</a></p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">{
  countries {
    code
    name
    emoji
  }
}</code></pre>



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



<p>Get all the information you need to build a Pokedex! The Pokemon API is free for non-commercial use and rate-limited. <a href="https://studio.apollographql.com/public/poke-gql">Try it out here!</a></p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">{
  gen1_species: pokemon_v2_pokemonspecies(
    where: { pokemon_v2_generation: { name: { _eq: &quot;generation-i&quot; } } }
    order_by: { id: asc }
  ) {
    name
    id
  }
}</code></pre>



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



<p>Another Pokemon API with all the info you need to build a Pokedex! This API is in early development but has a great API for quick Pokemon queries! <a href="https://studio.apollographql.com/sandbox/explorer?endpoint=https%3A%2F%2Fdex-server.herokuapp.com%2F&amp;explorerURLState=N4IgJg9gxgrgtgUwHYBcQC4TADpIAR4CGANsQAoQDWCcE%2BO%2BBeShiuBAvrhyADQgA3QgCcAloQBGxBAGcMWbMO4gOQA" data-type="URL">Try it out here!</a></p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">{
  allPokemon {
    name
  }
}</code></pre>



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



<p>Anilist is an anime API with information about 1000s of animes. The API is free for non-commercial use and allows 90 requests per minute. <a href="https://studio.apollographql.com/sandbox/explorer?endpoint=https%3A%2F%2Fgraphql.anilist.co&amp;explorerURLState=N4IgJg9gxgrgtgUwHYBcQC4TADpIAR4AKAhgOYJ474F6JgCWxluNNAzvSggKoBOANi1Z4UnfhSrCayUv3psAFkKlJiogG4JlNAL7aCYBGyi96AB1EQk2vdVs6QAGhDrip4gCNxbDFmy9cBx0gA">Try it out here!</a></p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">{
  Page {
    media {
      siteUrl
      title {
        english
        native
      }
      description
    }
  }
}</code></pre>



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



<p>The GitHub API is one of my favorite APIs for creating examples. It supports both queries and mutations (you can create repositories, add comments to PRs, and more) and has a vast amount of data making it possible to build really in-depth examples and demos or see what GraphQL looks like at scale. <a href="https://studio.apollographql.com/public/github">Try it out here!</a></p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>While the API is free to use, you will still need to add an Authorization header in Apollo Explorer using a <a href="https://docs.github.com/en/github/authenticating-to-github/keeping-your-account-and-data-secure/creating-a-personal-access-token">personal access token</a>. Check out the <a href="https://docs.github.com/en/graphql/guides/introduction-to-graphql">GitHub API docs</a> for more information.</p></blockquote>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">{
  viewer {
    login
    repositories(last: 10) {
      nodes {
        name
      }
    }
  }
}</code></pre>



<p>Happy Querying!</p>


8 Free to Use GraphQL APIs for Your Projects and Demos


<p>It’s a wrap on the first-ever GraphQL Summit Scale! This year we added a day following <a href="https://www.apollographql.com/blog/graphql-summit-worldwide-2021-recap/?referrer=blog">GraphQL Summit Worldwide</a> that brought together engineering leaders and architects focused on solving the challenges of creating an organization-wide data graph. They shared learnings on how to handle both technical scaling as well as organizational scaling.</p>



<p>If you missed the live event &#8211; you can <a href="https://www.apollographql.com/graphql-summit/#day-2/?referrer=blog">watch the talks on-demand.</a> Read on to learn more about the talks.</p>



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



<p>Matt DeBergalis, CTO of Apollo GraphQL, started the day off by talking about how adopting a common graph helps engineering organizations become more agile and better prepared for the future. He emphasized the importance of designing your graph for agility and composability and shared insights gained from working with companies moving to organization-wide data graphs.</p>



<p><a href="https://www.apollographql.com/graphql-summit/summit-scale-keynote/?referrer=blog">Watch now</a></p>



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



<p>This panel of executives included Bhawna Singh, CTO of Glassdoor, Rick Fast, VP Engineering at Expedia, and Apollo’s CTO, Matt DeBergalis. They dove into building an adaptive engineering culture and how a data graph empowers teams to collaborate and learn faster. They also discussed how to build internal communities while tapping into external communities to develop best practices.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p><em>&#8220;The graph has helped us improve developer experience, productivity, and team flexibility&#8221; &#8211; Bhawna Singh, CTO, Glassdoor.</em></p>
</blockquote>



<p><a href="https://www.apollographql.com/graphql-summit/building-an-adaptive-engineering-culture/?referrer=blog">Watch now</a></p>



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



<p>Ian Moore and Deepak Gupta joined us to talk about how Glassdoor set up its GraphQL architecture to scale and serve over 70M monthly active users. They explained how they use Apollo Federation and designing a performant and secure federated graph.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p><em>&#8220;Move to managed federation as soon as you can, you really need the persistent schema registry and schema validation&#8221; &#8211; Ian Moore, Glassdoor</em></p>
</blockquote>



<p><a href="https://www.apollographql.com/graphql-summit/scaling-graphql-at-glassdoor/?referrer=blog">Watch now</a></p>



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



<p>How did Expedia convince their leadership and several hundred engineers to change how they’ve built products and embrace GraphQL? Amy Heinen and Chris Winsor of Expedia joined Apollo’s Dan Boerner to discuss how they balanced trade-offs between autonomy and consistency while still scaling their graph rapidly. They shared their experience and gave tips for navigating obstacles on their way to a company-wide GraphQL platform.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p><em>Driving graph adoption at scale: &#8220;We pushed for a rotation strategy, and the benefit there was two-fold. 1. You could help teams move along with the technology and contribute to your existing core systems. 2. They go back to their team, and they help onboard them.&#8221; &#8211; Chris Winsor, Expedia</em></p>
</blockquote>



<p><a href="https://www.apollographql.com/graphql-summit/change-at-scale-how-expedia-built-a-company-wide-data-graph/?referrer=blog">Watch now</a></p>



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



<p>One of our attendees wrote, <em>“I recommend Five Lessons from a GraphQL Early Adopter for developers using GraphQL for the first time.“</em> If you’re just getting started, this session from John Masse at Priceline is a great place to start. He outlined the key lessons and recommendations for teams starting on their GraphQL journey.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p><em>&#8220;Find places where GraphQL would create an enabling story. For real adoption, we want the people in their happy hour over Zoom talking about how their use of GraphQL really helped them solve a problem.&#8221; &#8211; John Masse, Priceline</em></p>
</blockquote>



<p><a href="https://www.apollographql.com/graphql-summit/five-lessons-from-a-early-graphql-adopter/?referrer=blog">Watch now</a></p>



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



<p>If you are working to drive adoption of your data graph within your organization or company, you’ll want to listen as Graph Champions from Zillow, American Airlines and PayPal share hard-fought lessons and deep learnings. For more information on becoming a Graph Champion, <a href="https://www.apollographql.com/graph-champions/?referrer=blog">download our new guide here.</a></p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p><em>&#8220;One of the great things about Federation is it really distributes ownership. And it reduces a lot of friction for people to participate in the graph.&#8221; &#8211; Robbie Sawers, Zillow</em></p>
</blockquote>



<p><a href="https://www.apollographql.com/graphql-summit/how-to-be-a-graph-champion/?referrer=blog">Watch now</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><strong>Conclusion</strong></h2>



<p>Thank you to our speakers and attendees. GraphQL Summit Scale would not have been possible without the many speakers who volunteered to share their GraphQL stories and those of you that tuned in to listen and ask great questions.</p>



<p>If you missed any of the talks, be sure to <a href="https://www.apollographql.com/graphql-summit/#day-2/?referrer=blog">watch them on-demand</a> and <a href="https://www.apollographql.com/contact-sales/?referrer=blog">reach out to us</a> if you’re ready to scale your graph.</p>


GraphQL Summit Scale 2021 [Recap]


<p>Well folks, that&#8217;s another GraphQL Summit Worldwide in the books 👋. We heard some talks on client-side GraphQL, federation, subscriptions, and testing.</p>



<p>In this post, I&#8217;d like to sum up the biggest takeaways from day one of the conference. If you missed any of the talks, fret not my friend — you can&nbsp;<a href="https://www.apollographql.com/graphql-summit">watch them on-demand</a>.</p>



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



<p>Since the last summit, we&#8217;ve released a number of new tools to help you build better with GraphQL. Here&#8217;s a highlight of some of the latest and greatest from Apollo.</p>



<ul class="wp-block-list"><li><strong>Getting started</strong>: Build out your first dev graph using <a href="https://www.apollographql.com/blog/apollo-studio-a-graphql-ide-for-every-environment/">Apollo Studio&#8217;s GraphQL IDE (Explorer)</a> and save time with powerful features (like intelligent search and variable extraction), running locally on your machine.</li><li><strong>Register, test, deploy</strong>: Use <a href="https://www.apollographql.com/docs/rover/getting-started/">Rover (Apollo&#8217;s new CLI tool)</a> to register your graph to Apollo&#8217;s Schema Registry.</li><li><strong>Collaborate &amp; manage</strong>: With your graph variants (testing, staging, production) published to the registry, you have access to all of Apollo Studio&#8217;s collaboration, productivity, and reporting tools like <a href="https://www.apollographql.com/docs/studio/explorer/">Apollo Explorer</a>, <a href="https://www.apollographql.com/blog/how-apollo-studio-client-awareness-improved-our-lives/">client awareness</a>, <a href="https://www.apollographql.com/docs/studio/setup-analytics/">metrics reporting</a>, <a href="https://www.apollographql.com/docs/studio/performance-alerts/">performance alerts</a>, <a href="https://www.apollographql.com/docs/studio/schema-change-integration/">schema change notifications</a>, and more! Log in and see what&#8217;s going on with your graph.</li><li><strong>Design your federated graph</strong>: Ready to grow? <a href="https://apollographql.github.io/apollo-workbench-vscode/">Apollo Workbench</a>, a new schema design tool built by the Solutions team at Apollo, helps you migrate from monolith or schema-stitching to Federation.</li></ul>



<p>You can <a href="https://www.apollographql.com/graphql-summit/thank-you/graphql-summit-worldwide-keynote">watch the Apollo keynote here</a>.</p>



<h2 class="wp-block-heading"><a href="#client-side-graphql" aria-hidden="true" class="aal_anchor" id="client-side-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>Client-side GraphQL</h2>



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



<p>In this talk, Ankita Kulkarni (<a href="https://twitter.com/kulkarniankita9">@kulkarniankita9</a>) discusses the needs of a good state management approach and takes us through how to migrate from Redux to Apollo Client 3.</p>



<p><a href="https://www.apollographql.com/graphql-summit/thank-you/oh-hello-apollo-client-farewell-redux">Watch here</a>.</p>



<h3 class="wp-block-heading"><a href="#testing-react-apollo-client" aria-hidden="true" class="aal_anchor" id="testing-react-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>Testing React Apollo Client</h3>



<p>Adhithi Ravichandran (<a href="https://twitter.com/adhithiravi">@AdhithiRavi</a>) shows us how to test React components, queries, mutations, error states and loading states.</p>



<p><a href="https://www.apollographql.com/graphql-summit/thank-you/testing-react-apollo-client">Watch here</a>.</p>



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



<p>Check out this panel featuring engineers from Apollo (Ellen Shapiro — <a href="https://twitter.com/designatednerd">@designatednerd</a>, Martin Bonnin — <a href="https://twitter.com/martinbonnin">@martinbonnin</a>), GitHub (Hesham Salman — <a href="https://twitter.com/_ironham">@_IronHam</a>), and Shopify (Ivan Savytskyi — <a href="https://github.com/sav007">@sav007</a>) as they discuss major themes in mobile app development like dealing with types, caching, nullability, and error handling.</p>



<p><a href="https://www.apollographql.com/graphql-summit/thank-you/graphql-and-mobile-panel">Watch here</a>.</p>



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



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



<p>Instead of building subscriptions directly into your graph, Mandi Wise (<a href="https://twitter.com/mandiwise">@mandiwise</a>) demonstrates a decoupled approach to provide subscription support in the context of a federated architecture, but in a scalable, maintainable, and performant way.</p>



<p><a href="https://www.apollographql.com/graphql-summit/thank-you/using-subscriptions-with-your-federated-data-graph">Watch here</a>.</p>



<h3 class="wp-block-heading"><a href="#server-driven-uis-on-the-web-with-graphql" aria-hidden="true" class="aal_anchor" id="server-driven-uis-on-the-web-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>Server Driven UIs on the Web with GraphQL</h3>



<p>Faraz Ahmad (<a href="https://twitter.com/farazamiruddin">@farazamiruddin</a>) teaches us an architectural pattern useful for teams that want to deliver a consistent experience across a number of devices. In the server-driven UI architecture, the server is responsible for the layout and props of the components, leaving the clients to merely fulfill the contract.</p>



<p><a href="https://www.apollographql.com/graphql-summit/thank-you/server-driven-uis-on-the-web-with-graphql">Watch here</a>.</p>



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



<p>Kyle Schrade (<a href="https://twitter.com/NotKyleSchrade">@NotKyleSchrade</a>) walks us through an approach to using nullability and feature flags to keep your schema maintainable over time.</p>



<p><a href="https://www.apollographql.com/graphql-summit/thank-you/the-power-of-schema-how-to-work-in-the-future">Watch here</a>.</p>



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



<h3 class="wp-block-heading"><a href="#how-your-infrastructure-choices-make-or-break-your-team-culture" aria-hidden="true" class="aal_anchor" id="how-your-infrastructure-choices-make-or-break-your-team-culture"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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 Your Infrastructure Choices Make (or Break) Your Team Culture</h3>



<p>In this talk by Jason Lengstorf (<a href="https://twitter.com/jlengstorf">@jlengstorf</a>), we learn how about what makes systems complex and hard for developers to ship code then present a remedy: a checklist of cultural and architectural changes you can make to keep your teams productive.</p>



<p><a href="https://www.apollographql.com/graphql-summit/thank-you/how-your-infrastructure-choices-make-or-break-your-team-culture">Watch here</a>.</p>



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



<p>Taz Singh (<a href="https://twitter.com/tazsingh">@tazsingh</a>) explains how GraphQL and Apollo Federation helped his team unify their data while going through mergers and acquisitions.</p>



<p><a href="https://www.apollographql.com/graphql-summit/thank-you/acquiring-a-data-graph">Watch here</a>.</p>



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



<p>Once we deploy our GraphQL server to production, how do we ensure that everything is working as intended? In this talk, Ash Narcisse (<a href="https://twitter.com/_darkfadr">@_darkfadr</a>) teaches us how to keep tabs on your production graph with observability though OpenTelemetry and Apollo Studio.</p>



<p><a href="https://www.apollographql.com/graphql-summit/thank-you/graphql-observability">Watch 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>A major thank you to all of the speakers for sharing your experiences with the community.</p>



<p>Reminder, if you missed any of the talks, you can <a href="https://www.apollographql.com/graphql-summit">watch them here on-demand</a>.</p>



<p>See you next year!</p>


GraphQL Summit Worldwide 2021 [Recap]


<p>After listening to the community, we&#8217;ve decided to something a little different with GraphQL Summit this year. We&#8217;re splitting the event across two days with distinct focuses for <a rel="noreferrer noopener" href="https://summit.graphql.com" target="_blank"><strong>GraphQL Summit</strong> <strong>Worldwide</strong></a> and <strong><a href="https://summit.graphql.com/webinars/graphql-summit-scale-presented-by-apollo" target="_blank" rel="noreferrer noopener">GraphQL Summit <em>Scale</em></a></strong><em>.</em></p>



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



<p><a href="https://summit.graphql.com" target="_blank" rel="noreferrer noopener"><strong>Register for Day One of GraphQL Summit</strong> <strong>Worldwide</strong></a> for various GraphQL-focused talks on Subscriptions, Federation, Testing, Apollo Client, and more.</p>



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



<ul class="wp-block-list"><li>Using Subscriptions with Your Federated Data Graph by Mandi Wise, Solutions Architect at Apollo</li><li>Oh Hello Apollo Client, Farewell Redux 👋 by Ankita Kulkarni, Tech Lead at Loblaw Digital</li><li>How Your Infrastructure Choices Make (or Break) Your Team Culture by Jason Lengstorf, Principal Developer at Netlify</li><li>Acquiring a Data Graph by Taz Singh, Founder at <a href="http://Guildd.io">Guildd.io</a></li><li>The power of schema: How to work in the future by Kyle Schrade, Software Engineer at StockX</li><li>GraphQL Observability by Ash Narcisse, Engineer at Apollo</li><li>Server Driven UIs on the Web with GraphQL by Faraz Ahmad, Software Engineer at UberEats</li></ul>



<h3 class="wp-block-heading"><a href="#cant-make-it" aria-hidden="true" class="aal_anchor" id="cant-make-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>Can’t make it?</h3>



<p>Not sure if you can make it? <strong><a href="https://summit.graphql.com" target="_blank" rel="noreferrer noopener">Sign up for Day One</a> </strong>anyway to be the first to get notified when we post the recordings online.</p>



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



<p>You’re all set for day one. We’ll let you know when the festivities start and we’ll send you a link to watch the day one recordings after the event ✌️.</p>



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



<p>New this year, GraphQL Summit Scale is for companies scaling with GraphQL.<br><br><strong><a href="https://summit.graphql.com/webinars/graphql-summit-scale-presented-by-apollo" target="_blank" rel="noreferrer noopener">Register for Day Two &#8211; GraphQL Summit Scale</a></strong> for talks focused on helping companies solve the technical and cultural challenges of creating an organization-wide data graph.</p>



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



<p>The schedule is coming soon, so sign-up to get notified when it goes live for Summit Scale.</p>



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



<p>We’re excited to see you (virtually) this year for GraphQL Summit. It’ll be two days of lots of learning, so come join us! You can register for <a href="https://summit.graphql.com" target="_blank" rel="noreferrer noopener">Day One here</a> and <a href="https://summit.graphql.com/webinars/graphql-summit-scale-presented-by-apollo" target="_blank" rel="noreferrer noopener">Day Two here</a>.<br><br></p>


GraphQL Summit is just around the corner


<p>Calling all GraphQL developers; the biggest and most interactive GraphQL conference is back:&nbsp;<strong>GraphQL Summit Worldwide</strong>.</p>



<p>Join us this&nbsp;<strong>April 7th&nbsp;</strong>and<strong>&nbsp;8th, 2021&nbsp;</strong>for another round of talks and panels from experts in the GraphQL community.&nbsp;</p>



<p>While we wish we could see you in person, we&#8217;re excited to meet you online again, to top how <em>awesome</em> last year was. So come on out. We&#8217;ll set up environments for everyone (attendees and GraphQL community leaders) to meet, chat, and learn from each other.</p>



<p>Excited to learn from the experts and connect with the GraphQL community?&nbsp;<a rel="noreferrer noopener" target="_blank" href="https://summit.graphql.com/">Register now</a><strong>&nbsp;</strong>for free.</p>



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



<p><strong>Do you have ideas and experience to share with the community? We&#8217;d love to hear from you.&nbsp;</strong><a rel="noreferrer noopener" target="_blank" href="https://events097286.typeform.com/to/yCBVxWoc"><strong>Our Call for Proposals</strong></a><strong>&nbsp;is now open until February 12, 2021</strong>.</p>



<p>And want to know something extra cool!? If you&#8217;re talk is selected we&#8217;ll <strong>pay you $500</strong> to say thanks for taking the time to prepare and record your session! </p>



<p>Here&#8217;s what we&#8217;re looking for.</p>



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



<p>Developers attend GraphQL Summit to get inspired and take back the knowledge they can share with their teams. We love talks with a unique perspective, teach the audience something new, and push the GraphQL community forward.&nbsp;</p>



<p>All talks should be 20 minutes long and allow for 10 minutes of live Q/A with the audience.</p>



<p>Dig it? Sweet 🙂 We look forward to reading your submission!&nbsp;</p>



<p><strong>Need a talk idea?:</strong> This year&#8217;s event&nbsp;<strong>will be larger than ever</strong>, so we&#8217;ve organized our content into themes to help attendees discover what&#8217;s relevant to them. Below, you&#8217;ll find a list of themes we suggest for your CFP, but please don&#8217;t limit yourselves to our list. Let your creativity shine through.</p>



<p><strong>Themes: </strong></p>



<ul class="wp-block-list"><li>Performance</li><li>Stability</li><li>Governance</li><li>Developer Experience (tooling)</li><li>Federation</li><li>Caching (like pagination)</li><li>GraphQL in the Wild &#8211; tell us how your company is using GraphQL to solve problems&nbsp;</li><li>Mobile</li></ul>



<p><strong>First-time speakers:</strong>&nbsp;We&#8217;re excited to hear your ideas, even if it&#8217;s your first conference talk! If you need help vetting your proposal, please contact us at speakers@graphql.com. We can also help with your content and presentation if your talk is accepted.</p>



<p><strong>Diversity:</strong>&nbsp;GraphQL Summit welcomes all developers, and we&#8217;re committed to promoting an inclusive environment at our conference. Our speaker lineup must reflect a diverse balance of races, genders, and backgrounds, and we encourage underrepresented groups in tech to apply.</p>



<p><strong>What to expect if your talk is selected:&nbsp;</strong>We pre-record all of our talks to minimize any glitches happening on the event days. Your talk will&nbsp;<strong>need to be recorded by March 25, 2021 if you choose to record your own talk</strong>&nbsp;(guideline will be supplied). You also have the option to record with our streaming company (dates will be available the week of March 15).&nbsp;</p>



<p><strong>Code of Conduct:</strong>&nbsp;All attendees, speakers and volunteers at our conference are required to follow our&nbsp;<a rel="noreferrer noopener" target="_blank" href="https://www.apollographql.com/docs/community/code-of-conduct/#graphql-summit">code of conduct&nbsp;</a></p>



<p>We hope to see you at <a rel="noreferrer noopener" target="_blank" href="https://summit.graphql.com/">GraphQL Summit Worldwide</a> and look forward to reading your <a href="https://events097286.typeform.com/to/yCBVxWoc" target="_blank" rel="noreferrer noopener">talk proposals!</a> 🎉 </p>


GraphQL Summit Worldwide is back!


<p>At StockX, we&#8217;ve been running a federated GraphQL implementation for over a year now. Like any distributed system, the rewards it comes with also comes with challenges to overcome. Overall, we&#8217;ve had a positive experience serving our APIs with GraphQL and Apollo Federation.</p>



<p>In this post, I&#8217;d like to highlight some of the most important lessons we’ve learned over the past year running a federated graph in production.</p>



<h2 class="wp-block-heading" id="build-your-schema-as-you-go-dont-try-to-do-it-all-at-once"><a href="#1-build-your-schema-as-you-go-dont-try-to-do-it-all-at-once" aria-hidden="true" class="aal_anchor" id="1-build-your-schema-as-you-go-dont-try-to-do-it-all-at-once"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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. Build your schema as you go, don&#8217;t try to do it all at once.</h2>



<p>When we first started using GraphQL, we initially tried to create as much of the schema as possible. That worked great for a proof of concept, but it wasn&#8217;t until we got the green light to build it for production that we realized that <strong>upfront schema design</strong> isn&#8217;t the best idea.&nbsp;</p>



<p>Our initial approach was to mirror the shape of the existing RESTful API calls, but this resulted in many extra fields that no one was using. A year later, we are <em>still</em> in the process of removing those unused fields.&nbsp;<br></p>



<p>We now believe in something we call <em>Just In Time Schema (JITS) </em>development. It&#8217;s essentially the term <a href="https://martinfowler.com/bliki/Yagni.html">YAGNI</a> (you ain&#8217;t gonna need it) but applied to schema design; this means that it&#8217;s not until a consumer <em>truly</em> needs a particular field or a type that we expose it.</p>



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



<p>One thing that has been a massive help for consumers of our graph is the ability to document the schema and make that documentation easily consumable. Internally, we had an enormous lack of documentation, and our APIs&#8217; usage relied a little too much upon tribal knowledge.&nbsp;<br></p>



<p>With <a href="https://www.apollographql.com/docs/apollo-server/schema/schema/#documentation-strings">documentation strings</a>, the schema has become a large part of our documentation for consumers. People no longer have to guess what you can do with our API. It&#8217;s been a breath of fresh air, and we no longer have to have to track down which query params work and which ones don&#8217;t.</p>



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



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" src="https://media.giphy.com/media/dyRT9h6bzA4fDZvPgy/giphy.gif" alt=""/></figure></div>



<p>At StockX, GraphQL brought massive performance increases. We&#8217;re talking SECONDS of improvement &#8211; yes, you read that right. Seconds!&nbsp;</p>



<p>The most critical performance improvement we enjoyed was the reduction of payload size; with GraphQL, payload sizes were up to 7 times smaller! We noticed that every metric we were tracking on mobile devices seemed to improve once we made the payload reduction.</p>



<p>Architecturally, GraphQL does become the choke point for requests. This led us to look into improving multiple parts of our edge layer. Before GraphQL, we used various caching strategies since our serverless handlers and servers did their own caching. The shift to GraphQL allowed us to unify our caching approach and increase the overall strategy.&nbsp;</p>



<p>With a more unified and easier-to-reason-about caching strategy, we were able to reduce the amount of requests to our backend services.&nbsp;</p>



<p><br><em>Stay tuned for my other post titled &#8220;<strong>Caching Approaches in GraphQL Federation</strong>&#8221; to learn how to cache in a federated GraphQL architecture using memoization, data loader, and distributed caching techniques.</em></p>



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



<p>Most people know how RESTful APIs work &#8211; it&#8217;s become something of a web standard. To me, the learning curve for GraphQL resembles a hockey stick. Unless you&#8217;ve integrated with GraphQL or used GraphQL before, there will undoubtedly be a learning curve because it&#8217;s a much different API style from REST. Since you&#8217;re no longer calling an API to get everything the server will give you back as a response, clients need to know what they want and request it.&nbsp;</p>



<p>Once you wrap your head around GraphQL, you&#8217;ll notice a mindset change from the RESTful world; and it&#8217;s a world where you can move much faster.</p>



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



<p>After switching over to GraphQL, we&#8217;ve noticed that our tickets complete faster. Instead of &#8220;Team A&#8221; waiting for &#8220;Team B&#8221; to do something, then &#8220;Team C&#8221; to expose the data for &#8220;Team A&#8221;, teams can now more independently due to their ability to traverse through the graph to get the data they need.</p>



<p>For example, when &#8220;Team A&#8221; needs to use a part of the federated graph that they don&#8217;t necessarily own, they don&#8217;t have to wait for other teams to help them. This graphical nature of GraphQL solves more problems than we initially thought.</p>



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



<p>GraphQL is excellent, but it still faces the same problems as any other technology out in the wild. For example, scaling is a challenge you&#8217;ll want to tackle with well-known architectural best practices.&nbsp;</p>



<p>That means using Apollo Federation to implement a microservice-like architecture by decoupling our graph by <em>concern</em>; this enables teams to manage their distinct parts of a single federated GraphQL API, scale traffic more effectively, and ship code faster.</p>



<p>We initially tried to build our own &#8220;pure&#8221; GraphQL server/schema. It wasn&#8217;t until we exposed it to production traffic and experienced common challenges serving a monolithic API that we realized we needed to follow trusty distributed computing best practices.</p>



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



<p>After putting our federated GraphQL implementation into production, we found that horizontal scaling was the best way for us to serve large traffic loads.&nbsp;</p>



<p>We use NodeJS- and with NodeJS being single-threaded, it allows for more requests to be handled simultaneously.&nbsp;</p>



<p>We still have to preemptively scale our systems before large traffic spikes like a push notification or other marketing events. But one of the beautiful parts of using Federation is that we can scale <em>only</em> the implementing services affected by the event.&nbsp;</p>



<p>For example, if we send out an email to clients about a fantastic blog post, we can scale the blog portion of our federated architecture and leave everything else the same. This is great when we look at the cost of running our services. Due to not having to scale everything, we save money.</p>



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



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" src="https://media.giphy.com/media/NFA61GS9qKZ68/giphy.gif" alt=""/></figure></div>



<p>We have had some stumbles while adopting GraphQL. The team at StockX has had no prior experience with GraphQL.&nbsp;</p>



<p>So we read, and then read, then read even more. The amount of knowledge out there has helped us make more informed decisions. Some of the articles we found helpful were:</p>



<ul class="wp-block-list"><li><a href="https://graphql.org/learn/best-practices/">GraphQL Best Practices from GraphQL.org</a></li><li><a href="https://relay.dev/graphql/connections.htm">GraphQL Cursor Specification from Relay.dev</a></li><li><a href="https://graphql.org/learn/pagination/">How to Handle Pagination from GraphQL.org</a></li></ul>



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



<p>When we first started GraphQL, our types were a mess. Sure, our endpoints <em>structurally </em>returned the same payload as the RESTful API we had in place before, and that made the front-ends work, but it was a mess to work with.&nbsp;</p>



<p>Eventually, we had the opportunity to design the graph from scratch again, starting clean.&nbsp;</p>



<p>We used this opportunity to start conversations which led to a better understanding of the division of responsibilities and relationships between services and types. We discussed what fields belong in which type, what to do with our massive existing types, and how to break them into smaller, better namespaced types. We’re now at a point where our dedicated selection of types work much better for us.</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>It was a lot of work to migrate to GraphQL, but looking back at all that work over the last year, I <em>still </em>think that migration was a major success and was incredibly impactful to the way we work today. GraphQL has enabled us to have faster development cycles, push smaller chunks to production with fewer problems, rethink our UX, among so many other improvements.</p>


9 Lessons From a Year of Apollo Federation

Building a Portable Apollo Server Config

See You Next Year, GraphQL Summit [Recap]


<p><strong><a href="https://github.com/accounts-js/accounts">accounts-js</a>&nbsp;is a fullstack authentication and accounts-management for Javascript.</strong>&nbsp;We provide you with a set of tools to authenticate and manage your users in your application. These tools work with REST, GraphQL and are database agnostic.</p>



<p>We will implement the Authentication GraphQL API in NodeJS using accounts-js and Apollo. At the end of this article, our server will be able to sign up new users, allow the users to login and authenticate them to protect some restricted information.</p>



<p><em>At the end of this post, you can find a link to a repository containing the sources.</em></p>



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



<p>For this project, you will need to have nodejs and mongodb installed on your system.</p>



<h3 class="wp-block-heading"><a href="#setup-the-node-project" aria-hidden="true" class="aal_anchor" id="setup-the-node-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>Setup the node project</h3>



<p>Let&#8217;s start by creating our NodeJS project. Create a new folder named&nbsp;<code>accounts-js-server</code>, all the project files should be inside this folder. Let&#8217;s initialize our new project using&nbsp;<code>npm</code>&nbsp;(you can use&nbsp;<code>yarn</code>&nbsp;if you prefer):</p>



<pre class="wp-block-prismatic-blocks"><code class="language-">npm init</code></pre>



<p>Now, let&#8217;s add the dependencies we need to setup our Apollo GraphQL server.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-">npm install apollo-server graphql</code></pre>



<p>Create a new&nbsp;<code>index.js</code>&nbsp;file (to make this tutorial simpler all our code will be in a single file) and add this code to setup the Apollo server.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">// index.js

const { ApolloServer, gql } = require(&#039;apollo-server&#039;);

const typeDefs = gql`
  type Query {
    # This query will be protected so only authenticated users can access it
    sensitiveInformation: String
  }
`;

const resolvers = {
  Query: {
    sensitiveInformation: () =&gt; &#039;Sensitive info&#039;,
  },
};

const server = new ApolloServer({ typeDefs, resolvers });

// The `listen` method launches a web server.
server.listen().then(({ url }) =&gt; {
  console.log(`🚀  Server ready at ${url}`);
});</code></pre>



<p>Now let&#8217;s start the server to make sure everything is working as expected.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-">node index.js</code></pre>



<p>In your console you should see:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-">🚀  Server ready at http://localhost:4000/</code></pre>



<p>Our GraphQL server is now ready, it&#8217;s time to add accounts-js!</p>



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



<p>First, we will setup mongoose and connect to our database.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-">npm install @accounts/mongo mongoose</code></pre>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">// index.js

const mongoose = require(&#039;mongoose&#039;);
const { Mongo } = require(&#039;@accounts/mongo&#039;);

// We connect mongoose to our local mongodb database
mongoose.connect(&#039;mongodb://localhost:27017/accounts-js-server&#039;, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

// We tell accounts-js to use the mongo connection
const accountsMongo = new Mongo(mongoose.connection);</code></pre>



<p>Then, we add the accounts-js server dependencies.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-">npm install @accounts/server @accounts/password</code></pre>



<ul class="wp-block-list"><li><code>@accounts/server</code>: The accounts-js core dependency.</li><li><code>@accounts/password</code>: The accounts-js password service, it expose a set of function to manage and authenticate users using email + password.</li></ul>



<p>It&#8217;s time to setup the accounts-js server configuration</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">// index.js

const { AccountsServer } = require(&#039;@accounts/server&#039;);
const { AccountsPassword } = require(&#039;@accounts/password&#039;);

const accountsPassword = new AccountsPassword({
  // You can customise the behavior of the password service by providing some options
});

const accountsServer = new AccountsServer(
  {
    // We link the mongo adapter we created in the previous step to the server
    db: accountsMongo,
    // Replace this value with a strong random secret
    tokenSecret: &#039;my-super-random-secret&#039;,
  },
  {
    // We pass a list of services to the server, in this example we just use the password service
    password: accountsPassword,
  }
);</code></pre>



<p>Then, we add the accounts-js graphql dependencies.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-">npm install @accounts/graphql-api @graphql-toolkit/schema-merging @graphql-modules/core</code></pre>



<ul class="wp-block-list"><li><code>@accounts/graphql-api</code>: The transport layer exposing all the queries and mutations accounts-js provide.</li><li><code>@graphql-toolkit/schema-merging</code>: Expose a set of tools that will help us to merge our schemas.</li><li><code>@graphql-modules/core</code>: An internal dependency that accounts-js use to manage his graphql schema and resolvers.</li></ul>



<p>Let&#8217;s merge the accounts-js GraphQL schema and our schema, so the user can access it</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">// index.js

// Add makeExecutableSchema to the imported variables
const { ApolloServer, gql, makeExecutableSchema } = require(&#039;apollo-server&#039;);
const { mergeTypeDefs, mergeResolvers } = require(&#039;@graphql-toolkit/schema-merging&#039;);
const { AccountsModule } = require(&#039;@accounts/graphql-api&#039;);

// We generate the accounts-js GraphQL module
const accountsGraphQL = AccountsModule.forRoot({ accountsServer });

// A new schema is created combining our schema and the accounts-js schema
const schema = makeExecutableSchema({
  typeDefs: mergeTypeDefs([typeDefs, accountsGraphQL.typeDefs]),
  resolvers: mergeResolvers([accountsGraphQL.resolvers, resolvers]),
  schemaDirectives: {
    ...accountsGraphQL.schemaDirectives,
  },
});

// When we instantiate our Apollo server we use the schema and context properties
const server = new ApolloServer({
  schema,
  context: accountsGraphQL.context,
});</code></pre>



<p>At the end, our file should look like this:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">// index.js

const { ApolloServer, gql, makeExecutableSchema } = require(&#039;apollo-server&#039;);
const mongoose = require(&#039;mongoose&#039;);
const { Mongo } = require(&#039;@accounts/mongo&#039;);
const { mergeTypeDefs, mergeResolvers } = require(&#039;@graphql-toolkit/schema-merging&#039;);
const { AccountsServer } = require(&#039;@accounts/server&#039;);
const { AccountsPassword } = require(&#039;@accounts/password&#039;);
const { AccountsModule } = require(&#039;@accounts/graphql-api&#039;);

// We connect mongoose to our local mongodb database
mongoose.connect(&#039;mongodb://localhost:27017/accounts-js-server&#039;, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

const accountsMongo = new Mongo(mongoose.connection);

const typeDefs = gql`
  type Query {
    # This query will be protected so only authenticated users can access it
    sensitiveInformation: String
  }
`;

const resolvers = {
  Query: {
    sensitiveInformation: () =&gt; &#039;Sensitive info&#039;,
  },
};

const accountsPassword = new AccountsPassword({});

const accountsServer = new AccountsServer(
  {
    db: accountsMongo,
    // Replace this value with a strong secret
    tokenSecret: &#039;my-super-random-secret&#039;,
  },
  {
    password: accountsPassword,
  }
);

// We generate the accounts-js GraphQL module
const accountsGraphQL = AccountsModule.forRoot({ accountsServer });

// A new schema is created combining our schema and the accounts-js schema
const schema = makeExecutableSchema({
  typeDefs: mergeTypeDefs([typeDefs, accountsGraphQL.typeDefs]),
  resolvers: mergeResolvers([accountsGraphQL.resolvers, resolvers]),
  schemaDirectives: {
    ...accountsGraphQL.schemaDirectives,
  },
});

const server = new ApolloServer({ schema, context: accountsGraphQL.context });

// The `listen` method launches a web server.
server.listen().then(({ url }) =&gt; {
  console.log(`🚀  Server ready at ${url}`);
});</code></pre>



<p>If we restart our server and visit http://localhost:4000/, we should see that the accounts-js queries and mutations are merged with our schema. Our authentication server is now ready 🚀.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="632" src="https://wp.apollographql.com/wp-content/uploads/2020/05/ud3ptilvz38a2k7pizs2-1024x632.png" alt="" class="wp-image-2160" srcset="https://wp.apollographql.com/wp-content/uploads/2020/05/ud3ptilvz38a2k7pizs2-1024x632.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/05/ud3ptilvz38a2k7pizs2-300x185.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/05/ud3ptilvz38a2k7pizs2-768x474.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/05/ud3ptilvz38a2k7pizs2-1200x740.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/05/ud3ptilvz38a2k7pizs2.png 1277w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



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



<p>Inside the GraphQL Playground, let&#8217;s execute the following mutation:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">mutation {
  createUser(
    user: { email: &quot;john.doe@john.com&quot;, password: &quot;superSecurePassword&quot; }
  )
}</code></pre>



<p>Congrats, our first user has been created 👏!</p>



<p>If you take a look at the&nbsp;<code>users</code>&nbsp;collection inside mongodb you should see that your user was created and looks like this:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-json">{
  &quot;_id&quot;: ObjectId(&quot;5e3da6ba13ef1a137bbc8fe4&quot;),
  &quot;services&quot;: {
    &quot;password&quot;: {
      &quot;bcrypt&quot;: &quot;$2a$10$WwhjvbDzQpS2LrdkcgQJwODn.EE95T0b9NmMUNcHKyrDOlXEeybSq&quot;
    }
  },
  &quot;createdAt&quot;: 1581098682713,
  &quot;updatedAt&quot;: 1581098682713,
  &quot;emails&quot;: [
    {
      &quot;address&quot;: &quot;john.doe@john.com&quot;,
      &quot;verified&quot;: false
    }
  ]
}
</code></pre>



<p>What we can see is that a&nbsp;<code>createdAt</code>&nbsp;and&nbsp;<code>updatedAt</code>&nbsp;fields have been created. We also see that the password has been saved hashed in the database, we use bcrypt as a default but you can change it to argon2 via the options if you prefer.</p>



<p>Now let&#8217;s try to login with this user:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">mutation {
  authenticate(
    serviceName: &quot;password&quot;
    params: {
      user: { email: &quot;john.doe@john.com&quot; }
      password: &quot;superSecurePassword&quot;
    }
  ) {
    sessionId
    tokens {
      accessToken
      refreshToken
    }
  }
}</code></pre>



<p>You should see in the playground that a new session has been created. The session is represented by:</p>



<ul class="wp-block-list"><li>a sessionId (you can check the session in the database)</li><li>a short lived JWT accessToken used to authenticate the user</li><li>a long lived refreshToken that can be used to get a new accessToken once it&#8217;s expired</li></ul>



<p>Save the access token, we will need it to authenticate our requests in the next part.</p>



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



<p>Our first user has been created and we are now able to login via the API. Next step is to protect our&nbsp;<code>sensitiveInformation</code>&nbsp;query so only the authenticated users can access it.</p>



<p>accounts-js provide an&nbsp;<code>@auth</code>&nbsp;directive that we can use to protect our private queries.</p>



<p>Let&#8217;s add the directive to the query in our schema:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">// index.js

const typeDefs = gql`
  type Query {
    # We add the @auth directive
    sensitiveInformation: String @auth
  }
`;</code></pre>



<p>If you try this query, you should get an&nbsp;<code>Unauthorized</code>&nbsp;error 🛑. We can&#8217;t access this resource because we are not authenticated. To authenticate our request with the server we need to add the access token saved previously as a header of the request. The header key should be&nbsp;<code>authorization</code>&nbsp;and the value should be prefixed with&nbsp;<code>Bearer</code>. eg:&nbsp;<code>{ &quot;authorization&quot;: &quot;Bearer my-access-token&quot; }</code></p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="630" src="https://wp.apollographql.com/wp-content/uploads/2020/05/tkat54liy7txdsf8aa08-1024x630.png" alt="" class="wp-image-2170" srcset="https://wp.apollographql.com/wp-content/uploads/2020/05/tkat54liy7txdsf8aa08-1024x630.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/05/tkat54liy7txdsf8aa08-300x185.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/05/tkat54liy7txdsf8aa08-768x472.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/05/tkat54liy7txdsf8aa08-1200x738.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/05/tkat54liy7txdsf8aa08.png 1281w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>You made your first authenticated query, how cool is that?</p>



<p>Well, that&#8217;s it, you are done, you now have a Graphql server that can register and authenticate new users. Pretty simple right? Next step for you is to explore the playground and play with the different queries and mutations available (verify the email, change the password etc..) :).</p>



<p>You can find the source here&nbsp;<a href="https://github.com/pradel/accounts-js-server-tutorial">https://github.com/pradel/accounts-js-server-tutorial</a>.</p>



<p>If you want to learn more about accounts-js head over our website and check the documentation <a href="https://www.accountsjs.com/">https://www.accountsjs.com/</a> 🔐.</p>


Email & password authentication with accounts-js and Apollo Server


<p>To best ensure the safety and comfort of everyone attending, <strong>GraphQL Summit 2020 is now <a href="https://summit.graphql.com/">GraphQL Summit Worldwide</a>: a free, virtual event</strong>. Although we’re bummed that we won’t be able to gather in person this year, we’re also thrilled to welcome many GraphQL community members across the globe that haven’t been able to attend in past years due to travel.<br><br>As additional benefits of going virtual, we can host Summit earlier in the year than usual, and split its content across two weeks to help prevent screen time burnout. GraphQL Summit Worldwide will take place across <strong>July 30-31 and August 6-7, 2020</strong>.<br><br>Attendees will have access to 3-4 hours of talks and panels each day from experts in the GraphQL community. As always, we’ll create multiple environments for attendees to learn from each other and meet GraphQL community leaders.<br><br><strong>Together with Eventbrite, we will be refunding all paid Summit 2020 tickets in the coming days.</strong> If you purchased a ticket, no action is required on your end to receive your refund.<br><br>Everyone at Apollo is beyond grateful for the support you’ve shown GraphQL Summit the past four years, and we look forward to showcasing an extraordinary online conference experience with you this year. <strong><a href="https://www.eventbrite.com/e/graphql-summit-worldwide-tickets-106102421198">Register now to join us!</a></strong><br></p>


Announcing GraphQL Summit Worldwide


<p>Blogging is an important way we help developers build great apps at Apollo. It’s how we share GraphQL best practices, spread awareness about new Apollo features, and connect with our awesome community of developers.</p>



<p>In four years, our blog has grown from a small company blog into a valuable learning resource for thousands of developers worldwide. We’d like to give a big thank you to all the community contributors who made this possible by publishing articles on our blog. Sharing your knowledge is what has made this blog successful.</p>



<p>We’re excited to announce that the Apollo blog has a new home at <a href="https://www.apollographql.com/blog/" rel="noreferrer noopener" target="_blank"><strong>apollographql.com/blog</strong></a>! 🚀 Rest assured, we’ve migrated all of our articles over to <a href="https://www.apollographql.com/blog/" rel="noreferrer noopener" target="_blank">the new site</a>, so you don’t have to worry about missing your favorites.</p>



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



<p>When we first started the Apollo blog in 2016, publishing on Medium was a natural choice because it allowed us to reach developers that may have not otherwise heard of us. It worked! Over the years, we amassed an audience of over 26,000 subscribers who enjoy learning about Apollo.</p>



<p>While we want our articles to reach as many developers as possible, that goal shouldn’t come at the expense of our readers. In recent months, we’ve been disappointed with Medium’s pop-ups and paywall that distract from the reading experience and restrict developers from accessing our content.</p>



<p>Instead, we decided to move off Medium in favor of creating <a href="https://www.apollographql.com/blog/" rel="noreferrer noopener" target="_blank">our own blog</a> with Gatsby, WordPress, and Netlify. Gatsby enables us to use React for our site’s frontend while querying WordPress at build time, resulting in a blog that’s fast, consistent with other Apollo sites like <a href="https://www.apollographql.com/docs/" rel="noreferrer noopener" target="_blank">the docs</a>, and easy to publish.&nbsp;</p>



<p>Our blog is <a href="https://github.com/apollographql/blog" rel="noreferrer noopener" target="_blank">open source</a>, so please file an issue if you have any feedback. Additionally, be on the lookout for a deep dive into how we built the Apollo blog from lead Developer Experience engineer <a href="https://medium.com/u/e9878a0ec91c" target="_blank" rel="noreferrer noopener">Trevor Blades</a>!</p>



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



<p>We love community contributions to our blog, and we encourage you to <a href="https://www.apollographql.com/docs/community/blog-post-contributions/" rel="noreferrer noopener" target="_blank"><strong>submit a proposal</strong></a> if you have an idea you’d like to share.</p>



<p>Posting to the Apollo blog is an excellent way to get involved in the GraphQL community, gain exposure, and become a better technical writer. I know this from experience, since posting <a href="https://blog.apollographql.com/reducing-our-redux-code-with-react-apollo-5091b9de9c2a" rel="noreferrer noopener" target="_blank">my first article</a> to the Apollo blog eventually led to me joining the team. One thing that impressed me about my first experience contributing that still rings true today was how supportive the Apollo team was during the writing process.</p>



<p>Whether you’re new to technical blogging or an experienced writer, we’re here for you through every step of the way. Even if your idea isn’t fully formed, we’ll work with you to scope it down, shape it, and come up with an outline. Once you have a draft, we’ll help you edit it so it’s clear and concise. Finally, we’ll spotlight your post on our blog homepage and share it with thousands of developers on social media.</p>



<p>Blogging is one of the most effective ways to teach others while leveling up your own skills. What are you waiting for? <a rel="noreferrer noopener" href="https://www.apollographql.com/docs/community/blog-post-contributions/" target="_blank">Submit a proposal</a> and let us know what you think about the <a rel="noreferrer noopener" href="https://www.apollographql.com/blog/" target="_blank">new Apollo blog</a>. Happy reading!</p>


Ready for takeoff: The new Apollo blog

First Impressions with Apollo Client 3


<p>The Apollo community is made up of developers around the world building client-side experiences on top of the data graph.</p>



<p>If you’re as excited about the data graph as we are, one of the best ways to help the community is to write about your experience! We love community blog posts, and we’d love to work with you to get your post published on the&nbsp;<a href="http://blog.apollographql.com/" target="_blank" rel="noreferrer noopener">Apollo blog</a>.</p>



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



<p>Submit your idea using our 👉&nbsp;<a href="https://docs.google.com/forms/d/e/1FAIpQLSdlnoe3luY7qK4Q6PUZSAke9lRpVRgMjrkcO2jZpwfy-9KSDQ/viewform" target="_blank" rel="noreferrer noopener">Blog Post Proposal Form</a>!</p>



<p>Don’t worry, your first draft doesn’t have to be perfect! We’ll work with you to transform it into an awesome blog post.</p>



<p>If you’ve already written something that you think would be useful for the Apollo developer community, feel free to submit that as well.</p>



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



<p>Here are a few examples of the types of blog posts we’d love to read.</p>



<ul class="wp-block-list"><li>“How to” guides, recipes, or tutorials on how to address problems you’ve solved with Apollo (here’s an example, “<a target="_blank" rel="noreferrer noopener" href="https://blog.apollographql.com/apollo-client-react-how-to-query-on-click-c1d4fecf9b66">Apollo Client [React] — How to Query on Click</a>”)</li><li>Stories about how Apollo helped you overcome different challenges on work and personal projects</li><li>Something cool you built with Apollo</li><li>Showcasing a tool, fix, or other content you or someone else has contributed to Apollo’s open source community</li><li>Guidance and resources for learning Apollo, GraphQL, best practices, architecture, different tools/integrations, and other Apollo-related content.</li><li>Any other topics that you think would be valuable to people learning about or working with Apollo</li></ul>



<p>We’re open to all kinds of topics as long as it relates to Apollo in some way. We love posts of all reading levels (beginner to intermediate, to advanced). If you’re stumped, we especially like posts that mix Apollo with the following topics:</p>



<ul class="wp-block-list"><li>TypeScript</li><li>GraphQL best practices</li><li>Caching</li><li>React.js</li><li>Authentication &amp; authorization</li><li>Error handling</li><li>Front-end development</li><li>Server-side development</li><li>Scaling GraphQL</li><li>Schema design</li></ul>



<h2 class="wp-block-heading" id="696b"><a href="#additional-information" aria-hidden="true" class="aal_anchor" id="additional-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>Additional information</h2>



<p>For more information on the process and the content we’d love to read, check out our <a rel="noreferrer noopener" href="https://www.apollographql.com/docs/community/blog-post-contributions/" target="_blank">Blog Post Submission docs</a>.</p>



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



<p>We can’t wait to see what you’ve been working on and the problems you’ve been solving!</p>



<p>👉<a href="https://docs.google.com/forms/u/2/d/e/1FAIpQLSdlnoe3luY7qK4Q6PUZSAke9lRpVRgMjrkcO2jZpwfy-9KSDQ/viewform" target="_blank" rel="noreferrer noopener">Submit your idea here</a>!</p>


How to Contribute to the Apollo Developer Blog

What I Learned At GraphQL Summit


<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="432" height="432" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_2N8OjwRkx_cFXhImivIeZA-1.png" alt="" class="wp-image-617" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_2N8OjwRkx_cFXhImivIeZA-1.png 432w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_2N8OjwRkx_cFXhImivIeZA-1-300x300.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_2N8OjwRkx_cFXhImivIeZA-1-150x150.png 150w" sizes="auto, (max-width: 432px) 100vw, 432px" /></figure>



<p>We’re bringing back some of the most popular talks of GraphQL Summit followed by live Q&amp;A’s with the Apollo engineers who gave them.<br><br>They share guidance and concrete steps to build, maintain, and protect your data graph, whether you’re currently exploring and prototyping with GraphQL, working on shipping your first feature or an entire product, or considering rolling out to a data graph to your entire organization.<br><br>Read more about the talks and sign-up below. We look forward to answering your questions!</p>



<p><a href="https://register.gotowebinar.com/register/2421535124706884363" target="_blank" rel="noreferrer noopener"><strong>The GraphQL developer experience</strong></a><br>Thu, Nov 14–10am PDT.<br>Presenter: Daniele Man, Engineering Manager, Apollo</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="180" height="180" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_huZrDrOYWJTytuv_MipemQ.jpg" alt="" class="wp-image-621" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_huZrDrOYWJTytuv_MipemQ.jpg 180w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_huZrDrOYWJTytuv_MipemQ-150x150.jpg 150w" sizes="auto, (max-width: 180px) 100vw, 180px" /></figure>



<p>Hear about how the shift from legacy APIs to GraphQL can spark joy and productivity in developers. See Danielle walk through a live demo of connecting backend services to UI with a seamless programming model that extends from server to client using Apollo GraphQL and React.</p>



<p><strong>Who is this webcast for?</strong><br>This is a session for frontend developers of all levels. You’ll see what the modern app developer experience looks like, learn how to get started, and discover what you may not even realize you’re missing.<br><br><strong>Why does this matter?</strong><br><em>With GraphQL, it’s easier than ever to set ourselves up to have a great developer that brings more productivity and satisfaction to our jobs.</em></p>



<p><a href="https://register.gotowebinar.com/register/2421535124706884363" target="_blank" rel="noreferrer noopener">Save your seat</a><br><br><a href="https://attendee.gotowebinar.com/register/278789272463567884" target="_blank" rel="noreferrer noopener"><strong>The agile schema evolution and graph management</strong></a><br>Tue, Nov 19–10am PDT.<br>Presenter: Evans Hauser, Core Developer, Apollo</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="180" height="180" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_XCiFXCar-n6ikkbkNK5gtQ.jpg" alt="" class="wp-image-620" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_XCiFXCar-n6ikkbkNK5gtQ.jpg 180w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_XCiFXCar-n6ikkbkNK5gtQ-150x150.jpg 150w" sizes="auto, (max-width: 180px) 100vw, 180px" /></figure>



<p>As GraphQL usage increases in an organization, Evans will demonstrate why and how teams should practice agile schema development and iteratively evolve their schema over time.</p>



<p>Learn specific practices and workflows that prevent outages, focus work, and foster communication when developing and maintaining a data graph. This includes schema validation, field rollover, and schema documentation.</p>



<p><strong>Who is this webcast for?</strong><br>This webcast is designed for teams with one or more data graph applications in production or development who want to improve their velocity. Developers who plan to modify or maintain a data graph will find the talk particularly interesting.<br><br><strong>Why does this matter?</strong><br>Agile schema development increases data graph developer velocity by preventing outages, focusing backend scope, and providing guided communication between client and server teams. This prevention, focus, and communication save money and time, which leads to more data graph stability, robustness, and features.</p>



<p><a href="https://attendee.gotowebinar.com/register/278789272463567884" target="_blank" rel="noreferrer noopener">Save your seat</a><br><br><a href="https://register.gotowebinar.com/register/2023194156744213516" target="_blank" rel="noreferrer noopener"><strong>The do’s and don’ts for your schema and GraphQL operations</strong></a><br>Thu, Nov 21–10am PDT.<br>Presenter: Michael Watson, Customer Success Engineer, Apollo</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="180" height="180" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_Ayxog438j_faDBOHqIabxA.jpg" alt="" class="wp-image-619" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_Ayxog438j_faDBOHqIabxA.jpg 180w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Ayxog438j_faDBOHqIabxA-150x150.jpg 150w" sizes="auto, (max-width: 180px) 100vw, 180px" /></figure>



<p>Learn best practices for your GraphQL schema and client operations. We’ll start with some common do’s and don’ts for your schema that will help client more easily consumer your graph. Then we’ll cover some common pitfalls we see in GraphQL operations and how some small changes can being a lot of clarity to your graph. We’ll also sprinkle in some Apollo tooling and what is available in the platform to help support these common do’s and don’ts.</p>



<p><strong>Who is this Session for?</strong><br>Anyone who is using GraphQL (does not have to be using Apollo).<br><br><strong>Why does this matter?</strong><br>It’s important to design a product centric schema that can be easily consumed by clients. As you design your GraphQL schema, you may be starting with only one client application but the future could have hundreds of clients consuming your graph; this will help make sure you’re prepared.<br><br>Now that you have more than one client consuming your graph, you need to really understand who and how is your graph being consumed. This means making sure the operations are clients are sending us makes sense for our organization.</p>



<p><a href="https://attendee.gotowebinar.com/register/2023194156744213516" target="_blank" rel="noreferrer noopener">Save your seat</a></p>



<p><a href="https://attendee.gotowebinar.com/register/7230993598309984012" target="_blank" rel="noreferrer noopener"><strong>The architecture of federation</strong></a><br>Thu, Dec 5–10am PDT.<br>Jeff Hampton, Solutions Architect, Apollo</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="282" height="282" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_zdGRdhzWoBk-PuAPVBAUIg.jpg" alt="" class="wp-image-618" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_zdGRdhzWoBk-PuAPVBAUIg.jpg 282w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_zdGRdhzWoBk-PuAPVBAUIg-150x150.jpg 150w" sizes="auto, (max-width: 282px) 100vw, 282px" /></figure>



<p>Apollo Federation brought a new architecture to GraphQL and a new way of thinking about how to design and build a schema, but what does it mean for how your team builds a data graph? During this webcast, you will learn about the architectural principles behind federation and see how you can implement a well designed and structured data graph using Apollo.</p>



<p><strong>Who is this Session for?</strong><br>This session is for developers, engineering managers, and architects who want a deeper understanding of Apollo Federation, starting at its core concepts.<br><br><strong>Why does this matter?</strong><br>Apollo Federation is a principled implementation of a “single graph,” enabling different teams to collaborate, contribute, and manage a single graph whose implementation is loosely-coupled. Because Federation is built upon the core GraphQL syntax, it is declarative. Federation brings new opportunities to scale and optimize GraphQL across the enterprise.</p>



<p><a href="https://attendee.gotowebinar.com/register/7230993598309984012" target="_blank" rel="noreferrer noopener">Save your seat</a></p>


Roadmap to your data graph: webcast and Q&A series


<p>Managing customer experiences across all the products in a single brand is hard enough. Now imagine doing that for 25 brands and more than 200 websites. Expedia Group has managed to sustain incredible growth over the years, but growing that large that quickly was bound to create a fair amount of technical debt. Development teams found themselves spending more and more time duplicating work across platforms and managing service APIs — and less time innovating on new travel offerings.</p>



<p>As it goes with technical debt, every new experience and every new platform made matters exponentially worse. In particular, it was the rise of native mobile clients that really ramped up the complexity.</p>



<p><a href="https://twitter.com/imnotdanbo" target="_blank" rel="noreferrer noopener">Dan Boerner</a>, Distinguished Product Manager at Expedia Group explained:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>“Much of the mobile app team’s work had nothing to do with creating experiences for customers because they were constantly figuring out what API to call, on-boarding those APIs, and dealing with version and endpoint changes.”</p></blockquote>



<p>To resolve their technical debt, they made a strategic decision to build a GraphQL-based data graph with Apollo.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="387" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_rNqPyoKfRvhNKULK8x5wbw-1024x387.png" alt="" class="wp-image-604" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_rNqPyoKfRvhNKULK8x5wbw-1024x387.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_rNqPyoKfRvhNKULK8x5wbw-300x113.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_rNqPyoKfRvhNKULK8x5wbw-768x290.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_rNqPyoKfRvhNKULK8x5wbw-1536x580.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_rNqPyoKfRvhNKULK8x5wbw-2048x774.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_rNqPyoKfRvhNKULK8x5wbw-1200x453.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_rNqPyoKfRvhNKULK8x5wbw-1980x748.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>We were honored to work with the team at Expedia Group that’s making it happen. In their&nbsp;<a href="https://www.apollographql.com/customers/expediagroup" target="_blank" rel="noreferrer noopener">new customer story</a>, you’ll get a comprehensive look at their unique technical and organizational challenges, early experimentation with Backend-For-Frontend, and where they landed with an agile approach to building out a single organization-wide data graph for GraphQL.</p>



<p>The results have been nothing short of transformational, both in accelerating development and in freeing up resources to experiment more.</p>



<p>As&nbsp;<a href="https://www.linkedin.com/in/tyler-fleck-09b33125/" target="_blank" rel="noreferrer noopener">Tyler Fleck</a>, Director of User Experience, explains it:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>“Trying out new ideas across all our clients without the need to make any client-specific changes speeds up the design and learning process, and ultimately leads to better customer experiences.”</p></blockquote>



<p>There are tons of learnings and practical tips to take away, whether you’re a small team starting out in your GraphQL journey or far along and looking to scale a data graph across teams.</p>



<p>Grab a cup of coffee and head over to read the full&nbsp;<a href="https://www.apollographql.com/customers/expediagroup" target="_blank" rel="noreferrer noopener"><strong>Expedia Group story</strong></a>. If you’d like to chat about how to bring the awesome benefits of a federated graph to your organization, we’d love to&nbsp;<a href="https://www.apollographql.com/contact-sales" target="_blank" rel="noreferrer noopener">get in touch</a>!</p>


Lessons from Expedia Group’s journey to a data graph


<p><a href="https://summit.graphql.com/" target="_blank" rel="noreferrer noopener">GraphQL Summit</a>, held in SF on October 30 and 31, is the world’s largest conference dedicated to GraphQL. This year will feature over 60 technical talks across 3 tracks, selected to further your GraphQL knowledge with educational sessions that provide practical next steps for your next project. And with 1,200 attendees, the networking and learning opportunities will be many.<br><br>Here is a small selection of great talks we’re thrilled to have in the 2019 lineup:</p>



<ul class="wp-block-list"><li><strong>Scaling GraphQL Beyond a Backend for Frontend</strong>&nbsp;by&nbsp;<a href="https://twitter.com/msmichellegar" target="_blank" rel="noreferrer noopener">Michelle Garrett</a>&nbsp;&amp;&nbsp;<a href="https://twitter.com/FadumaFaralacag" target="_blank" rel="noreferrer noopener">Faduma Mohammed</a>&nbsp;from Condé Nast International</li><li><strong>How do you get changes made to GraphQL?</strong>&nbsp;by&nbsp;<a href="https://twitter.com/orta" target="_blank" rel="noreferrer noopener">Orta</a>&nbsp;from Microsoft</li><li><strong>Caching &amp; GraphQL: Setting the Story Straight</strong>&nbsp;by&nbsp;<a href="https://twitter.com/__xuorig__" target="_blank" rel="noreferrer noopener">Marc-Andrè Giroux</a>&nbsp;from GitHub</li><li><strong>State Management in GraphQL using React Hooks &amp; Apollo</strong>&nbsp;by&nbsp;<a href="https://twitter.com/shrutikapoor08" target="_blank" rel="noreferrer noopener">Shruti Kapoor</a>&nbsp;from PayPal</li><li><strong>GraphQL in Every Language</strong>&nbsp;by&nbsp;<a href="https://twitter.com/jnwng" target="_blank" rel="noreferrer noopener">Jon Wong</a>&nbsp;from Coursera</li><li><strong>Client-side GraphQL at scale</strong>&nbsp;by&nbsp;<a href="https://twitter.com/_lemonmade" target="_blank" rel="noreferrer noopener">Chris Sauvè</a>&nbsp;from Shopify</li><li><strong>Migrating to Apollo at Airbnb</strong>&nbsp;by&nbsp;<a href="https://twitter.com/briebunge" target="_blank" rel="noreferrer noopener">Brie Bunge</a>&nbsp;from Airbnb</li></ul>



<p>Discover over 40 more speakers and their&nbsp;<a href="https://summit.graphql.com/speakers" target="_blank" rel="noreferrer noopener">sessions here.</a></p>



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



<p><a href="https://summit.graphql.com/#tickets" target="_blank" rel="noreferrer noopener">Act fast before discounted tickets run out</a>. Grab a team ticket ($849/person for a team of 3 or more) or some of the last early bird passes ($899).</p>



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



<p>GraphQL Summit is committed to building a diverse and inclusive conference, which is why we’re excited to announce several new scholarship programs:</p>



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



<p>We’re inviting all women, LGBTQIA+ folks, people of color, people with disabilities, and economically disadvantaged individuals interested in GraphQL to apply for a diversity scholarship and join us at Summit for free. Simply&nbsp;<a href="https://docs.google.com/forms/d/e/1FAIpQLSc0sGPdPUyJJkD0Q6BZ4HbUFeDSE7t8JuJV5tW-8ZT7PTHwAA/viewform?usp=sf_link" target="_blank" rel="noreferrer noopener">fill out</a>&nbsp;this form and we’ll select applicants by&nbsp;<strong>Sep 14, 2019</strong>.</p>



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



<p>We’re offering open source contributors to GraphQL and community projects an opportunity to apply for a Community ticket at $99. Please&nbsp;<a href="https://docs.google.com/forms/d/e/1FAIpQLSeqi2vjXUN0rAoicEfNLixfdgiZoeHguXCNsuFoR-v8NdE2MA/viewform?usp=sf_link" target="_blank" rel="noreferrer noopener">fill out</a>&nbsp;this form for a chance to be selected. We’ll select applicants by&nbsp;<strong>Sep 14, 2019</strong>.</p>



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



<p>In addition to excellent technical talks, we’re also planning some activities to help you get the most out of Summit:</p>



<h3 class="wp-block-heading" id="89ac"><a href="#apollo-office-hours-%f0%9f%9a%80" aria-hidden="true" class="aal_anchor" id="apollo-office-hours-%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>Apollo office hours 🚀</h3>



<p>Book some 1:1 time with Apollo engineers to discuss and get advice on your projects.</p>



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



<p>Hands-on training sessions will take place on October 29th between 12pm and 5pm. We’ll announce our bootcamps and how you can purchase tickets in early September.</p>



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



<p>We’ll be hosting a Halloween party on the evening of the 30th of October. Prizes to the most creative costumes and other surprises await!</p>



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



<p>With 1,200 attendees this year, sponsoring is a great opportunity to get your brand in front of developers and decision-makers in the growing GraphQL community. Sponsorship sales close&nbsp;<strong>August 30th</strong>. Act fast: a few spots are still available. See the&nbsp;<a href="https://summit.graphql.com/GraphQL%20Summit%20Sponsorship%20Proposal%20-%20August%202019.pdf" target="_blank" rel="noreferrer noopener">sponsorship prospectus</a>&nbsp;and get in touch by contacting&nbsp;<a href="mailto:organizers@graphql.com" target="_blank" rel="noreferrer noopener">organizers@graphql.com</a>.</p>



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



<p>We hope to see you at&nbsp;<a href="https://summit.graphql.com/" target="_blank" rel="noreferrer noopener">GraphQL Summit 2019</a>! 🎉 To connect with other developers attending the conference, check out our&nbsp;<a href="https://spectrum.chat/apollo/events" target="_blank" rel="noreferrer noopener">Spectrum channel</a>.</p>


Meet our speakers for GraphQL Summit 2019!


<p>Rolling out GraphQL at your company? Whether you’re just getting started or scaling a production deployment, attending an Apollo Day will help you learn best practices from the experts at Apollo and hear technical talks from engineers at&nbsp;<strong>Expedia</strong>&nbsp;already using it in production. You’ll also get a front row seat to learn about a new platform capability we’re excited to announce at the event. And for the first time, we are&nbsp;<a href="https://register.gotowebinar.com/register/6329454533289012236?source=blog" target="_blank" rel="noreferrer noopener">broadcasting</a>&nbsp;every session from Seattle live!</p>



<p>You will learn how to:</p>



<ul class="wp-block-list"><li>Plot a strategy to adopt GraphQL on top of existing REST APIs and microservices</li><li>Create a GraphQL microservices architecture by composing schemas into one graph for your company</li><li>Manage local and remote state in React apps seamlessly</li><li>Implement a build/test/deploy workflow that allows product teams to safely make changes to their schema</li><li>Monitor GraphQL-specific performance and errors, integrated with your existing systems like Datadog, PagerDuty, Slack, etc.</li></ul>



<p><strong>Agenda:</strong></p>



<ul class="wp-block-list"><li>11:30am &#8211; 12:15pm Check-in &amp; Lunch</li><li>12:15pm &#8211; 12:45pm Welcome by Matt DeBergalis, CTO at Apollo</li><li>12:45pm &#8211; 1:15pm The GraphQL developer experience with Danielle Man, Engineering Manager at Apollo</li><li>1:15pm &#8211; 1:45pm Coffee break and networking</li><li>1:45pm &#8211; 2:15pm Introducing Apollo Federation with James Baxley III, Engineering Manager at Apollo</li><li>2:15pm &#8211; 3:00pm Creating a federated schema for a global company by Shane Myrick, Senior Software Developer at Expedia Group</li><li>3.00pm &#8211; 3:30pm React Native talk from James Reggio</li><li>3:30pm &#8211; 4:00pm Open Q&amp;A with our speakers</li><li>4:00pm &#8211; 5:00pm Refreshments, Learn from Apollo Engineers &amp; Networking<br><br>Sign up for the webcast&nbsp;<a href="https://attendee.gotowebinar.com/register/6329454533289012236?source=blog" target="_blank" rel="noreferrer noopener">here</a>&nbsp;or register to join us&nbsp;<strong>in-person in Seattle</strong>&nbsp;<a href="https://www.eventbrite.com/e/apollo-day-seattle-tickets-62440338734?aff=Blog" target="_blank" rel="noreferrer noopener">here</a>.</li></ul>


Join our first Apollo Day webcast, live from Seattle on July 16th


<p>As developers, we constantly interact with documentation. It’s what welcomes us to a project for the first time, it’s a trusted companion that guides us toward celebrating our first “Hello World,” and it’s the first place we turn when we’re frustrated with a bug or curious about a new feature.</p>



<p>Good documentation is at the heart of crafting an excellent developer experience, which is why we’re making a big investment in improving our docs at Apollo. Today, we’re excited to share the first big milestone on our journey:&nbsp;<strong>Apollo’s&nbsp;</strong><a href="https://www.apollographql.com/docs/" target="_blank" rel="noreferrer noopener"><strong>new docs site</strong></a><strong>&nbsp;built with Gatsby!&nbsp;</strong>🚀</p>



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



<p>Previously, our docs site was built with Hexo, a static site generator, and shared its theme with Meteor. Although we love our Meteor roots, the shared theme was becoming difficult for our team to maintain and evolve over time.</p>



<p>We wanted to migrate to React so we could share UI across all Apollo sites and add interactive elements to our docs. While I wouldn’t normally advocate for a rewrite, our team decided it was necessary in order to modernize our stack. Both our&nbsp;<a href="https://www.apollographql.com/" target="_blank" rel="noreferrer noopener">homepage</a>&nbsp;and the&nbsp;<a href="https://www.apollographql.com/" target="_blank" rel="noreferrer noopener">GraphQL Summit site</a>&nbsp;are built with&nbsp;<a href="https://www.gatsbyjs.org/" target="_blank" rel="noreferrer noopener">Gatsby</a>, so it was an easy choice for our new docs infrastructure.</p>



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



<p>With nearly 200 repositories in the&nbsp;<a href="https://github.com/apollographql" target="_blank" rel="noreferrer noopener">Apollo organization on GitHub</a>, it’s important that each project’s documentation lives alongside the code. When we first heard about&nbsp;<a href="https://www.gatsbyjs.org/blog/2018-11-11-introducing-gatsby-themes/" target="_blank" rel="noreferrer noopener">Gatsby’s new themes feature</a>, Apollo engineer&nbsp;<a href="https://medium.com/u/e9878a0ec91c?source=post_page-----5645b9d56260----------------------" target="_blank" rel="noreferrer noopener">Trevor Blades</a>&nbsp;quickly built a proof-of-concept that confirmed it would be perfect for our needs.</p>



<p>Gatsby themes allow you to easily compose UI, configuration, and functionality across multiple sites. Themes are distributed as npm packages, and we use them for sharing versioning logic, constructing the left-hand navigation, common layout components, and more. Not only are Gatsby themes awesome for building docs sites, they’re also great for quickly spinning up derivative sites like&nbsp;<a href="https://principledgraphql.com/" target="_blank" rel="noreferrer noopener">Principled GraphQL</a>, which was built by extending&nbsp;<code>&lt;a href=&quot;https://github.com/apollographql/gatsby-theme-apollo/&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;gatsby-theme-apollo&lt;/a&gt;</code>.</p>



<p>We’ve been really happy with themes so far, and can’t wait to explore them further. Thank you to&nbsp;<a href="https://medium.com/u/8cb9e0fea905?source=post_page-----5645b9d56260----------------------" target="_blank" rel="noreferrer noopener">Christopher Biscardi</a>&nbsp;and the rest of the Gatsby team for all their support along the way! 🤗</p>



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



<p>When designing our new UI, we wanted to focus on making our content more discoverable. Previously, our layout displayed too much information on the left sidebar, which made it difficult to find what you were looking for without scrolling. Apollo designer&nbsp;<a href="https://medium.com/u/12880b6da5ba?source=post_page-----5645b9d56260----------------------" target="_blank" rel="noreferrer noopener">Jess Marina</a>&nbsp;rose to the challenge and created a cleaner layout and navigation structure to solve this pain point.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="610" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_qMxAIHgR4Zl-EhvZHjwwqg-1024x610.png" alt="" class="wp-image-593" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_qMxAIHgR4Zl-EhvZHjwwqg-1024x610.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_qMxAIHgR4Zl-EhvZHjwwqg-300x179.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_qMxAIHgR4Zl-EhvZHjwwqg-768x457.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_qMxAIHgR4Zl-EhvZHjwwqg-1536x914.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_qMxAIHgR4Zl-EhvZHjwwqg-2048x1219.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_qMxAIHgR4Zl-EhvZHjwwqg-1200x714.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_qMxAIHgR4Zl-EhvZHjwwqg-1980x1179.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Before: Our old docs site was difficult to navigate.</figcaption></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="630" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_SHw4Hd3yInup9hNXskFR3w-1024x630.png" alt="" class="wp-image-594" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_SHw4Hd3yInup9hNXskFR3w-1024x630.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_SHw4Hd3yInup9hNXskFR3w-300x185.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_SHw4Hd3yInup9hNXskFR3w-768x473.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_SHw4Hd3yInup9hNXskFR3w-1536x945.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_SHw4Hd3yInup9hNXskFR3w-2048x1261.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_SHw4Hd3yInup9hNXskFR3w-1200x739.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_SHw4Hd3yInup9hNXskFR3w-1980x1219.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>After: The content on our new docs site is easier to discover and read.</figcaption></figure>



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



<p>For our new docs site, we removed article details from the left sidebar and added a navigation panel to the right of the screen to show users all the topics that would be covered on a page. We also made each section on the left sidebar expand and contract so users could zero in on the pages that are relevant to them.</p>



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



<p>Since our docs site spans a large breadth of content, we wanted to improve the search experience. We moved the search bar to a more prominent location, redesigned the search menu, and added a keyboard command to trigger search.</p>



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



<p>We’re happy with the progress we’ve made toward improving the&nbsp;<a href="https://www.apollographql.com/docs/" target="_blank" rel="noreferrer noopener">Apollo docs</a>&nbsp;experience, but our work isn’t done yet! Over the next few months, we will be working on a refactor of our information architecture in order to help developers find what they’re looking for faster. Before embarking on this project, we will conduct user testing and publicize a plan to the Apollo community for feedback. If you’re interested in contributing, check out our&nbsp;<a href="https://spectrum.chat/apollo/docs" target="_blank" rel="noreferrer noopener">Docs channel on Spectrum</a>&nbsp;to learn more.</p>



<p>With our new infrastructure, we’ll also be able to support&nbsp;<a href="https://mdxjs.com/" target="_blank" rel="noreferrer noopener">MDX</a>, which will allow us to render React components alongside markdown in the same file. We’re super excited about the creative possibilities MDX will enable, especially with integrating more interactive elements into our docs. Some ideas we’ve started to explore include: interactive code blocks that compile TypeScript to JavaScript, expansion panels with step-by-step instructions, and embedding GraphiQL for running queries.</p>



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



<p>We can’t wait to see what the future holds for Apollo docs, and we hope you enjoy exploring the new site! If you have any feature requests or feedback on the site, please let us know by filing an issue in the&nbsp;<a href="https://github.com/apollographql/gatsby-theme-apollo" target="_blank" rel="noreferrer noopener">Gatsby theme repo</a>.</p>


A new Apollo docs experience


<p>We’re excited to welcome the GraphQL community back to San Francisco, CA for this year’s&nbsp;<a href="https://summit.graphql.com/" target="_blank" rel="noreferrer noopener">GraphQL Summit</a>&nbsp;at the Hyatt Regency on October 29–31, 2019. With over 1,200 developers expected to attend, this year’s edition will be bigger, better, and spookier than ever. 👻</p>



<p>At Summit, you’ll hear new ideas and learn best practices from GraphQL leaders, meet maintainers of open source GraphQL projects, and connect with passionate GraphQL developers from all around the world. For a taste of what to expect, check out last year’s&nbsp;<a href="https://www.youtube.com/playlist?list=PLpi1lPB6opQzSqSuIkDbIL7f73EXcjB_7" target="_blank" rel="noreferrer noopener">conference YouTube playlist</a>.</p>



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



<p>If you have ideas to share, we want to hear them!&nbsp;<a href="https://goo.gl/forms/JCYgExtTQM5FkuuG2" target="_blank" rel="noreferrer noopener"><strong>Our Call for Proposals is now open until May 24.</strong></a></p>



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



<p>Developers come to Summit to get inspired and take back knowledge they can share with their teams. We love talks that have a unique point of view, teach the audience something new, and push the GraphQL community forward.</p>



<p>GraphQL Summit welcomes developers of all experience levels and backgrounds. It’s important to us that our speaker lineup reflects a diverse balance of races, genders, and backgrounds, and we encourage underrepresented groups in tech and first-time speakers to apply. If you would like feedback on your proposal, we’re available to help at&nbsp;<a href="mailto:speakers@graphql.com" target="_blank" rel="noreferrer noopener">speakers@graphql.com</a>.</p>



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



<p>This year’s event will be larger than ever, so we’ve organized our content program into themes to help attendees discover what’s relevant to them. We’ve included suggested talk topics for each theme in the&nbsp;<a href="https://goo.gl/forms/4kHKDvIbRYwumhc53" target="_blank" rel="noreferrer noopener">CFP</a>, but please don’t limit yourselves to our list. Let your creativity shine through! ✨</p>



<ul class="wp-block-list"><li><strong>The GraphQL stack:</strong>&nbsp;How should today’s product teams think about integrating GraphQL into their stack? These talks should share practical knowledge that developers can use right away.</li><li><strong>Deep dives:</strong>&nbsp;Technical talks on GraphQL servers, clients, or the specification itself that appeal to an advanced/expert level audience.</li><li><strong>Spooky stories:</strong>&nbsp;Name a difficult challenge you faced and how you solved it. Did you take down your production GraphQL API and live to tell the tale? Let us know what you learned from that experience!</li><li><strong>GraphQL infrastructure:</strong>&nbsp;Talks for the architects, backend developers, and DevOps folks who keep our GraphQL APIs running smoothly.</li><li><strong>Creative uses of GraphQL:</strong>&nbsp;Have you used GraphQL in an unusual way? We want to hear about it!</li><li><strong>Community:</strong>&nbsp;This theme celebrates the GraphQL community and shows people how to get involved.</li></ul>



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



<p>At GraphQL Summit, you’ll learn best practices and hear new ideas from a diverse group of GraphQL leaders from around the world. We’re excited to announce our first round of featured speakers:</p>



<figure class="wp-block-image alignfull size-large"><img loading="lazy" decoding="async" width="1024" height="292" src="https://apollographql.wpengine.com/wp-content/uploads/2020/02/1_R8w22QkSCNiXRoA1us8z6A-1024x292.png" alt="" class="wp-image-54" srcset="https://wp.apollographql.com/wp-content/uploads/2020/02/1_R8w22QkSCNiXRoA1us8z6A-1024x292.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/02/1_R8w22QkSCNiXRoA1us8z6A-300x86.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/02/1_R8w22QkSCNiXRoA1us8z6A-768x219.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/02/1_R8w22QkSCNiXRoA1us8z6A-1536x438.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/02/1_R8w22QkSCNiXRoA1us8z6A-2048x584.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/02/1_R8w22QkSCNiXRoA1us8z6A-1200x342.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/02/1_R8w22QkSCNiXRoA1us8z6A-1980x565.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>GraphQL Summit 2019 featured speakers</figcaption></figure>



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



<p>Brie is a Software Engineer at Airbnb. After an&nbsp;<a href="https://twitter.com/skevy/status/1093666338873126912" target="_blank" rel="noreferrer noopener">awesome talk at JSConf HI</a>&nbsp;on adopting TypeScript at scale, we’re thrilled to have Brie share her TypeScript expertise at Summit this year!</p>



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



<p>Christian is a Senior Developer Advocate at Microsoft. Through his excellent talks on&nbsp;<a href="https://youtu.be/kGeTwLlq7r4" target="_blank" rel="noreferrer noopener">GraphQL vs. REST</a>&nbsp;and well-written fullstack&nbsp;<a href="https://pusher.com/tutorials/instagram-clone-part-2" target="_blank" rel="noreferrer noopener">tutorials</a>, Christian has inspired developers worldwide to learn GraphQL. We’re honored to have him speak at Summit!</p>



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



<p>Lauren is an Engineering Manager at Netflix. Whether she’s&nbsp;<a href="https://youtu.be/y3uXazpAdwo" target="_blank" rel="noreferrer noopener">teaching type systems at React Rally</a>&nbsp;or exploring the strongly typed graph&nbsp;<a href="https://www.no.lol/2018-10-28-exploring-the-strongly-typed-graph/" target="_blank" rel="noreferrer noopener">on her blog</a>, Lauren’s content is always engaging, which is why we can’t wait to see her speak at Summit!</p>



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



<p>Simona is a Senior Developer Advocate at Microsoft. We’re eagerly anticipating her Summit talk, but in the meantime, check out her amazing talks on&nbsp;<a href="https://youtu.be/8m28hVaESaE" target="_blank" rel="noreferrer noopener">serverless GraphQL</a>&nbsp;or&nbsp;<a href="https://medium.freecodecamp.org/why-graphql-is-the-key-to-staying-out-of-technical-debt-7915f8f59a9" target="_blank" rel="noreferrer noopener">her newly released GraphQL video series</a>!</p>



<p>You could be next! If you’d like to join our featured speakers on stage, please&nbsp;<a href="https://goo.gl/forms/JCYgExtTQM5FkuuG2" target="_blank" rel="noreferrer noopener"><strong>submit a proposal to our CFP</strong></a>.</p>



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



<p>If you’re interested in attending GraphQL Summit, we recommend&nbsp;<a href="https://graphql-summit-2019.eventbrite.com/?aff=CFP" target="_blank" rel="noreferrer noopener">purchasing your ticket soon</a>&nbsp;to lock in the best price! There are a limited number of Early Bird passes available, and we sold out of our previous tiers much faster than we anticipated.</p>



<p>We will reimburse your ticket cost if you’re selected to speak. We will also open up discounted Community passes for GraphQL open source contributors soon, in addition to a diversity scholarship program for underrepresented groups in tech at the end of May.</p>



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



<p>We hope to see you at&nbsp;<a href="https://summit.graphql.com/" target="_blank" rel="noreferrer noopener">GraphQL Summit 2019</a>&nbsp;and look forward to reading&nbsp;<a href="https://goo.gl/forms/6BmPPQeZQVKGb6Sl2" target="_blank" rel="noreferrer noopener">your talk proposals</a>! 🎉 To connect with other developers attending the conference, check out our&nbsp;<a href="https://spectrum.chat/apollo/events" target="_blank" rel="noreferrer noopener">Spectrum channel</a>.</p>


GraphQL Summit 2019 Call for Proposals


<p>It’s been three weeks since the 2018 edition of GraphQL Summit concluded, and we’re still beaming from all of the excitement and energy of the GraphQL community. With over 850 developers in attendance, 35 talks, and countless hallway conversations, we were so inspired by all the learnings and best practices shared by speakers and attendees alike.</p>



<p>If there’s one main takeaway from the conference, it’s that&nbsp;<strong>GraphQL has transformed into a developer mega-trend</strong>. Still not convinced? Watch the beginning of Apollo CEO&nbsp;<a href="https://youtu.be/IjJkAL4RWyQ" target="_blank" rel="noreferrer noopener">Geoff Schmidt’s keynote</a>&nbsp;to witness the explosive growth of GraphQL for yourself.</p>



<p>Now that all of the talks are live on the&nbsp;<a href="https://summit.graphql.com/speakers/" target="_blank" rel="noreferrer noopener">GraphQL Summit site</a>, I wanted to highlight a few that I thought captured some of the most important ideas learned for doing GraphQL right:</p>



<ul class="wp-block-list"><li><strong>One cohesive workflow:&nbsp;</strong><a href="https://www.youtube.com/watch?v=JsvElHDuqoA" target="_blank" rel="noreferrer noopener">Adam Neary’s live-coding demo of Airbnb’s GraphQL development workflow</a>&nbsp;is an inside look at how an investment in tools and workflows makes GraphQL a killer technology for one of the most forward-thinking product engineering organizations.</li><li><strong>Design the schema for your product:</strong>&nbsp;GitHub’s Marc-Andre Giroux has&nbsp;<a href="https://medium.com/@__xuorig__" target="_blank" rel="noreferrer noopener">written extensively</a>&nbsp;about GraphQL based on his experience building two of the largest production uses of it at GitHub and Shopify.&nbsp;<a href="https://youtu.be/pJamhW2xPYw" target="_blank" rel="noreferrer noopener">In his Summit talk</a>, he covers many best patterns for GraphQL schemas, including the importance of designing for product behavior and team collaboration.</li><li><strong>Managing your client state with GraphQL:&nbsp;</strong>At last year’s Summit, Peggy Rayzis introduced the idea of&nbsp;<a href="https://www.apollographql.com/docs/react/essentials/local-state.html" target="_blank" rel="noreferrer noopener">using GraphQL to manage local state</a>&nbsp;by extending your GraphQL schema on the clientwith additional types and fields. One year later, local state management is baked into the core Apollo Client.&nbsp;<a href="https://youtu.be/WM7YsPzWuTA" target="_blank" rel="noreferrer noopener">Watch her talk to learn how to use it</a>&nbsp;— once you try it you’ll never go back.</li><li><strong>Testing GraphQL end-to-end:&nbsp;</strong><a href="https://youtu.be/loA3FwbVt90" target="_blank" rel="noreferrer noopener">Jake Dawkins gave a standing-room-only talk</a>&nbsp;packed full of code examples showing the most important patterns for client tests, server tests, and end-to-end tests of the full GraphQL layer.</li><li><strong>Integrating GraphQL and CI:&nbsp;</strong>James Baxley, longtime leader in the GraphQL ecosystem, led the charge to add schema change validation and operation safelisting to Apollo.&nbsp;<a href="https://youtu.be/pmcjl4WCDwY" target="_blank" rel="noreferrer noopener">In his talk he shows how to tie it all into your CI workflow</a>&nbsp;so you can go into production safely and with confidence.</li><li><strong>Taking an agile approach to GraphQL:</strong>&nbsp;Trulia’s&nbsp;<a href="https://youtu.be/eUrtRzqN0h0" target="_blank" rel="noreferrer noopener">Natalie Qabazard &amp; Aditi Garg walk through the most important lessons they learned</a>&nbsp;adopting GraphQL into Trulia’s product engineering stack. Their best practices are especially relevant for teams newer to GraphQL or engineers coming onto a project.</li><li><strong>Modeling your data with best patterns:</strong>&nbsp;Kiyan Azarbar from Shopify laid out&nbsp;<a href="https://youtu.be/mqaz6vmAGis" target="_blank" rel="noreferrer noopener">14 of the most important patterns</a>&nbsp;their API team has used to build their API, all worth considering early in the design process.</li></ul>



<p>If you’re looking for examples of companies adopting GraphQL, we’ve got that too:&nbsp;<a href="https://youtu.be/UBCKJZe6-kA" target="_blank" rel="noreferrer noopener">Audi</a>,&nbsp;<a href="https://youtu.be/NKMDBH0CWHs" target="_blank" rel="noreferrer noopener">Braintree</a>,&nbsp;<a href="https://youtu.be/e6ziHGPkaKM" target="_blank" rel="noreferrer noopener">Netflix</a>,&nbsp;<a href="https://youtu.be/HL7gZnrEy68" target="_blank" rel="noreferrer noopener">PayPal</a>,&nbsp;<a href="https://youtu.be/dstMUwyF5oU" target="_blank" rel="noreferrer noopener">SurveyMonkey</a>,&nbsp;<a href="https://youtu.be/K6_GVXsT8Zs" target="_blank" rel="noreferrer noopener">TV 2 Denmark</a>&nbsp;and others all walked us through their GraphQL journeys.</p>



<p>We’re so excited to see what the future holds for GraphQL and can’t wait to see you at next year’s GraphQL Summit! 🚀 Let us know which talks you enjoyed in the comments.</p>


Highlights from GraphQL Summit 2018


<h3 class="wp-block-heading" id="b39f"><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>



<ul class="wp-block-list"><li>A wide-spread,&nbsp;<a href="https://github.com/dominictarr/event-stream/issues/116" target="_blank" rel="noreferrer noopener">industry-wide security vulnerability</a>&nbsp;impacted a dependency of a dependency of the Apollo VS Code plugin called&nbsp;<code>event-stream</code>.</li><li>The editor extension (along with 38 others)&nbsp;<a href="https://code.visualstudio.com/blogs/2018/11/26/event-stream" target="_blank" rel="noreferrer noopener">was removed from the VS Code Marketplace</a>. These extensions were also uninstalled for users and flagged as “malicious” within VS Code.</li><li>We locked our extension to a safe version of the dependency and worked with the VS Code team to republish the Apollo package which is now safely back on the marketplace for download</li></ul>



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



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



<p>On Monday morning news broke of a security vulnerability that impacted the JavaScript ecosystem at large. A popular dependency called&nbsp;<code>event-stream</code>&nbsp;was discovered to have been compromised. The package, when installed alongside a bitcoin wallet tool called&nbsp;<code>copay</code>&nbsp;or&nbsp;<code>copay-dash</code>, would attempt to siphon and steal bitcoins from users.</p>



<p>We determined that the&nbsp;<code>vscode</code>&nbsp;package that we use to build the Apollo VS Code editor extension was installing&nbsp;<code>event-stream</code>. We locked our versions down to a&nbsp;<a href="https://github.com/apollographql/apollo-tooling/pull/739" target="_blank" rel="noreferrer noopener">previous safe version</a>&nbsp;and uploaded a release to the VS Code Marketplace.</p>



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



<p>We received reports of the editor extension being removed from the marketplace and flagged as malicious. Our team reached out to the VS Code team to ask what was happening and why were flagged.</p>



<p>The prior night, the&nbsp;<a href="https://code.visualstudio.com/blogs/2018/11/26/event-stream" target="_blank" rel="noreferrer noopener">VS Code team removed 38 extensions</a>&nbsp;that depended on the&nbsp;<code>vscode</code>&nbsp;or other related projects that brought the compromised package into builds. After receiving our message on Tuesday, they responded to our team letting us know they were reviewing our new build.</p>



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



<p>The VS Code team let us know that our changes were sufficient and that the Apollo VS Code extension was published back onto the marketplace.</p>



<h2 class="wp-block-heading" id="0dc2"><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>Due to the way VS Code extensions are installed, there is only a small chance that the vulnerability would have had any impact, however it is worth checking your machine to make sure that version of the package doesn’t exist. <a rel="noreferrer noopener" href="https://medium.com/u/a4c91dcedec4?source=post_page-----aafa643765b6----------------------" target="_blank">Lauren Elizabeth Tan</a> put together a great tweet thread of steps to take:</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">don&#39;t forget to also check your local machine (for the backdoor, <a href="https://t.co/9pjp2pYSwx">https://t.co/9pjp2pYSwx</a>, ICYMI)<br><br>find / -type d -name &quot;event-stream&quot; -print 2&gt;/dev/null</p>&mdash; lauren 나은 (@potetotes) <a href="https://twitter.com/potetotes/status/1067147512065085442?ref_src=twsrc%5Etfw">November 26, 2018</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div></figure>



<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">More specifically, search for `flatmap-stream`, as that is the malicious package:<br><br>find / -type d -name &quot;flatmap-stream&quot; -print 2&gt;/dev/null<br><br>Thanks <a href="https://twitter.com/OCombe?ref_src=twsrc%5Etfw">@OCombe</a> for pointing this out</p>&mdash; lauren 나은 (@potetotes) <a href="https://twitter.com/potetotes/status/1067154651345113094?ref_src=twsrc%5Etfw">November 26, 2018</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div></figure>



<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">✨ And finally you should be using `npm ci` OR `yarn install &#8211;frozen-lockfile` to install your deps on your servers: <br><br>npm: <a href="https://t.co/mXBK0KvAyB">https://t.co/mXBK0KvAyB</a><br>yarn: <a href="https://t.co/mBcrpm9m3M">https://t.co/mBcrpm9m3M</a></p>&mdash; lauren 나은 (@potetotes) <a href="https://twitter.com/potetotes/status/1067202460593180673?ref_src=twsrc%5Etfw">November 26, 2018</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div></figure>



<p>Thanks for your continued support using the Apollo platform. We take your security seriously and will always responsibly disclose any security vulnerabilities in our tools. To report a security vulnerability, please contact&nbsp;<a href="mailto:security@apollographql.com" target="_blank" rel="noreferrer noopener">security@apollographql.com</a>.</p>


Security notice for Apollo VS Code 11/28/18


<p><em>We’re proud to introduce Claire Hough as our new VP of Engineering. Claire joins Apollo with over 20 years of experience building impactful and inclusive engineering teams at Udemy and Napster. She will be responsible for leading our engineering efforts and ensuring that Apollo continues to help developers build great apps. Please read this post from Claire outlining her vision for Apollo Engineering and help me welcome her to the Apollo community!</em></p>



<p><em>— Matt DeBergalis, Founder &amp; VP of R&amp;D</em></p>



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



<p>Today, I join the Apollo team with humility, excitement, and resolve.</p>



<p>When Chris Shaw, Apollo’s Head of People Operations, reached out to me several weeks ago on a Sunday morning, I wasn’t expecting the conversation to be much more than an executive recruiter call. He and I had a much deeper discussion for over an hour that centered on Apollo’s culture of kindness and transparency. It ended with me receiving an invite to their team event, where I was able to experience the company’s culture for the first time. I immediately felt included by the team, and it was apparent everyone at Apollo loved their work and the company of their teammates.</p>



<p>As I continued my conversations with Geoff and Matt and the engineering leadership team, I was struck in awe by what the team and the community behind Apollo had accomplished to date and what they are striving to achieve. I was humbled when I was offered the position to lead engineering at Apollo.</p>



<p>The developer tools space is new to me, but I bring enthusiasm and a love of learning to Apollo. One of the most important lessons I learned over the years leading teams at Netscape, Napster, Nextag, and Udemy is to adopt a growth mindset and always be ready to learn new things. Without this approach, I don’t think I would have had the career I’ve had. I still consider myself to be a “work-in-progress” continually trying to figure out how best to serve my teams.</p>



<p>As an engineering leader, I strive to create a great work environment where everyone can do their best work while contributing to the organization’s mission and vision. Living up to this statement can be overwhelming, perhaps even unattainable at times. But, I look at this as part of the learning journey.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>I believe creating a great work environment starts with a psychologically safe work environment.</p></blockquote>



<p>Creating such an atmosphere is not easy. It takes each person on the team investing in building personal relationships and committing to a journey of broadening awareness while always acting with the best intentions. When everyone feels their unique set of identities, experiences, ideas, and talents are embraced and valued by the team, they are more likely to speak up, engage with teammates, and take risks to achieve greater things.</p>



<p>Psychological safety is also essential in building and serving more diverse and inclusive communities around us. Having meaningful conversations, expanding our understanding of all groups especially those from underserved communities, and practicing allyship whenever possible are small actions we can take to promote diversity and inclusion in our community.</p>



<p>In addition to a psychologically safe work environment, engineers do their best work when they have the full context of the problems they are trying to solve. I consider Product, Design, and Engineering to be one team working toward creating the best possible products and services for their users. One of the attractions of joining Apollo is that we have access to direct feedback from our customers and the GraphQL community, who are also a part of our extended team.</p>



<p>Developers’ ability to do their best work also is directly linked to the quality of the code base, development processes, and development tools. I believe in thoughtful, purposeful, and prompt actions when it comes to development.</p>



<p>Consequently, if the code base is outdated and unmanageable, it should be rewritten or refactored back to health. If parts of the development process add no value, we get rid of them. If more consistency and predictability in the process are needed, build them in. If a set of tools allows us to produce higher quality work faster, they should be adopted. I am not trying to make all these actions sound easy; rather, I’m pointing out that these are things we can control. Continuing to evaluate the code base, architecture, development processes, and tools and making prudent investments in these areas are crucial to the success of a fast-growing organization.</p>



<p>As software engineers in the industry where our skills are in demand, we all have choices on how we invest our time and energy. We all want to feel good about what we do, and it starts with choosing a right company whose mission speaks to us personally. When you care about the company’s mission, you are motivated to go the extra mile and feel enriched every day.</p>



<p>Early in my conversations with Geoff, CEO of Apollo, he spoke passionately about positively enabling developers to build great apps by lowering the barrier for them to succeed. This mission resonated deeply with me. As a person who cares a lot about developer happiness, working with the Apollo team and the community is a compelling and exciting opportunity.</p>



<p>When I left Udemy in July 2018, I had hoped my next endeavor would include the following attributes:</p>



<ol class="wp-block-list"><li>A mission-driven company serving others</li><li>A team embracing diversity, inclusion and belonging</li><li>A place where I can continue to learn and grow while contributing to the growth of the team</li></ol>



<p>I found all of them at Apollo. Even though I have much to learn to get up to speed, I come on board eager, committed, and dedicated to helping software developers build awesome applications using GraphQL.</p>



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



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


Why I joined Apollo


<p>I’ve never been surfing. To me, surfing forces you to put a lot of trust in the ocean, and I do not trust the ocean at all. If I ever felt the need to go surfing, I probably wouldn’t head out to Mavericks on Day One. Instead, I’d start in a lesson, doing that thing where you lie on your surfboard on the beach and pretend to surf until the instructor trusts you not to drown.</p>



<p>With our company&nbsp;<a href="https://www.moonhighway.com/" target="_blank" rel="noreferrer noopener">Moon Highway</a>,&nbsp;<a href="https://www.twitter.com/moontahoe" target="_blank" rel="noreferrer noopener">Alex Banks</a>&nbsp;and I have spent countless hours researching, working with, and writing about GraphQL to ensure that our students and readers do not drown. We know that GraphQL is the future of APIs, but we also know that people don’t adopt new technologies if their first introduction is confusing, complicated, and not fun. If people have a great experience learning, they’ll get excited about working with GraphQL.</p>



<p>Getting people excited to build awesome products with GraphQL is our main goal, and now we have a book for that!</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="500" height="656" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_I7GmpIB0L08C8LXzsYIKtw.jpg" alt="" class="wp-image-692" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_I7GmpIB0L08C8LXzsYIKtw.jpg 500w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_I7GmpIB0L08C8LXzsYIKtw-229x300.jpg 229w" sizes="auto, (max-width: 500px) 100vw, 500px" /><figcaption>O’Reilly’s Learning GraphQL</figcaption></figure>



<h2 class="wp-block-heading" id="823b"><a href="#announcing-learning-graphql" aria-hidden="true" class="aal_anchor" id="announcing-learning-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>Announcing Learning GraphQL</h2>



<p>We’re delighted to announce that our second O’Reilly book,&nbsp;<a href="http://shop.oreilly.com/product/0636920137269.do" target="_blank" rel="noreferrer noopener"><em>Learning GraphQL</em></a>, started shipping this week! Starting with an overview of GraphQL history, the book begins with a look at core GraphQL topics like schema design and the GraphQL query language. From there, we build a fullstack application that incorporates Apollo Server 2.0, Apollo Client, and React. We also cover advanced topics like database integration, GitHub authorization, and managing your API in production with Apollo Engine.</p>



<p>The Apollo team has been hugely supportive of this book throughout the entire process. They’ve provided us with thorough tech reviews and shared information about their technology roadmap, which means this book has the freshest content available. This collaboration with the folks from Apollo has been phenomenal, and this leads me to a couple other exciting announcements:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="301" height="300" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_07FE7SG4qy1bahcweb3Usg.png" alt="" class="wp-image-693" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_07FE7SG4qy1bahcweb3Usg.png 301w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_07FE7SG4qy1bahcweb3Usg-150x150.png 150w" sizes="auto, (max-width: 301px) 100vw, 301px" /></figure>



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



<p>We have signed on to be Apollo’s first Official Training Partner! Being part of this new partner program will allow us to focus on what we’re passionate about: delivering comprehensive, hands-on GraphQL training in a fun and encouraging environment for developers and companies around the world. This close partnership with the Apollo team will also ensure that our courses remain relevant and up-to-date.</p>



<p>If your team needs training on how to build production-ready apps with Apollo, please reach out to&nbsp;<a href="mailto:team@apollographql.com" target="_blank" rel="noreferrer noopener">team@apollographql.com</a>&nbsp;to learn more.</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_erEy0kAge67XcDwhgUr-Xw.jpg" alt="" class="wp-image-694" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_erEy0kAge67XcDwhgUr-Xw.jpg 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_erEy0kAge67XcDwhgUr-Xw-300x169.jpg 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_erEy0kAge67XcDwhgUr-Xw-768x432.jpg 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



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



<p>On November 7–8, Apollo will host&nbsp;<a href="http://summit.graphql.com/" target="_blank" rel="noreferrer noopener">GraphQL Summit</a>&nbsp;in San Francisco, the largest GraphQL developer event in the world. To kick off the conference week, we’ll be teaching one-day&nbsp;<a href="https://summit.graphql.com/#bootcamp" target="_blank" rel="noreferrer noopener">fullstack GraphQL Bootcamps</a>&nbsp;on Monday Nov 5 and Tuesday Nov 6 before the main conference starts. Join us for this fast-paced, hands-on course where you’ll learn to build powerful GraphQL apps with the Apollo platform. Of course, you’ll get a signed copy of new&nbsp;<a href="http://shop.oreilly.com/product/0636920137269.do" target="_blank" rel="noreferrer noopener"><em>Learning GraphQL</em></a>&nbsp;book as well!</p>



<p>I’ll also be giving a talk at GraphQL Summit that will focus on our experiences teaching GraphQL and how you can help others in your organizations learn about GraphQL and the Apollo platform.</p>



<p>We are thrilled to be working with Apollo to bring more engineers into the community with effective, hands-on training. Surf’s up! The tide is rising for GraphQL!</p>


Learning GraphQL


<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="538" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_KeOa_EpTKqimFjlROUNQ9Q-1024x538.png" alt="" class="wp-image-701" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_KeOa_EpTKqimFjlROUNQ9Q-1024x538.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_KeOa_EpTKqimFjlROUNQ9Q-300x158.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_KeOa_EpTKqimFjlROUNQ9Q-768x403.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_KeOa_EpTKqimFjlROUNQ9Q-1536x806.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_KeOa_EpTKqimFjlROUNQ9Q-2048x1075.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_KeOa_EpTKqimFjlROUNQ9Q-1200x630.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_KeOa_EpTKqimFjlROUNQ9Q-1980x1040.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>GraphQL Glossary + FAQ resources</figcaption></figure>



<p>We work in an industry where we commonly use buzzwords and jargon to describe the simplest of things. When you’re learning a new technology, it can often be challenging because you have to understand the vocabulary before writing any code.</p>



<p>Whether you’re experimenting with GraphQL or running Apollo in production, we want to make every developer’s journey as smooth as possible. This is why we’re releasing two new resources to help you along the way: the&nbsp;<a href="https://www.apollographql.com/docs/resources/graphql-glossary.html" target="_blank" rel="noreferrer noopener"><strong>GraphQL Glossary</strong></a>&nbsp;and an&nbsp;<a href="https://www.apollographql.com/docs/resources/faq.html" target="_blank" rel="noreferrer noopener"><strong>FAQ guide</strong></a>! 🚀</p>



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



<p>As much as we try to eliminate confusing jargon in our documentation, you’ll probably encounter some unfamiliar GraphQL terms when you start building apps with Apollo. We understand that a head-first guide into the nitty-gritty of GraphQL vocabulary goes a long way to simplify the GraphQL learning process.</p>



<p>Recently, I recommended some resources to a developer trying to get the hang of GraphQL and she requested for them in this order:</p>



<ol class="wp-block-list"><li>GraphQL concepts</li><li>GraphQL on the backend</li><li>GraphQL on the frontend</li></ol>



<p>In my response to her, I also provided additional resources on&nbsp;<a href="https://www.apollographql.com/docs/guides/performance.html" target="_blank" rel="noreferrer noopener">performance monitoring</a>&nbsp;and guides on&nbsp;<a href="https://www.apollographql.com/docs/guides/" target="_blank" rel="noreferrer noopener">how to succeed with GraphQL and the Apollo platform</a>. Immediately, I wished there was a simple, straight-forward guide of GraphQL words and terms that I could show her instead.</p>



<p>No more wishes! It’s here now. We have defined some of the most common GraphQL vocabulary here in&nbsp;<a href="https://www.apollographql.com/docs/resources/graphql-glossary.html" target="_blank" rel="noreferrer noopener">this handy cheat sheet</a>. We hope that this practical and accessible reference will help you on your journey in learning and comprehending GraphQL.</p>



<h2 class="wp-block-heading" id="4f4f"><a href="#faq-guide" aria-hidden="true" class="aal_anchor" id="faq-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><a href="https://www.apollographql.com/docs/resources/faq.html" target="_blank" rel="noreferrer noopener">FAQ guide</a></h2>



<p>We also came up with a list of frequently asked questions pertinent to different stages in the adoption of GraphQL. As an individual developer, or a team of product developers, moving from experimenting with GraphQL to adoption in your product architecture with open-source platforms like Apollo, several questions pop up such as:</p>



<ol class="wp-block-list"><li>How do I set up caching and authentication?</li><li>When should we start tracking the performance of our queries?</li><li>What’s the best way to design a schema?</li><li>What kind of caching strategy is best for our app?</li></ol>



<p><a href="https://www.apollographql.com/docs/resources/faq.html" target="_blank" rel="noreferrer noopener">Check out the FAQ</a>&nbsp;and get answers to some of the challenges you might come across along the way. It’s a living guide and will constantly be updated as we learn more about the challenges product teams experience on their GraphQL journey.</p>



<h2 class="wp-block-heading" id="560f"><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>To learn more about GraphQL, check out our&nbsp;<a href="https://www.apollographql.com/docs/fundamentals/platform.html#What-is-GraphQL" target="_blank" rel="noreferrer noopener">fundamentals&nbsp;</a>and&nbsp;<a href="https://www.apollographql.com/docs/" target="_blank" rel="noreferrer noopener">new best practices guides about topics like schema design, versioning, access control, and more.</a>&nbsp;Your success is our goal!</p>



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



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


New! GraphQL Glossary & FAQ guide


<p>Thanks to our investments in <a rel="noreferrer noopener" href="https://github.com/apollographql/" target="_blank">Apollo tools and libraries</a>, we’ve had the fortune to work with many product engineering teams putting GraphQL into production. As they move from a few first experiments to serious rollout, they’ve started to ask important questions. What’s the best, right way to use GraphQL and <a rel="noreferrer noopener" href="https://www.apollographql.com/docs/" target="_blank">Apollo</a>? How does it fit with the rest of my infrastructure? Who owns this new data layer, and how do we integrate it into our development workflow?</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 Day SF Highlights (May 2018)" width="580" height="326" src="https://www.youtube.com/embed/gFm0wRoCSvo?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>With those questions in mind, we recently held our first event specifically designed for teams running Apollo in production or well on their way there. We wanted to help teams learn about the best patterns and practices that the ecosystem has converged on, show off some of the tools and we’re building that support these patterns, and — most importantly — connect over 150 attendees with engineers at companies like Airbnb and Brigade that have made big and successful commitments to Apollo and GraphQL. Our goal was to give everyone who came the confidence to commit to GraphQL and go faster and further with it.</p>



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



<p>One big theme of the day was how the ecosystem is converging on a set of tools and patterns. My opening keynote covered some of those and showed off some of what we’re working on, like schema validation with a GitHub integration and <a rel="noreferrer noopener" href="https://www.apollographql.com/docs/apollo-server/v2/" target="_blank">our new Apollo Server 2.0 release</a> with integrated APIs for GraphQL metrics collection, CDN integration, and partial query caching.</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 Day SF 2018 - Opening Keynote (Matt DeBergalis)" width="580" height="326" src="https://www.youtube.com/embed/T1yLneMFabg?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><a rel="noreferrer noopener" href="https://twitter.com/jbaxleyiii" target="_blank">James Baxley</a> from Apollo gave an important talk showing the incredible value Apollo brings to React development — not just easier data loading with less code, but elegant patterns for SSR, unified state management, and built-in ways to take advantage of cutting-edge ideas like React Suspense.</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 + GraphQL + React — thinking in queries (James Baxley)" width="580" height="326" src="https://www.youtube.com/embed/9Qw8HKatjy8?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><a rel="noreferrer noopener" href="https://twitter.com/AdamRNeary" target="_blank">Adam Neary</a> from Airbnb walked through their sophisticated strategy for adopting Apollo and GraphQL across a complex and rapidly moving product organization, with particular emphasis on how they’ve designed for the needs and interests of their infrastructure team along the way.</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="Reconciling Thrift and GraphQL at Airbnb (Adam Neary)" width="580" height="326" src="https://www.youtube.com/embed/tSoEAjvvtYI?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="183c"><a href="#tell-us-what-youre-building" aria-hidden="true" class="aal_anchor" id="tell-us-what-youre-building"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Tell us what you’re building</h2>



<p>We’ve got lots of great resources for teams going into production, including example apps and implementation guides covering topics like&nbsp;<a href="https://www.apollographql.com/docs/guides/security.html" target="_blank" rel="noreferrer noopener">security</a>&nbsp;and&nbsp;<a href="https://www.apollographql.com/docs/guides/schema-design.html" target="_blank" rel="noreferrer noopener">schema design</a>. On top of that, we offer a range of professional services including GraphQL and React training customized for your team’s needs, architecture and schema design reviews, production readiness checks, and developer support for the full Apollo stack.&nbsp;<a href="https://www.apollographql.com/support" target="_blank" rel="noreferrer noopener">Let us know what you are building and we’ll get you all the help you need.</a></p>



<figure class="wp-block-image size-large"><a href="https://summit.graphql.com/"><img loading="lazy" decoding="async" width="800" height="400" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_89Id4_dTlCejzzEWfA8AfA-2.png" alt="" class="wp-image-746" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_89Id4_dTlCejzzEWfA8AfA-2.png 800w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_89Id4_dTlCejzzEWfA8AfA-2-300x150.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_89Id4_dTlCejzzEWfA8AfA-2-768x384.png 768w" sizes="auto, (max-width: 800px) 100vw, 800px" /></a><figcaption>GraphQL Summit 2018 (Nov 7–8, San Francisco)</figcaption></figure>



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


Apollo Day SF: from promise to production with GraphQL


<p>If you’ve been following Apollo’s progress on this blog, you’ve seen a steady stream of major new features announced across the Apollo project spectrum. While new feature announcements are exciting, behind the scenes contributors and maintainers are constantly working on incremental improvements, to make your tools better.</p>



<p>As a quick example, we&#8217;ve recently released&nbsp;<a href="http://github.com/apollographql/apollo-client" target="_blank" rel="noreferrer noopener">Apollo Client 2.3.2</a>. This version includes numerous tweaks and bug fixes, submitted by Apollo&#8217;s amazing community of contributors:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="754" height="296" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_iyZy58dKGbapY7bpOxDiDA.png" alt="" class="wp-image-752" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_iyZy58dKGbapY7bpOxDiDA.png 754w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_iyZy58dKGbapY7bpOxDiDA-300x118.png 300w" sizes="auto, (max-width: 754px) 100vw, 754px" /><figcaption>Thank you everyone! ❤️</figcaption></figure>



<p>A few important highlights:</p>



<ul class="wp-block-list"><li>Fixed SSR issues when using the&nbsp;<code>cache-and-network</code>&nbsp;fetch policy (I<a href="https://github.com/apollographql/apollo-client/issues/2119" target="_blank" rel="noreferrer noopener">ssue #2119</a>,&nbsp;<a href="https://github.com/apollographql/apollo-client/pull/3372" target="_blank" rel="noreferrer noopener">PR #3372</a>&nbsp;by&nbsp;<a href="https://github.com/dastoori" target="_blank" rel="noreferrer noopener">dastoori</a>).</li><li>Fixed an issue where the&nbsp;<code>updateQuery</code>&nbsp;method passed to&nbsp;<code>ObservableQuery.fetchMore</code>&nbsp;was receiving the original query variables, instead of the new variables that it used to fetch more data (<a href="https://github.com/apollographql/apollo-client/issues/2499" target="_blank" rel="noreferrer noopener">Issue #2499</a>,&nbsp;<a href="https://github.com/apollographql/apollo-client/pull/3500" target="_blank" rel="noreferrer noopener">PR #3500</a>&nbsp;by&nbsp;<a href="https://github.com/abhiaiyer91" target="_blank" rel="noreferrer noopener">abhiaiyer91</a>).</li><li>Fixed cache invalidation for inlined mixed types in union fields within<br>arrays (<code>apollo-cache-inmemory</code>,&nbsp;<a href="https://github.com/apollographql/apollo-client/pull/3422" target="_blank" rel="noreferrer noopener">PR #3422</a>&nbsp;by&nbsp;<a href="https://github.com/dferber90" target="_blank" rel="noreferrer noopener">dferber90</a>).</li></ul>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>For more details around the Apollo Client 2.3.2 release, refer to the various Apollo Client changelog’s (<code>apollo-client</code>&nbsp;<a href="https://github.com/apollographql/apollo-client/blob/master/packages/apollo-client/CHANGELOG.md" target="_blank" rel="noreferrer noopener">CHANGELOG</a>,&nbsp;<code>apollo-boost</code>&nbsp;<a href="https://github.com/apollographql/apollo-client/blob/master/packages/apollo-boost/CHANGELOG.md" target="_blank" rel="noreferrer noopener">CHANGELOG</a>,&nbsp;<code>apollo-cache-inmemory</code>&nbsp;<a href="https://github.com/apollographql/apollo-client/blob/master/packages/apollo-cache-inmemory/CHANGELOG.md" target="_blank" rel="noreferrer noopener">CHANGELOG</a>,&nbsp;<code>apollo-utilities</code>&nbsp;<a href="https://github.com/apollographql/apollo-client/blob/master/packages/apollo-utilities/CHANGELOG.md" target="_blank" rel="noreferrer noopener">CHANGELOG</a>,&nbsp;<code>graphql-anywhere</code>&nbsp;<a href="https://github.com/apollographql/apollo-client/blob/master/packages/graphql-anywhere/CHANGELOG.md" target="_blank" rel="noreferrer noopener">CHANGELOG</a>).</p></blockquote>



<p>Releases like the above make us excited about the health of the Apollo ecosystem. Today we’d like to tell you about exciting new improvements coming to Apollo’s overall repository management approach, that will help facilitate even more community contributions.</p>



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



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



<p>We here at Apollo HQ absolutely love the amazing community of users and contributors who have rallied around Apollo! Every day we’re blown away by the community’s level of knowledge, thoughtfulness, dedication and amazing willingness to help out those who are just getting started in the Apollo GraphQL space. We’ve been working really hard on exciting additions to the GraphQL landscape, but while keeping our heads down getting things done, we’ve seen the list of reported issues and PRs continue to grow.</p>



<p>Dealing with issues and PRs is definitely one of the most challenging aspects of an open source project. Letting issues and PRs sit without any feedback is something that we want to try to avoid as much as possible. We couldn’t be happier to get community PR’s, and really want to make sure people know their contributions are welcome and appreciated.</p>



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



<p>Moving forward, we’re going to put in a focused effort into making sure issues and PRs get the priority they deserve. Over the next while, we’ll be implementing several public repo management changes, such as:</p>



<ul class="wp-block-list"><li><strong>Updating all Apollo repos to include new (and accurate) issue/PR workflow and triage guidelines.</strong>&nbsp;This will help make it easier for community members to understand how issues/PRs are going to be reviewed and worked on in the future.</li><li><strong>Dedicating resources to work on reviewing repo issues and PRs.</strong>&nbsp;We’re working on a process to make sure issues are triaged appropriately, and outstanding PRs receive some form of feedback. PRs that are close to being merged will be finished and merged, PRs that are no longer relevant will be closed (<em>sorry!</em>), and PRs that still need a fair amount of work done will be marked as works in progress (and contributors will be notified of what’s missing).</li><li><strong>Outlining a regular release schedule and making sure it’s clearly visible in the project README.</strong>&nbsp;This will let community members know when they can expect to see merged PRs show up in a release. This won’t be added to every repo; just the more popular ones that see regular updates.</li><li><strong>Create new contributor ramp-up guides for the most popular Apollo projects, to make it easy for future contributors to hit the ground running when it comes to submitting PRs.</strong>&nbsp;These guides will outline how a project’s source is designed/structured, where the major chunks of functionality lie, how to build the project, how to add and run tests, how to integrate the project into a sample application while developing, where the changelogs are and how they should be updated, etc.</li><li><strong>Streamlining our changelog process.</strong>&nbsp;Right now the changelogs for various Apollo projects are a bit spread out, making it difficult to ramp-up quickly on what has changed in a certain release. The source for the Apollo Client project, for example, is structured such that a main&nbsp;<code>apollo-client</code>&nbsp;package is defined, that depends on other packages in the same project (e.g.&nbsp;<code>apollo-cache</code>,&nbsp;<code>apollo-cache-inmemory</code>,&nbsp;<code>apollo-utilities</code>, etc.). These packages are all managed using&nbsp;<a href="https://lernajs.io/" target="_blank" rel="noreferrer noopener">lerna</a>, and are published to NPM as their own standalone packages. Each of these packages currently has their own changelog. When a bug fix is applied to the Apollo Client project, it’s possible that bug fix was actually made in say the&nbsp;<code>apollo-cache-inmemory&nbsp;</code>package, which means its specific changelog is updated with the fix details. Someone looking for an overview of recent&nbsp;<code>apollo-client&nbsp;</code>changes will not see this fix in the main&nbsp;<code>apollo-client</code>&nbsp;changelog. Needless to say, we’re definitely aware that this can cause problems for people, and will be consolidating changelogs.</li><li><strong>Getting the community more involved!</strong>&nbsp;🎉 I think we all know that the Apollo community is absolutely amazing! We’ve received so many excellent library feature requests, bug reports (sometimes with multi-hour created reproductions), PRs for super complex and difficult to work on edge case bugs, amazing documentation sections, the list goes on. Moving forward, we’re going to be much more involved with getting interested community members involved with Apollo projects. Anyone who has shown an interest in a specific Apollo project, has submitted a few accepted PR’s, and is interested in helping triage issues and/or PRs, will be welcomed with open arms. We’ll get you elevated repo privileges and add you to an internal triager Slack channel, where we can all help steer the future direction of Apollo.</li></ul>



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



<p>The good news is that we’ve already started on some of the above changes, tackling the Apollo Client project first. Apollo Client is our most popular library, and has been in need of some tender loving care. Over the past couple of weeks we’ve been working on clearing out the backlog of open issues, and have just about covered every outstanding PR. We’ve moved to a once a week release cycle for&nbsp;<code>&lt;a href=&quot;https://github.com/apollographql/apollo-client&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;apollo-client&lt;/a&gt;&nbsp;</code>and have been happily working with community members to get code changes in place. Once we’re satisfied with Apollo Client’s overall repo health (and have a process in place to make sure we don’t fall behind on issues/PRs again), we’ll be tackling&nbsp;<code>&lt;a href=&quot;https://github.com/apollographql/react-apollo&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;react-apollo&lt;/a&gt;</code>&nbsp;next.</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/0_r7NM7E84Ms0uRZFZ-1024x576.jpg" alt="" class="wp-image-751" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/0_r7NM7E84Ms0uRZFZ-1024x576.jpg 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/0_r7NM7E84Ms0uRZFZ-300x169.jpg 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/0_r7NM7E84Ms0uRZFZ-768x432.jpg 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/0_r7NM7E84Ms0uRZFZ-1536x864.jpg 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/0_r7NM7E84Ms0uRZFZ-2048x1152.jpg 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/0_r7NM7E84Ms0uRZFZ-1200x675.jpg 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/0_r7NM7E84Ms0uRZFZ-1980x1114.jpg 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>A repo brick wall tagged by a passionate, and accurate, community member (photo:&nbsp;<a href="https://unsplash.com/@bamagal?utm_source=medium&amp;utm_medium=referral" target="_blank" rel="noreferrer noopener">My Life Through A Lens</a>).</figcaption></figure>



<p>We’ll have more repository changes to announce in the future.&nbsp;<strong>A BIG THANK YOU</strong>&nbsp;again to everyone who has helped make&nbsp;<a href="https://www.apollographql.com/" target="_blank" rel="noreferrer noopener">Apollo</a>&nbsp;what it is today! ❤️ If you’re interested in helping out further, please reach out to me anytime via&nbsp;<a href="https://www.apollographql.com/slack" target="_blank" rel="noreferrer noopener">Apollo Slack</a>&nbsp;or any of the&nbsp;<a href="http://github.com/apollographql/apollo-client" target="_blank" rel="noreferrer noopener">Apollo GitHub</a>&nbsp;repos (<code>&lt;a href=&quot;https://github.com/hwillson&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;hwillson&lt;/a&gt;</code>&nbsp;in both locations).</p>



<p>I’m happy to discuss any issues that are currently blockers that you think should receive more attention, and can help point you towards issues that we need help with, if you’re interested in contributing. We also host a weekly (remote) contributor meeting for anyone who’s interested in helping plot Apollo’s future course. If you’d like to join in on the calls, let us know in the Slack&nbsp;<code>#contributing</code>&nbsp;channel.</p>



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



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



<p>Can’t get enough GraphQL?&nbsp;<a href="https://www.graphql-europe.org/" target="_blank" rel="noreferrer noopener">GraphQL EU 2018</a>&nbsp;— Europe’s biggest gathering of GraphQL enthusiasts — is just around the corner. Join us on&nbsp;<strong>June 15 in Berlin</strong>&nbsp;and see expert speakers from top GraphQL companies as well as the GraphQL creators Lee Byron and Nick Schrock.</p>



<p><a href="https://medium.com/u/c827782c6410?source=post_page-----a2f26f319211----------------------" target="_blank" rel="noreferrer noopener">Peggy Rayzis</a>&nbsp;from the Apollo team will be presenting there as well, and you don’t want to miss her talk!</p>



<p>Get 20% off your ticket with this special discount code:&nbsp;<code>apollo-at-graphql-eu</code></p>


Evolving Apollo repository maintenance

Apollo is hiring!


<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>This is a guest post by Mikhail Novikov, who worked on GraphQL schema delegation and schema stitching in the&nbsp;<a href="https://github.com/apollographql/graphql-tools" target="_blank" rel="noreferrer noopener">graphql-tools library</a>. He is currently available for remote GraphQL contract work. Contact him at&nbsp;<a href="mailto:freiksenet@reindex.io" target="_blank" rel="noreferrer noopener">freiksenet@reindex.io</a>&nbsp;if you need some GraphQL help.</p></blockquote>



<p>In this article I’m going to talk about schema delegation — a way to automatically forward a GraphQL query (or a part of it) to another schema.&nbsp;Schema delegation allows reusing parts of other schemas without manually querying them.&nbsp;Examples where schema delegation would be particularly appropriate include:</p>



<ul class="wp-block-list"><li>Building a GraphQL gateway that would forward queries to underlying GraphQL microservices</li><li>Using a third-party GraphQL API as part of your schema</li><li>Using a GraphQL database proxy like&nbsp;<a href="https://www.prisma.io/" target="_blank" rel="noreferrer noopener">Prisma</a></li></ul>



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



<p>Let’s consider a GraphQL service for a basic blog API. The schema has two types —&nbsp;<code>User</code>&nbsp;and&nbsp;<code>Blog</code>. It also has root fields to retrieve them by their&nbsp;<code>_id</code>. On top of the service there is a GraphQL gateway implementing a&nbsp;<code>Node</code>&nbsp;interface for the types of an underlying GraphQL service.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p><code>Node</code>&nbsp;is a common interface in the GraphQL world which indicates any object that can be globally addressed by some&nbsp;<code>id</code>. It’s usually coupled with a root field called&nbsp;<code>node</code>, which returns any object of a type that implements&nbsp;<code>Node</code>, by id. You can read more about&nbsp;<code>Node</code>&nbsp;interface in&nbsp;<a href="https://facebook.github.io/relay/graphql/objectidentification.htm" target="_blank" rel="noreferrer noopener">this article</a>.</p></blockquote>



<p>The gateway reuses the same <code>User</code> and <code>Blog</code> types extending them so that they implement the <code>Node</code> interface. It also provides <code>node</code> root field on top of the two existing ones. Here are the schemas for the service and the gateway.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">type User {
  _id: ID!
  username: String
  blogs: [Blog]
}

type Blog {
  _id: ID!
  user: User
  title: String!
  text: String
}

type Query {
  userById(id: ID!): User
  blogById(id: ID!): Blog
}</code></pre>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">interface Node {
  id: ID!
}

extend type User implements Node {
  id: ID!
}

extend type Blog implements Node {
  id: ID!
}

extend type Query {
  node(id: ID!): Node
}</code></pre>



<p>Instead of reimplementing&nbsp;<code>userById</code>&nbsp;and&nbsp;<code>blogById</code>&nbsp;in the gateway, it will execute the query using the service schema. To do it, you could build the query from the information you get as the fourth argument of a resolver —&nbsp;<code>GraphQLResolveInfo</code>. It has the subquery starting at the current resolver (<code>fieldNodes</code>), fragments used in the operation (<code>fragments</code>) and variables in&nbsp;<code>operation</code>. Out of this information you could create a GraphQL&nbsp;<code>Document</code>,&nbsp;<code>print</code>&nbsp;it and send it to the service schema.</p>



<p>For the root fields that match with the service fields you don’t need to do anything else. As for the new fields like&nbsp;<code>node</code>&nbsp;you also need to change the name of the root field depending on the global&nbsp;<code>id</code>.</p>



<h3 class="wp-block-heading" id="06f1"><a href="#filtering-the-query" aria-hidden="true" class="aal_anchor" id="filtering-the-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>Filtering the query</h3>



<p>The above would work for the simpler cases where the query only selects data available on both the gateway and the service. However, it’s not always the case. The underlying service schema doesn’t have <code>id</code> fields that <code>Node</code> interface has. In addition, one can only spread the fragment with compatible types: when both <code>User</code> and <code>Blog</code> fragments are spread inside the query, it will fail.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql"># Source query

{
  node(id: &quot;test-global-id&quot;) {
    id # Does not exist on User or Blog in original schemas
    ... on User { # Only valid in userById 
      username
    }
    ... on Blog { # Only valid in blogById
      title
    }    
  }
}</code></pre>



<p>To fix this, the delegation must filter out the incompatible fields and fragments, as well as unused fragments and variables after filter. Of course, you can do it by going through the document manually, tracking down the types and removing all the fields that don’t exist on the original schema. But you don’t have to because there is a&nbsp;<code>delegateToSchema</code>&nbsp;function inside&nbsp;<code>graphql-tools</code>&nbsp;that can do all that work for you.</p>



<p><em>Schema delegation is adapting the source query so that it matches the subschema automatically.</em></p>



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



<p><code>delegateToSchema</code>&nbsp;creates a GraphQL query that’s a valid query for an underlying schema and executes it. It accepts an object of options:</p>



<ul class="wp-block-list"><li><code>schema</code>&nbsp;is the sub-schema that should handle the delegated query</li><li><code>operation</code>&nbsp;is either&nbsp;<code>&quot;query&quot;</code>,&nbsp;<code>&quot;mutation&quot;</code>&nbsp;or&nbsp;<code>&quot;subscription&quot;</code>&nbsp;and determines the operation of the GraphQL document</li><li><code>fieldName</code>&nbsp;is the root field in the schema from which the query will start</li><li><code>args</code>&nbsp;is an object of&nbsp;<em>additional</em>&nbsp;arguments to pass to the field. These arguments supplement and/or override arguments given to the original field in the parent schema</li><li><code>context</code>&nbsp;is the GraphQL context for the execution</li><li><code>info</code>&nbsp;is&nbsp;<code>GraphQLResolveInfo</code>. It’s used to extract the selection set of the current query, along with variables and fragments.</li><li><code>transforms</code>&nbsp;is an array of GraphQL Schema Transforms. Transforms will be covered in the next article.</li></ul>



<p>Gateway resolvers using <code>delegateToSchema</code> will look like:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">import { delegateToSchema } from &#039;graphql-tools&#039;;

const resolvers = {
  Query: {
    userById(parent, { id }, context, info) {
      const { type, localId } = deserializeGlobalId(id);
      return delegateToSchema({
        schema: subserviceSchema,
        operation: &#039;query&#039;,
        fieldName: &#039;userById&#039;,
        args: { id: localId },
        context,
        info,
       });
    },
    
    node(parent, { id }, context, info) {
      const { type, localId } = deserializeGlobalId(id);
      let fieldName;
      if (type === &#039;Blog&#039;) {
        fieldName = &#039;blogById&#039;,
      } else if (type === &#039;User&#039;) {
        fieldName = &#039;userById&#039;,
      } else {
        throw new Error(&#039;Invalid global id&#039;);
      }
      return delegateToSchema({
        schema: subserviceSchema,
        operation: &#039;query&#039;,
        fieldName,
        args: { id: localId },
        context,
        info,       
       });
    },
  },
};</code></pre>



<p>Here is how a <code>node</code> query would delegate to the service:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql"># Query coming to gateway

query(
  $id: ID! # overriden in parameters, so it won&#039;t be included
) {
  node(id: $id) { # delegate to userById
    # This is a selection set from the node resolver
    id # This field doesn&#039;t exist in User
    ...BlogFragment # Blog can&#039;t be spread here
    ...UserFragment
  }
}

# This fragment is used, so should be included
fragment UserFragment on User {
  username
}

# This fragment isn&#039;t used, so should be removed
fragment BlogFragment on Blog {
  title
}</code></pre>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql"># Query sent to service

query(
  $_v0_id: ID! # generated variable name
) {
  userById(id: $_v0_id) {
    ...UserFragment
  }
}

fragment UserFragment on User {
  username
}</code></pre>



<p>Besides forwarding from root fields, you can use&nbsp;<code>delegateToSchema</code>&nbsp;to delegate from any other resolvers. For example, if you split&nbsp;<code>User</code>&nbsp;and&nbsp;<code>Blog</code>&nbsp;types to separate services, you would no longer be able to directly get&nbsp;<code>User.blogs</code>&nbsp;from User service and&nbsp;<code>Blog.user</code>&nbsp;from Blog service. However, you can connect them at the gateway server and use delegation to get related data:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="600" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_Vel0AL9VsX9KmapLqC5QRw-1024x600.png" alt="" class="wp-image-808" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_Vel0AL9VsX9KmapLqC5QRw-1024x600.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Vel0AL9VsX9KmapLqC5QRw-300x176.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Vel0AL9VsX9KmapLqC5QRw-768x450.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Vel0AL9VsX9KmapLqC5QRw-1200x703.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Vel0AL9VsX9KmapLqC5QRw.png 1250w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Get the code&nbsp;<a href="https://gist.github.com/freiksenet/e239464b56203ab79f5e5b5aa50de648#file-resolvers2-js" target="_blank" rel="noreferrer noopener">in a Gist</a></figcaption></figure>



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



<p>Schema delegation is often used together with schema stitching. Schema stitching is a process of combining multiple GraphQL schemas together. It simplifies the creation of a gateway schema — especially when there are multiple services. Schema stitching automatically sets up delegation for root fields that already exist in the stitched-together schemas. New root fields (as well as any new non-root fields) require new resolvers. The above gateway schema can be created as follows:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-">import { mergeSchemas, delegateToSchema } from &#039;graphql-tools&#039;;

const extensionSchema = `
  interface Node {
    id: ID!
  }
  extend type User implements Node {
    id: ID!
  }
  extend type Blog implements Node {
    id: ID!
  }
  extend type Query {
    node(id: ID!): Node
  }
`;

const schema = mergeSchemas({
  schemas: [serviceSchema, extensionSchema],
  resolvers: {
    Query: {
      node(parent, { id }, context, info) {
        const { type, localId } = deserializeGlobalId(id);
        let fieldName;
        if (type === &#039;Blog&#039;) {
          fieldName = &#039;blogById&#039;,
        } else if (type === &#039;User&#039;) {
          fieldName = &#039;userById&#039;,
        } else {
          throw new Error(&#039;Invalid global id&#039;);
        }
        return delegateToSchema({
          schema: serviceSchema,
          operation: &#039;query&#039;,
          fieldName,
          args: { id: localId },
          context,
          info,       
         });
      },
    },
    // ... more resolvers
 },
});</code></pre>



<p>You can read about schema stitching in more detail in&nbsp;<a href="https://www.apollographql.com/docs/graphql-tools/schema-stitching.html" target="_blank" rel="noreferrer noopener">the official docs</a>.</p>



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



<p>In my next article, I’ll tell how you can customize schema delegation with transforms. Even if your schema has been significantly altered using schema transforms, its ability to delegate to the subschema will be preserved.</p>



<p>Updated schema delegation and schema transforms are are going to be available in version 3 of&nbsp;<code>graphql-tools</code>&nbsp;and are already available as&nbsp;<code>graphql-tools@next</code>&nbsp;on npm — though please be aware that the exact API could still change slightly before the final release. Check out the PR on GitHub for the code:<a href="https://github.com/apollographql/graphql-tools/pull/527" target="_blank" rel="noreferrer noopener">Schema transforms, new mergeSchemas and everything by freiksenet · Pull Request #527 ·…This is out of date ATM, will be updatedgithub.com</a></p>



<p>If you’d like to read more about GraphQL schema delegation, check out these resources:</p>



<ul class="wp-block-list"><li><a href="https://github.com/apollographql/graphql-tools/blob/next-api/docs/source/schema-delegation.md" target="_blank" rel="noreferrer noopener">Official docs</a></li><li><a href="https://blog.graph.cool/graphql-schema-stitching-explained-schema-delegation-4c6caf468405" target="_blank" rel="noreferrer noopener">GraphQL Schema Stitching Explained</a>&nbsp;by Graphcool</li><li><a href="https://github.com/graphql-binding/graphql-binding" target="_blank" rel="noreferrer noopener">GraphQL Bindings docs</a>. GraphQL Bindings is a nice abstraction on top of schema delegation, which exposes a programmatic API to root fields of a schema.</li></ul>


GraphQL schema delegation

GraphQL over REST with Node, Heroku, and Apollo Engine


<p>Developing new products is difficult, especially by the dependencies involved when talking about frontend UI and server-side APIs. To be truly useful, a UI must display and manipulate real data (likely through APIs). This means that many times, UI is blocked on building a backend. Similarly, building REST APIs through a tool that generates endpoints for you can result in locking API endpoints to a specific database schema (thus breaking proper separation of concerns between the frontend and database schema).</p>



<p>Recently, I was able to talk about how the GraphQL SDL addresses these concerns at the <a rel="noreferrer noopener" href="https://www.youtube.com/watch?v=iW4il6wUlvs&amp;list=PLpi1lPB6opQxp6zPDuwhHd8MLm_BhBgN9" target="_blank">Apollo GraphQL meetup</a> in San Francisco.</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="GraphQL SDL First Products  - Chris Biscardi" width="580" height="326" src="https://www.youtube.com/embed/xTZkDYZXh14?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>In addition, I will be expanding on these ideas in my qcon talk “<a href="https://qconlondon.com/london2018/speakers/chris-biscardi" target="_blank" rel="noreferrer noopener">Parallelizing Product Development with GraphQL</a>”.</p>



<h2 class="wp-block-heading" id="0cf3"><a href="#the-sdl" aria-hidden="true" class="aal_anchor" id="the-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>The SDL</h2>



<p>The&nbsp;<a href="https://blog.graph.cool/graphql-sdl-schema-definition-language-6755bcb9ce51" target="_blank" rel="noreferrer noopener">Schema Definition Language</a>&nbsp;is a core piece of building GraphQL APIs. It is, I would argue, the primary place to define and structure the relationship between the backend and the frontend. Backends can use a schema definition file to abstract the makeup of backend services and frontends can use the SDL and introspection result to validate and pre-ordain queries that will be sent to the server before any resolvers are implemented.</p>



<h2 class="wp-block-heading" id="ec40"><a href="#working-with-the-sdl" aria-hidden="true" class="aal_anchor" id="working-with-the-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>Working with the SDL</h2>



<p>First, let’s talk a bit about what the SDL actually is and how to write it. The SDL is a typed language for specifying various objects that can be accessed through a GraphQL API.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="657" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_8l14KSD4oGIE70gxVQxFyw-1024x657.png" alt="" class="wp-image-842" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_8l14KSD4oGIE70gxVQxFyw-1024x657.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_8l14KSD4oGIE70gxVQxFyw-300x192.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_8l14KSD4oGIE70gxVQxFyw-768x492.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_8l14KSD4oGIE70gxVQxFyw-1200x769.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_8l14KSD4oGIE70gxVQxFyw.png 1488w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Example of the Schema Definition Language</figcaption></figure>



<p>This example has two main types,&nbsp;<code>Post</code>&nbsp;and&nbsp;<code>Blog</code>. These types are made up of a number of fields that are either required (noted by an exclamation point) or optional. The structure is very similar to a JSON object with normal keys and weird looking values. In this case the values are the types of each field.&nbsp;<code>Post</code>&nbsp;<code>id</code>s are required&nbsp;<code>Strings</code>,&nbsp;<code>likes</code>&nbsp;are required&nbsp;<code>Ints</code>, and the&nbsp;<code>blog</code>&nbsp;field refers to&nbsp;<code>Blog</code>&nbsp;type. You can define your own primitives similar to the way Ints and Strings are defined.</p>



<p>One use case for custom primitives (or Scalars in GraphQL parlance) would be for dealing with dates or with extremely large integers. When defining a new Scalar, you tell the GraphQL implementation how to parse and serialize the new Scalar. This means that you could define a&nbsp;<code>BigInt</code>&nbsp;which is treated as a string in the client side JavaScript, thus not losing any accuracy.</p>



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



<p>So when building a new product, how do we best experiment with the SDL to create new GraphQL APIs? One example of an SDL first tool is&nbsp;<a href="https://github.com/graphcool/prisma" target="_blank" rel="noreferrer noopener">Prisma</a>. Prisma turns a database into a GraphQL API by letting you design your schema using the GraphQL SDL. This means that there are two APIs, one for the database and one layered on top. Both APIs are able to generate a number of useful methods from the well typed SDL, such as querying for collections.</p>



<p>If we take the previous&nbsp;<code>Blog</code>&nbsp;schema example earlier in this post, we can easily generate a GraphQL API from it. First, we’ll run&nbsp;<code>prisma init</code>&nbsp;to bootstrap a new API using a full stack boilerplate.</p>



<pre class="wp-block-preformatted">➜ prisma init full-03<br>? How to set up a new Prisma service?Minimal setup: database-only<br>❯ GraphQL server/fullstack boilerplate (recommended)</pre>



<p>We will choose the basic node boilerplate for now, but could also start with a more interesting API that includes authentication.</p>



<pre class="wp-block-preformatted">➜ prisma init full-03<br>? How to set up a new Prisma service?Running $ graphql create …<br>? Choose GraphQL boilerplate project:<br>❯ node-basic Basic GraphQL server (incl. database)<br> node-advanced GraphQL server (incl. database &amp; authentication)<br> typescript-basic Basic GraphQL server (incl. database)<br> typescript-advanced GraphQL server (incl. database &amp; authentication)<br> react-fullstack-basic React app + GraphQL server (incl. database )</pre>



<p>Then we immediately have to choose where we want to deploy it. In our case, we will use a local Docker cluster (although we could use one of graph.cool’s clusters or deploy a kubernetes pod to handle it as well).</p>



<pre class="wp-block-preformatted">[graphql create] Running boilerplate install script…<br>Running $ prisma deploy…? Please choose the cluster you want to deploy “full-03@dev” to  prisma-eu1 Public development cluster <br>  prisma-us1 Public development cluster <br>❯ local Local cluster (requires Docker)</pre>



<p>You may notice that Prisma is a collection of other tools in the ecosystem, so if you like a given piece of Prisma you can pull it out and use it without adopting wholesale.</p>



<p>Now that we’ve deployed it, we can see the migrations that happen as a result of our Post type. Notice the seed.graphql import.</p>



<pre class="wp-block-preformatted">Please choose the cluster you want to deploy “full-03@dev” to<br>Added cluster: local to prisma.yml<br>Creating stage dev for service full-03 ✔<br>Deploying service `full-03` to stage `dev` on cluster `local` 201ms<br>Changes:Post (Type)<br> + Created type `Post`<br> + Created field `id` of type `GraphQLID!`<br> + Created field `isPublished` of type `Boolean!`<br> + Created field `title` of type `String!`<br> + Created field `text` of type `String!`<br> + Created field `updatedAt` of type `DateTime!`<br> + Created field `createdAt` of type `DateTime!`Applying changes 1.1sHooks:<br>Importing seed dataset from `seed.graphql` 498msYour GraphQL database endpoint is live:HTTP: <a href="http://localhost:4466/full-03/dev" target="_blank" rel="noreferrer noopener">http://localhost:4466/full-03/dev</a><br> WS: ws://localhost:4466/full-03/devChecking, if schema file changed 180ms<br>Writing database schema to `src/generated/prisma.graphql` 0ms</pre>



<p>We can use the&nbsp;<code>seed.graphql</code>&nbsp;file to populate data in development (for example). The seed file operates on the API that results from our Post SDL so will use migrations to insert data.</p>



<pre class="wp-block-preformatted">mutation {<br>  first: createPost(data: {<br>    title: "Hello World"<br>    text: "This is my first blog post ever!"<br>    isPublished: true<br>  }) {<br>    id<br>  }second: createPost(data: {<br>    title: "My Second Post"<br>    text: "My first post was good, but this one is better!"<br>    isPublished: true<br>  }) {<br>    id<br>  }third: createPost(data: {<br>    title: "Solving World Hunger"<br>    text: "This is a draft..."<br>    isPublished: false<br>  }) {<br>    id<br>  }<br>}</pre>



<p>Taking this SDL first approach also allows you to experiment with advanced features like&nbsp;<a href="https://github.com/graphcool/prisma/tree/c9869a4a2135e3b31ca64702e899ac00f3caf71b/examples/subscriptions" target="_blank" rel="noreferrer noopener">subscriptions</a>, which can be a huge pain to implement and manage on the client side and server side without GraphQL.</p>



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



<p>Often times, our frontend depends on existing backends and we are unable to start a greenfield project. These existing backends, generally presented through REST API, were built before the SDL and force the unnecessary coupling of frontend and backend. To modernize these backends with the SDL you must place GraphQL over REST with tools such as&nbsp;<a href="https://dev-blog.apollodata.com/graphql-tools-a-simpler-way-to-create-graphql-apis-eadf018f3766" target="_blank" rel="noreferrer noopener">graphql-tools</a>. graphql-tools allows you to think in an SDL first world by providing the ability use SDL directly,&nbsp;<a href="https://www.apollographql.com/docs/graphql-tools/schema-directives.html" target="_blank" rel="noreferrer noopener">extend</a>&nbsp;the base SDL, and combine distinct SDL files through a technique called&nbsp;<a href="https://dev-blog.apollodata.com/graphql-tools-2-0-with-schema-stitching-8944064904a5" target="_blank" rel="noreferrer noopener">schema stitching</a>.</p>



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



<p>To finish off, I’d like to whet your appetite a little more by pointing out that you can use an SDL file to generate fake data with&nbsp;<a href="https://github.com/APIs-guru/graphql-faker" target="_blank" rel="noreferrer noopener">graphql-faker</a>&nbsp;through an @fake directive. The introspection data can be used for exploration with&nbsp;<a href="https://www.graphqlbin.com/RVIn" target="_blank" rel="noreferrer noopener">graphql-playground</a>. Finally, a client application can extend this approach with&nbsp;<a href="https://www.apollographql.com/docs/link/links/state.html" target="_blank" rel="noreferrer noopener">apollo-link-state</a>&nbsp;to manage local data with Apollo Client, unifying the querying abstractions. As of today, link-state is works with your existing application’s GraphQL schema, rather than allowing a client-only SDL to define its behavior. I’d love to see it support a client-side SDL-based extension mechanism in the future.</p>



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



<p>Hopefully I’ve piqued your interest around the GraphQL SDL and how it can be used to delegate resolver implementation and client side state management instead of requiring a hard dependency chain when building a new product.</p>



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



<p>If you’d like to write a guest post on our blog, email Sashko at sashko@apollographql.com!</p>


SDL First Products: Parallelizing Product Development with GraphQL


<p>Every once in a while we host a GraphQL meetup at our office, gathering the community together to hear about the latest developments in GraphQL. This meetup was focused around real world usage of GraphQL. Speakers presented the lessons learned from production stories at companies like Coursera and Samsara, and some modern tips for how to improve your experience with GraphQL development and deployment.</p>



<p>Sounds awesome? Follow us on Twitter at&nbsp;<a href="https://twitter.com/apollographql" target="_blank" rel="noreferrer noopener">@apollographql</a>&nbsp;and subscribe to the&nbsp;<a href="https://www.meetup.com/GraphQL-SF" target="_blank" rel="noreferrer noopener">Meetup group</a>&nbsp;so you don’t miss out on the next GraphQL meetup in San Francisco. If you would like to speak at the Apollo office for our next event, please DM me at&nbsp;<a href="https://twitter.com/evanshauser" target="_blank" rel="noreferrer noopener">@evanshauser</a>.</p>



<p>Without further ado, enjoy the talks!</p>



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



<h2 class="wp-block-heading" id="0ffe"><a href="#wrapping-rest-with-graphql" aria-hidden="true" class="aal_anchor" id="wrapping-rest-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>Wrapping REST with GraphQL</h2>



<p>In this day and age, dealing with REST endpoints is a requirement — but don’t let that stop you from using GraphQL!</p>



<p><a rel="noreferrer noopener" href="https://medium.com/u/d987eade03ed?source=post_page-----119bfe9682ef----------------------" target="_blank">Jon Wong</a>, a Senior Software Engineer at Coursera, teaches how the Coursera engineering team takes advantage of REST to build out GraphQL servers and explains some of the strategies learned along the way. In addition, he presents about some of the tools, libraries, and workflows that make layering GraphQL on top of REST APIs a breeze.</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="Wrapping REST with GraphQL - Jon Wong" width="580" height="326" src="https://www.youtube.com/embed/iW4il6wUlvs?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>



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



<h2 class="wp-block-heading" id="f179"><a href="#deploying-a-serverless-graphql-api" aria-hidden="true" class="aal_anchor" id="deploying-a-serverless-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>Deploying a Serverless GraphQL API</h2>



<p>More and more, we find that GraphQL APIs are being developed by product developers that don’t want to worry about operating backend services. The serverless function model of deployment has a lot of benefits for APIs, but isn’t as well suited when you need some stateful features such as caching or performance metrics aggregation.</p>



<p>In this talk, <a rel="noreferrer noopener" href="https://medium.com/u/803918030a60?source=post_page-----119bfe9682ef----------------------" target="_blank">Sashko Stubailo</a>, the Open Source lead at Apollo, presents a solution that combines the best of both worlds: A stateless GraphQL API running in AWS Lambda for ease of scaling with Apollo Engine in front to handle stateful concerns.</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="Deploying a Serverless GraphQL API - Sashko Stubailo" width="580" height="326" src="https://www.youtube.com/embed/aNbxH9KQqiA?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>



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



<h2 class="wp-block-heading" id="1e1b"><a href="#client-side-caching-with-apollo-link" aria-hidden="true" class="aal_anchor" id="client-side-caching-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>Client-Side Caching with Apollo Link</h2>



<p>John Haytko, a Software Developer at Xero, explores the current state of client-side caching with Apollo and how Apollo Link can make managing your client-side cache easier and more scaleable.</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="GraphQL Client-Side Caching with Apollo Links - John Haykto" width="580" height="326" src="https://www.youtube.com/embed/8ZKpIB1pDw8?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>



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



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



<p><a rel="noreferrer noopener" href="https://medium.com/u/8cb9e0fea905?source=post_page-----119bfe9682ef----------------------" target="_blank">Christopher Biscardi</a>, a Product Engineer at Honeycomb.io, describes how the GraphQL SDL can be used to decouple client and server implementations and why that matters. He covers a set of tools that are “Schema First”, including Prisma and Apollo, as well as dives into how the SDL can be used to communicate across teams.</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="GraphQL SDL First Products  - Chris Biscardi" width="580" height="326" src="https://www.youtube.com/embed/xTZkDYZXh14?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>



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



<h2 class="wp-block-heading" id="72e9"><a href="#end-to-end-type-systems-more-features-and-fewer-bugs" aria-hidden="true" class="aal_anchor" id="end-to-end-type-systems-more-features-and-fewer-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>End-to-end Type Systems: More Features and Fewer Bugs</h2>



<p><a rel="noreferrer noopener" href="https://medium.com/u/9bcc81dbb98c?source=post_page-----119bfe9682ef----------------------" target="_blank">Stephen Wan</a>, an Infrastructure Engineer at Samsara, describes the necessity of static typing everywhere at Samsara: Protobufs, Go, GraphQL, and TypeScript. In this talk he discusses the uses of <a rel="noreferrer noopener" href="https://github.com/samsarahq/thunder" target="_blank">Thunder</a>, Samsara’s Go GraphQL server, <a rel="noreferrer noopener" href="https://github.com/apollographql/apollo-codegen" target="_blank">apollo-codegen</a>, and other tools to automatically glue these pieces together and make development easier with close to zero human intervention.</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="End-to-end Type Systems: More Features and Fewer Bugs - Stephen Wan" width="580" height="326" src="https://www.youtube.com/embed/S93i9wuZRhA?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>



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



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



<p>Following&nbsp;<a href="https://twitter.com/apollographql" target="_blank" rel="noreferrer noopener">@apollographql</a>&nbsp;on Twitter to hear the latest news, and subscribe to the&nbsp;<a href="https://www.meetup.com/GraphQL-SF" target="_blank" rel="noreferrer noopener">group on Meetup</a>. If you would like to speak at the Apollo HQ for our next event, please message me,&nbsp;<a href="https://twitter.com/evanshauser" target="_blank" rel="noreferrer noopener">@evanshauser</a>, on Twitter!</p>


Real World GraphQL: Talk Videos


<p>With GraphQL you can query exactly what you want whenever you want. That is amazing for working with an API, but also has complex security implications. Instead of asking for legitimate, useful data, a malicious actor could submit an expensive, nested query to overload your server, database, network, or all of these. Without the right protections you open yourself up to a DoS (Denial of Service) attack.</p>



<p>For example, in our GraphQL API at&nbsp;<a rel="noreferrer noopener" href="https://spectrum.chat/" target="_blank">Spectrum</a>&nbsp;we have a relationship like this:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">type Thread {
  messages(first: Int, after: String): [Message]
}

type Message {
  thread: Thread
}

type Query {
  thread(id: ID!): Thread
}</code></pre>



<p>As you can see, you can query both the messages of a thread or the thread of a message. This circular relationship allows a bad actor to construct an expensive nested query like so:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">query maliciousQuery {
  thread(id: &quot;some-id&quot;) {
    messages(first: 99999) {
      thread {
        messages(first: 99999) {
          thread {
            messages(first: 99999) {
              thread {
                # ...repeat times 10000...
              }
            }
          }
        }
      }
    }
  }
}</code></pre>



<p>Letting this kind of query through is very bad, since it exponentially increases the amount of objects loaded and will crash your entire server. While there are certain mitigations at other layers which make sending the query in the first place a bit harder (e.g. CORS), they can’t fully prevent it from happening.</p>



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



<p>A first, naïve approach we considered was to limit the incoming query size by raw bytes. Since the query is sent as a string, a quick length check would suffice:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">app.use(&#039;*&#039;, (req, res, next) =&gt; {
  const query = req.query.query || req.body.query || &#039;&#039;;
  if (query.length &gt; 2000) {
    throw new Error(&#039;Query too large&#039;);
  }
  next();
});</code></pre>



<p>Unfortunately, that doesn’t work very well in the real world: the check might allow nasty queries using short field names or block legitimate queries using long field names or nested fragments.</p>



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



<p>A second approach we considered was to have a whitelist of approved queries we use in our own application, and telling the server to not let any query pass except for those.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">app.use(&#039;/api&#039;, graphqlServer((req, res) =&gt; {
  const query = req.query.query || req.body.query;
  // TODO: Get whitelist somehow
  if (!whitelist[query]) {
    throw new Error(&#039;Query is not in whitelist.&#039;);
  }
  /* ... */
}));</code></pre>



<p>Maintaining that list of approved queries manually would obviously be a pain, but thankfully the Apollo team created&nbsp;<a rel="noreferrer noopener" href="https://github.com/apollographql/persistgraphql" target="_blank">persistgraphql</a>, which automatically extracts all queries from your client-side code and generates a nice JSON file out of it.</p>



<pre class="wp-block-prismatic-blocks"><code class="language-json">{
  &quot;scripts&quot;: {
    &quot;postbuild&quot;: &quot;persistgraphql src api/query-whitelist.json&quot;
  }
}</code></pre>



<p>This technique works beautifully and will block all vicious queries reliably. Unfortunately, it also has two major tradeoffs:</p>



<ol class="wp-block-list">
<li><strong>We can never change or delete queries, only add new ones</strong><strong>:</strong>&nbsp;if any user is running an outdated client we can’t just block their request. We’d likely have to keep a history of all queries ever used in production which is a lot more complex.</li>



<li><strong>We cannot open our API to the public:</strong>&nbsp;sometime in the future we’d like to open up our API to the public so that other developers can build their interpretation of what the Spectrum interface could look like. If we only let a whitelist of queries through that severely limits their options already and defeats the point of having a GraphQL API (super flexible system restrained by a synthetic whitelist).</li>
</ol>



<p>Those were constraints we couldn’t work with, so we went back to the drawing board.</p>



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



<p>One harmful aspect of the malicious query above is the nesting, classified by its&nbsp;<em>depth</em>, which makes the query exponentially more expensive. Each layer adds a lot more work for your backend, which can quickly add up when combined with lists.</p>



<p>We looked around and found&nbsp;<a rel="noreferrer noopener" href="https://github.com/stems/graphql-depth-limit" target="_blank">graphql-depth-limit</a>, a lovely module by&nbsp;<a rel="noreferrer noopener" href="https://twitter.com/acarl005" target="_blank">Andrew Carlson</a>, which enables us to easily limit the maximum depth of incoming queries. We checked our client and the deepest query we use has 7 levels, so we went with a (quite lenient) maximum depth of 10 and added it to our validation rules:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">app.use(&#039;/api&#039;, graphqlServer({
  validationRules: [depthLimit(10)]
}));</code></pre>



<p>That’s how simple depth limiting is!</p>



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



<p>The second harmful aspect of the query above is fetching 99999 of an object. No matter what that object is, fetching a ton of it will always be expensive. (Although the database stress might be mitigated by DataLoader, the network and processing stress won’t)</p>



<p>Instead of setting the type of the first argument to Int (which allows any arbitrary number) we have a custom scalar created with&nbsp;<a rel="noreferrer noopener" href="https://github.com/joonhocho/graphql-input-number" target="_blank">graphql-input-number</a>, that restricts the maximum value to 100:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">const PaginationAmount = GraphQLInputInt({
  name: &#039;PaginationAmount&#039;,
  min: 1,
  max: 100,
});</code></pre>



<p>This will throw an error, if anybody queries for more than 100 objects. We then use that across our API anywhere we have a connection:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">type Thread {
  messages(first: PaginationAmount, after: String): [Message]
}</code></pre>



<p>Now we’ve entirely prevented the malicious query from above! 🎉</p>



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



<p>Unfortunately, there’s still a potential to overwhelm the server under the right conditions: there are certain app-specific queries that are neither too deep nor request too many objects but are still very expensive. For us at Spectrum, such a query could look like this:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">query evilQuery {
  thread(id: &quot;54887141-57a9-4386-807c-ed950c4d5132&quot;) {
    messageConnection(first: 100) { ... }
    participants(first: 100) {
      threadConnection(first: 100) { ... }
      communityConnection { ... }
      channelConnection { ... }
      everything(first: 100) { ... }
    }
  }
}</code></pre>



<p>Neither the depth nor the individual amounts are exceptionally high in this query, so it would pass through our current protections. Yet, it potentially fetches tens of thousands of records, meaning it’s intensive on the database, server and network, a worst-case scenario.</p>



<p>To prevent this we would need to analyze queries before we run them to calculate their complexity and block them if were too expensive. While this is more work than both of our previous protections, it’ll make 100% sure no malicious query can get to our resolvers.</p>



<p><strong>Before you go ahead and spend a ton of time implementing query cost analysis be certain you need it.</strong>&nbsp;Try to crash or slow down your staging API with a nasty query and see how far you get — maybe your API doesn’t have these kinds of nested relationships, or maybe it can handle fetching thousands of records at a time perfectly fine and doesn’t need query cost analysis!</p>



<p>I ran the above query locally on my maxed-out 2017 MacBook Pro and it took our API server a good 10–15 seconds to respond with a megabyte of JSON. We really need it since we never want anybody bombarding our API with that. (<a href="https://developer.github.com/v4/guides/resource-limitations/" target="_blank" rel="noreferrer noopener">The GitHub GraphQL API also uses Query Cost Analysis</a>)</p>



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



<p>There are a couple of packages on npm to implement query cost analysis. Our two front-runners were&nbsp;<a href="https://github.com/4Catalyzer/graphql-validation-complexity" target="_blank" rel="noreferrer noopener">graphql-validation-complexity</a>, a plug-n-play module, or&nbsp;<a href="https://github.com/pa-bru/graphql-cost-analysis" target="_blank" rel="noreferrer noopener">graphql-cost-analysis</a>, which gives you more control by letting you specify a @cost directive. There’s also&nbsp;<a href="https://github.com/ivome/graphql-query-complexity" target="_blank" rel="noreferrer noopener">graphql-query-complexity</a>, but I wouldn’t recommend choosing it over graphql-cost-analysis since it’s the same idea without directive or multiplier support.</p>



<p>We went with&nbsp;<a href="https://github.com/pa-bru/graphql-cost-analysis" target="_blank" rel="noreferrer noopener">graphql-cost-analysis</a>&nbsp;because we have a large discrepancy between our fastest resolvers (20μs) and our slowest ones (10s+), so we needed the control we got from it. That being said, maybe graphql-validation-complexity is enough for you, try it out for sure!</p>



<p>The way it works is that you specify the relative cost of resolving a certain field or type. It also has multiplication support, so if you requested a list any nested field within would be multiplied by the pagination amount, which is very neat.</p>



<p>This is what the @cost directive looks like in practice:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">type Participant {
  # The complexity of getting one thread in a thread connection is 3, and multiply that by the amount of threads fetched
  threadConnection(first: PaginationAmount, after: String): ThreadConnection @cost(complexity: 3, multipliers: [&quot;first&quot;])
}

type Thread {
  author: Author @cost(complexity: 1)
  participants(first: PaginationAmount,...): [Participant] @cost(complexity: 2, multipliers: [&quot;first&quot;])
}</code></pre>



<p>This is just a snippet of our API types, but you get the point. You specify how complex a certain field is, which argument to multiply by and the maximum cost and graphql-cost-analysis does the rest for you.</p>



<p>I determined how complex certain resolvers are via the performance tracking data exposed by <a href="https://studio.apollographql.com/signup?referrer=blog">Apollo Studio</a>. I went through the entire schema and assigned a value based on the p99 service time. Then we looked through all the queries on our client to figure out the most expensive one, which got ~500 complexity points. To give us a bit of leeway for the future we set the maximum complexity to 750.</p>



<p>Running the evilQuery from above, now that we’ve added graphql-cost-analysis, I get an error message telling me that the “GraphQL query exceeds maximum complexity, please remove some nesting or fields and try again. (max: 750, actual: 1010319)”</p>



<p><strong>1 million complexity points? Rejected!</strong></p>



<h2 class="wp-block-heading" id="c620"><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>To summarize, I’d recommend using Depth and Amount Limiting as the minimum protection for any GraphQL API — they’re easy to implement and will give ample safety. Depending on your specific security requirements and schema, you might also want to investigate Query Cost Analysis. While it is a bit more work than the other tools, it does provide full coverage in the defense against malicious actors.</p>



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



<p><a href="https://spectrum.chat/thread/dc17eab7-fe14-44de-967b-79d5e6ab6e6a" target="_blank" rel="noreferrer noopener"><em>Discuss this post in the GraphQL community on Spectrum</em></a></p>


Securing Your GraphQL API from Malicious Queries

2017: The year in GraphQL


<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


<p><em>This is a guest post from&nbsp;</em><a href="https://medium.com/u/2c55ebc62328?source=post_page-----b292d6fa121b----------------------" target="_blank" rel="noreferrer noopener"><em>Xavier Cazalot</em></a><em>, engineer and GraphQL trainer at&nbsp;</em><a href="https://www.okgrow.com/" target="_blank" rel="noreferrer noopener"><em>OK GROW!</em></a><em>&nbsp;and was originally published at&nbsp;</em><a href="https://www.okgrow.com/posts/graphql-summit-2017-wrap-up" target="_blank" rel="noreferrer noopener"><em>okgrow.com</em></a><em>.</em></p>



<p>GraphQL Summit wasn’t about advanced GraphQL: this was cutting-edge GraphQL!<br>— a GraphQL Summit attendee</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_oe1k-u2h2LrMXYdh1tUFoQ-1-1024x768.jpg" alt="" class="wp-image-886" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_oe1k-u2h2LrMXYdh1tUFoQ-1-1024x768.jpg 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_oe1k-u2h2LrMXYdh1tUFoQ-1-300x225.jpg 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_oe1k-u2h2LrMXYdh1tUFoQ-1-768x576.jpg 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_oe1k-u2h2LrMXYdh1tUFoQ-1-1536x1152.jpg 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_oe1k-u2h2LrMXYdh1tUFoQ-1-2048x1536.jpg 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_oe1k-u2h2LrMXYdh1tUFoQ-1-1200x900.jpg 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_oe1k-u2h2LrMXYdh1tUFoQ-1-1980x1485.jpg 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>The conference stage and its +650 attendees</figcaption></figure>



<p>The above quote reflects two awesome aspects of the GraphQL ecosystem:</p>



<ul class="wp-block-list"><li>Compared to last year, there were&nbsp;<em>significantly</em>&nbsp;more people at the conference already using GraphQL, including a large number of people using it in production systems.</li><li>It sounds like people were pretty excited!</li></ul>



<p>I’d like to share five things that stood out to me the most from my conference experience as both an attendee and a GraphQL trainer at the Advance GraphQL workshop.</p>



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



<p>There was a lot of excitement as GraphQL&nbsp;<a href="https://dev-blog.apollodata.com/graphql-schema-stitching-8af23354ac37" target="_blank" rel="noreferrer noopener">schema stitching</a>, a method to combine multiple schemas into a unified API, was unveiled during both the workshop and the conference. Schema stitching shows promise as a way to structure microservices while getting the advantages of a manageable, central API. We had the opportunity to link an external API to the app’s schema built during the training, which was one of the training exercises that attendees were most enthused about.</p>



<p>If you’re interested in using microservices with GraphQL, you should check out this talk by Jason Lengstorf from IBM where he speaks about his solution, <a rel="noreferrer noopener" href="https://github.com/gramps-graphql/" target="_blank">GRAMPS</a> (GraphQL Apollo Microservice Pattern Server):</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="Jason Lengstorf - GraphQL at Massive Scale as the Glue in IBM&#039;s Microservice Architecture" width="580" height="326" src="https://www.youtube.com/embed/T3FbZsYXi50?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="be9a"><a href="#schema-stitching-example-from-our-training-class" aria-hidden="true" class="aal_anchor" id="schema-stitching-example-from-our-training-class"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Schema stitching example from our training class</h2>



<p>Here is an example of how we stitch our local schema with a remote one to create the final schema used by the app in our Advanced GraphQL workshop:</p>



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



<p>We’ve been hearing about <a rel="noreferrer noopener" href="http://graphql.org/blog/subscriptions-in-graphql-and-relay/" target="_blank">subscriptions</a>, the latest feature to be added to the GraphQL specification, for a while, and they are starting to <a rel="noreferrer noopener" href="https://github.com/apollographql/graphql-subscriptions" target="_blank">get real</a>. This talk by Robert Zhu of Facebook covered the subject really well.</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="Rob Zhu - GraphQL Subscriptions: Full Stack" width="580" height="326" src="https://www.youtube.com/embed/PsjiL6Yl1ag?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>There was also a&nbsp;<a href="https://www.youtube.com/watch?v=BSw05rJaCpA" target="_blank" rel="noreferrer noopener">talk on live queries by Rodrigo Muñoz</a>. Facebook are experimenting with them internally — though live query functionality isn’t there yet, it’s very promising.</p>



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



<p>Here is an example of how we handle subscriptions on the client (from a React Component) in our Advanced GraphQL workshop:</p>



<h2 class="wp-block-heading" id="84dd"><a href="#understanding-whats-going-in-your-api" aria-hidden="true" class="aal_anchor" id="understanding-whats-going-in-your-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>Understanding what’s going in your API</h2>



<p>With the increased focus on production GraphQL in complex architectures, we saw a lot more interest in understanding what was happening with the GraphQL stack and what it means GraphQL API management at scale:</p>



<ul class="wp-block-list"><li>We noticed in the training that not everyone was using a batching/caching solution for their GraphQL backend. If you aren’t already, we highly recommend&nbsp;<a href="https://github.com/facebook/dataloader" target="_blank" rel="noreferrer noopener">dataloader</a>&nbsp;(or a similar tool in your language of choice if you don’t use JavaScript).</li><li>Apollo proposes a&nbsp;<a href="https://github.com/apollographql/apollo-tracing" target="_blank" rel="noreferrer noopener">GraphQL tracing extension</a>&nbsp;that profiles all of your GraphQL operations, supported by many server implementations.</li><li><a href="https://dev-blog.apollodata.com/introducing-apollo-engine-insights-error-reporting-and-caching-for-graphql-6a55147f63fc" target="_blank" rel="noreferrer noopener">Apollo Engine</a>&nbsp;is a new product tailored for production GraphQL users that offers GraphQL query performance monitoring, error tracking, schema management and data caching.</li></ul>



<p>To see how some of these concepts come together, you should watch this talk by Sashko Stubailo of the Apollo team:</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="Sashko Stubailo - The GraphQL Stack: How everything fits together" width="580" height="326" src="https://www.youtube.com/embed/ykp6Za9rM58?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="892c"><a href="#apollo-client-2-0" aria-hidden="true" class="aal_anchor" id="apollo-client-2-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>Apollo Client 2.0</h2>



<p>The release of&nbsp;<a href="https://dev-blog.apollodata.com/apollo-client-2-0-5c8d0affcec7" target="_blank" rel="noreferrer noopener">Apollo Client 2.0</a>&nbsp;took the most popular client for GraphQL and made it smaller and more flexible. The network interface is now built from composable links that can not only control network connections, but also retries and errors.</p>



<p>Apollo Client can even store state data in the local cache, potentially even displacing Redux for some developers. It also allows a choice of client cache technologies, which should help for mobile adoption.</p>



<p>Peggy Rayzis dove into some of the details of the 2.0 release and the new projects it will enable in this talk:</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="Peggy Rayzis - Apollo Client 2.0: More than just GraphQL" width="580" height="326" src="https://www.youtube.com/embed/eHjP2WFt0zU?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>



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



<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_jcNhAuD3fiku9109LBudJg-1024x768.jpg" alt="" class="wp-image-885" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_jcNhAuD3fiku9109LBudJg-1024x768.jpg 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_jcNhAuD3fiku9109LBudJg-300x225.jpg 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_jcNhAuD3fiku9109LBudJg-768x576.jpg 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_jcNhAuD3fiku9109LBudJg-1536x1152.jpg 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_jcNhAuD3fiku9109LBudJg-2048x1536.jpg 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_jcNhAuD3fiku9109LBudJg-1200x900.jpg 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_jcNhAuD3fiku9109LBudJg-1980x1485.jpg 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Xavier Cazalot (me! 👋) presenting Apollo Link during the training class</figcaption></figure>



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



<p>GraphQL feels like the “real deal” now. We heard from speakers from the New York Times, Facebook, Twitter, Coursera, Khan Academy, and GitHub, and chatted with attendees from Atlassian, Circle CI, Nike and others.</p>



<p>Talk topics went beyond “what is GraphQL” to how companies are beginning to scale GraphQL:</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="Panel - Going Public: Launching and Scaling a GraphQL API for Third Party Developers" width="580" height="326" src="https://www.youtube.com/embed/zuutqu2YF3E?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="469e"><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>GraphQL Summit was an awesome event — full of great people, great discussions and great discoveries. Let’s continue sharing our passion for GraphQL, discover new best practices, and keep building great applications.</p>



<p>We’ve tailored the Advanced GraphQL workshop to this conference, and continue to thanks to attendee feedback. We couldn’t have asked for a better group to work with, and look forward to hopefully doing it again next year. In the meantime, if you’re interested in having a GraphQL Training at your office,&nbsp;<a href="mailto:hello@okgrow.com" target="_blank" rel="noreferrer noopener">please get in touch</a>.</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_oe1k-u2h2LrMXYdh1tUFoQ-1024x768.jpg" alt="" class="wp-image-884" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_oe1k-u2h2LrMXYdh1tUFoQ-1024x768.jpg 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_oe1k-u2h2LrMXYdh1tUFoQ-300x225.jpg 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_oe1k-u2h2LrMXYdh1tUFoQ-768x576.jpg 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_oe1k-u2h2LrMXYdh1tUFoQ-1536x1152.jpg 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_oe1k-u2h2LrMXYdh1tUFoQ-2048x1536.jpg 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_oe1k-u2h2LrMXYdh1tUFoQ-1200x900.jpg 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_oe1k-u2h2LrMXYdh1tUFoQ-1980x1485.jpg 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>30 people learning advanced GraphQL at Apollo’s HQ</figcaption></figure>



<p>A big thank you to the Apollo team at Meteor Development Group for organizing this second edition of GraphQL Summit and to Lee Byron for doing such an amazing job at MCing the event.</p>



<p>We hope to see you all next year at GraphQL Summit 2018! 🎩</p>


Key Takeaways from GraphQL Summit 2017


<p>Yesterday at reInvent,&nbsp;<a href="https://aws.amazon.com/blogs/aws/introducing-amazon-appsync/" target="_blank" rel="noreferrer noopener">Amazon launched AppSync</a>, a new GraphQL service featuring real-time updates and built-in offline support. Managed in the AWS console, AppSync’s GraphQL layer aggregates data from other AWS products such as ElasticSearch and DynamoDB. In your application, you query your GraphQL API with the AppSync Client, available for web and native.</p>



<p>The AppSync announcement got a lot of love from the developer community, and it’s easy to see why people are excited about GraphQL! Architecting your application with GraphQL enables you to build complex features quickly by simply describing your data requirements and letting your GraphQL layer take care of the rest. Companies like&nbsp;<a href="https://open.nytimes.com/the-new-york-times-now-on-apollo-b9a78a5038c" target="_blank" rel="noreferrer noopener">the New York Times</a>,&nbsp;<a href="https://dev-blog.apollodata.com/courseras-journey-to-graphql-a5ad3b77f39a?_ga=2.74751445.653517459.1511971836-1820713705.1508389092" target="_blank" rel="noreferrer noopener">Coursera</a>, and&nbsp;<a href="https://dev-blog.apollodata.com/changing-the-architecture-of-express-com-23c950d43323" target="_blank" rel="noreferrer noopener">Express</a>&nbsp;have led the way by powering their most important applications with GraphQL.</p>



<p>Naturally, we were curious to learn more about AppSync. Once we dug into the open-source code, we were excited to see that the AppSync Client implementations are based on the same MIT-licensed Apollo technology you know and love:&nbsp;<a href="https://github.com/apollographql/apollo-client" target="_blank" rel="noreferrer noopener">Apollo Client 2.0</a>,&nbsp;<a href="https://github.com/apollographql/apollo-ios" target="_blank" rel="noreferrer noopener">Apollo iOS</a>, and&nbsp;<a href="https://github.com/apollographql/apollo-codegen" target="_blank" rel="noreferrer noopener">Apollo Codegen</a>! Read on to learn how different components of these Apollo projects power some of the coolest features of the AppSync platform.</p>



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



<p>Last month, we officially released&nbsp;<a href="https://dev-blog.apollodata.com/apollo-client-2-0-5c8d0affcec7" target="_blank" rel="noreferrer noopener">Apollo Client 2.0</a>&nbsp;at GraphQL Summit 2017. In addition to making it smaller and faster, one of our main goals was to also make it much more modular. You now have the ability to plug in your own cache and tailor your network stack to your application’s requirements with&nbsp;<a href="https://www.apollographql.com/docs/link/" target="_blank" rel="noreferrer noopener">Apollo Link</a>.</p>



<p>It turns out that Apollo Client 2.0’s modular architecture was a huge win for developers looking to customize their GraphQL client, because that’s exactly how the AWS team was able to build&nbsp;<a href="https://github.com/awslabs/aws-mobile-appsync-sdk-js/blob/254930e3de1211c20bbac3efadf571008826bc32/packages/aws-appsync/src/client.js" target="_blank" rel="noreferrer noopener">AppSync Client</a>!</p>



<figure class="wp-block-image alignfull size-large"><img loading="lazy" decoding="async" width="1024" height="471" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_H-kRiLcPhirYQ537zDCpUA-1024x471.png" alt="" class="wp-image-908" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_H-kRiLcPhirYQ537zDCpUA-1024x471.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_H-kRiLcPhirYQ537zDCpUA-300x138.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_H-kRiLcPhirYQ537zDCpUA-768x353.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_H-kRiLcPhirYQ537zDCpUA-1536x706.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_H-kRiLcPhirYQ537zDCpUA-1200x552.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_H-kRiLcPhirYQ537zDCpUA.png 1922w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>AWS AppSync leverages the modular architecture of Apollo Client</figcaption></figure>



<p>In only a few weeks, the AWS team was able to make complex features like offline support and authentication a reality by extending the Apollo&nbsp;<code>InMemoryCache</code>&nbsp;and using Apollo Link to customize their network interface. We think this is a testament to the extensibility of Apollo Client and hope their example inspires more teams to experiment with personalizing their GraphQL client. Let’s dive into how AWS accomplished this.</p>



<h3 class="wp-block-heading" id="de54"><a href="#apollo-link-enables-offline-support" aria-hidden="true" class="aal_anchor" id="apollo-link-enables-offline-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>Apollo Link enables offline support</h3>



<p>To achieve offline support, the AWS team created a&nbsp;<a rel="noreferrer noopener" href="https://github.com/awslabs/aws-mobile-appsync-sdk-js/blob/254930e3de1211c20bbac3efadf571008826bc32/packages/aws-appsync/src/link/offline-link.js" target="_blank">custom Apollo Link</a>&nbsp;that takes a Redux store augmented by&nbsp;<a rel="noreferrer noopener" href="https://github.com/redux-offline/redux-offline" target="_blank">redux-offline</a>&nbsp;for persistence. This link also queues up any pending mutations and calls to refetch queries when the device is offline and stores them in a Redux subtree to be executed when the device goes back online. Since the AppSync Client is based on Apollo Client, you still get the benefit of optimistic UI responses even if the device is offline when the mutation is fired.</p>



<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
<blockquote class="twitter-tweet" data-width="550" data-dnt="true"><p lang="en" dir="ltr">Using AWS SDK for Mobile development will give you Automatic offline support out of the box <a href="https://twitter.com/saligramkarthik?ref_src=twsrc%5Etfw">@saligramkarthik</a> <a href="https://twitter.com/hashtag/reInvent?src=hash&amp;ref_src=twsrc%5Etfw">#reInvent</a> <a href="https://t.co/D9okawhVbj">pic.twitter.com/D9okawhVbj</a></p>&mdash; AWS Events (@AWSEvents) <a href="https://twitter.com/AWSEvents/status/935630189312143361?ref_src=twsrc%5Etfw">November 28, 2017</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div></figure>



<p>We’re also working on improving the offline experience to create easy persistence that isn’t dependent on Redux and advanced features such as applying a timeout to the offline mutation queue to avoid potential conflicts. If you’d like to learn more about these initiatives, come&nbsp;<a href="https://github.com/apollographql/apollo-cache-asyncstorage/issues/6" target="_blank" rel="noreferrer noopener">join the party</a>&nbsp;on the&nbsp;<code>apollo-cache-asyncstorage</code>&nbsp;repo! 🎉 We’d love to hear your input and welcome any contributions.</p>



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



<p>One AppSync feature that generated a lot of buzz is its emphasis on real-time data. Under the hood, AppSync’s real-time feature is powered by GraphQL subscriptions. While Apollo bases its subscriptions on WebSockets via&nbsp;<a href="https://github.com/apollographql/subscriptions-transport-ws" target="_blank" rel="noreferrer noopener">subscriptions-transport-ws</a>, subscriptions in GraphQL are actually flexible enough for you to base them on another messaging technology. Instead of WebSockets, AppSync’s subscriptions use MQTT as the transport layer.</p>



<p>The AWS team even&nbsp;<a href="https://github.com/awslabs/aws-mobile-appsync-sdk-js/blob/254930e3de1211c20bbac3efadf571008826bc32/packages/aws-appsync/src/link/subscription-handshake-link.js" target="_blank" rel="noreferrer noopener">wrote their own Apollo Link</a>&nbsp;to execute subscriptions over MQTT, which we think is a really cool use case. If you’d like to integrate real-time features into your application in only a few lines of code with Apollo Link,&nbsp;<a href="https://www.apollographql.com/docs/react/features/subscriptions.html#subscriptions-client" target="_blank" rel="noreferrer noopener">please check out our example</a>&nbsp;which serves queries &amp; mutations over HTTP and subscriptions over WebSockets. We’d also like to hear from you on the&nbsp;<a href="https://github.com/apollographql/subscriptions-transport-ws" target="_blank" rel="noreferrer noopener">subscriptions-transport-ws</a>&nbsp;repo if you have any suggestions on how to improve our transport layer.</p>



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



<p>Another cool feature of AWS AppSync is that it’s compatible with different platforms. It works with JavaScript and also with native platforms written in Swift. One of our main goals for Apollo is that you can use it with any type of architecture, which is why we collaborated with the community on&nbsp;<a href="https://github.com/apollographql/apollo-ios" target="_blank" rel="noreferrer noopener">Apollo iOS</a>&nbsp;and&nbsp;<a href="https://github.com/apollographql/apollo-android" target="_blank" rel="noreferrer noopener">Apollo Android</a>. It’s exciting to see AppSync builds on that foundation to power their&nbsp;<a href="https://github.com/awslabs/aws-mobile-appsync-sdk-ios/tree/3fbd248440115d1b913fabc9290eb9d7d4bc9a9b/AWSAppSyncClient/Apollo/Sources/Apollo" target="_blank" rel="noreferrer noopener">native client</a>!</p>



<figure class="wp-block-image alignfull size-large"><img loading="lazy" decoding="async" width="1024" height="402" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_FlStKWxJaO4x-Oc4vGFyFA-1024x402.png" alt="" class="wp-image-907" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_FlStKWxJaO4x-Oc4vGFyFA-1024x402.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_FlStKWxJaO4x-Oc4vGFyFA-300x118.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_FlStKWxJaO4x-Oc4vGFyFA-768x302.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_FlStKWxJaO4x-Oc4vGFyFA-1536x603.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_FlStKWxJaO4x-Oc4vGFyFA-1200x471.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_FlStKWxJaO4x-Oc4vGFyFA-1980x778.png 1980w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_FlStKWxJaO4x-Oc4vGFyFA.png 2026w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>AppSync’s iOS client is based on Apollo iOS</figcaption></figure>



<p>To generate Swift types from AppSync’s GraphQL layer, AWS uses a&nbsp;<a href="https://github.com/awslabs/aws-appsync-codegen/tree/6c5ddf4e589813695d4bdcca665776d4614205c7" target="_blank" rel="noreferrer noopener">customized version of Apollo Codegen</a>.&nbsp;<a href="https://github.com/apollographql/apollo-codegen" target="_blank" rel="noreferrer noopener">Apollo Codegen</a>&nbsp;is a build tool that uses your GraphQL schema and queries to output types for a variety of different language targets: Flow, TypeScript, Java, Scala, and Swift.</p>



<p>We’re constantly working with the community to continuously improve the language targets; for example,&nbsp;<a href="https://medium.com/u/2ab2eb7f698c?source=post_page-----df61eb706183----------------------" target="_blank" rel="noreferrer noopener">Lewis Chung</a>&nbsp;from Coursera&nbsp;<a href="https://github.com/apollographql/apollo-codegen/pull/296" target="_blank" rel="noreferrer noopener">published a revision</a>&nbsp;to the Flow &amp; TypeScript targets just this week! If you’re interested in generating static types from GraphQL and would like to strengthen the generated code or support additional targets like Reason, please reach out! We’d love to welcome you on board.</p>



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



<h2 class="wp-block-heading" id="487a"><a href="#a-bright-future-%f0%9f%9a%80" aria-hidden="true" class="aal_anchor" id="a-bright-future-%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>A bright future 🚀</h2>



<p>AWS AppSync is an excellent example of how teams can create innovative products quickly by using the Apollo family of tools. We’re so excited to see that Apollo works well as an extensible platform for developing customized GraphQL client tooling.</p>



<p>With our solid foundation in place, we can’t wait to see more people build upon the Apollo platform to push the GraphQL ecosystem forward! If you’re interested in collaborating with us to create the next generation of GraphQL tooling,&nbsp;<a href="https://www.apollographql.com/docs/community/" target="_blank" rel="noreferrer noopener">learn more</a>&nbsp;on our contributor site. We’d love to hear from you! 🤗</p>


AWS AppSync, built with Apollo

GraphQL Summit talk videos are out!


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



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



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



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



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



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



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



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



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



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



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



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



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



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



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


Changing the architecture of Express.com


<p><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


<p><a href="http://summit.graphql.com/" target="_blank" rel="noreferrer noopener">GraphQL Summit 2017</a>&nbsp;is only a month away, on October 25 and 26, and we’re excited to roll out the&nbsp;<a href="http://summit.graphql.com/speakers" target="_blank" rel="noreferrer noopener">full list of speakers</a>&nbsp;who will be sharing their GraphQL best practices and adoption stories. Stay tuned for the full conference schedule with talk times early next week.</p>



<p><em>Tickets are selling fast, so&nbsp;</em><a href="https://summit.graphql.com/#tickets" target="_blank" rel="noreferrer noopener"><em>reserve your seat now</em></a><em>! Use the promo code GRAPHQLFTW for 10% off, or use the new buddy pass promotion to get 2 tickets for 20% off.</em></p>



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



<p>We couldn’t be more excited about this lineup, which was carefully selected by a panel of representing some of the major GraphQL maintainers and users. Thanks&nbsp;<a href="https://medium.com/u/d9b1a61823fa?source=post_page-----3147d486841d----------------------" target="_blank" rel="noreferrer noopener">Lee Byron</a>, Tomer Elmalem,&nbsp;<a href="https://medium.com/u/3e6b69951eef?source=post_page-----3147d486841d----------------------" target="_blank" rel="noreferrer noopener">Robert Zhu</a>,&nbsp;<a href="https://medium.com/u/c827782c6410?source=post_page-----3147d486841d----------------------" target="_blank" rel="noreferrer noopener">Peggy Rayzis</a>,&nbsp;<a href="https://medium.com/u/803918030a60?source=post_page-----3147d486841d----------------------" target="_blank" rel="noreferrer noopener">Sashko Stubailo</a>,&nbsp;<a href="https://medium.com/u/ff75ba3095a6?source=post_page-----3147d486841d----------------------" target="_blank" rel="noreferrer noopener">Johannes Schickling</a>, and&nbsp;<a href="https://medium.com/u/908fb8fea30c?source=post_page-----3147d486841d----------------------" target="_blank" rel="noreferrer noopener">Max Stoiber</a>&nbsp;for your help!</p>



<p>What resulted is an awesome program of speakers representing:</p>



<ul class="wp-block-list"><li>Some of the largest companies using GraphQL today, including IBM, KLM, Twitter, Intuit, Capital One and more</li><li>Maintainers of the most important services and open source libraries in the GraphQL ecosystem, including Apollo, Graphcool, Facebook, Graphene, and others</li><li>Companies that are pushing the boundaries of GraphQL in production, including Coursera, GitHub, Yelp, Shopify, and more</li></ul>



<p>They’ll be delivering a diverse set of talks from ranging from best practices on how to handle things like authorization, codegen, mutations, and caching, all the way down to the nitty gritty details of experimental features in GraphQL’s future (you won’t want to miss the talk on live queries).</p>



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



<p>The&nbsp;<a href="http://summit.graphql.com/speakers" target="_blank" rel="noreferrer noopener">list of sessions</a>&nbsp;really speaks for itself, so jump right in! Or, take a moment to browse some of the speakers we’ve been announcing over the past week below:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="512" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_69Roob6hEIqQ3QV21Gabhw-1024x512.jpg" alt="" class="wp-image-971" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_69Roob6hEIqQ3QV21Gabhw-1024x512.jpg 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_69Roob6hEIqQ3QV21Gabhw-300x150.jpg 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_69Roob6hEIqQ3QV21Gabhw-768x384.jpg 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_69Roob6hEIqQ3QV21Gabhw-1536x768.jpg 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_69Roob6hEIqQ3QV21Gabhw-1200x600.jpg 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_69Roob6hEIqQ3QV21Gabhw.jpg 1550w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption><a href="https://medium.com/u/6a98eb806571?source=post_page-----3147d486841d----------------------" target="_blank" rel="noreferrer noopener">Jason Lengstorf</a>,&nbsp;<a href="https://medium.com/u/78d9fa1f8c68?source=post_page-----3147d486841d----------------------" target="_blank" rel="noreferrer noopener">Dhruv Kapadia</a>,&nbsp;<a href="https://medium.com/u/2ab2eb7f698c?source=post_page-----3147d486841d----------------------" target="_blank" rel="noreferrer noopener">Lewis Chung</a>,&nbsp;<a href="https://medium.com/u/3b342cda1eab?source=post_page-----3147d486841d----------------------" target="_blank" rel="noreferrer noopener">Tony Ghita</a></figcaption></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="512" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_tRn3hlEHOI7R_2bAuR6iZA-1024x512.jpg" alt="" class="wp-image-972" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_tRn3hlEHOI7R_2bAuR6iZA-1024x512.jpg 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_tRn3hlEHOI7R_2bAuR6iZA-300x150.jpg 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_tRn3hlEHOI7R_2bAuR6iZA-768x384.jpg 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_tRn3hlEHOI7R_2bAuR6iZA-1536x768.jpg 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_tRn3hlEHOI7R_2bAuR6iZA-1200x600.jpg 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_tRn3hlEHOI7R_2bAuR6iZA.jpg 1550w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption><a href="https://medium.com/u/8cae2b42cc85?source=post_page-----3147d486841d----------------------" target="_blank" rel="noreferrer noopener">Brian Douglas</a>,&nbsp;<a href="https://medium.com/u/d987eade03ed?source=post_page-----3147d486841d----------------------" target="_blank" rel="noreferrer noopener">Jon Wong</a>,&nbsp;<a href="https://medium.com/u/9afe14b301f2?source=post_page-----3147d486841d----------------------" target="_blank" rel="noreferrer noopener">Jira Vinyoopongphan</a>,&nbsp;<a href="https://medium.com/u/df9da892406d?source=post_page-----3147d486841d----------------------" target="_blank" rel="noreferrer noopener">Syrus Akbary</a>,&nbsp;<a href="https://medium.com/u/fd3d3dea3cd3?source=post_page-----3147d486841d----------------------" target="_blank" rel="noreferrer noopener">James Baxley III</a>,&nbsp;<a href="https://medium.com/u/7dd4bc328875?source=post_page-----3147d486841d----------------------" target="_blank" rel="noreferrer noopener">Garen Torikian</a></figcaption></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="512" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_H97GNkmk6xsZuvlnNA2Uyg-1024x512.jpg" alt="" class="wp-image-973" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_H97GNkmk6xsZuvlnNA2Uyg-1024x512.jpg 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_H97GNkmk6xsZuvlnNA2Uyg-300x150.jpg 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_H97GNkmk6xsZuvlnNA2Uyg-768x384.jpg 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_H97GNkmk6xsZuvlnNA2Uyg-1536x768.jpg 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_H97GNkmk6xsZuvlnNA2Uyg-1200x600.jpg 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_H97GNkmk6xsZuvlnNA2Uyg.jpg 1550w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption><a href="https://medium.com/u/592c66ff70d?source=post_page-----3147d486841d----------------------" target="_blank" rel="noreferrer noopener">Martijn Walraven</a>,&nbsp;<a href="https://medium.com/u/c3034d4edf44?source=post_page-----3147d486841d----------------------" target="_blank" rel="noreferrer noopener">Scott Taylor</a>,&nbsp;<a href="https://medium.com/u/dd54d23f4f88?source=post_page-----3147d486841d----------------------" target="_blank" rel="noreferrer noopener">Jason Bahl</a></figcaption></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="512" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_d7Ptaj4cJCXftIfUskOJjQ-1024x512.jpg" alt="" class="wp-image-974" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_d7Ptaj4cJCXftIfUskOJjQ-1024x512.jpg 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_d7Ptaj4cJCXftIfUskOJjQ-300x150.jpg 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_d7Ptaj4cJCXftIfUskOJjQ-768x384.jpg 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_d7Ptaj4cJCXftIfUskOJjQ-1536x768.jpg 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_d7Ptaj4cJCXftIfUskOJjQ-1200x600.jpg 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_d7Ptaj4cJCXftIfUskOJjQ.jpg 1550w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption><a href="https://medium.com/u/47b3b199a712?source=post_page-----3147d486841d----------------------" target="_blank" rel="noreferrer noopener">Danielle Man</a>,&nbsp;<a href="https://medium.com/u/255618857886?source=post_page-----3147d486841d----------------------" target="_blank" rel="noreferrer noopener">Brian Lovin</a>,&nbsp;<a href="https://medium.com/u/4077cea51e29?source=post_page-----3147d486841d----------------------" target="_blank" rel="noreferrer noopener">Eric Baer</a>,&nbsp;<a href="https://medium.com/u/d6abd3cce78?source=post_page-----3147d486841d----------------------" target="_blank" rel="noreferrer noopener">Ryan Chenkie</a>,&nbsp;<a href="https://medium.com/u/2c55ebc62328?source=post_page-----3147d486841d----------------------" target="_blank" rel="noreferrer noopener">Xavier Cazalot</a>,&nbsp;<a href="https://medium.com/u/6d7ee7c0b225?source=post_page-----3147d486841d----------------------" target="_blank" rel="noreferrer noopener">Abhi Aiyer</a></figcaption></figure>



<p><em>Not pictured: our MC&nbsp;</em><a href="https://medium.com/u/d9b1a61823fa?source=post_page-----3147d486841d----------------------" target="_blank" rel="noreferrer noopener"><em>Lee Byron</em></a><em>&nbsp;(Facebook), Leanne Shapton (Shopify), Tomer Elmalem (Yelp),&nbsp;</em><a href="https://medium.com/u/ecb22831abfb?source=post_page-----3147d486841d----------------------" target="_blank" rel="noreferrer noopener"><em>Marc-André Giroux</em></a><em>&nbsp;(GitHub),&nbsp;</em><a href="https://medium.com/u/803918030a60?source=post_page-----3147d486841d----------------------" target="_blank" rel="noreferrer noopener"><em>Sashko Stubailo</em></a><em>&nbsp;(Apollo), Dan Schafer (Facebook),&nbsp;</em><a href="https://medium.com/u/3e6b69951eef?source=post_page-----3147d486841d----------------------" target="_blank" rel="noreferrer noopener"><em>Robert Zhu</em></a><em>&nbsp;(Facebook),&nbsp;</em><a href="https://medium.com/u/ff75ba3095a6?source=post_page-----3147d486841d----------------------" target="_blank" rel="noreferrer noopener"><em>Johannes Schickling</em></a><em>&nbsp;(Graphcool).</em></p>



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



<p>Today we’re also very happy to launch this year’s&nbsp;<a href="https://docs.google.com/forms/d/e/1FAIpQLSfN1LnQQ2At4ZqNcRqk35CAaYKE1ONmROrrlx9Uto7N1muBzg/viewform?usp=sf_link" target="_blank" rel="noreferrer noopener">GraphQL Summit Diversity Scholarship</a>&nbsp;in partnership with GitHub. We are aware that ticket prices to technical conferences can be prohibitive for many, so in an effort to make GraphQL Summit more accessible to those who would like to attend, we’re working with GitHub to provide a small number of ticket-only scholarships.</p>



<p>If you’d like to be considered for a free ticket, please&nbsp;<a href="https://docs.google.com/forms/d/e/1FAIpQLSfN1LnQQ2At4ZqNcRqk35CAaYKE1ONmROrrlx9Uto7N1muBzg/viewform?usp=sf_link" target="_blank" rel="noreferrer noopener">complete this form</a>&nbsp;by 12AM PT on October 7, 2017. Successful applicants will be informed by 12AM PT on October 12, 2017.</p>



<h2 class="wp-block-heading" id="f71f"><a href="#sign-up-today" aria-hidden="true" class="aal_anchor" id="sign-up-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>Sign up today!</h2>



<p>So what are you waiting for? Get your ticket to GraphQL Summit today:<a href="https://summit.graphql.com/" target="_blank" rel="noreferrer noopener">GraphQL Summit 2017The GraphQL developer conference | October 25-26 | San Franciscosummit.graphql.com</a><br></p>


Announcing Speakers & Sessions for GraphQL Summit 2017


<p>The last month has been an interesting time in the React and GraphQL communities, with a lot of discussion about different software licenses, patent grants, and patents involved in the GraphQL specification. Today, just a few days after&nbsp;<a href="https://code.facebook.com/posts/300798627056246/relicensing-react-jest-flow-and-immutable-js/" target="_blank" rel="noreferrer noopener">React was relicensed to MIT</a>, I’m excited to report that GraphQL is joining in, and all of these issues can finally be put to rest.</p>



<p>Here are today’s new developments in regards to the licensing of Facebook’s GraphQL projects:</p>



<ol class="wp-block-list"><li><strong>The&nbsp;</strong><a href="http://facebook.github.io/graphql/draft/" target="_blank" rel="noreferrer noopener"><strong>GraphQL specification</strong></a><strong>, the document on which all GraphQL implementations are based, has been relicensed under the&nbsp;</strong><a href="http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0" target="_blank" rel="noreferrer noopener"><strong>Open Web Foundation Agreement (OWFa) v1.0</strong></a><strong>.</strong>This change unambiguously grants all the necessary patent rights to use GraphQL in any setting.</li><li><strong>The&nbsp;</strong><a href="https://github.com/graphql/graphql-js" target="_blank" rel="noreferrer noopener"><strong>GraphQL.js reference implementation</strong></a><strong>, which most JavaScript GraphQL projects are based on, and&nbsp;</strong><a href="https://github.com/facebook/relay" target="_blank" rel="noreferrer noopener"><strong>Relay</strong></a><strong>, are being relicensed under the MIT license.</strong>&nbsp;This is an extremely popular and permissive license used by a huge number of open source projects including React and Apollo.</li></ol>



<p>Read the&nbsp;<a href="https://medium.com/@leeb/relicensing-the-graphql-specification-e7d07a52301b" target="_blank" rel="noreferrer noopener">post on the Facebook blog</a>&nbsp;for the official announcement from Lee Byron.</p>



<p>This is a critical step forward for the GraphQL community, and underscores the GraphQL team’s commitment to empower as many people as possible to adopt GraphQL. We on the Apollo team are thankful that Lee and the team at Facebook were responsive and communicative throughout the process, and reached what we feel is the best possible outcome very quickly.</p>



<p>The team at Apollo knew that patent issues were an open question for many GraphQL and Apollo developers, and finding a constructive resolution to these patent questions had been a top priority of ours for the last several months.</p>



<p>Read on for more details about these new licenses.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="577" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_3xHxufbFJG_0y76D8LNvyA-1024x577.png" alt="" class="wp-image-977" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_3xHxufbFJG_0y76D8LNvyA-1024x577.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_3xHxufbFJG_0y76D8LNvyA-300x169.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_3xHxufbFJG_0y76D8LNvyA-768x433.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_3xHxufbFJG_0y76D8LNvyA-1536x865.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_3xHxufbFJG_0y76D8LNvyA-2048x1153.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_3xHxufbFJG_0y76D8LNvyA-1200x676.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_3xHxufbFJG_0y76D8LNvyA-1980x1115.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



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



<p>The most important news today is that the GraphQL specification has been relicensed under the OWFa, an open license that allows anyone to use or implement the GraphQL specification without worrying about copyright or patent issues.</p>



<p>Essentially, the OWFa license says that anyone using the GraphQL specification automatically gets a grant to any patents that are necessary to the spec. This is a standard license that has also been used by&nbsp;<a href="http://www.openwebfoundation.org/faqs/users-of-owf-agreements" target="_blank" rel="noreferrer noopener">many other specifications</a>&nbsp;that you might have heard of or used, including some versions of the&nbsp;<a href="https://dom.spec.whatwg.org/" target="_blank" rel="noreferrer noopener">Document Object Model (DOM) spec</a>&nbsp;from WHATWG and TypeScript from Microsoft.</p>



<p>I’m excited that this new license will make it easy for people to use the specification, contribute to it, and build new GraphQL implementations without any legal concerns.</p>



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



<p>One other point of concern in the community in the past has been the BSD + patents license that Facebook used for some of its most prominent open source projects. Part of today’s announcement is that GraphQL.js, the reference implementation of the GraphQL spec, is going to be licensed under the&nbsp;<a href="https://en.wikipedia.org/wiki/MIT_License" target="_blank" rel="noreferrer noopener">MIT license</a>. This is a standard permissive license used by a huge number of popular open source projects, including all of the Apollo GraphQL open source tools.</p>



<p>This means anyone can use, fork, and build upon GraphQL.js without worrying about the license. Since you’re probably already using multiple open source projects with the MIT license, you can use GraphQL.js with the peace of mind that it comes with exactly the same permissions.</p>



<p>This is great news for the Apollo project as well, since many of our tools depend on GraphQL.js, which means developers can now use all Apollo open source tools and dependencies under an MIT license.</p>



<h2 class="wp-block-heading" id="7b70"><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>At Apollo, we believe GraphQL is a big step forward for how people manage data in their applications. That’s why we’ve been working hard for almost two years to make GraphQL better, easier to adopt, and more useful for developers, teams, and companies of all shapes and sizes. One part of that work is building great technology, but the social and legal aspects are just as important.</p>



<p>On behalf of the whole team, I’d like to express how excited we are that GraphQL is now in the best possible position to grow and thrive as one of the main tools people use to build software. Now, let’s get back to building cool stuff!</p>



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



<p>With this great news, we’re even more pleased to invite you to come to the GraphQL Summit conference on October 25–26 in San Francisco. Hear from the engineers at Facebook, Apollo, and other companies about all aspects of GraphQL! Sign up below and use the discount code&nbsp;<code>GRAPHQLFTW</code>&nbsp;for 10% off!</p>


Facebook grants full patent rights to all GraphQL users


<p>GraphQL First, or “schema first”, development is a concept that was unveiled about a year ago when the Apollo Dev team first published an <a rel="noreferrer noopener" href="https://dev-blog.apollodata.com/graphql-first-a-better-way-to-build-modern-apps-b5a04f7121a0" target="_blank">article</a> about it and then described it in detail at <a rel="noreferrer noopener" href="https://summit.graphql.com/" target="_blank">GraphQL Summit</a> in San Francisco:</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="Navigating Your Transition to GraphQL" width="580" height="326" src="https://www.youtube.com/embed/RCIRZr0RRt8?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>At&nbsp;<a href="https://quri.com/" target="_blank" rel="noreferrer noopener">Quri</a>, we have been betting big on GraphQL since early 2016, and that philosophy was just another “Aha!” moment for us.</p>



<p>The concept is rather simple: before starting any implementation, the different stakeholders (usually front-end and back-end developers) look at the UI mockups and how the data would be accessed, and then draft a schema proposal either from scratch or based on the existing types. From there, since the&nbsp;<em>contract</em>&nbsp;is settled,&nbsp;<em>in theory</em>&nbsp;the back-end and front-end teams could work independently.&nbsp;Here are a few key slides from&nbsp;<a href="https://medium.com/u/47b3b199a712?source=post_page-----7bf84b260135----------------------" target="_blank" rel="noreferrer noopener">Danielle Man</a>’s presentation last year that demonstrate that workflow:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="405" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_GE1oQfWcn6-cq5WvtUZ5qQ-1024x405.png" alt="" class="wp-image-988" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_GE1oQfWcn6-cq5WvtUZ5qQ-1024x405.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_GE1oQfWcn6-cq5WvtUZ5qQ-300x119.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_GE1oQfWcn6-cq5WvtUZ5qQ-768x304.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_GE1oQfWcn6-cq5WvtUZ5qQ-1536x607.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_GE1oQfWcn6-cq5WvtUZ5qQ-2048x810.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_GE1oQfWcn6-cq5WvtUZ5qQ-1200x475.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_GE1oQfWcn6-cq5WvtUZ5qQ-1980x783.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<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_8GebGN8cUiNmnikm-wBHIw-1024x523.png" alt="" class="wp-image-987" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_8GebGN8cUiNmnikm-wBHIw-1024x523.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_8GebGN8cUiNmnikm-wBHIw-300x153.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_8GebGN8cUiNmnikm-wBHIw-768x392.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_8GebGN8cUiNmnikm-wBHIw-1536x784.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_8GebGN8cUiNmnikm-wBHIw-2048x1045.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_8GebGN8cUiNmnikm-wBHIw-1200x612.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_8GebGN8cUiNmnikm-wBHIw-1980x1010.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="557" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_csfNudihYgkLvPfnSumQ1w-1024x557.png" alt="" class="wp-image-986" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_csfNudihYgkLvPfnSumQ1w-1024x557.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_csfNudihYgkLvPfnSumQ1w-300x163.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_csfNudihYgkLvPfnSumQ1w-768x418.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_csfNudihYgkLvPfnSumQ1w-1536x836.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_csfNudihYgkLvPfnSumQ1w-2048x1115.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_csfNudihYgkLvPfnSumQ1w-1200x653.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_csfNudihYgkLvPfnSumQ1w-1980x1078.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Developing new product features</figcaption></figure>



<p>After a little experimentation at Quri, we were able to introduce a GraphQL-based development workflow that has front-end devs and back-end devs building features in parallel. Read on to see how we got there, and what that workflow looks like in the real world.</p>



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



<p>Since this idea was first introduced, there has been only a&nbsp;<a href="https://www.youtube.com/watch?v=SdWI7XaAeeY" target="_blank" rel="noreferrer noopener">few</a>&nbsp;posts about how GraphQL First works in practice. We tried a few things — one of them was to run a mocked version of our schema with&nbsp;<a href="https://github.com/apollographql/graphql-tools" target="_blank" rel="noreferrer noopener">graphql-tools</a>&nbsp;and a copy of the schema. It didn’t really work since we weren’t able to build a process around it, and we found it hard to keep the&nbsp;<em>copy</em>&nbsp;of the schema in sync with our actual, constantly evolving schema.</p>



<p>Most of the mocking solutions we found were in&nbsp;<a href="http://dev.apollodata.com/tools/graphql-tools/mocking.html" target="_blank" rel="noreferrer noopener">javascript</a>. We were able to experiment with them, but it was not a viable option for our development workflow since we use&nbsp;<a href="http://graphql-ruby.org/" target="_blank" rel="noreferrer noopener">graphql-ruby</a>. There wasn’t a common language the back-end and front-end developers could use.</p>



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



<p>About two months ago, my colleague Prasanna found about&nbsp;<a href="https://github.com/APIs-guru/graphql-faker" target="_blank" rel="noreferrer noopener">graphql-faker</a>. It is a CLI tool that allows you to extend an existing schema by specifying its endpoint and then writing the new types in the&nbsp;<a href="https://www.graph.cool/docs/faq/graphql-sdl-schema-definition-language-kr84dktnp0/" target="_blank" rel="noreferrer noopener">GraphQL IDL Language</a>:</p>



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



<p>Being able to proxy an existing endpoint is one thing, but this tool went a step further to make it a great experience. You can:</p>



<ol class="wp-block-list"><li>Run the tool with a simple command</li><li>Extend the types in one tab of the browser</li><li>Switch tabs</li><li>Explore the schema with Graph<em>i</em>QL</li><li>Run queries against it</li><li>Get results with both real data and realistic mocked data (utilizing&nbsp;<a href="https://github.com/Marak/faker.js" target="_blank" rel="noreferrer noopener">faker.js</a>)</li></ol>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="880" height="372" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_kPxv8EzkdSVC48o-rEaENw.gif" alt="" class="wp-image-984"/></figure>



<p>We experimented with it, and since the results were positive we decided to adopt it and include this tool in our development process.</p>



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



<p>Here’s an overview of how this process operates at Quri. First, we’ve created a GitHub repository named&nbsp;<code>quri/schema-extensions</code>&nbsp;(I created a public&nbsp;<a href="https://github.com/chollier/schema-extensions" target="_blank" rel="noreferrer noopener">example repository</a>, just fork it!).</p>



<p>In there, when either a front-end or back-end developer wants to suggest some changes to the schema, we create a pull-request that adds a&nbsp;<code>&lt;a href=&quot;https://github.com/chollier/schema-extensions/blob/master/example.faker.graphql&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;feature.faker.graphql&lt;/a&gt;</code>&nbsp;file. We can then use the normal GitHub review process to provide feedback, approval or ask for some modifications. Both the front-end and back-end teams have to approve the changes for it to be merged and then implemented.</p>



<p>Let’s have a look at that development workflow. For that use case, we will assume I’m an engineer looking at some product specifications: we want to add to the user page a profile picture. We should be able to see a thumbnail, and, when clicking on the picture, the full-size image.</p>



<ol class="wp-block-list"><li>First I would create a new extension file&nbsp;<code>user-avatar.faker.graphql</code>&nbsp;in the repository.</li><li>Then I would run the project:&nbsp;<code>npm start --open --extend http://localhost:3000/graphql/queries --header &quot;Authorization:Bearer [OAuth token]&quot; ./user-avatar.faker.graphql</code>&nbsp;(This assumes my GraphQL endpoint is running on localhost and has some Authentication requirements.)</li><li>Then we can start writing the type extensions in the browser:</li></ol>



<figure class="wp-block-image alignfull size-large"><img loading="lazy" decoding="async" width="1024" height="433" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_C6L93S_i3omo-6ResznSIQ-1024x433.png" alt="" class="wp-image-983" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_C6L93S_i3omo-6ResznSIQ-1024x433.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_C6L93S_i3omo-6ResznSIQ-300x127.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_C6L93S_i3omo-6ResznSIQ-768x325.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_C6L93S_i3omo-6ResznSIQ-1536x649.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_C6L93S_i3omo-6ResznSIQ-2048x866.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_C6L93S_i3omo-6ResznSIQ-1200x507.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_C6L93S_i3omo-6ResznSIQ-1980x837.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Here I’m creating an Avatar type that contains two field: originalUrl and thumbnail64Url — it is possible with graphql-faker to use realistic data.</figcaption></figure>



<p>4. By switching tab on the left side, I can now visualize these additions in Graph<em>i</em>QL:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="700" height="490" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_99j1ONtJ6rf2hfQPYl2_eA.png" alt="" class="wp-image-982" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_99j1ONtJ6rf2hfQPYl2_eA.png 700w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_99j1ONtJ6rf2hfQPYl2_eA-300x210.png 300w" sizes="auto, (max-width: 700px) 100vw, 700px" /></figure>



<p>5. Finally, I can write a query against this schema:</p>



<figure class="wp-block-image alignfull size-large"><img loading="lazy" decoding="async" width="1024" height="543" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_JlRN9GBxnelL4qkTM7D4ow-1024x543.png" alt="" class="wp-image-981" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_JlRN9GBxnelL4qkTM7D4ow-1024x543.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_JlRN9GBxnelL4qkTM7D4ow-300x159.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_JlRN9GBxnelL4qkTM7D4ow-768x407.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_JlRN9GBxnelL4qkTM7D4ow-1536x815.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_JlRN9GBxnelL4qkTM7D4ow-2048x1086.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_JlRN9GBxnelL4qkTM7D4ow-1200x636.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_JlRN9GBxnelL4qkTM7D4ow-1980x1050.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Utilizing graphql-faker integration with faker.js I was able to provide a different set of mocked data for the two fields</figcaption></figure>



<p>6. The last part of the process would be to open a pull request, ask for feedback, incorporate it, and, when a consensus is reached, merge it. For instance, someone might suggest we use some real world examples:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-graphql">type Avatar {
  # The original avatar URL
  originalUrl: String @fake(type:avatarUrl, options: { imageCategory: people })
  # The thumbnail resized to 64x64px
- thumbnail64Url: String @fake(type:imageUrl, options: { imageWidth: 64, imageHeight: 64, randomizeImageUrl: true })
+ thumbnail64Url: String @examples(values: [&quot;http://example.com/image.jpg&quot;, &quot;http://example.com/image2.jpg&quot;])
}</code></pre>



<p>There is one gotcha: since it is not possible to override types (you can only extend them) as the schema changes get incrementally worked on, we need the team to make pull requests to remove the types and fields that just got implemented from the&nbsp;<code>.faker.graphql</code>&nbsp;extension file.</p>



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



<p>With this workflow, not only have we improved our feedback loop by making sure every voice is heard during the design process, but we also got a huge gain in productivity and reduced sequencing: once the API contract is settled, the front-end team can start implementing components without the back-end even having started to implement it.</p>



<p><em>Thanks to&nbsp;</em><a href="https://medium.com/u/c62b9dac8567?source=post_page-----7bf84b260135----------------------" target="_blank" rel="noreferrer noopener"><em>Pol Miro</em></a><em>&nbsp;and Prasanna, without whom we wouldn’t have gone this far with this project, and the entire Quri engineering team for contributing to it.</em></p>


GraphQL First in practice at Quri

Server Side Rendering with GraphQL


<p>Client developers at Coursera love GraphQL’s flexibility, type-safety, and community of support, and&nbsp;<a href="https://building.coursera.org/blog/2016/11/23/why-ui-developers-love-graphql/" target="_blank" rel="noreferrer noopener">we’ve made</a>&nbsp;<a href="https://speakerdeck.com/jnwng/going-graphql-first" target="_blank" rel="noreferrer noopener">that</a>&nbsp;<a href="https://dev-blog.apollodata.com/graphql-just-got-a-whole-lot-prettier-7701d4675f42" target="_blank" rel="noreferrer noopener">well</a>&nbsp;<a href="https://building.coursera.org/blog/2017/05/11/coursera-engineering-podcast-episode-one/" target="_blank" rel="noreferrer noopener">known</a>. However, we haven’t spoken much about how our backend developers feel about GraphQL — and that’s because most of them don’t actually&nbsp;<em>have to</em>&nbsp;think about GraphQL very much.</p>



<p>Over the past year, we’ve built tooling to dynamically translate all of our REST APIs to GraphQL, allowing our backend devs to continue writing the APIs they’re familiar with, while giving client developers full access to all of the data through GraphQL.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="568" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_tUKO-HN2ogKRwmOc-kI-kQ-1024x568.png" alt="" class="wp-image-1019" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_tUKO-HN2ogKRwmOc-kI-kQ-1024x568.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_tUKO-HN2ogKRwmOc-kI-kQ-300x166.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_tUKO-HN2ogKRwmOc-kI-kQ-768x426.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_tUKO-HN2ogKRwmOc-kI-kQ-1536x852.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_tUKO-HN2ogKRwmOc-kI-kQ-2048x1136.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_tUKO-HN2ogKRwmOc-kI-kQ-1200x666.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_tUKO-HN2ogKRwmOc-kI-kQ-1980x1098.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>In this post, we’ll walk through our journey to GraphQL, and highlight a few of our successes and failures along the way.</p>



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



<p>Coursera’s approach to REST APIs was to build&nbsp;<em>resource-based</em>&nbsp;APIs (i.e. an API for courses, an API for instructors, an API for course grades, etc.). These were really easy to build and test, and provided a nice separation of concerns on the backend. However, as our product scaled and the number of APIs grew, we began to face many problems around performance, documentation, and general ease-of-use. On many pages, we found ourselves making four or five round-trips to the server to fetch the data that we needed to render.</p>



<p>I still remember the excitement on my team when Facebook first introduced GraphQL — we almost immediately realized how GraphQL could solve a lot of our problems, allowing us to fetch all data in a single roundtrip, and providing structured documentation for our APIs. But as much as we wanted to begin writing GraphQL endpoints for everything and stop using REST on our clients, that wasn’t an option that we were able to consider, because:</p>



<ul class="wp-block-list"><li>At the time, we had over 1,000 different REST endpoints at Coursera (and now we have many more) — even if we wanted to stop using REST entirely, the migration cost to GraphQL would be astronomical.</li><li>All of our backend services use REST APIs for inter-service communication, and we often expose the same API for use in both our backend services and our frontend clients.</li><li>We also have three different clients (web, iOS, and Android), and wanted the flexibility to roll out slowly.</li></ul>



<p>After some investigation, we found a great approach to help us get to GraphQL — we decided to add a GraphQL proxy layer on top of our REST APIs. This approach is actually pretty common and has&nbsp;<a href="http://graphql.org/blog/rest-api-graphql-wrapper/" target="_blank" rel="noreferrer noopener">been</a>&nbsp;<a href="https://medium.com/@raxwunter/moving-existing-api-from-rest-to-graphql-205bab22c184" target="_blank" rel="noreferrer noopener">very</a>&nbsp;<a href="http://nordicapis.com/how-to-wrap-a-rest-api-in-graphql/" target="_blank" rel="noreferrer noopener">well</a>&nbsp;<a href="https://0x2a.sh/from-rest-to-graphql-b4e95e94c26b" target="_blank" rel="noreferrer noopener">documented</a>, so I won’t go into details here.</p>



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



<p>Wrapping our REST APIs was a pretty easy process — we built some utilities around making downstream REST calls to fetch data in our resolver, and wrote up some rules around converting our existing models into GraphQL.</p>



<p>Our first step was to build a few GraphQL resolvers and then launch a GraphQL server in production to make downstream REST calls to our source endpoints. Once we had this working (using GraphiQL to verify everything), we displayed this data on a demo page that we set up, and within a matter of days were ready to call our GraphQL pilot a success.</p>



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



<p>If there’s one thing I’ve learned from this project though, it’s not to celebrate too early.</p>



<p>Our GraphQL server worked perfectly for a few days. But suddenly, right before we were set to demo this page to the team, every GraphQL query started failing. This caught us off guard, because we hadn’t deployed any changes to our GraphQL server since we last verified that it was working.</p>



<p>After some investigation, we realized that our downstream course catalog service was rolled back to a previous version due to an unrelated bug, and the schema that we had built in our GraphQL service was now out of sync. We were able to manually update the schema and fix our demo, but we quickly realized then that as our GraphQL schema scaled to 1,000 different resources, backed by over 50 different services, keeping everything up to date was going to be impossible.&nbsp;If you have multiple sources of truth in a microservice architecture, it’s a matter of&nbsp;<em>when</em>, not&nbsp;<em>if</em>&nbsp;they’ll become out of sync.</p>



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



<p>So we went back to the drawing boards, and tried to figure out a cleaner solution to get to a single source of truth — it made sense for us to treat our REST APIs as the source of truth, since they’re what we’re basing our GraphQL schema on. To do this, we’d need to&nbsp;<em>automatically</em>&nbsp;and&nbsp;<em>deterministically</em>&nbsp;build our GraphQL layer, reflecting what was currently running in our architecture, not what we thought was running.</p>



<p>Luckily for us (perhaps with a bit of foresight),&nbsp;<a href="https://github.com/coursera/naptime" target="_blank" rel="noreferrer noopener">our REST framework</a>&nbsp;gave us everything that we needed to build this automation layer:</p>



<ul class="wp-block-list"><li>Each service in our infrastructure was able to dynamically provide us with a list of REST resources running on it</li><li>For each of those resources, we could introspect the list of endpoints and arguments (i.e. a course endpoint would have a fetch by id, or lookup by instructor)</li><li>Additionally, we received&nbsp;<a href="https://github.com/linkedin/rest.li/wiki/DATA-Data-Schema-and-Templates" target="_blank" rel="noreferrer noopener">Pegasus Schemas</a>, defined by our&nbsp;<a href="http://coursera.github.io/courier/schemalanguage/" target="_blank" rel="noreferrer noopener">Courier schema language</a>&nbsp;for each model returned</li></ul>



<p>Once we discovered the different pieces we’d need to build a GraphQL schema, we set up a task on our GraphQL server to ping every downstream service every five minutes, and request all of that information. We then were able to write a 1:1&nbsp;<a href="https://github.com/coursera/naptime/blob/master/naptime-graphql/src/main/scala/org/coursera/naptime/ari/graphql/schema/FieldBuilder.scala" target="_blank" rel="noreferrer noopener">conversion layer</a>&nbsp;between the Pegasus Schemas and GraphQL types.</p>



<p>Next, we simply defined a translation between GraphQL queries and REST requests, using most of the logic from our earlier resolvers, and were able to generate a fully-functioning GraphQL server, never more than five minutes out of date.</p>



<h3 class="wp-block-heading" id="6f00"><a href="#relating-the-resources" aria-hidden="true" class="aal_anchor" id="relating-the-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>Relating the resources</h3>



<p>One of the main reasons we wanted to adopt GraphQL was to fetch all data we needed for a page in a single roundtrip to the server. However, our initial approach only provided a one-to-one mapping between the models returned from our REST APIs and what we returned in GraphQL. Without actually linking our resources together, we’d still end up making just as many GraphQL queries to fetch data as we would while using our REST APIs. While there are definitely developer experience gains that come from fetching data about a user in GraphQL instead of REST, there aren’t actually performance gains if you have to wait for that query to return before fetching more data.</p>



<p>Our REST APIs each live in a silo — they don’t need to know about the existence of any other API. However, with GraphQL, models and resources&nbsp;<em>do</em>&nbsp;need to know about each other, and how everything is connected.</p>



<p>There’s no way to build the links between resources automatically though, so we defined a simple annotation that developers could add to resources to specify the relations between them. For example, we could say that a course resource should have an instructors field representing the instructors who teach that course. And to fetch those instructors, we should lookup instructors by id, using the instructorIds field already available on the course. We called these “forward relations,” because we knew exactly what instructors to fetch by id.</p>



<p>In the case where we wanted to go from one resource to another where there wasn’t an explicit link, we added support to do a reverse lookup to fetch the data — i.e. to get a user’s enrollments on a course, we could call the&nbsp;<code>byCourseId</code>&nbsp;lookup on the&nbsp;<code>userEnrollments.v1</code>&nbsp;resource, which could return the matching enrollment data for a given user on a given course.</p>



<p>The syntax that we developed looks something like this:</p>



<pre class="wp-block-preformatted">courseAPI.addRelation(<br>  "instructors" -&gt; ReverseRelation(<br>    resourceName = "instructors.v1",<br>    finderName = "byCourseId",<br>    arguments = Map("courseId" -&gt; "$id", "version" -&gt; "$version"))</pre>



<p>Once these links were in place, our GraphQL schema began coming together— instead of lots of small data pieces that we could fetch with GraphQL, a web of all Coursera’s data and resources formed.</p>



<h2 class="wp-block-heading" id="98c4"><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’ve been running our GraphQL server in production at Coursera for over six months now, and while the road has certainly been bumpy at times, we’re really able to recognize the benefits that GraphQL provides. Developers have an easier time discovering data and writing queries, our site is more reliable due to the additional&nbsp;<a href="https://github.com/apollographql/apollo-codegen" target="_blank" rel="noreferrer noopener">type-safety</a>&nbsp;that GraphQL provides, and pages using GraphQL load data much faster.</p>



<p>Just as importantly though, this migration didn’t come at a huge cost of developer productivity. Our frontend developers&nbsp;<em>did</em>&nbsp;have to learn how to use GraphQL, but we didn’t have to rewrite any backend APIs or run complex migrations to begin taking advantage of GraphQL — it was simply available for developers to use as they created new applications.</p>



<p>Overall, we’ve been really happy with what GraphQL has provided our developers (and ultimately our users) and are really excited for what’s to come in the GraphQL ecosystem.</p>



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



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



<ul class="wp-block-list"><li><a href="https://twitter.com/bsaeta" target="_blank" rel="noreferrer noopener">Brennan Saeta</a>, who wrote the Naptime API library and helped write the initial GraphQL support in Naptime.</li><li>Oleg Ilyenko, who’s incredible&nbsp;<a href="http://sangria-graphql.org/" target="_blank" rel="noreferrer noopener">Sangria library</a>&nbsp;provides the backbone for all of our GraphQL work. If you’re doing anything with GraphQL and are currently using / planning on using Scala, you should definitely check Sangria out.</li><li>The frontend infrastructure team at Coursera for helping get GraphQL from a test project to a production-ready implementation.</li><li>And the entire Coursera engineering team for being patient and helpful guinea pigs as we worked out countless bugs and quirks in our GraphQL translation layer.</li></ul>


Coursera’s journey to GraphQL


<p>One of my favorite times of year at the office is when the interns join us for the summer. This summer was the biggest group of interns yet, with 6 interns working on open source and commercial products at MDG. Three of the interns — <a rel="noreferrer noopener" href="https://medium.com/u/47e634bb4796?source=post_page-----4af512f5d3b3----------------------" target="_blank">Shadaj</a>, <a rel="noreferrer noopener" href="https://medium.com/u/18ee0b5365cd?source=post_page-----4af512f5d3b3----------------------" target="_blank">Ramya</a>, and <a rel="noreferrer noopener" href="https://medium.com/u/712ce1f56160?source=post_page-----4af512f5d3b3----------------------" target="_blank">Evans</a> — were working on Apollo open source technology, and so <a rel="noreferrer noopener" href="https://medium.com/u/6d7ee7c0b225?source=post_page-----4af512f5d3b3----------------------" target="_blank">Abhi</a> and <a rel="noreferrer noopener" href="https://medium.com/u/72347b4464b3?source=post_page-----4af512f5d3b3----------------------" target="_blank">Nikolas</a> from <a rel="noreferrer noopener" href="https://graphqlradio.com/" target="_blank">GraphQL Radio</a> suggested they come on the show to round out the summer. Watch the episode below or <a rel="noreferrer noopener" href="https://soundcloud.com/graphql-radio/graphqlradio-interns-audio" target="_blank">listen on Soundcloud</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="Ep 06 - End of Summer with the Apollo Interns!" width="580" height="326" src="https://www.youtube.com/embed/OFIlTqzEpG0?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>Here are the details and links talked about in this episode, sorted in the order they were sitting from left to right:</p>



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



<p>Shadaj is a senior at Lynbrook High School, and has been programming for a long time. He’s been historically interested in Scala, but was working mostly in JavaScript during his internship. Here’s what he worked on:</p>



<ul class="wp-block-list"><li><strong>Subscriptions tutorial:</strong>&nbsp;Shadaj continued the Full-stack GraphQL tutorial with two steps about subscriptions:&nbsp;<a href="https://dev-blog.apollodata.com/tutorial-graphql-subscriptions-server-side-e51c32dc2951" target="_blank" rel="noreferrer noopener">Server-side</a>&nbsp;and&nbsp;<a href="https://dev-blog.apollodata.com/tutorial-graphql-subscriptions-server-side-e51c32dc2951" target="_blank" rel="noreferrer noopener">client-side</a>.</li><li><strong>Apollo Cache API:&nbsp;</strong>He refactored Apollo Client internals to separate out the internal GraphQL cache implementation behind a clean API. In Apollo Client 2.0, the cache will be completely pluggable, so that people can integrate caches based on different technologies like MobX, and build new features like offline support.&nbsp;<a href="https://github.com/apollographql/apollo-client/pulls?q=is%3Apr+author%3Ashadaj" target="_blank" rel="noreferrer noopener">Check out his PRs to add this support here.</a>&nbsp;There are already people in the community working on alternative cache implementations that will be compatible with Apollo Client 2.0, such as&nbsp;<a href="https://github.com/convoyinc/apollo-cache-hermes" target="_blank" rel="noreferrer noopener">apollo-cache-hermes</a>!</li><li><strong>Scala.js and codegen:&nbsp;</strong>In his spare time, Shadaj implemented a typed wrapper and even GraphQL query code generation for Scala for Apollo Client, which can be used with React and Scala.js.&nbsp;<a href="https://dev-blog.apollodata.com/scala-js-and-apollo-better-together-b066c6b09af4" target="_blank" rel="noreferrer noopener">Read the post here.</a></li></ul>



<p>Shadaj’s pick at the end of the podcast was&nbsp;<a href="http://www.scala-native.org/en/latest/" target="_blank" rel="noreferrer noopener">Scala Native</a>, an ahead-of-time compiler for Scala.</p>



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



<p>Ramya is a sophomore at MIT studying Electrical Engineering and Computer Science. She joined the Apollo team for the summer to work on tools that could help people be more productive in their work, and boy was she successful! Here’s what she worked on:</p>



<ul class="wp-block-list"><li><strong>Apollo Client Devtools:&nbsp;</strong>First, Ramya started out by learning about Apollo and writing&nbsp;<a href="https://dev-blog.apollodata.com/inspecting-your-graphql-client-in-the-browser-2481f8bcdd55" target="_blank" rel="noreferrer noopener">a post about different use cases for the devtools</a>. The&nbsp;<a href="https://github.com/apollographql/apollo-client-devtools" target="_blank" rel="noreferrer noopener">Apollo Client Devtools</a>&nbsp;allow you to send queries to your server, inspect the queries and mutations on your page, and look at the current state of the cache. Since they were built in a hack week, the original implementation relied on a brittle polling approach that used a lot of resources and even had the potential to lock up your browser. Ramya&nbsp;<a href="https://github.com/apollographql/apollo-client-devtools/pulls?q=is%3Apr+author%3Aramyanaga+is%3Aclosed" target="_blank" rel="noreferrer noopener">rewrote the architecture to use a message-passing approach instead</a>, which was infinitely more efficient and also made the tools more reliable.</li><li><strong>New features for Launchpad:</strong>&nbsp;<a href="https://dev-blog.apollodata.com/introducing-launchpad-the-graphql-server-demo-platform-cc4e7481fcba" target="_blank" rel="noreferrer noopener">Apollo Launchpad</a>&nbsp;is the open source platform for GraphQL server demos. It’s got a ton of&nbsp;<a href="https://github.com/apollographql/launchpad" target="_blank" rel="noreferrer noopener">GraphQL server examples</a>&nbsp;with complete working code that you can edit and download. Ramya dove into the complicated world of modern UI development to refactor the code to use modern libraries like React Router 4, add meta tags with React Helmet for social sharing, and a button to use Prettier to format the code.&nbsp;<a href="https://github.com/apollographql/launchpad/pulls?utf8=%E2%9C%93&amp;q=is%3Apr%20author%3Aramyanaga%20" target="_blank" rel="noreferrer noopener">See her work here.</a></li></ul>



<p>Ramya’s pick at the end of the podcast was&nbsp;<a href="https://golang.org/" target="_blank" rel="noreferrer noopener">Go</a>, a programming language she’s started to learn.</p>



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



<p>Evans is a Master’s degree student at Carnegie Mellon University, studying Electrical and Computer Engineering. He got interested in interning at MDG because of his excitement about the Meteor platform, and got to work on the most futuristic feature of Apollo Client:&nbsp;<a href="https://dev-blog.apollodata.com/apollo-link-the-modular-graphql-network-stack-3b6d5fcf9244" target="_blank" rel="noreferrer noopener">Apollo Link.</a>&nbsp;Here’s more detail about his projects:</p>



<ul class="wp-block-list"><li><strong>Tutorial about input types and custom resolvers:</strong>&nbsp;Evans added&nbsp;<a href="https://dev-blog.apollodata.com/tutorial-graphql-input-types-and-client-caching-f11fa0421cfd" target="_blank" rel="noreferrer noopener">another step</a>&nbsp;to the full-stack GraphQL and React tutorial.</li><li><strong>Apollo Fetch:</strong>&nbsp;<a href="https://github.com/apollographql/apollo-fetch" target="_blank" rel="noreferrer noopener">Apollo Fetch</a>&nbsp;is a simple GraphQL query fetcher that you can use anywhere you need to retrieve a result from a GraphQL server. It sends the result and returns a promise, and has a simple way to set options like headers.</li><li><strong>Apollo Link:</strong>&nbsp;<a href="https://dev-blog.apollodata.com/apollo-link-the-modular-graphql-network-stack-3b6d5fcf9244" target="_blank" rel="noreferrer noopener">Apollo link</a>&nbsp;is the first completely modular GraphQL network stack, and is one of the core parts of Apollo Client 2.0. It allows you to create your own “links”, which encapsulate a bit of GraphQL client functionality like polling, retrying, subscriptions, or something else. Read&nbsp;<a href="https://dev-blog.apollodata.com/apollo-link-creating-your-custom-graphql-client-c865be0ce059" target="_blank" rel="noreferrer noopener">Evans’ newest blog post</a>&nbsp;to learn how to make your own links. With Apollo Link, we hope to make Apollo Client 2.0 smaller and more customizable than ever!</li></ul>



<p>Evans’ pick at the end of the podcast was&nbsp;<a href="https://github.com/apollographql/apollo-fetch/tree/master/packages/apollo-fetch-upload" target="_blank" rel="noreferrer noopener">apollo-fetch-upload</a>, an extension to Apollo Fetch written by&nbsp;<a href="https://medium.com/u/5bd1b4d20a6d?source=post_page-----4af512f5d3b3----------------------" target="_blank" rel="noreferrer noopener">Jayden Seric</a>&nbsp;to enable file upload support!</p>



<h2 class="wp-block-heading" id="ff02"><a href="#join-us" aria-hidden="true" class="aal_anchor" id="join-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>Join us!</h2>



<p>Thanks so much to Shadaj, Ramya, and Evans for joining us this summer, and to&nbsp;<a href="https://medium.com/u/72347b4464b3?source=post_page-----4af512f5d3b3----------------------" target="_blank" rel="noreferrer noopener">Nikolas</a>&nbsp;and&nbsp;<a href="https://medium.com/u/6d7ee7c0b225?source=post_page-----4af512f5d3b3----------------------" target="_blank" rel="noreferrer noopener">Abhi</a>&nbsp;for hosting the podcast! If you or someone you know would like to be an intern at Meteor Development Group, (or want to apply for a full-time position) please apply at&nbsp;<a href="https://www.meteor.io/jobs/" target="_blank" rel="noreferrer noopener">meteor.io/jobs</a>!</p>


Apollo interns on GraphQL Radio


<p>The time has finally come: We’ve released the first batch of tickets for&nbsp;<a href="http://summit.graphql.com/" target="_blank" rel="noreferrer noopener">GraphQL Summit 2017</a>, the world’s largest GraphQL developer conference happening in San Francisco on October 25–26. We have opened the first batch of discounted tickets for super early birds, so jump on them while they’re still around!</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Update as of 8/17/17: Super Early Bird tickets have sold out, so we released Early Bird tickets ahead of schedule!</p></blockquote>



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



<p>In just the last year, GraphQL has gone from an open source curiosity to a mainstream technology for professional app developers. Companies like GitHub, Shopify, and Yelp have launched public GraphQL APIs, and even large enterprises have standardized their app development around it.&nbsp;Summit is the answer to your GraphQL FOMO: it’s the best place to learn how companies are using GraphQL in production, check out the future of the technology, and meet the friendly community working to support and advance it.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>New to GraphQL? Get started by&nbsp;<a href="http://graphql.org/" target="_blank" rel="noreferrer noopener">reading the docs</a>,&nbsp;<a href="https://www.graphql.com/" target="_blank" rel="noreferrer noopener">understanding the value proposition</a>, and&nbsp;<a href="https://www.howtographql.com/" target="_blank" rel="noreferrer noopener">doing a tutorial</a>&nbsp;to join a growing number of&nbsp;<a href="http://graphql.org/users" target="_blank" rel="noreferrer noopener">GraphQL users</a>.</p></blockquote>



<p>We’re anticipating over 700 attendees this year, including developers from the companies and open source projects leading the GraphQL community today. Summit will feature a single track of technical talks over a full two days, covering everything from GraphQL fundamentals to advanced implementation topics. This year, we’re also including a paid workshop day on October 24th (details TBA) and a kick-off party on October 25th at Bespoke, our conference venue.</p>



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



<p>Here’s our speaker lineup so far, with names you may recognize from the GraphQL and React communities:</p>



<ul class="wp-block-list"><li><a href="http://twitter.com/leeb" target="_blank" rel="noreferrer noopener">Lee Byron</a>&nbsp;🎀, Facebook (our Summit MC!)</li><li><a href="http://twitter.com/stubailo" target="_blank" rel="noreferrer noopener">Sashko Stubailo</a>&nbsp;👌, Apollo</li><li><a href="http://twitter.com/_schickling" target="_blank" rel="noreferrer noopener">Johannes Schickling</a>&nbsp;🙇, Graphcool</li><li><a href="https://twitter.com/mxstbr" target="_blank" rel="noreferrer noopener">Max Stoiber</a>, Spectrum (also 💅 styled-components)</li><li><a href="http://twitter.com/okbel" target="_blank" rel="noreferrer noopener">Belén Curcio</a>&nbsp;🐚, Mozilla</li><li><a href="http://twitter.com/dlschafer" target="_blank" rel="noreferrer noopener">Dan Schafer</a>&nbsp;🌳, Facebook</li><li><a href="https://twitter.com/__xuorig__?lang=en" target="_blank" rel="noreferrer noopener">Marc-Andr</a><a href="https://twitter.com/okbel" target="_blank" rel="noreferrer noopener">é</a><a href="https://twitter.com/__xuorig__?lang=en" target="_blank" rel="noreferrer noopener">&nbsp;Giroux</a>&nbsp;🎸, Shopify</li><li><a href="http://twitter.com/zehtomer" target="_blank" rel="noreferrer noopener">Tomer Elmalem</a>&nbsp;🤖, Yelp</li><li><a href="https://twitter.com/rbzhu" target="_blank" rel="noreferrer noopener">Rob Zhu</a>&nbsp;🔐, Facebook</li></ul>



<p>Now that the call for submissions is officially closed, we’ll be working with our conference selection committee on filling out the rest of the schedule with high quality talks.</p>



<p><em>PS: A huge thanks to all who submitted this year! We received over three times the proposals we did for GraphQL Summit 2016, and we can’t wait to read them all. We’ll be in touch soon.&nbsp;</em>🙏</p>



<h2 class="wp-block-heading" id="b0fc"><a href="#stay-tuned-for-discounts-and-schedule-updates" aria-hidden="true" class="aal_anchor" id="stay-tuned-for-discounts-and-schedule-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>Stay tuned for discounts and schedule updates!</h2>



<p>In the coming weeks, we’ll announce the rest of the speakers, talk abstracts, a formal agenda, AND some time-sensitive opportunities to snag discounted tickets. Make sure to follow&nbsp;<a href="https://twitter.com/graphqlsummit" target="_blank" rel="noreferrer noopener">@graphqlsummit</a>&nbsp;on Twitter to catch them all!</p>



<p>Once you’ve bought your ticket (or if you just want to hang), you can connect with other attendees ahead of the conference in the <strong>#graphqlsummit</strong> channel on <a href="https://www.apollographql.com/#slack">Apollo Slack</a>.</p>



<p>If you have any questions about the conference or would like to ask about sponsorships and partnerships, give the GraphQL Summit team a holler at&nbsp;<a href="mailto:summit@graphql.com" target="_blank" rel="noreferrer noopener">summit@graphql.com</a>.</p>


GraphQL Summit tickets are here!


<p>Last month&nbsp;<a href="https://dev-blog.apollodata.com/introducing-launchpad-the-graphql-server-demo-platform-cc4e7481fcba" target="_blank" rel="noreferrer noopener">we released Apollo Launchpad</a>, a platform to prototype and demo GraphQL servers. Today we are releasing all of the code for Launchpad as&nbsp;<a href="https://github.com/apollographql/launchpad" target="_blank" rel="noreferrer noopener">open source</a>&nbsp;on GitHub!</p>



<p>In the Apollo project, we’re committed to building valuable open source tools for GraphQL. One thing that’s new for us is building and maintaining Launchpad as an application, not a library. However, just like the open source libraries maintained by the Apollo community, we see Launchpad as a tool to benefit everyone interested in GraphQL.</p>



<p>We’ve already seen Launchpad be an effective tool to help people get started with GraphQL, and we want to take it to the next level.</p>



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



<p>We’ve gotten lots of feedback on how to improve and extend Launchpad in the past month. We’re going to continue to support and improve it, but we think we can go much faster with help from the community. For Launchpad to help as many people as possible, we not only need to have more pads and examples, but also new features.</p>



<p>In the Launchpad repository,&nbsp;<a href="https://github.com/apollographql/launchpad/issues" target="_blank" rel="noreferrer noopener">we have created issues</a>&nbsp;where we want your help. These include both new pads and features, improvements and maintenance work like better tests. We have also marked some issues as good places to start for new contributors. If you need any help or guidance about contributing to it, don’t hesitate to contact&nbsp;<a href="mailto:freiksenet@reindex.io" target="_blank" rel="noreferrer noopener">me</a>&nbsp;(<a href="https://medium.com/u/51db47a6a4ef?source=post_page-----e4ff26327311----------------------" target="_blank" rel="noreferrer noopener">Mikhail Novikov</a>) or&nbsp;<a href="mailto:sashko@meteor.com" target="_blank" rel="noreferrer noopener">Sashko</a>&nbsp;(<a href="https://medium.com/u/803918030a60?source=post_page-----e4ff26327311----------------------" target="_blank" rel="noreferrer noopener">Sashko Stubailo</a>) about it.</p>



<figure class="wp-block-image size-large"><a href="https://github.com/apollographql/launchpad/issues"><img loading="lazy" decoding="async" width="1024" height="628" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_IFKiNwbecSKdJ04b4BtVuQ-1024x628.png" alt="" class="wp-image-1056" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_IFKiNwbecSKdJ04b4BtVuQ-1024x628.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_IFKiNwbecSKdJ04b4BtVuQ-300x184.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_IFKiNwbecSKdJ04b4BtVuQ-768x471.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_IFKiNwbecSKdJ04b4BtVuQ-1200x736.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_IFKiNwbecSKdJ04b4BtVuQ.png 1308w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></a></figure>



<p>We are happy we’re able to open source Launchpad and are really excited to move it forward together with the community!</p>


Launchpad is now open source


<p>It’s no secret that the Apollo community thinks GraphQL is the best thing to happen to development since sliced bread. We talk to new teams every week who have gotten huge improvements in their workflow and development speed by adopting GraphQL as their new API layer. So we wanted to create a new resource that can help communicate that excitement and give people the tools to get GraphQL running in production at their organization.</p>



<p>That’s where&nbsp;<a href="https://www.graphql.com/" target="_blank" rel="noreferrer noopener">Explore GraphQL</a>&nbsp;comes in.</p>



<figure class="wp-block-image size-large"><a href="https://www.graphql.com/"><img loading="lazy" decoding="async" width="1024" height="815" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_xQODs_Afi3Bzwyew2iQtuQ-1024x815.png" alt="" class="wp-image-1059" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_xQODs_Afi3Bzwyew2iQtuQ-1024x815.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_xQODs_Afi3Bzwyew2iQtuQ-300x239.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_xQODs_Afi3Bzwyew2iQtuQ-768x611.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_xQODs_Afi3Bzwyew2iQtuQ-1536x1222.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_xQODs_Afi3Bzwyew2iQtuQ-1200x955.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_xQODs_Afi3Bzwyew2iQtuQ.png 1724w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></a></figure>



<p>What’s this new site for, and how can you get involved? Let’s dive in.</p>



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



<p>There are a lot of talks being given at conferences around the world introducing people to GraphQL and getting them excited. Once someone is interested in the technology though, there isn’t a clear place to link them to so they can take the next steps to explore GraphQL’s benefits and try it for themselves. That’s why you’ll see slides at the end of every GraphQL talk with 5–7 links pointing to a variety of resources.</p>



<p>Here are two types of resources people often link to:</p>



<ul class="wp-block-list"><li><a href="http://graphql.org/" target="_blank" rel="noreferrer noopener"><strong>GraphQL.org</strong></a>: This is the home of the specification and technical documentation about GraphQL as a technology. It’s a critical resource for the community, but it’s focused on presenting the facts and less about presenting the reasons why to start using GraphQL.</li><li><strong>Tutorials and other learning resources for GraphQL</strong>: These do a great job of introducing people to GraphQL and giving a hands-on experience, but they only work if the reader is already interested in adopting the technology. They usually don’t start with a rundown of why GraphQL is good to use in the first place.</li></ul>



<p>We are building Explore GraphQL to tell the whole story of why engineering teams adopt GraphQL, and the value it brings from an organization and business perspective. One of the things we’re trying to focus on are the benefits to development velocity engineers get from GraphQL. People who move some or all of their data into a GraphQL API tell us it’s much easier to build new apps and prototype experiences than ever before, and we want to make that super clear to people considering the technology.</p>



<p>We’re excited to hear any ideas you might have about how to make that pitch stronger so newcomers have all the tools they need for a great experience with GraphQL!</p>



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



<p>One thing we’ve heard over and over again is that there isn’t enough information about how to go from zero to production with GraphQL. There are lots of “hello world” style tutorials, and examples of building something from scratch, but there aren’t many good in-depth resources for advanced topics.</p>



<p>The first version of the website puts together some of the articles we’ve found around the web. They cover getting started with GraphQL and address some production issues like authentication, testing, and more. We hope to rapidly improve this part of the site most with community input and brand new content.</p>



<p><strong>If you have an idea for content that is needed in the community, or are interested in writing content (and get prominent credit as an author), please&nbsp;</strong><a href="mailto:community@graphql.com" target="_blank" rel="noreferrer noopener"><strong>let us know</strong></a><strong>!</strong></p>



<p>I already think this page is off to a good start, with a list of difficult-to-find articles in one curated place, but it has limitless potential.</p>



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



<p>The last major part of the site is a list of articles written by companies who have adopted GraphQL in production and gotten great results.</p>



<figure class="wp-block-image size-large"><a href="https://www.graphql.com/case-studies/"><img loading="lazy" decoding="async" width="1018" height="1024" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_ffVOAoeBIr1EexetMLJGLw-1018x1024.png" alt="" class="wp-image-1058" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_ffVOAoeBIr1EexetMLJGLw-1018x1024.png 1018w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_ffVOAoeBIr1EexetMLJGLw-298x300.png 298w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_ffVOAoeBIr1EexetMLJGLw-150x150.png 150w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_ffVOAoeBIr1EexetMLJGLw-768x772.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_ffVOAoeBIr1EexetMLJGLw-1200x1207.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_ffVOAoeBIr1EexetMLJGLw.png 1424w" sizes="auto, (max-width: 1018px) 100vw, 1018px" /></a></figure>



<p>It’s inspiring to see how many people have already gotten value out of GraphQL on an organizational level, and it’s one of the main things that gives developers the confidence to push for it at their company. We hope that an actively curated list on the new Explore GraphQL website will make it easier to find great examples of GraphQL success stories.</p>



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



<h2 class="wp-block-heading" id="38ed"><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>After talking to lots of people at the excellent&nbsp;<a href="https://graphql-europe.com/" target="_blank" rel="noreferrer noopener">GraphQL Europe</a>&nbsp;conference, we were convinced that the world needed a clear set of GraphQL resources to help people learn about GraphQL, test it out in their organization, convince their colleagues of its value, and implement it in production. We worked hard to create this first version of Explore GraphQL as a first step towards that goal, but it’s just the initial version.</p>



<p>First, we want to expand the set of best practices, production guides, and success stories available. There just aren’t enough resources around the internet, so we’ll be creating a list of articles that need to be written which we think will be important to people learning GraphQL — hope to share this with the community soon! We’ve been writing these articles as fast as we can (mostly here on the blog), but the whole community will need to pull together to create a complete story to get people from zero to production.</p>



<p>Then, we want to significantly improve the landing page to tell the best possible story about why people do (and should) adopt GraphQL, by talking to as many people as we can to learn what the technology has done for them. We want to put together a message that resonates with frontend developers, backend administrators, product managers, architects, and everyone else.</p>



<p>Long story short, Explore GraphQL is going to be an ever-improving resource and I’m excited to work on it together with you all!</p>


Introducing Explore GraphQL


<p>We’ve all seen the&nbsp;<code>prettier</code>&nbsp;<a href="https://github.com/prettier/prettier#ride-the-hype-train" target="_blank" rel="noreferrer noopener">hype train</a>&nbsp;(and a lot of us are on it!) and while it began as an opinionated code formatter for JavaScript, it has quickly grown to take on other languages like Flow, Typescript, and CSS. As of&nbsp;<code>prettier@v1.5.0</code>, it now supports one of my favorites,&nbsp;<a href="http://graphql.org/" target="_blank" rel="noreferrer noopener">GraphQL</a>!</p>



<p>Let’s let the GIF do the talking:</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">Prettier formatting <a href="https://twitter.com/GraphQL?ref_src=twsrc%5Etfw">@GraphQL</a> inside template literals is everything I needed in my life 😍 <a href="https://t.co/oScCMyC84W">pic.twitter.com/oScCMyC84W</a></p>&mdash; kitze 🚀 (@thekitze) <a href="https://twitter.com/thekitze/status/879777868611452928?ref_src=twsrc%5Etfw">June 27, 2017</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div></figure>



<p>Using&nbsp;<code>prettier</code>&nbsp;for GraphQL is more than just hitting the “prettify” button in GraphiQL — it’ll take into account things like maximum line-width, whether or not you like commas in your queries, breaking up long lists of arguments on to their own lines, and even works on queries embedded in your JavaScript.</p>



<p>If you haven’t given it a try, its&nbsp;<a href="https://github.com/prettier/prettier#usage" target="_blank" rel="noreferrer noopener">really easy to get started</a>; soon you’ll realize you and your team will stop having to nitpick things like spaces, braces, and commas and can focus on basking in the sweet glory of GraphQL!</p>



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



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



<p>GraphQL support didn’t just happen overnight, though. It took a little bit of prodding, some tweets, some Github issues, and a couple of developers who found it wildly entertaining to add support for every corner of the language (I’m looking at you,&nbsp;<a href="https://medium.com/u/46fa99d9bca4?source=post_page-----7701d4675f42----------------------" target="_blank" rel="noreferrer noopener">Vjeux</a>&nbsp;and&nbsp;<a href="https://medium.com/u/803918030a60?source=post_page-----7701d4675f42----------------------" target="_blank" rel="noreferrer noopener">Sashko</a>!) Here’s the rundown:</p>



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



<p>While <a rel="noreferrer noopener" href="https://medium.com/u/46fa99d9bca4?source=post_page-----7701d4675f42----------------------" target="_blank">Vjeux</a> had already given GraphQL support a shot, I only heard about this from this tweet:</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">Who wants to work on continuing this experiment with me? <a href="https://t.co/3i2XYayxhQ">https://t.co/3i2XYayxhQ</a> <a href="https://twitter.com/hashtag/GraphQL?src=hash&amp;ref_src=twsrc%5Etfw">#GraphQL</a></p>&mdash; Sashko Stubailo 🇺🇦 (@stubailo) <a href="https://twitter.com/stubailo/status/871584723524505600?ref_src=twsrc%5Etfw">June 5, 2017</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div></figure>



<p>Immediately, I knew I had to be a part of this. I’d spent way too long formatting my braces and wanted the power of&nbsp;<code>prettier</code>&nbsp;everywhere!</p>



<p><a href="https://medium.com/u/803918030a60?source=post_page-----7701d4675f42----------------------" target="_blank" rel="noreferrer noopener">Sashko</a>&nbsp;gets us in the room where it happens&nbsp;<a href="https://github.com/prettier/prettier/issues/1968" target="_blank" rel="noreferrer noopener">with a short discussion&nbsp;</a>on how we can move forward with support.&nbsp;<a href="https://medium.com/u/46fa99d9bca4?source=post_page-----7701d4675f42----------------------" target="_blank" rel="noreferrer noopener">Vjeux</a>&nbsp;gives us permission to steal his work, and I&nbsp;<a href="https://github.com/prettier/prettier/pull/1982" target="_blank" rel="noreferrer noopener">take him up on his offer</a>, and soon thereafter initial support for GraphQL in&nbsp;<code>prettier</code>&nbsp;was shipped. It wasn’t perfect, but it was a start.</p>



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



<p>Enter&nbsp;<a href="https://medium.com/u/803918030a60?source=post_page-----7701d4675f42----------------------" target="_blank" rel="noreferrer noopener">Sashko</a>.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="934" height="1024" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_nXKuZbbYybSJsKVEwSDutA-934x1024.png" alt="" class="wp-image-1064" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_nXKuZbbYybSJsKVEwSDutA-934x1024.png 934w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_nXKuZbbYybSJsKVEwSDutA-274x300.png 274w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_nXKuZbbYybSJsKVEwSDutA-768x842.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_nXKuZbbYybSJsKVEwSDutA.png 1142w" sizes="auto, (max-width: 934px) 100vw, 934px" /><figcaption>Sashko got a little excited. Okay he got a LOT excited.</figcaption></figure>



<p>Instead of having to wait for every part of GraphQL to be ironed out,&nbsp;<a href="https://medium.com/u/46fa99d9bca4?source=post_page-----7701d4675f42----------------------" target="_blank" rel="noreferrer noopener">Vjeux</a>&#8216;s commitment to iteration made it really easy to get in and out and add things, little by little. I barely had a chance to give it a try myself!</p>



<p>With&nbsp;<a href="https://github.com/prettier/prettier/pull/2187" target="_blank" rel="noreferrer noopener">support for comments</a>&nbsp;and&nbsp;<a href="https://github.com/prettier/prettier/pull/2092" target="_blank" rel="noreferrer noopener">support for template tags</a>&nbsp;(by&nbsp;<a href="https://github.com/azz" target="_blank" rel="noreferrer noopener">Lucas Azzola</a>), we had everything we needed for the final launch.</p>



<h3 class="wp-block-heading" id="46cd"><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!</h3>



<p>Even with support for GraphQL launched, its not perfect. There’s bound to be corner cases with the existing language, and with new language constructs on the horizon we’re sure to see changes and improvements to how GraphQL can be formatted. Even in the first few hours of its release,&nbsp;<a href="https://medium.com/u/46fa99d9bca4?source=post_page-----7701d4675f42----------------------" target="_blank" rel="noreferrer noopener">Vjeux</a>&nbsp;was hard at work making it work for the GraphQL Schema Language :</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="670" height="1024" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_7kG2S5jxUAr_otftHwh5Zw-670x1024.png" alt="" class="wp-image-1063" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_7kG2S5jxUAr_otftHwh5Zw-670x1024.png 670w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_7kG2S5jxUAr_otftHwh5Zw-196x300.png 196w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_7kG2S5jxUAr_otftHwh5Zw-768x1174.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_7kG2S5jxUAr_otftHwh5Zw-1005x1536.png 1005w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_7kG2S5jxUAr_otftHwh5Zw.png 1010w" sizes="auto, (max-width: 670px) 100vw, 670px" /></figure>



<h2 class="wp-block-heading" id="e311"><a href="#teamwork-makes-the-dream-work" aria-hidden="true" class="aal_anchor" id="teamwork-makes-the-dream-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>Teamwork Makes the Dream Work!</h2>



<p>Special thanks to&nbsp;<a href="https://medium.com/u/46fa99d9bca4?source=post_page-----7701d4675f42----------------------" target="_blank" rel="noreferrer noopener">Vjeux</a>&nbsp;and&nbsp;<a href="https://medium.com/u/803918030a60?source=post_page-----7701d4675f42----------------------" target="_blank" rel="noreferrer noopener">Sashko</a>&nbsp;for the legwork in getting this out the door. Even more thanks to those submitting issues and PRs to make sure what we built is addressing all the corner cases, too. We hope this tool is as useful to you as it has been for us!<br></p>


GraphQL just got a whole lot “Prettier”!


<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

How we built Launchpad

Building React Apps with GraphQL, Graphcool & Apollo


<p><a href="http://summit.graphql.com/2016/" target="_blank" rel="noreferrer noopener">Last year</a>&nbsp;on October 26, 2016, 350 developers packed&nbsp;<a href="http://thepearlsf.com/" target="_blank" rel="noreferrer noopener">the Pearl</a>&nbsp;in San Francisco to hear leaders at Facebook, Coursera, Shopify, GitHub, and more speak at the world’s first conference dedicated entirely to GraphQL.</p>



<p>We were so thrilled by the level of excitement for the GraphQL technology and ecosystem that the team at Apollo decided to make&nbsp;<a href="http://summit.graphql.com/" target="_blank" rel="noreferrer noopener">this year’s conference</a>&nbsp;longer, bigger, and more focused on the technical questions GraphQL adopters are eager to explore. You will hear from developers and engineering leaders using GraphQL in large, production applications, as well as those at the forefront of the community building the services and open source tools to make that possible.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="522" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_kxAVrZ3ipfx4sVOrvtorAw-1024x522.png" alt="" class="wp-image-1094" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_kxAVrZ3ipfx4sVOrvtorAw-1024x522.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_kxAVrZ3ipfx4sVOrvtorAw-300x153.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_kxAVrZ3ipfx4sVOrvtorAw-768x392.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_kxAVrZ3ipfx4sVOrvtorAw-1200x612.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_kxAVrZ3ipfx4sVOrvtorAw.png 1400w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



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



<ul class="wp-block-list"><li>A fantastic venue at&nbsp;<a href="http://www.bespokesf.co/" target="_blank" rel="noreferrer noopener">Bespoke</a>, in the center of San Francisco</li><li>700+ GraphQL developers</li><li>1 track, featuring everything from GraphQL fundamentals to advanced implementation topics</li><li>2 full days of talks</li><li>1 kick-off party on October 25</li></ul>



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



<p>Our&nbsp;<a href="https://www.papercall.io/graphql-summit-2017" target="_blank" rel="noreferrer noopener">Call for Proposals</a>&nbsp;will be open until July 31, 2017. Feel free to submit multiple proposals, but include as much detail as possible.</p>



<p>We are looking for a diverse group of speakers to cover everything today’s GraphQL developer needs to know about using it in production, from how to handle incremental adoption and caching to using cutting-edge features like live queries and subscriptions. We also welcome talks about new open source tools being developed in the community.</p>



<p>A full list of recommended topics can be found on the CFP site. For more inspiration, check out our&nbsp;<a href="https://www.youtube.com/playlist?list=PLpi1lPB6opQzSSOQU8JQLExuP1JUXPtmA" target="_blank" rel="noreferrer noopener">YouTube playlist</a>&nbsp;from GraphQL Summit 2016.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Note: We are still working out the particulars around travel and accommodation assistance for accepted speakers. However, CFP selection will be need-blind and financial circumstances should absolutely not prevent you from applying.</p></blockquote>



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



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="434" height="410" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_u8VMwz0akc9KM8Kr6xShQA.jpg" alt="" class="wp-image-1095" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_u8VMwz0akc9KM8Kr6xShQA.jpg 434w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_u8VMwz0akc9KM8Kr6xShQA-300x283.jpg 300w" sizes="auto, (max-width: 434px) 100vw, 434px" /></figure>



<p>We’re very excited to announce&nbsp;<a href="https://twitter.com/leeb" target="_blank" rel="noreferrer noopener">Lee Byron</a>&nbsp;as our official conference MC! Lee is one of the creators and current maintainers of the&nbsp;<a href="https://facebook.github.io/graphql/" target="_blank" rel="noreferrer noopener">GraphQL specification</a>&nbsp;and&nbsp;<a href="https://github.com/graphql/graphql-js" target="_blank" rel="noreferrer noopener">reference implementation</a>&nbsp;at Facebook. You may have seen him and his bowtie speak before&nbsp;<a href="https://www.youtube.com/watch?v=zVNrqo9XGOs" target="_blank" rel="noreferrer noopener">here</a>&nbsp;or&nbsp;<a href="https://www.youtube.com/watch?v=Oh5oC98ztvI" target="_blank" rel="noreferrer noopener">here</a>&nbsp;or&nbsp;<a href="https://www.youtube.com/watch?v=pLvrZPSzHxo" target="_blank" rel="noreferrer noopener">here</a>&nbsp;or&nbsp;<a href="https://www.youtube.com/watch?v=WQLzZf34FJ8" target="_blank" rel="noreferrer noopener">here</a>. He also maintains&nbsp;<a href="http://graphql.org/" target="_blank" rel="noreferrer noopener">graphql.org</a>, GraphQL’s official documentation site.</p>



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



<p>In the next couple of weeks, we’ll be releasing our first batches of advanced tickets and announcing our first few speakers. Here are your best ways to keep on top of Summit details and news:</p>



<ul class="wp-block-list"><li>Follow&nbsp;<a href="http://twitter.com/graphqlsummit" target="_blank" rel="noreferrer noopener">@graphqlsummit</a>&nbsp;and&nbsp;<a href="https://twitter.com/search?q=%23graphqlsummit&amp;src=typd" target="_blank" rel="noreferrer noopener">#graphqlsummit</a>&nbsp;on Twitter.</li><li>Sign up for our mailing list on&nbsp;<a href="http://summit.graphql.com/" target="_blank" rel="noreferrer noopener">summit.graphql.com</a>.</li><li>Email&nbsp;<a href="mailto:summit@graphql.com" target="_blank" rel="noreferrer noopener">summit@graphql.com</a>&nbsp;with questions about sponsorships or other inquiries.</li><li>Tweet me at&nbsp;<a href="http://twitter.com/thelamkin" target="_blank" rel="noreferrer noopener">@thelamkin</a>&nbsp;with questions about the CFP or how to get involved!</li></ul>



<p>We’re looking forward to seeing your talk proposals!</p>


Come speak at GraphQL Summit 2017!


<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>This is a guest post from William Lyon, Graph Hacker at neo4j. You’ll see him at neo4j’s booth at&nbsp;<a href="https://graphql-europe.org/" target="_blank" rel="noreferrer noopener">GraphQL Europe</a>, and you will learn more about neo4j + GraphQL in the talk, “<a href="https://graphql-europe.org/speakers/michael-hunger" target="_blank" rel="noreferrer noopener">Querying Graphs with GraphQL</a>”, by Michael Hunger.</p></blockquote>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="800" height="800" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_27EEiL0R5KSMT1g7TBs3Pg.jpg" alt="" class="wp-image-1106" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_27EEiL0R5KSMT1g7TBs3Pg.jpg 800w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_27EEiL0R5KSMT1g7TBs3Pg-300x300.jpg 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_27EEiL0R5KSMT1g7TBs3Pg-150x150.jpg 150w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_27EEiL0R5KSMT1g7TBs3Pg-768x768.jpg 768w" sizes="auto, (max-width: 800px) 100vw, 800px" /></figure>



<p>The Neo4j team is happy to be sponsoring and attending GraphQL Europe this year. At Neo4j we’re very excited to see the GraphQL community taking off as developers adopt a new way of building APIs.</p>



<p>That’s why today we’re announcing the&nbsp;<strong>Neo4j GraphQL Community Graph Hackathon</strong>. It’s open to anyone, anywhere, but we’ll be helping folks get started at our booth during GraphQL Europe.</p>



<p>The hackathon runs now through Monday May 22nd. All valid submissions will receive a Neo4j tshirt, but only the first 15 participants who submit a valid submission will receive a prize of one set of Apple Airpods (or equivilent value Amazon gift certificate). See details below for how to get started.</p>



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



<p>We found it very helpful and inspiring to bring the people and activities of the GraphQL Community into one database with a GraphQL-API endpoint.</p>



<p>It contains tweets, GitHub repositories, Stackoverflow questions and answers, Meetup events and the users and tags related to them.</p>



<p>No matter where you are active, your contributions should be visible.</p>



<p>And everyone in the community should be able to find new content, recent topics, active people or new events easily.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="434" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_kibqg6KTuNIaXm_VYujezw-1024x434.jpg" alt="" class="wp-image-1105" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_kibqg6KTuNIaXm_VYujezw-1024x434.jpg 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_kibqg6KTuNIaXm_VYujezw-300x127.jpg 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_kibqg6KTuNIaXm_VYujezw-768x326.jpg 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_kibqg6KTuNIaXm_VYujezw-1200x509.jpg 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_kibqg6KTuNIaXm_VYujezw.jpg 1400w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>You can access this public GraphQL endpoint at&nbsp;<a href="http://graphql.communitygraph.org/" target="_blank" rel="noreferrer noopener">http://graphql.communitygraph.org</a></p>



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



<p>To learn more about what’s important to the GraphQL community, we’d love to challenge you!</p>



<p>Write a demo / application / dashboard / visualization / timeline / react component, whatever you want, against this backend and TWEET the link with the #graphql #neo4j hashtags.</p>



<p><em>Please submit your work in&nbsp;</em><a href="http://bit.ly/graphqlhackathon" target="_blank" rel="noreferrer noopener"><em>this form</em></a><em>&nbsp;and tell us about your experience building it and your thoughts about GraphQL.</em></p>



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



<p>If you fill out the survey above, we’ll send you a really cool graph t-shirt. In addition the first 15 valid submissions will receive a set of Apple AirPods (or equivalent value Amazon gift card).</p>



<p>If you are attending GraphQL-Europe we’d love for you to come by our booth and show us what you built in person. Then you can get your t-shirt right away 🙂</p>



<p><em>A valid submission must query the public GraphQL endpoint at&nbsp;</em><a href="http://graphql.communitygraph.org/graphql" target="_blank" rel="noreferrer noopener"><em>http://graphql.communitygraph.org/graphql</em></a><em>&nbsp;and somehow enable the user to explore or draw insight from the GraphQL Community Graph data. Get started by exploring the GraphQL Community Graph with Graphiql&nbsp;</em><a href="http://graphql.communitygraph.org/graphiql/" target="_blank" rel="noreferrer noopener"><em>here.</em></a></p>



<p>We look forward to seeing what the GraphQL community comes up with as part of this hackathon. If you have any questions or feedback, please email us at&nbsp;<a href="mailto:devrel@neo4j.com" target="_blank" rel="noreferrer noopener">devrel@neo4j.com</a>. Happy Hacking!</p>


Announcing The Neo4j GraphQL Community Graph Hackathon


<p>It’s going to be a huge week in the GraphQL community with GraphQL Europe, the first ever European GraphQL conference! So we’re hitting the road and stopping by several cities and events to give some talks and connect with the community. We hope to see you there!</p>



<figure class="wp-block-image alignfull size-large"><img loading="lazy" decoding="async" width="1024" height="612" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_XAEBUYr71MpppkwCojOyVA-1024x612.png" alt="" class="wp-image-1110" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_XAEBUYr71MpppkwCojOyVA-1024x612.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_XAEBUYr71MpppkwCojOyVA-300x179.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_XAEBUYr71MpppkwCojOyVA-768x459.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_XAEBUYr71MpppkwCojOyVA-1536x919.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_XAEBUYr71MpppkwCojOyVA-1200x718.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_XAEBUYr71MpppkwCojOyVA-1980x1184.png 1980w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_XAEBUYr71MpppkwCojOyVA.png 2000w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>You’ll be able to find us by looking for the flashy “Ask me about GraphQL” shirts. Make sure to say hi, tell us what you’re up to, ask us any questions you have about GraphQL, and score some Apollo stickers while you’re at it!</p>



<p>To keep track of what we’re up to and where you can hang out with us,&nbsp;<a href="https://twitter.com/apollographql" target="_blank" rel="noreferrer noopener">follow @apollographql on Twitter</a>, or our personal accounts below!</p>



<ul class="wp-block-list"><li>Sashko:&nbsp;<a href="https://twitter.com/stubailo" target="_blank" rel="noreferrer noopener">@stubailo</a></li><li>Danielle:&nbsp;<a href="https://twitter.com/danimman" target="_blank" rel="noreferrer noopener">@danimman</a></li><li>Jonas:&nbsp;<a href="https://twitter.com/helferjs" target="_blank" rel="noreferrer noopener">@helferjs</a></li><li>Thea:&nbsp;<a href="https://twitter.com/thelamkin" target="_blank" rel="noreferrer noopener">@thelamkin</a></li><li>Martijn:&nbsp;<a href="http://martijnwalraven/" target="_blank" rel="noreferrer noopener">@martijnwalraven</a></li><li>Uri:&nbsp;<a href="https://twitter.com/urigoldshtein" target="_blank" rel="noreferrer noopener">@urigoldshtein</a></li></ul>



<p>Here’s a rundown of where we’ll be:</p>



<h2 class="wp-block-heading" id="45a8"><a href="#react-europe-paris-may-18-19" aria-hidden="true" class="aal_anchor" id="react-europe-paris-may-18-19"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><a href="https://www.react-europe.org/" target="_blank" rel="noreferrer noopener">React Europe</a>, Paris — May 18 &amp; 19</h2>



<p>Last year, React Europe was a huge conference for GraphQL, with several awesome talks about the future of GraphQL, best practices, and GraphQL clients. We’re looking forward to talking with React developers about how they are using GraphQL, and helping people get started! If you’re already excited, make sure to check out our&nbsp;<a href="https://dev-blog.apollodata.com/full-stack-react-graphql-tutorial-582ac8d24e3b" target="_blank" rel="noreferrer noopener">Full-Stack GraphQL + React Tutorial</a>.</p>



<p>The night before the conference, come hang out with us and other conference attendees at the&nbsp;<a href="https://medium.com/@ReactEurope/reacteurope-bar-night-party-on-the-17th-of-may-for-reacteurope-attendees-e0744e80702" target="_blank" rel="noreferrer noopener">bar night at The Frog</a>!</p>



<p>There’s some great GraphQL content lined up:</p>



<ul class="wp-block-list"><li>If you’re signed up, definitely make sure not to miss&nbsp;<a href="https://medium.com/u/908fb8fea30c?source=post_page-----b7f4a9cffa7c----------------------" target="_blank" rel="noreferrer noopener">Max Stoiber</a>&nbsp;and&nbsp;<a href="https://medium.com/u/ff3f225e7f5c?source=post_page-----b7f4a9cffa7c----------------------" target="_blank" rel="noreferrer noopener">Nik Graf</a>’s&nbsp;<a href="https://www.react-europe.org/#schedule-item-782" target="_blank" rel="noreferrer noopener">workshop on React and GraphQL</a>.</li><li>On the first day,&nbsp;<a href="https://medium.com/u/47b3b199a712?source=post_page-----b7f4a9cffa7c----------------------" target="_blank" rel="noreferrer noopener">Danielle Man</a>&nbsp;from our team is giving a&nbsp;<a href="https://www.react-europe.org/#schedule-item-846" target="_blank" rel="noreferrer noopener">lightning talk</a>&nbsp;about GraphQL developer tools.</li><li>On day two,&nbsp;<a href="https://medium.com/u/d9b1a61823fa?source=post_page-----b7f4a9cffa7c----------------------" target="_blank" rel="noreferrer noopener">Lee Byron</a>&nbsp;is giving us a&nbsp;<a href="https://www.react-europe.org/#schedule-item-748" target="_blank" rel="noreferrer noopener">rundown</a>&nbsp;of Relay Modern (see our&nbsp;<a href="https://dev-blog.apollodata.com/exploring-relay-modern-276f5965f827" target="_blank" rel="noreferrer noopener">launch recap post</a>).</li></ul>



<p>But most importantly, come find us during the breaks and hallways, and let’s all get to know each other! Meeting people that you know from the internet in person is the best part of every conference.</p>



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



<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_wqVFnpsnVH0ybStG7rwCUQ-1024x549.png" alt="" class="wp-image-1109" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_wqVFnpsnVH0ybStG7rwCUQ-1024x549.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_wqVFnpsnVH0ybStG7rwCUQ-300x161.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_wqVFnpsnVH0ybStG7rwCUQ-768x412.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_wqVFnpsnVH0ybStG7rwCUQ.png 1200w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>GraphQL-Europe, organized by our friends at&nbsp;<a href="https://www.graph.cool/" target="_blank" rel="noreferrer noopener">Graphcool</a>&nbsp;(congrats on the product launch today!) is the first GraphQL conference in europe, and the second ever! Having conferences dedicated to the technology really shows that GraphQL is getting big. All of the talks are about GraphQL, so we won’t list them all here, but you should definitely read up on the&nbsp;<a href="https://graphql-europe.com/schedule" target="_blank" rel="noreferrer noopener">full schedule</a>. Here is what you’ll hear about from us:</p>



<ul class="wp-block-list"><li><a href="https://medium.com/u/39cbd38c57c8?source=post_page-----b7f4a9cffa7c----------------------" target="_blank" rel="noreferrer noopener">Jonas Helfer</a>&nbsp;is speaking about: “<a href="https://graphql-europe.com/schedule/graphql-evolution-or-revolution" target="_blank" rel="noreferrer noopener">GraphQL: Evolution or Revolution</a>”, covering how GraphQL compares to other contemporary or historical API technologies.</li><li><a href="https://medium.com/u/803918030a60?source=post_page-----b7f4a9cffa7c----------------------" target="_blank" rel="noreferrer noopener">Sashko Stubailo</a>&nbsp;is speaking about “<a href="https://graphql-europe.com/schedule/adding-graphql-to-your-existing-architecture" target="_blank" rel="noreferrer noopener">Adding GraphQL to your existing architecture</a>”, dispelling the concern that GraphQL is something you can’t get on top of your existing backends and technologies.</li></ul>



<p>Everyone else listed above from our team will be there as well! If you’re on the&nbsp;<a href="http://dev.apollodata.com/#slack" target="_blank" rel="noreferrer noopener">Apollo Slack team</a>&nbsp;already, join us in the #graphql-europe channel, and you can also join the&nbsp;<a href="https://t.co/JrA9D6ZESb" target="_blank" rel="noreferrer noopener">Graphcool Slack team</a>.</p>



<h2 class="wp-block-heading" id="feae"><a href="#graphql-london-meetup-may-24" aria-hidden="true" class="aal_anchor" id="graphql-london-meetup-may-24"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><a href="https://www.meetup.com/GraphQL-London/events/239701157/" target="_blank" rel="noreferrer noopener">GraphQL London meetup&nbsp;</a>— May 24</h2>



<p>As our last stop, we’re going to the next GraphQL London meetup, hosted at&nbsp;<a href="https://pusher.com/" target="_blank" rel="noreferrer noopener">Pusher</a>&nbsp;<a href="https://maps.google.com/maps?f=q&amp;hl=en&amp;q=28+Scrutton+St%2C+London+EC2A+4RP%2C+UK%2C+London%2C+gb" target="_blank" rel="noreferrer noopener">office</a>! It starts at 6:15PM, and food and drinks are on us! If you aren’t in London, don’t worry, the talks will be recorded!</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="360" height="180" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_yiwJaDP8XS5UcpqI73sopg.png" alt="" class="wp-image-1108" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_yiwJaDP8XS5UcpqI73sopg.png 360w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_yiwJaDP8XS5UcpqI73sopg-300x150.png 300w" sizes="auto, (max-width: 360px) 100vw, 360px" /></figure>



<p>You’ll hear from Jonas about the design and development of the recently launched Apollo Client 1.0, and some other talks from people in the community!</p>



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



<p>It’s going to be an intense week, but we’re super excited about all of the people we’re going to meet and great conversations we’re going to have. Please reach out on Twitter if you have any questions or want to meet up!</p>


The Apollo Team Goes to Europe!


<p>It’s not often the best engineering decision to use the “coolest new thing”. It’s almost universally agreed upon that the smart thing to do is to rely on time-tested and stable technologies. With regards to a web or mobile backend, the sage advice is to use a relational database, build RESTful APIs, and in general just use things that everybody knows and understands; “Keep it simple” is the agreed upon mantra.</p>



<p>At&nbsp;<a href="https://expo.io/" target="_blank" rel="noreferrer noopener">Expo</a>, we diligently follow the “keep it simple” rule. Being a small startup, we have a lot of projects and not many people, and it’s important that we focus on shipping features. That being said, we strongly believe in evaluating technologies, both new and old, by their merits and flaws, over adhering a particular dogma.</p>



<p><a href="http://graphql.org/" target="_blank" rel="noreferrer noopener">GraphQL</a>&nbsp;and the&nbsp;<a href="http://dev.apollodata.com/" target="_blank" rel="noreferrer noopener">Apollo</a>&nbsp;toolchain were choices that we evaluated not by their GitHub star count or release dates, but by how effective we felt they would be in helping our small team build and iterate on our products: They allow for quick, reliable iteration, and an intuitive way to bridge the gap between back-end and front-end development. There’s a multitude of examples of large companies&nbsp;<a href="http://graphql.org/users/" target="_blank" rel="noreferrer noopener">using GraphQL</a>&nbsp;and Apollo in production, but this stack is just as powerful for a company the size of Expo. The tools continue to prove their worth, and are definitely examples of a time when choosing the cool new thing paid off.</p>



<h2 class="wp-block-heading" id="5816"><a href="#b-a-before-apollo" aria-hidden="true" class="aal_anchor" id="b-a-before-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>B.A.: Before Apollo</h2>



<p>At the end of 2016, one of Expo’s main internal goals was revamping our&nbsp;<a href="https://expo.io/tools#mobile" target="_blank" rel="noreferrer noopener">client</a>&nbsp;app, a project we affectionately call “Expo Home”.</p>



<p>The previous version of the app was basically&nbsp;<em>just</em>&nbsp;an Expo project viewer. You could view your recent projects but couldn’t view someone’s profile with the projects they’d worked on.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="873" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_rxd-2VYAixk8SeylKCJOLg-1024x873.png" alt="" class="wp-image-1117" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_rxd-2VYAixk8SeylKCJOLg-1024x873.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_rxd-2VYAixk8SeylKCJOLg-300x256.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_rxd-2VYAixk8SeylKCJOLg-768x655.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_rxd-2VYAixk8SeylKCJOLg.png 1060w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Expo (Exponent) Client — EOY 2016</figcaption></figure>



<h3 class="wp-block-heading" id="2649"><a href="#the-new-app" aria-hidden="true" class="aal_anchor" id="the-new-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>The new app</h3>



<p>Besides a nice visual facelift (pictured below), our goal with the new version of the client was to make it much more community-oriented. We have sign in/sign up, user profiles, a way to explore “featured”, “new”, and “top” projects, and project/user search. We have much more planned for Expo Home in the future, but these features are what we agreed would be our MVP, for launch in February 2017.</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_rzRJzfxJp3k5XX7XhalBjA-1024x550.png" alt="" class="wp-image-1116" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_rzRJzfxJp3k5XX7XhalBjA-1024x550.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_rzRJzfxJp3k5XX7XhalBjA-300x161.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_rzRJzfxJp3k5XX7XhalBjA-768x413.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_rzRJzfxJp3k5XX7XhalBjA-1200x645.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_rzRJzfxJp3k5XX7XhalBjA.png 1400w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Expo Client running “Expo Home” — Present Day</figcaption></figure>



<p>Prior to starting the project, we had some, but not all, of the necessary data available through a myriad of RESTful-ish endpoints exposed by our backend, which we had used in other ancillary parts of our products. In addition to not exposing the data we needed and not being well documented, this part of our codebase also wasn’t very well tested or maintained. We didn’t want to build the future of the Expo client on these shaky foundations, so we had two options —<strong>&nbsp;rearchitect and build out a more maintainable RESTful API, or take a different approach altogether.</strong></p>



<p>Prior to working at Expo, I had the opportunity to work on a few apps that used GraphQL and Relay, and was very impressed with the outcome, and was particularly enthusiastic about GraphQL. As the backend engineer on this project, I thought it would be a great idea to try GraphQL for Expo Home, and use Apollo on the frontend.</p>



<p>We had a ton of new features to build, and I had wanted to introduce GraphQL into the Expo tech stack for a while. This project seemed like the perfect fit, but I needed to sell it to my team.</p>



<h2 class="wp-block-heading" id="23e8"><a href="#why-graphql" aria-hidden="true" class="aal_anchor" id="why-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>Why GraphQL</h2>



<p><a href="https://medium.freecodecamp.com/so-whats-this-graphql-thing-i-keep-hearing-about-baf4d36c20cf" target="_blank" rel="noreferrer noopener">Lots</a>&nbsp;<a href="https://medium.freecodecamp.com/give-it-a-rest-use-graphql-for-your-apis-40a2761e6336" target="_blank" rel="noreferrer noopener">has</a>&nbsp;<a href="https://0x2a.sh/from-rest-to-graphql-b4e95e94c26b" target="_blank" rel="noreferrer noopener">been</a>&nbsp;<a href="https://dev-blog.apollodata.com/the-business-case-for-graphql-cc7a2b93148d" target="_blank" rel="noreferrer noopener">written</a>&nbsp;about GraphQL vs REST, as well as about the problems REST APIs often face. I presented some of these arguments to the team while pitching them on using GraphQL to power Expo Home.</p>



<p>Building a performant, maintainable, RESTful application is absolutely possible. Doing it quickly, on the other hand, is another story. We had less than two months to ship the first version of the new Expo mobile app, and thus working quickly was important.</p>



<p>Engineering, as with most other things in life, is about tradeoffs. Some considerations I posed to the team:</p>



<ul class="wp-block-list"><li>User experience — If we spend a ton of time making our data fetching logic in the app really robust, are we sacrificing the user experience of our app and polish around UI?</li><li>Performance and stability — If we spend a ton of time on UI polish, are we making a slow app, or one that doesn’t gracefully handle failure?</li><li>Over-fetching — On the backend, we could spend our time focusing on API coverage, and making sure that every last thing that a front-end engineer could ever think of doing is covered by the APIs. If we did that, however, are we building slow endpoints (by providing too much data) or are we causing a request waterfall from our clients because they have to request many API resources to build the UI for a single screen?</li><li>Tech debt— What if we spend time building individual, bespoke APIs that provide perfect coverage for a given screen with no over or under-fetching? Are we backing ourselves into an implementation corner, making everything difficult to manage when we want to add a feature?</li></ul>



<p>With GraphQL and Apollo, we didn’t have to make these same tradeoffs and could build a fast and easy-to-maintain front-end and back-end from the outset of the project.</p>



<h2 class="wp-block-heading" id="ec26"><a href="#developer-workflow-production-ready-results" aria-hidden="true" class="aal_anchor" id="developer-workflow-production-ready-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>Developer Workflow &amp; Production-Ready Results</h2>



<p>In web and mobile development, it’s common practice to build some UI with mock data before integrating with any APIs/services. This workflow allows both back-end and front-end developers to work mostly in parallel.</p>



<p>But eventually it’s time to bring in real data. This process will typically be a carefully coordinated dance between front-end and back-end engineers, as each person (or team) finds places where they misjudged the other. Even if a careful spec is put in place beforehand, there will almost certainly be constant back-and-forth.</p>



<p>In our case, it was imperative that with the short timeline&nbsp;<a href="https://medium.com/u/d5a707474bd2?source=post_page-----4c1f21f0f115----------------------" target="_blank" rel="noreferrer noopener">Brent Vatne</a>&nbsp;and I could work in parallel as much as possible. As I look back on building the new version of the Expo app, the part that sticks out to me the most is how smooth the workflow was as&nbsp;<a href="https://medium.com/u/d5a707474bd2?source=post_page-----4c1f21f0f115----------------------" target="_blank" rel="noreferrer noopener">Brent Vatne</a>&nbsp;and I worked on the app.</p>



<p>Brent and I had almost none of this forced collaboration. This was due to two things:</p>



<ol class="wp-block-list"><li>Apollo and its surrounding tooling makes it trivial to use mock data/a mock server, which we leveraged from the beginning of the project.</li><li><a href="https://github.com/graphql/graphiql" target="_blank" rel="noreferrer noopener">Graph<em>i</em>QL</a>&nbsp;the in-browser IDE for exploring GraphQL servers (pictured below) is simply an amazing tool for browsing an API and discovering its capabilities.</li></ol>



<p>Instead of spending time discussing API design or what data should be in which endpoint, Brent and I were able to talk about how to make the product better and provide a great user experience.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="584" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_JCW8YMecimtxhvP__s3dFQ-1024x584.png" alt="" class="wp-image-1115" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_JCW8YMecimtxhvP__s3dFQ-1024x584.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_JCW8YMecimtxhvP__s3dFQ-300x171.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_JCW8YMecimtxhvP__s3dFQ-768x438.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_JCW8YMecimtxhvP__s3dFQ-1200x685.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_JCW8YMecimtxhvP__s3dFQ.png 1400w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>GraphiQL — the best part of GraphQL as a developer</figcaption></figure>



<p>Another thing that sticks out to me about the GraphQL/Apollo development experience is that at the end of the day, you’re not left with something that was easy to get started with but doesn’t fulfill production needs. It’s quite the opposite — everything we built, because we leveraged the Apollo toolchain and followed GraphQL best-practices, was production-ready from the get-go.</p>



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



<p>Expo Home is far from complete — we have tons of planned improvements for 2017.</p>



<p>An example of one such improvement is a feature that shows the current project you have open in&nbsp;<a href="https://github.com/expo/xde" target="_blank" rel="noreferrer noopener">XDE</a>, our desktop developer environment, on the main screen of Expo Home. There are a few moving pieces to this feature, but one of the parts I’m most excited about is leveraging GraphQL subscriptions to update the app front-end.</p>



<p>Apollo’s&nbsp;<code>graphql-tools</code>&nbsp;<a href="https://github.com/apollographql/graphql-tools" target="_blank" rel="noreferrer noopener">package</a>&nbsp;makes this pretty simple to do, and we can leverage&nbsp;<a href="https://www.pubnub.com/" target="_blank" rel="noreferrer noopener">PubNub</a>&nbsp;as the backend, alleviating us from implementing our own WebSocket-based solution.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="324" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_qnhgSmEcAq9X-nSip0nMNA-1024x324.png" alt="" class="wp-image-1114" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_qnhgSmEcAq9X-nSip0nMNA-1024x324.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_qnhgSmEcAq9X-nSip0nMNA-300x95.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_qnhgSmEcAq9X-nSip0nMNA-768x243.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_qnhgSmEcAq9X-nSip0nMNA-1200x380.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_qnhgSmEcAq9X-nSip0nMNA.png 1264w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>At Expo, we’re also working on bringing pieces of the Expo Home experience to web. All of Expo Home’s backend work, in addition to a reasonable amount of front-end work, can be reused in this effort. And as Expo grows, and we need to move pieces of our infrastructure out of our monolith and into some individual services, the web and mobile clients can stay untouched, allowing us to move quickly in all parts of our infrastructure without blocking any particular team or project.</p>



<p>It’s rare to find a technology that is valuable to both the enterprise and the ten person company. GraphQL can help the 5000 person organization wrangle their 1000’s of REST APIs and services into a coherent, discoverable schema and interface, but it can also help the small startup foster good communication patterns between their back-end and front-end developers, enable better parallel work, and provide a solid basis for future API and feature development.</p>



<p>GraphQL and the Apollo toolchain have already been instrumental in our product roadmap in 2017, and we’ve only scratched the surface of their overall potential.</p>



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



<p>If you want to know even more about how we use GraphQL and Apollo at Expo, watch my talk from Apollo Day 2017:</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 at Expo: GraphQL Helps Small Teams Move Fast - Adam Miskiewicz" width="580" height="326" src="https://www.youtube.com/embed/E398q4HGRBA?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>


Using GraphQL + Apollo at Expo


<p>There has been a lot of buzz about GraphQL Subscriptions in the community recently, and a lot of people are excited about the&nbsp;<a href="https://dev-blog.apollodata.com/the-next-step-for-realtime-data-in-graphql-b564b72eb07b#.w9zvvcjbh" target="_blank" rel="noreferrer noopener">subscriptions RFC</a>&nbsp;opened by Rob Zhu from Facebook.</p>



<p>If you haven’t tried GraphQL subscriptions yet, check out our docs to learn how to&nbsp;<a href="http://dev.apollodata.com/tools/graphql-subscriptions/index.html" target="_blank" rel="noreferrer noopener">add subscriptions to your existing Node.js GraphQL server</a>. You can also easily try building a React app with them by following&nbsp;<a href="https://www.graph.cool/docs/tutorials/worldchat-subscriptions-example-ui0eizishe/" target="_blank" rel="noreferrer noopener">Graphcool’s tutorial</a>.</p>



<p>Today, I want to tell you about something else that’s really cool: <strong>Did you know that </strong><a rel="noreferrer noopener" href="https://github.com/graphql/graphiql" target="_blank"><strong>Graph<em>i</em>QL</strong></a><strong> already supports subscriptions today? </strong>Don’t believe me? Here’s a demo so you can see for yourself:</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="GraphQL Subscriptions with GraphiQL over Githunt" width="580" height="326" src="https://www.youtube.com/embed/aAwZrBgmnho?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>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Check out the working example of GitHunt with Graph<strong>i</strong>QL&nbsp;<a href="https://github.com/apollographql/githunt-API" target="_blank" rel="noreferrer noopener">here</a>&nbsp;(and the React frontend&nbsp;<a href="http://github.com/apollographql/githunt-react" target="_blank" rel="noreferrer noopener">here</a>).</p></blockquote>



<h2 class="wp-block-heading" id="73e4"><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 standard GraphiQL library already supports passing in a fetcher that returns an observable&nbsp;<em>or</em>&nbsp;promise. That means that anyone can configure it with their own transport, even if it supports multiple results. We’ve already done that for you, using a new<code>&lt;a href=&quot;https://github.com/apollographql/GraphiQL-Subscriptions-Fetcher&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;graphql-subscriptions-fetcher&lt;/a&gt;</code>, so you don’t have to.</p>



<p>The following steps are all you need to do. (We’re using&nbsp;<code>graphql-server-express</code>&nbsp;for the example.)</p>



<p>First, make sure you have the latest&nbsp;<code>graphql-server-express</code>&nbsp;package:</p>



<pre class="wp-block-preformatted">npm install —-save graphql-server-express</pre>



<p>Now, all you need to do is to set a new field we added to&nbsp;<code>graphqlExpress</code>&nbsp;config, called&nbsp;<code>subscriptionsEndpoint</code>, with the Websocket URL subscriptions endpoint (this is the same endpoint you use in your&nbsp;<code>SubscriptionClient</code>). For example:</p>



<pre class="wp-block-preformatted">app.use(‘/graphiql’, graphiqlExpress({<br>  endpointURL: ‘/graphql’,<br>  subscriptionsEndpoint: `ws://localhost:3000/subscriptions`,<br>}));</pre>



<p>That’s it! Finally, all you have to do is start your server, open your browser in&nbsp;<a href="http://api.githunt.com/graphiql" target="_blank" rel="noreferrer noopener">http://localhost:3000/graph<em>i</em>ql</a>, write a GraphQL subscriptions query inside, and the published data from the server will be pushed into your Graph<em>i</em>QL client and displayed in the result screen of Graph<em>i</em>QL.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>This example uses GraphQL server with express — but it also works with graphql-server-hapi, Koa, Restify and Lambda. Just add the&nbsp;<code>&lt;em&gt;subscriptionsEndpoint&lt;/em&gt;</code>&nbsp;field to your GraphiQL configuration and you are good to go! You can also check out the live GitHunt example&nbsp;<a href="http://api.githunt.com/graphiql" target="_blank" rel="noreferrer noopener">here</a>.</p></blockquote>



<h2 class="wp-block-heading" id="d7b5"><a href="#what-if-you-dont-use-graphql-server" aria-hidden="true" class="aal_anchor" id="what-if-you-dont-use-graphql-server"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>What if you don’t use&nbsp;<a href="http://dev.apollodata.com/tools/graphql-server/index.html" target="_blank" rel="noreferrer noopener">graphql-server</a>?</h2>



<p>We added the new Graph<em>i</em>QL subscriptions support to&nbsp;<a href="http://dev.apollodata.com/tools/graphql-server/index.html" target="_blank" rel="noreferrer noopener">graphql-server</a>&nbsp;by default, but in case you’re not using it, it’s still very easy to add that support to your own server.</p>



<p>Graph<em>i</em>QL is usually served as static HTML (<a href="https://github.com/apollographql/graphql-server/blob/master/packages/graphql-server-module-graphiql/src/renderGraphiQL.ts#L39" target="_blank" rel="noreferrer noopener">here’s how we do it in graphql-server</a>), so first you need to load&nbsp;<code>&lt;a href=&quot;https://github.com/apollographql/subscriptions-transport-ws&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;subscriptions-transport-ws&lt;/a&gt;</code>&nbsp;and&nbsp;<code>&lt;a href=&quot;https://github.com/apollographql/GraphiQL-Subscriptions-Fetcher&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;graphql-subscriptions-fetcher&lt;/a&gt;&nbsp;</code>inside the&nbsp;<code>&lt;head&gt;</code>&nbsp;tag. We’ve published the transport client so that it’s easy to use in a script tag from&nbsp;<a href="https://unpkg.com/" target="_blank" rel="noreferrer noopener">Unpkg</a>:</p>



<pre class="wp-block-preformatted">&lt;script src=”//unpkg.com/subscriptions-transport-ws@0.5.4/browser/client.js”&gt;&lt;/script&gt;&lt;script src="//unpkg.com/graphiql-subscriptions-fetcher@0.0.2/browser/client.js"&gt;&lt;/script&gt;</pre>



<p>Next, you need to create a&nbsp;<code>SubscriptionClient</code>&nbsp;with your subscriptions endpoint:</p>



<pre class="wp-block-preformatted">var subscriptionsClient = new window.SubscriptionsTransportWs.SubscriptionClient(‘YOUR_SUBSCRIPTIONS_ENDPOINT_HERE’, { reconnect: true });var subscriptionsFetcher = window.SubscriptionsTransportWs.graphQLFetcher(subscriptionsClient, graphQLFetcher);</pre>



<p>Finally, replace the regular&nbsp;<code>graphqlFetcher</code>&nbsp;you use in Graph<em>i</em>QL with the one that uses the fetcher from&nbsp;<code>&lt;a href=&quot;https://github.com/apollographql/GraphiQL-Subscriptions-Fetcher&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;graphql-subscriptions-fetcher&lt;/a&gt;&nbsp;</code>when creating your Graph<em>i</em>QL instance:</p>



<pre class="wp-block-preformatted">ReactDOM.render(<br>  React.createElement(GraphiQL, {<br><strong>    fetcher: subscriptionsFetcher,</strong><br>    onEditQuery: onEditQuery,<br>    onEditVariables: onEditVariables,<br>    onEditOperationName: onEditOperationName,<br>    query: ${safeSerialize(queryString)},<br>    response: ${safeSerialize(resultString)},<br>    variables: ${safeSerialize(variablesString)},<br>    operationName: ${safeSerialize(operationName)},<br>}), document.body);</pre>



<p><a href="https://github.com/urigo/graphql-server/blob/feat/subscriptions-graphiql/packages/graphql-server-module-graphiql/src/renderGraphiQL.ts" target="_blank" rel="noreferrer noopener">Here</a>&nbsp;is a complete example of how it should look.</p>



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



<p><code>&lt;a href=&quot;https://github.com/apollographql/subscriptions-transport-ws&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;subscriptions-transport-ws&lt;/a&gt;</code>is a GraphQL subscriptions network transport. Loading it into Graph<em>i</em>QL client and replacing the&nbsp;<code>graphQLFetcher</code>&nbsp;function with&nbsp;<code>&lt;a href=&quot;https://github.com/apollographql/GraphiQL-Subscriptions-Fetcher&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;graphql-subscriptions-fetcher&lt;/a&gt;</code>’s fetcher will give you a plug-and-play solution for live-stream subscriptions into your app’s Graph<em>i</em>QL editor!</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Note that we are still using the original&nbsp;<code>&lt;em&gt;graphQLFetcher&lt;/em&gt;</code>&nbsp;inside the new fetcher. We fall back to the original for GraphQL operations that aren’t subscriptions (queries and mutations).</p></blockquote>



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



<p>Even though GraphQL subscriptions are still at the RFC stage, it is already being used by many companies in production, and the libraries and tools have been evolving to support a wide range of use cases. So try GraphQL subscriptions in order to add real time ability to your apps today!</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="520" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_tVIRc087V_7VlSs46TwlYQ-1024x520.png" alt="" class="wp-image-1140" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_tVIRc087V_7VlSs46TwlYQ-1024x520.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_tVIRc087V_7VlSs46TwlYQ-300x152.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_tVIRc087V_7VlSs46TwlYQ-768x390.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_tVIRc087V_7VlSs46TwlYQ-1200x609.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_tVIRc087V_7VlSs46TwlYQ.png 1400w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>


How to Use Subscriptions in GraphiQL

What’s Next.js for Apollo


<p>It’s been so fun to be working with the community on the Apollo project for the last year. There have already been dozens of blog posts, meetup talks, announcements, events, and more! Now that we’re headed for a&nbsp;<a href="https://dev-blog.apollodata.com/apollo-client-1-0-is-coming-23b74b13fbbb#.1dgnl8yjo" target="_blank" rel="noreferrer noopener">1.0 release</a>&nbsp;of some of the core libraries, things are only going to get more exciting.</p>



<p>It can sometimes be hard to follow along with all of the happenings in GraphQL in general and Apollo in particular, so I wanted to put together this quick round up of all of the best places to keep up with what we’re working on, get involved in the project, and find out what’s going on in the community. I’ll put them in order of importance.</p>



<h2 class="wp-block-heading" id="08a3"><a href="#1-follow-our-blog-here-on-medium" aria-hidden="true" class="aal_anchor" id="1-follow-our-blog-here-on-medium"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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. Follow our&nbsp;<a href="https://dev-blog.apollodata.com/" target="_blank" rel="noreferrer noopener">blog</a>&nbsp;here on Medium</h2>



<p>We work hard to have a good balance of posts from people in the whole community about GraphQL open source announcements, experiences, best practices, and learning resources.</p>



<p>This is where we put in the most effort to deliver high-quality content we think everyone in the GraphQL and Apollo community will want to know about. We’re publishing 2–3 posts a week, with almost 80 so far!</p>



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



<p>Get the most timely news about Apollo and GraphQL, and links to cool content about GraphQL we’ve seen around the internet. If you’ve written a new article or package, or heard about an important event in the GraphQL community, hit us up for a retweet on Slack!</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="658" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_5yRSNI7XOL4lntOc8hlp1A-1024x658.png" alt="" class="wp-image-1167" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_5yRSNI7XOL4lntOc8hlp1A-1024x658.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_5yRSNI7XOL4lntOc8hlp1A-300x193.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_5yRSNI7XOL4lntOc8hlp1A-768x494.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_5yRSNI7XOL4lntOc8hlp1A-1200x771.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_5yRSNI7XOL4lntOc8hlp1A.png 1400w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<h2 class="wp-block-heading" id="4c65"><a href="#3-follow-and-star-on-github" aria-hidden="true" class="aal_anchor" id="3-follow-and-star-on-github"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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. Follow and star&nbsp;<a href="https://github.com/apollographql/apollo-client" target="_blank" rel="noreferrer noopener">on GitHub</a></h2>



<p>Bug reports, discussions about potential features, and debates about design principles all happen on our GitHub repositories. If you want the full firehose of details about the day-to-day operations of the open source projects, just click the watch button on GitHub, and don’t forget to star while you’re there!</p>



<figure class="wp-block-image"><img decoding="async" src="https://miro.medium.com/max/60/1*PmUV3B2LJxeaMQlouGSG5g.png?q=20" alt=""/></figure>



<p>Here are some of the top repositories to watch for the Apollo project:</p>



<ul class="wp-block-list"><li><a href="https://github.com/apollographql/apollo-client" target="_blank" rel="noreferrer noopener">Apollo Client</a></li><li><a href="https://github.com/apollographql/react-apollo" target="_blank" rel="noreferrer noopener">React Apollo</a></li><li><a href="https://github.com/apollographql/graphql-server" target="_blank" rel="noreferrer noopener">GraphQL Server</a></li><li><a href="https://github.com/apollographql/apollo-ios" target="_blank" rel="noreferrer noopener">Apollo iOS</a>&nbsp;and&nbsp;<a href="https://github.com/apollographql/apollo-android" target="_blank" rel="noreferrer noopener">Android</a></li></ul>



<p>And here are some repositories you want to follow to keep up with the latest discussions about GraphQL core evolution:</p>



<ul class="wp-block-list"><li><a href="https://github.com/facebook/graphql" target="_blank" rel="noreferrer noopener">The GraphQL specification</a></li><li><a href="https://github.com/graphql/graphql-js" target="_blank" rel="noreferrer noopener">The JavaScript reference implementation</a></li></ul>



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



<p>Get involved in one of the most active GraphQL-focused Slack communities. Talk about how you use Apollo, ask quick questions, and discuss ideas about best practices and implementations. To join,&nbsp;<a href="http://dev.apollodata.com/#slack" target="_blank" rel="noreferrer noopener">click here</a>, put in your email address, and you’ll receive an invite in your email inbox. Make sure to join the channels most relevant to your interests, for example #contributing, #subscriptions, #react-apollo, etc.</p>



<h2 class="wp-block-heading" id="a121"><a href="#5-ask-and-answer-questions-on-stack-overflow" aria-hidden="true" class="aal_anchor" id="5-ask-and-answer-questions-on-stack-overflow"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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. Ask and answer questions&nbsp;<a href="http://stackoverflow.com/questions/tagged/apollo" target="_blank" rel="noreferrer noopener">on Stack Overflow</a></h2>



<p>Stack Overflow is the best place to ask and answer specific questions about Apollo and GraphQL. Tag your questions with&nbsp;<a href="http://stackoverflow.com/questions/tagged/apollo" target="_blank" rel="noreferrer noopener"><strong>apollo</strong></a>,&nbsp;<a href="http://stackoverflow.com/questions/tagged/graphql" target="_blank" rel="noreferrer noopener"><strong>graphql</strong></a>, or both! If you don’t spend a lot of time lurking on Stack Overflow but still want to help people learn, you can also follow the&nbsp;<a href="https://twitter.com/GraphQLatSO" target="_blank" rel="noreferrer noopener">@GraphQLatSO</a>&nbsp;Twitter account to get those questions right in your feed.</p>



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



<p>YouTube is where you’ll find talk videos from all of meetups and GraphQL conferences, live streams of contributor events like Apollo Day and Contributor Week, and upcoming video tutorials about GraphQL and Apollo.</p>



<h2 class="wp-block-heading" id="a8e4"><a href="#7-in-the-bay-area-attend-or-speak-at-our-graphql-meetup" aria-hidden="true" class="aal_anchor" id="7-in-the-bay-area-attend-or-speak-at-our-graphql-meetup"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>7. In the bay area? Attend or speak at&nbsp;<a href="https://www.meetup.com/GraphQL-SF/" target="_blank" rel="noreferrer noopener">our GraphQL meetup</a>!</h2>



<p>If talking about GraphQL on the internet just isn’t enough and you crave that face-to-face interaction, and you happen to be in the San Francisco Bay Area, consider joining our&nbsp;<a href="https://www.meetup.com/GraphQL-SF/" target="_blank" rel="noreferrer noopener">meetup group</a>! If you have a cool project you’ve been working on, or an interesting GraphQL experience, we’re always looking for people to give talks — just email our event organizers at community@apollodata.com. If you’re not in the bay area,&nbsp;<a href="http://graphql.org/community/upcoming-events/#meetups" target="_blank" rel="noreferrer noopener">check out graphql.org</a>&nbsp;for more meetups around the world.</p>



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



<p>Thanks to everyone in the community for all of your feedback, contributions, and support in the last year! We believe that a project can only be great when it takes into account a wide range of ideas and experiences, and we couldn’t have gotten this far without all of you.</p>



<p><em>Also, if you know anyone who you think would love to work on GraphQL full-time, let them know that we’re hiring! You can learn more about the open positions on&nbsp;</em><a href="http://jobs.meteor.com/" target="_blank" rel="noreferrer noopener"><em>our jobs page</em></a><em>&nbsp;or by getting in touch with us directly over&nbsp;</em><a href="mailto:sashko@apollodata.com" target="_blank" rel="noreferrer noopener"><em>email</em></a><em>&nbsp;or&nbsp;</em><a href="https://twitter.com/stubailo" target="_blank" rel="noreferrer noopener"><em>Twitter</em></a><em>.</em></p>


Keeping up with Apollo and GraphQL

Apollo Angular 0.11


<figure class="wp-block-image"><img decoding="async" src="https://miro.medium.com/max/5092/1*OI8unw4F2B2NF37jeRaypw.png" alt=""/><figcaption>Try it today from npm!</figcaption></figure>



<p>GraphQL subscriptions are a way to add realtime data streaming to your GraphQL API. Yesterday, we wrote about an exciting new development for the community:&nbsp;<a href="https://dev-blog.apollodata.com/the-next-step-for-realtime-data-in-graphql-b564b72eb07b#.1dax8i99c" target="_blank" rel="noreferrer noopener">the new RFC to add GraphQL subscriptions to the spec</a>. Today, we’ll talk about the new versions we recently released for our GraphQL subscriptions implementation, and the work we’ve done to get to this exciting place.</p>



<h3 class="wp-block-heading" id="e609"><a href="#where-subscriptions-started" aria-hidden="true" class="aal_anchor" id="where-subscriptions-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>Where subscriptions started</h3>



<p>On the Apollo team, we’ve been passionate about realtime data in GraphQL, and subscriptions in particular, for a long time. We&nbsp;<a href="https://dev-blog.apollodata.com/graphql-subscriptions-in-apollo-client-9a2457f015fb#.lg5kcvr7u" target="_blank" rel="noreferrer noopener">released the first version of our GraphQL subscriptions library</a>, which was the start of our exploration, almost 6 months ago in September.</p>



<p>While we initially launched this as a feature for Apollo Client, we quickly realized there was a lot of demand for this across the community, so we put together&nbsp;<a href="https://dev-blog.apollodata.com/a-proposal-for-graphql-subscriptions-1d89b1934c18" target="_blank" rel="noreferrer noopener">a proposal for a subscriptions architecture</a>&nbsp;that could work with any client or server.</p>



<p>Since then, we’ve been hard at work improving the implementation libraries, using GraphQL subscriptions internally and getting feedback from the community.</p>



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



<p>In this post I want to talk about the latest releases:</p>



<ul class="wp-block-list"><li><a href="https://github.com/apollographql/graphql-subscriptions" target="_blank" rel="noreferrer noopener">graphql-subscriptions</a>&nbsp;0.3.0</li><li><a href="https://github.com/apollographql/subscriptions-transport-ws" target="_blank" rel="noreferrer noopener">subscriptions-transport-ws</a>&nbsp;0.5.0</li></ul>



<p>These releases included lots of merged PRs and issues fixed from community members who use GraphQL subscriptions in production. We put most of the effort into areas where we had received a lot of feedback from the community:</p>



<ul class="wp-block-list"><li>Improvements for authorization flows</li><li>More lifecycle hooks for the client, giving more control and expression with the connection</li><li>Improved websockets implementation</li><li>Integration with the MQTT protocol in addition to Redis</li></ul>



<p>The goal was to make a flexible implementation while keeping the app-specific code easier. On top of that, we wanted to create smaller and more modular package by splitting the subscriptions client and subscriptions server into separate bundles.</p>



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



<p>One of the features most requested by the community was more lifecycle events to track both the state of a subscription and the state of the connection overall. Many of the issues we closed in the last few weeks were related to this missing feature — and now it’s finally here.</p>



<p>With the new version of&nbsp;<a href="https://github.com/apollographql/subscriptions-transport-ws" target="_blank" rel="noreferrer noopener">subscriptions-transport-ws</a>&nbsp;you can subscribe for client lifecycle events:&nbsp;<em>connect</em>,&nbsp;<em>disconnect</em>, and&nbsp;<em>reconnect</em>.</p>



<p>This gives client developers the ability to respond to those network changes. For example, you can let the user know the app is offline, clear state after logout, disconnect the websocket, or initiate a retry after the connection has reconnected.</p>



<p>The new version also adds server lifecycle events:&nbsp;<em>connect</em>,&nbsp;<em>disconnect</em>,&nbsp;<em>subscribe</em>, and&nbsp;<em>unsubscribe</em>.</p>



<p>This gives the server developer easier control over authentication logic and the ability to clean up state on the client if the server decides to terminate the connection.</p>



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



<p>In addition to independent life cycle events, in the new version of&nbsp;<a href="https://github.com/apollographql/subscriptions-transport-ws" target="_blank" rel="noreferrer noopener">subscriptions-transport-ws</a>, we added a new type of WebSocket message, called&nbsp;<code>INIT</code>&nbsp;, which gives developers the ability to pass custom arguments from the client to the server. You can think of this as a way to pass information would have been a header in HTTP.</p>



<p>Using this new type of message, you can create an authorized WebSocket by passing your authorization data in the initial request and writing code that accepts or rejects the connection before accepting subscriptions from the client using the&nbsp;<code>onConnect</code>&nbsp;callback.</p>



<p>The following example creates a GraphQL subscriptions client and server, using the new initialization feature and lifecycle events:</p>



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



<pre class="wp-block-preformatted">import { SubscriptionClient } from ‘subscriptions-transport-ws’;const getAuthToken = () =&gt; {<br>  // Implement your logic to get the client’s auth details<br>  return ‘DUMMY_TOKEN’;<br>};const wsClient = new SubscriptionClient(`SERVER_URL_HERE`, {<br>  reconnect: true,<br>  connectionParams: {<br>    authToken: getAuthToken()<br>  }<br>});wsClient.subscribe({ query: `...` }, (errors, result) =&gt; {<br>  console.log(errors, result);<br>});// If you're using apollo, you can use `addGraphQLSubscriptions` to<br>// attach this client to your network interface</pre>



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



<pre class="wp-block-preformatted">import { SubscriptionManager, PubSub } from ‘graphql-subscriptions’;<br>import { SubscriptionServer } from ‘subscriptions-transport-ws’;<br>import schema from ‘./schema’;const pubsub = new PubSub();<br>const subscriptionManager = new SubscriptionManager({<br>  schema,<br>  pubsub<br>});const server = createServer(); // create new connect/express serverconst subscriptionServer = new SubscriptionServer({<br>  subscriptionManager,<br>  onConnect: async ({ authToken }) =&gt; {<br>    const user = await validateUser(authToken);<br>    if (!user) {<br>      throw new Error(‘Unauthorized!’);<br>    } else { <br>      // The returned value will be part of the `context`<br>      // for the filter functions and resolvers<br>      return {<br>        user<br>      };<br>    }<br>  },<br>}, {<br>  server // or use existing server with different path<br>});</pre>



<h2 class="wp-block-heading" id="d31c"><a href="#refactor-and-dependency-improvements" aria-hidden="true" class="aal_anchor" id="refactor-and-dependency-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>Refactor and dependency improvements</h2>



<p>We also did some code refactor and made the API more flexible. For example, you can now use a Promise for lifecycle events, setupFunctions, setting up the pub/sub engine, and more.</p>



<p>Also, there is now a&nbsp;<code>addGraphQLSubscriptions</code>&nbsp;method in the client side bundle of&nbsp;<a href="https://github.com/apollographql/subscriptions-transport-ws" target="_blank" rel="noreferrer noopener">subscriptions-transport-ws</a>&nbsp;so that developers using Apollo Client no longer need to write this code every time. This method allows you to extend your Apollo network interface to execute GraphQL subscriptions over the WebSocket transport, while using the regular network interface for queries and mutations.</p>



<p>We updated our implementation to use the&nbsp;<a href="https://www.npmjs.com/package/ws" target="_blank" rel="noreferrer noopener">ws</a>&nbsp;package for the server side websocket implementation. This means you can also use the client if your subscriptions client is in a server-side NodeJS environment (in browser environment, it’s better to use the native implementation of your browser).</p>



<p>The new&nbsp;<code>ws</code>&nbsp;dependency is much&nbsp;<a href="http://websockets.github.io/ws/benchmarks.html" target="_blank" rel="noreferrer noopener">faster</a>&nbsp;than our previous websocket library. It’s also smaller library and adds less overhead over the websocket standard, which means it’s easier to abstract out and change the implementation if you need to.</p>



<h2 class="wp-block-heading" id="f728"><a href="#mqtt-and-redis-support" aria-hidden="true" class="aal_anchor" id="mqtt-and-redis-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>MQTT and Redis support</h2>



<p><a href="https://github.com/apollostack/graphql-subscriptions" target="_blank" rel="noreferrer noopener">graphql-subscriptions</a>&nbsp;package exports a default in-process pub/sub implementation, but for the best result in production it’s better to use an external pub/sub product, such as Redis or an MQTT service.</p>



<p>We worked with&nbsp;<a href="https://medium.com/u/c544f341ba49?source=post_page-----f11be19e6569----------------------" target="_blank" rel="noreferrer noopener">David Yahalomi</a>&nbsp;to create the&nbsp;<a href="https://github.com/davidyaha/graphql-redis-subscriptions" target="_blank" rel="noreferrer noopener">graphql-redis-subscriptions</a>&nbsp;and&nbsp;<a href="https://github.com/davidyaha/graphql-mqtt-subscriptions" target="_blank" rel="noreferrer noopener">graphql-mqtt-subscriptions</a>&nbsp;packages, which can be easily dropped in as a replacement for the default PubSub object without making any changes to the rest of your code. Using an external pub/sub system gives you more publication features — such as persistence, caching, delivery guarantees and other optimizations.</p>



<h2 class="wp-block-heading" id="44ec"><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>Though we’ve been working on subscriptions for a while, there’s still a lot to be done. In the near future, we’re going to be making the experience of using GraphQL subscriptions a lot better:</p>



<ul class="wp-block-list"><li><strong>GraphQL subscriptions specification.&nbsp;</strong><a href="https://medium.com/u/803918030a60?source=post_page-----f11be19e6569----------------------" target="_blank" rel="noreferrer noopener">Sashko Stubailo</a>&nbsp;has been&nbsp;<a href="https://dev-blog.apollodata.com/the-next-step-for-realtime-data-in-graphql-b564b72eb07b#.1dax8i99c" target="_blank" rel="noreferrer noopener">working closely</a>&nbsp;with the GraphQL team from Facebook to add subscriptions to the official spec. We’re incorporating the lessons we learned from using subscriptions in production and the feedback we hear from the community.</li><li><strong>Documentation.&nbsp;</strong>We are working on adding more documentation to our official docs site about how to add subscriptions to your app. In the meantime, the best place to read and learn about setting up GraphQL subscriptions are the&nbsp;<a href="https://github.com/apollographql/graphql-subscriptions/blob/master/README.md" target="_blank" rel="noreferrer noopener">readme</a>&nbsp;<a href="https://github.com/apollographql/subscriptions-transport-ws/blob/master/README.md" target="_blank" rel="noreferrer noopener">files</a>&nbsp;of the libraries and the&nbsp;<a href="https://github.com/apollographql/?utf8=%E2%9C%93&amp;q=githunt&amp;type=&amp;language=" target="_blank" rel="noreferrer noopener">GitHunt example</a>&nbsp;apps.&nbsp;<strong>Update</strong>: check out our new docs for&nbsp;<a href="http://dev.apollodata.com/react/subscriptions.html" target="_blank" rel="noreferrer noopener">Subscriptions with React</a>&nbsp;and&nbsp;<a href="http://dev.apollodata.com/tools/graphql-subscriptions/index.html" target="_blank" rel="noreferrer noopener">Subscriptions with GraphQL Server</a></li><li><strong>Making it easier to use subscriptions with Apollo Client.&nbsp;</strong>We&nbsp;<a href="https://github.com/apollographql/apollo-client/issues/1224" target="_blank" rel="noreferrer noopener">plan to improve</a>&nbsp;`updateQuery` and `updateQueries` and expose a simpler, yet flexible, API for updating the store when data arrives from subscriptions.</li><li><strong>Real-life case studies.&nbsp;</strong>Many of the improvements described in this post came from working on our internal apps that use these libraries, while also getting feedback from developers in the community who are using subscriptions in production. We’re going to tell that story in more detail soon.</li></ul>



<p>We’re going to write many more blog posts about those experiences and lessons we learned from using GraphQL subscriptions in production. Make sure to follow our publication so you won’t miss it!</p>



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



<p>We also want to hear more from you! Try out GraphQL subscriptions with our libraries and tell us what we should do next, and where we can best improve! And if you are&nbsp;<em>really</em>&nbsp;interested in GraphQL subscriptions and real-time features, did you know&nbsp;<a href="https://www.meteor.com/careers#open-source-engineer" target="_blank" rel="noreferrer noopener">we’re hiring</a>?</p>


New release of GraphQL Subscriptions for Javascript

The next step for realtime data in GraphQL


<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://medium.com/u/72347b4464b3?source=post_page-----f8b86d7f5297----------------------" target="_blank" rel="noreferrer noopener">Nikolas Burk</a>, who works on iOS and GraphQL education at&nbsp;<a href="https://www.graph.cool/" target="_blank" rel="noreferrer noopener">Graphcool</a>, an awesome GraphQL backend platform.</p></blockquote>



<p><a href="https://www.learnapollo.com/" target="_blank" rel="noreferrer noopener">Learn Apollo</a>&nbsp;is an interactive tutorial that explains how to develop applications using a&nbsp;<a href="http://graphql.org/" target="_blank" rel="noreferrer noopener">GraphQL</a>&nbsp;backend and&nbsp;<a href="http://dev.apollodata.com/" target="_blank" rel="noreferrer noopener">Apollo</a>&nbsp;client. It’s the fastest way to get started with Apollo &amp; GraphQL, guiding you through practical examples using the client technology of your choice — be it&nbsp;<strong>React, React Native, Angular or Vue</strong>.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p><em>Note: If you have never heard of&nbsp;</em><a href="http://graphql.org/" target="_blank" rel="noreferrer noopener"><em>GraphQL</em></a><em>&nbsp;before, it’s an API design paradigm that was&nbsp;</em><a href="http://graphql.org/blog/graphql-a-query-language" target="_blank" rel="noreferrer noopener"><em>introduced by Facebook</em></a><em>&nbsp;and eliminates many shortcomings of today’s de-facto standard REST.&nbsp;</em><a href="http://dev.apollodata.com/" target="_blank" rel="noreferrer noopener"><em>Apollo</em></a><em>&nbsp;is a&nbsp;</em>client-side data fetching library<em>&nbsp;that allows you to easily work with a GraphQL API and benefit from built-in features like caching, subscriptions, optimistic UI, pagination and server-side rendering without the overhead of implementing these yourself!</em></p></blockquote>



<p>After the&nbsp;<a href="https://dev-blog.apollodata.com/learn-apollo-build-graphql-apps-with-react-react-native-or-exponent-4787269a4747#.x7cyjvpq9" target="_blank" rel="noreferrer noopener">successful launch</a>&nbsp;of Learn Apollo for React &amp; React Native, we’re happy to introduce the&nbsp;<strong>iOS track</strong>&nbsp;for&nbsp;<a href="https://www.learnapollo.com/" target="_blank" rel="noreferrer noopener">Learn Apollo</a>. Similar to the other tracks you can find on the site, the goal is to build a fully-fledged Pokédex application that demonstrates major functionalities of the interaction with a GraphQL backend using an Apollo client —&nbsp;<strong>only this time it’s from within an iOS app using Swift!</strong>&nbsp;🚀</p>



<h2 class="wp-block-heading" id="381b"><a href="#the-apollo-ios-client" aria-hidden="true" class="aal_anchor" id="the-apollo-ios-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>The Apollo iOS client</h2>



<p>The&nbsp;<a href="https://github.com/apollostack/apollo-ios" target="_blank" rel="noreferrer noopener">Apollo iOS Client</a>&nbsp;is the best way to work with a GraphQL API from a native iOS app. Developers using the client will benefit from two major features:</p>



<ul class="wp-block-list"><li><strong>Type generation based on GraphQL queries and mutations</strong></li><li><strong>Normalized cache &amp; automatic UI updates</strong></li></ul>



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



<p>The first and presumably most important feature of the Apollo iOS client is the&nbsp;<a href="https://dev-blog.apollodata.com/mapping-graphql-types-to-swift-aa85e5693db4#.tjm7h9e8q" target="_blank" rel="noreferrer noopener">generation of native Swift types</a>&nbsp;that reflect the data requirements of your specific application. The types are generated based on all the queries and mutations that are specified within the app’s Xcode project.</p>



<p>This approach leverages Swift’s static type system and, unlike most other data fetching approaches, provides&nbsp;<em>compile-time safety&nbsp;</em>for the developer in terms of what data they can expect from the backend. In Swift, this means that developers can get rid of all the&nbsp;<em>optional</em>&nbsp;properties they’d have to use when parsing the untyped JSON into their model objects, thus providing extra safety while retaining flexibility when it comes to changing data requirements.</p>



<h3 class="wp-block-heading" id="dc5f"><a href="#normalized-caching-automatic-ui-updates" aria-hidden="true" class="aal_anchor" id="normalized-caching-automatic-ui-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>Normalized Caching &amp; Automatic UI updates</h3>



<p>The second major feature of the Apollo iOS client is a&nbsp;<a href="http://dev.apollodata.com/ios/watching-queries.html" target="_blank" rel="noreferrer noopener">normalized cache</a>&nbsp;that allows for automatic UI updates. The responses that the client receives from the server are flattened and put into the client-side store. Similar to the Apollo client for other platforms, queries are&nbsp;<a href="http://dev.apollodata.com/ios/watching-queries.html" target="_blank" rel="noreferrer noopener"><em>watched</em></a>&nbsp;in a reactive way so that an update function automatically gets executed whenever data associated with a watched query changes in the store — no matter where that change came from!</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="259" height="480" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_6-oRuAkgYyiHSB_-kJXIGg.gif" alt="" class="wp-image-530"/><figcaption>Throughout the tutorial you’ll build a fully-functional iOS app with GraphQL &amp; Apollo</figcaption></figure>



<h2 class="wp-block-heading" id="b063"><a href="#why-should-an-ios-developer-care-about-graphql" aria-hidden="true" class="aal_anchor" id="why-should-an-ios-developer-care-about-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>Why should an iOS developer care about GraphQL?</h2>



<p>At&nbsp;<a href="https://www.graph.cool/" target="_blank" rel="noreferrer noopener">Graphcool</a>, we strongly believe that&nbsp;<strong>GraphQL is the API design paradigm of the future</strong>! Despite its young age, it already created an incredible impact on the way how web developers write their applications and interface with backends.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p><em>“We were frustrated with the differences between the data we wanted to use in our apps and the server queries they required. We don’t think of data in terms of resource URLs, secondary keys, or join tables; we think about it in terms of a graph of objects and the models we ultimately use in our apps like NSObjects or JSON.” —&nbsp;</em><a href="https://twitter.com/leeb" target="_blank" rel="noreferrer noopener"><em>Lee Byron</em></a><em>&nbsp;(Co-Inventor of GraphQL, Facebook)</em></p></blockquote>



<p>Though GraphQL has been widely adopted in the web development community so far, Facebook initially developed it to deal with networking issues they primarily saw on&nbsp;<em>mobile devices</em>&nbsp;— with the&nbsp;<a href="http://graphql.org/blog/graphql-a-query-language/#why-graphql" target="_blank" rel="noreferrer noopener">goal of making the data transfer as efficient as possible</a>&nbsp;while still enabling developers to iterate quickly. This is why we think that there is an&nbsp;<strong>enormous potential for GraphQL in the native mobile development space</strong>! We’re very excited to see more mobile developers using GraphQL, and want to build an ecosystem that makes it as easy as possible for every native developer to integrate GraphQL in their applications.</p>


How to use GraphQL in your iOS app


<p>As&nbsp;<a href="https://medium.com/u/db65a320cccc?source=post_page-----39dd139c70ee----------------------" target="_blank" rel="noreferrer noopener">Thea</a>&nbsp;wrote in her&nbsp;<a href="https://medium.com/p/save-the-date-apollo-contributor-week-eef66d09f0e6" target="_blank" rel="noreferrer noopener">announcement blog post</a>&nbsp;last week, the idea for contributor week came to us when we were having our own hack week back in November. We had a lot of fun working on cool projects like the&nbsp;<a href="https://medium.com/p/apollo-client-developer-tools-ff89181ebcf" target="_blank" rel="noreferrer noopener">Apollo Chrome Developer Tools</a>&nbsp;together, so we started contributor week to share the fun with you!</p>



<p>Let’s get straight to the point. Here’s what you’ll find in this post:</p>



<ol class="wp-block-list"><li><strong>A schedule for the week</strong></li><li><strong>Instructions for contributors</strong></li><li><strong>Participating repositories</strong></li></ol>



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



<h3 class="wp-block-heading" id="5ab1"><a href="#kickoff-live-broadcast-tuesday-feb-7th-1030am-1130am-pst" aria-hidden="true" class="aal_anchor" id="kickoff-live-broadcast-tuesday-feb-7th-1030am-1130am-pst"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Kickoff live broadcast: Tuesday Feb 7th 10:30am — 11:30am PST</h3>



<p><a href="https://www.youtube.com/watch?v=YQIwW7XnNi4" target="_blank" rel="noreferrer noopener">Watch our Youtube live video</a>&nbsp;to kick off contributor week. We’ll go over the logistics of the week, make some suggestions for things to do, introduce the maintainers of various repos, and answer questions.</p>



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



<p>We’ll have office hours on the #contributor-week slack channel in the&nbsp;<a href="http://www.apollodata.com/#slack" target="_blank" rel="noreferrer noopener">Apollo Slack</a>&nbsp;every day from 11:30am — 12:30pm PST. Office hours means members of the core team will be available to answer your questions in real time to help you get unstuck, make PRs and fix issues!</p>



<p>The core team and maintainers will be available outside of office hours and on the weekend as well, but we may not respond right away.</p>



<h3 class="wp-block-heading" id="f588"><a href="#closing-live-broadcast-tuesday-feb-14th-1030am-1130am-pst" aria-hidden="true" class="aal_anchor" id="closing-live-broadcast-tuesday-feb-14th-1030am-1130am-pst"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Closing live broadcast: Tuesday Feb 14th 10:30am — 11:30am PST</h3>



<p>We’ll have a live broadcast at the end of contributor week, where we’ll do a quick recap of all the amazing work done by the community and share demos of projects that people worked on.</p>



<p>Shortly after contributor week, we’ll send out some Apollo swag to everyone who participated in contributor week. Expect to get stickers, a t-shirt or a mug from us!</p>



<h2 class="wp-block-heading" id="ed8b"><a href="#2-instructions-for-contributors" aria-hidden="true" class="aal_anchor" id="2-instructions-for-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>2. Instructions for contributors</h2>



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



<ol class="wp-block-list"><li>Join the&nbsp;<strong>#contributor-week</strong>&nbsp;on&nbsp;<a href="http://www.apollodata.com/#slack" target="_blank" rel="noreferrer noopener">Apollo Slack</a>.</li><li><a href="https://www.youtube.com/watch?v=YQIwW7XnNi4" target="_blank" rel="noreferrer noopener">Watch the kickoff hangout on YouTube</a>.</li><li>Follow us on Medium and&nbsp;<a href="https://twitter.com/apollographql" target="_blank" rel="noreferrer noopener">Twitter</a>&nbsp;to get updated on the details.</li><li>Check out the&nbsp;<a href="https://github.com/search?o=desc&amp;q=org%3Aapollographql+is%3Aissue+is%3Aopen+state%3Aopen+label%3Aeasy+-label%3Aclaimed&amp;s=comments&amp;type=Issues&amp;utf8=%E2%9C%93" target="_blank" rel="noreferrer noopener">list of starter issues</a>&nbsp;and&nbsp;<a href="https://github.com/apollographql/apollo/issues/75" target="_blank" rel="noreferrer noopener">project ideas</a>.</li></ol>



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



<p>There are a lot of ways to get involved, and this week we’re going to pay extra attention to make sure it’s easy to get your PR accepted.</p>



<ul class="wp-block-list"><li><strong>Tackle some smaller issues to get started:&nbsp;</strong>Pick an easy issue from the&nbsp;<a href="https://github.com/search?o=desc&amp;q=org%3Aapollographql+is%3Aissue+is%3Aopen+state%3Aopen+label%3Aeasy+-label%3Aclaimed&amp;s=comments&amp;type=Issues&amp;utf8=%E2%9C%93" target="_blank" rel="noreferrer noopener">list of starter issues</a>&nbsp;and claim it by commenting on it, and opening a PR mentioning the issue.</li><li><strong>Improve the docs:&nbsp;</strong>Another good way to get started is to make a PR improving the&nbsp;<a href="http://dev.apollodata.com/react/" target="_blank" rel="noreferrer noopener">docs</a>. Any extra bit of information or piece of experience you have from developing apps with Apollo is welcome, since that will help new developers get started.</li><li><strong>Tackle a more challenging issue:</strong>&nbsp;Once you get comfortable with the process, you can pick a&nbsp;<a href="https://github.com/search?o=desc&amp;q=org%3Aapollographql+is%3Aissue+is%3Aopen+state%3Aopen+-label%3Aeasy+-label%3Aclaimed+label%3A%22help+wanted%22&amp;ref=searchresults&amp;s=comments&amp;type=Issues&amp;utf8=%E2%9C%93" target="_blank" rel="noreferrer noopener">medium or hard issue</a>&nbsp;to work on!</li><li><strong>Try one of the suggested projects:</strong>&nbsp;If you’re looking to start something new or tackle a bigger chunk of work, check out the various&nbsp;<a href="https://github.com/apollographql/apollo/issues/75" target="_blank" rel="noreferrer noopener">project ideas</a>&nbsp;submitted by the maintainers.</li></ul>



<p>Of course there are many other ways to participate, like writing a blog post, making and example app, or writing a tutorial. If you have some ideas of your own, don’t hesitate to let us know and we’d love to help out!</p>



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



<p>Apollo and GraphQL are much more than just the repositories under&nbsp;<a href="https://github.com/apollographql" target="_blank" rel="noreferrer noopener">Apollo GraphQL</a>&nbsp;on GitHub. There’s a whole community around it, and many of those repositories are participating in Apollo Contributor Week along with the largest GraphQL server communities and GraphQL backends-as-a-service.</p>



<p><strong>List of participating repositories and organizations</strong></p>



<ul class="wp-block-list"><li>Everything in the&nbsp;<a href="https://github.com/apollographql" target="_blank" rel="noreferrer noopener">Apollo GraphQL</a>&nbsp;organization</li><li><a href="https://github.com/sangria-graphql" target="_blank" rel="noreferrer noopener">Sangria</a></li><li><a href="https://github.com/rmosolgo/graphql-ruby" target="_blank" rel="noreferrer noopener">GraphQL-Ruby</a></li><li><a href="https://github.com/scaphold-io" target="_blank" rel="noreferrer noopener">Scaphold.io</a></li><li><a href="https://github.com/graphcool" target="_blank" rel="noreferrer noopener">Graph.cool</a></li><li><a href="https://github.com/bgentry/ember-apollo-client" target="_blank" rel="noreferrer noopener">ember-apollo-client</a></li><li><a href="https://github.com/Akryum/vue-apollo" target="_blank" rel="noreferrer noopener">vue-apollo</a></li></ul>



<p>We especially encourage you to work on projects that improve the integration between Apollo and the partner repo and build examples or create tutorial content.</p>



<h2 class="wp-block-heading" id="6b40"><a href="#were-excited-to-work-with-you" aria-hidden="true" class="aal_anchor" id="were-excited-to-work-with-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>We’re excited to work with you!</h2>



<p>Now that you know all there is to know about contributor week, let me tell you that we’re really excited to work with you! We’re always looking for ways to be more engaged and better serve the community, so we really hope that you’ll use this opportunity to work more closely with us to make Apollo work better for you.</p>



<p>Contributor week won’t last forever, but that doesn’t mean you’ll have to stop contributing. If you want to do more, definitely let us know! We’re always looking to add committed maintainers to our projects, and have contributors who help us get a handle on issues filed.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="627" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_YyM5-tZLho66gM3ka4K1iA-1024x627.jpg" alt="" class="wp-image-502" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_YyM5-tZLho66gM3ka4K1iA-1024x627.jpg 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_YyM5-tZLho66gM3ka4K1iA-300x184.jpg 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_YyM5-tZLho66gM3ka4K1iA-768x470.jpg 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_YyM5-tZLho66gM3ka4K1iA-1536x941.jpg 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_YyM5-tZLho66gM3ka4K1iA-2048x1255.jpg 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_YyM5-tZLho66gM3ka4K1iA-1200x735.jpg 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_YyM5-tZLho66gM3ka4K1iA-1980x1213.jpg 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>


Apollo Contributor Week Starts Today!


<p>Late last year, the Apollo team took a week do some collaborative hacking on projects ideas that had been floating around our heads but hadn’t made it into planned sprints. Not only did this end up being really fun, it also yielded some awesome additions to the open source project, including these&nbsp;<a href="https://dev-blog.apollodata.com/apollo-client-developer-tools-ff89181ebcf" target="_blank" rel="noreferrer noopener">Chrome devtools</a>&nbsp;for Apollo Client.</p>



<p>Almost immediately afterwards, we had the idea of organizing a hack week for the wider community of Apollo contributors and people looking for a fun opportunity to get involved in open source projects.</p>



<p>So 🎉 we’re excited to announce&nbsp;<strong>Apollo Contributor Week</strong>&nbsp;— an online hack week for anyone looking to make contributions to Apollo and related projects, with the core maintainers on deck throughout the week to provide help, design feedback, quick PR reviews, and emotional support. Leading up to Contributor Week, we’ll also be shoring up our projects’ resources and tools to make for an awesome contributing experience.</p>



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



<p>We welcome anyone who is interested in Apollo and GraphQL to join in, including new, existing and past contributors. This is a great chance to help make Apollo an even better tool for your needs, and leave your mark on a&nbsp;<a href="https://dev-blog.apollodata.com/get-involved-in-open-source-today-7c4708cf2a33#.nmf1098ua" target="_blank" rel="noreferrer noopener">rapidly growing open source project</a>. Contributions can span everything from adding tests and updating documentation to significant PRs.</p>



<p>We’d love to see contributors from the other open source communities as well, especially if you have ideas on how to better integrate Apollo with your project (and vice versa).</p>



<p>For those who are new to our codebase, not all contributions need to come in the form of code! We’ll also be around to help you improve documentation, write that blog post about GraphQL you’ve had on the back burner, or hone a talk you’ve been wanting to give at your local meetup.</p>



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



<ul class="wp-block-list"><li>Daily office hours on Slack with core maintainers</li><li>Contribution ideas for all skill levels</li><li>New, more helpful contributing docs and updated roadmaps</li><li>Getting to know the (awesome) GraphQL open source community</li><li>Blog posts showing off the awesome stuff you build</li><li>Improved Apollo tools that better serve your needs</li><li>Fun, fame and open source karma!</li></ul>



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



<p>We’ll kick the week off on February 7th with a&nbsp;<a href="https://www.youtube.com/watch?v=uUEZ32oDL0U" target="_blank" rel="noreferrer noopener">Youtube Live hangout</a>&nbsp;to brainstorm project ideas and answer questions to get you started, along with a follow up post with all the resources you’ll need to participate.</p>



<ol class="wp-block-list"><li>Join the&nbsp;<strong>#contributor-week</strong>&nbsp;on&nbsp;<a href="http://www.apollodata.com/#slack" target="_blank" rel="noreferrer noopener">Apollo Slack</a>.</li><li><a href="https://www.youtube.com/watch?v=YQIwW7XnNi4" target="_blank" rel="noreferrer noopener">Watch the kickoff event video on YouTube</a>.</li><li>Follow us on Medium and&nbsp;<a href="https://twitter.com/apollographql" target="_blank" rel="noreferrer noopener">Twitter</a>&nbsp;to get updated on the details.</li><li>Think about what you’d like to work on.</li></ol>



<p>Can’t wait to see you there!</p>


Save the Date: Apollo Contributor Week


<p>A little over a year ago, we at Meteor Development Group were looking for a way to build the data layer of the future. GraphQL ended up grabbing our attention mainly because it offered a solution to the problem we were trying to solve at the time: how to let clients use just one intuitive query language to query many different backends — Postgres, MySQL, MongoDB, etc. Completely flouting the principle of “not-invented-here”, we decided to see if we could use GraphQL instead of building our own solution in-house.</p>



<p>GraphQL checked all the boxes, except for one: there was no easy-to-use client library. There was Relay, but Relay had a notoriously steep learning curve, only worked with React, and didn’t integrate with anything else, not even React-Router. We tried to bend Relay to our will and make it easier and more flexible to use, but quickly realized that it was an almost impossible task because of how tightly coupled Relay was.</p>



<h2 class="wp-block-heading" id="7a4d"><a href="#a-community-driven-graphql-client" aria-hidden="true" class="aal_anchor" id="a-community-driven-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 community-driven GraphQL Client</h2>



<p>We were convinced that for GraphQL to be widely adopted, it had to integrate with other popular tools in the Javascript ecosystem, and we believed that the best way to achieve that goal was to involve the open-source community from the start. In short: we needed to build the GraphQL client “for the community, by the community”.</p>



<p>At Apollo we strongly believe in the power of open source, but as many of you know, building open source software can be both a source of joy as well as frustration. In this blog post I want to share a few lessons that we’ve learned, in the hope that this will encourage and enable more people to start successful open source projects, because:</p>



<p>Every time an open source project succeeds, we all win!</p>



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



<p>The biggest hurdle for every open-source project is to get the first user and the first contributor. It’s usually only when projects become really successful that contributions start pouring in. Unfortunately, there’s no easy shortcut to getting there; you have to make the first step and build something to get the project off the ground.</p>



<p>However, if you’re working on something exciting, you can almost always find someone who has the same problem and who’d be happy to start contributing if you take the lead (a friend, a coworker, a lost soul somewhere on a forum)!</p>



<p>That’s exactly how things worked out with Apollo Client:&nbsp;<a href="https://medium.com/u/803918030a60?source=post_page-----7c4708cf2a33----------------------" target="_blank" rel="noreferrer noopener">Sashko Stubailo</a>&nbsp;started writing code and quickly found&nbsp;<a href="https://medium.com/u/fd3d3dea3cd3?source=post_page-----7c4708cf2a33----------------------" target="_blank" rel="noreferrer noopener">James Baxley III</a>&nbsp;as our first contributor and production user. James was a core contributor from the beginning, and he still maintains&nbsp;<a href="https://github.com/apollostack/react-apollo" target="_blank" rel="noreferrer noopener">react-apollo</a>&nbsp;to this day. Thank you James!!</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_kg7kGTe7K8iGbOdElr-8hg-1024x683.jpg" alt="" class="wp-image-491" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_kg7kGTe7K8iGbOdElr-8hg-1024x683.jpg 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_kg7kGTe7K8iGbOdElr-8hg-300x200.jpg 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_kg7kGTe7K8iGbOdElr-8hg-768x512.jpg 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_kg7kGTe7K8iGbOdElr-8hg-1536x1024.jpg 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_kg7kGTe7K8iGbOdElr-8hg-2048x1365.jpg 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_kg7kGTe7K8iGbOdElr-8hg-1200x800.jpg 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_kg7kGTe7K8iGbOdElr-8hg-1980x1320.jpg 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



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



<p>Successful open source projects — those that help the greatest number of people — are just as much about getting the word out there as they are about quality code. For a project to succeed, it needs to have both. Every once in a while a project comes along that’s so great that word gets around without the authors lifting a finger. That generally only happens to one project out of a thousand, so you’ll have to get the ball rolling yourself.</p>



<p>I really can’t emphasize enough how important it is to start getting the word out there so new users and contributors can find your project. An open source project stays alive only as long as it has users who are also able to contribute to it. There are probably hundreds of amazing open source projects that disappear because no one found out about how great they are.</p>



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



<p>For Apollo Client, this very publication is the main way we reach new users and contributors. We simply set ourselves a goal of writing two posts per week, even if there wasn’t anything specific to write about. If there were no news to share about the project itself, we simply wrote up some of the insights that we had while working on the project, like&nbsp;<a href="https://dev-blog.apollodata.com/understanding-pagination-rest-graphql-and-relay-b10f835549e7" target="_blank" rel="noreferrer noopener">how to do pagination</a>&nbsp;or a&nbsp;<a href="https://dev-blog.apollodata.com/graphql-vs-falcor-4f1e9cbf7504" target="_blank" rel="noreferrer noopener">comparison between GraphQL and Falcor</a>.</p>



<p>You don’t need to be famous to start a blog on Medium, all you have to do is sign up and start writing. Literally anyone can start a blog, or post on Reddit, and submit stuff to Hacker News. Do it now!</p>



<p>If you’re thinking about waiting on that blog until the code looks nicer, until the documentation is better etc., here’s a secret tip:&nbsp;<strong>don’t</strong>! Your project will never be perfect. In fact, if you’re like me, you’ll never think that your project is good enough. Fortunately, it doesn’t have to be. The sooner you talk about it the better: nobody expects a project or idea to be perfect in the early stages, but if you wait until you think it’s perfect, it will be difficult to make use of helpful criticism.</p>



<p>There’s another upside to writing and talking about your project early: We’re usually not the best at judging the merit of our own projects. If you put your idea out there early you can get feedback much sooner, and focus on building what’s really valuable. You might even find some early contributors that way.</p>



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



<p>As I mentioned earlier, an open source project lives and dies by its contributors. Apart from getting the word out early and often, a critical part of acquiring new contributors is to lower the barrier of entry and make it as easy as possible to contribute. If you can explain your project’s purpose to someone in a few sentences and get an example running for them in a few minutes, the chances are much higher that they’ll be able to understand enough about your project to be able to contribute to it.</p>



<p>Here are a few ways that we used to make Apollo Client easier to understand:</p>



<ul class="wp-block-list"><li>We have a&nbsp;<a href="https://github.com/apollostack/GitHunt-React" target="_blank" rel="noreferrer noopener">demo</a>&nbsp;that anyone can run, or copy-paste from</li><li>We have&nbsp;<a href="http://dev.apollodata.com/" target="_blank" rel="noreferrer noopener">extensive documentation</a></li><li>We wrote blog posts about many of the&nbsp;<a href="https://medium.com/p/the-concepts-of-graphql-bc68bd819be3" target="_blank" rel="noreferrer noopener">concepts</a>&nbsp;and&nbsp;<a href="https://medium.com/p/apollo-client-0-5-f1eb3f122ace" target="_blank" rel="noreferrer noopener">features</a></li><li>We made Apollo integrate with&nbsp;<a href="http://redux.js.org/" target="_blank" rel="noreferrer noopener">Redux</a>&nbsp;because&nbsp;<a href="https://egghead.io/courses/getting-started-with-redux" target="_blank" rel="noreferrer noopener">everyone gets Redux</a>.</li></ul>



<p>There’s still room to do a lot more, which is why we’re constantly working on improving our documentation and creating better examples.</p>



<h3 class="wp-block-heading" id="be49"><a href="#4-empowering-contributors" aria-hidden="true" class="aal_anchor" id="4-empowering-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>4. Empowering contributors</h3>



<p>Maintaining an open source project requires constant effort. Responding to issues and fixing bugs can be a lot of work, especially if your project becomes successful. It’s much better if that responsibility can be shared by more people. The best way to do that is to empower contributors and make sure they get the appreciation they deserve. Your goal should be to enable every contributor to become a potential maintainer.</p>



<p>Empowering contributors is one of the best things you can do for your project, because it will not only greatly increase the amount of work that can go into the project, it will also make the project much more likely to survive if one of the core contributors/maintainers pulls out.</p>



<p>Here are some of the things you can do to empower contributors:</p>



<ul class="wp-block-list"><li>Respond to issues and pull requests as soon as possible (but don’t overwork yourself)</li><li>Give people an opportunity to fix the bugs they find. Make sure to give them all the instructions they need to succeed.</li><li>Work with contributors to get their PRs merged quickly. As a new contributor, it’s very motivating to see your PR getting attention from the maintainers.</li><li>Make your project easier to contribute to by enforcing good coding style and good tests.</li><li>Let contributors make major contributions and listen to them when making major design decisions.</li></ul>



<p>On Apollo we’ve been incredibly lucky with the contributors we’ve had. Each of them contributed their own expertise to our project, and without them we wouldn’t be where we are today. Thanks to&nbsp;<a href="https://medium.com/u/fd3d3dea3cd3?source=post_page-----7c4708cf2a33----------------------" target="_blank" rel="noreferrer noopener">James Baxley III</a>&nbsp;we had an invaluable early production user of Apollo Client.&nbsp;<a href="https://medium.com/u/565e3f1289e1?source=post_page-----7c4708cf2a33----------------------" target="_blank" rel="noreferrer noopener">Nick Nance</a>&nbsp;helped us refactor&nbsp;<a href="https://github.com/apollostack/graphql-server" target="_blank" rel="noreferrer noopener">graphql-server</a>&nbsp;and now maintains and uses its hapi integration.&nbsp;<a href="https://github.com/DxCx" target="_blank" rel="noreferrer noopener">Hagai Cohen</a>&nbsp;took it upon himself to do a complete rewrite of&nbsp;<a href="https://github.com/apollostack/graphql-tools" target="_blank" rel="noreferrer noopener">graphql-tools</a>&nbsp;in Typescript and has contributed major features to&nbsp;<a href="https://github.com/apollostack/graphql-server" target="_blank" rel="noreferrer noopener">graphql-server</a>&nbsp;as well. Thanks a lot guys, you are awesome!!</p>



<p>Of course that’s only the tip of the iceberg, and we have many more great contributors that I wish I had the space to write about here! Each and every contribution makes a difference, no matter how small. If you’re one of the contributors, thank you very much for your efforts! I hope I’ll get a chance to write about your help in a future post!</p>



<h2 class="wp-block-heading" id="0329"><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>While getting off the ground and getting the word out are things that should require less and less of your time as your project matures, making your project easy to understand and empowering contributors are things that require constant attention. These are also the things we still feel like we need to improve on the most:</p>



<ul class="wp-block-list"><li>We still need to make the project easier to contribute to by simplifying the code and writing better documentation.</li><li>We still need to get better at empowering and connecting with contributors.</li><li>We still need to work harder to get PRs merged and issues resolved quickly.</li></ul>



<p>Despite all the things that still need to improve, I’m extremely optimistic and constantly amazed by how far we have come: In less than 10 months Apollo Client went from zero to over 1600 stars on GitHub. It now has 60 contributors and over 2300 commits in 86 releases, and with over 10,000 downloads per week it is the most popular GraphQL client on npm!</p>



<p>None of this would have been possible without our amazing&nbsp;<a href="https://github.com/apollostack/apollo-client/graphs/contributors" target="_blank" rel="noreferrer noopener">community of open-source contributors</a>, so a big Thank You to all of you!</p>



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



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



<p>Alright, after all this talking, it’s time to take action! You too can become an open source contributor or maintainer!</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="460" height="504" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_NnqPIq_rerd2CuN2rbzVTg.png" alt="" class="wp-image-490" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_NnqPIq_rerd2CuN2rbzVTg.png 460w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_NnqPIq_rerd2CuN2rbzVTg-274x300.png 274w" sizes="auto, (max-width: 460px) 100vw, 460px" /><figcaption>To build to Open Source software!</figcaption></figure>



<p>If you have an idea for an open source project, write up your idea and then share it with the rest of the community! If you feel the itch to start coding right away, that’s okay too, but remember to get the word out.</p>



<p>If you want to contribute to open source software, are interested in GraphQL, or simply like learning new things, consider joining the Apollo community! We’re a welcoming bunch, and there’s always plenty to do.</p>



<p>Go to our&nbsp;<a href="https://github.com/apollostack" target="_blank" rel="noreferrer noopener">GitHub repos</a>&nbsp;and find a project you’re interested in, or&nbsp;<a href="http://www.apollodata.com/#slack" target="_blank" rel="noreferrer noopener">sign up for our Slack</a>&nbsp;and join the contributing channel.</p>



<p>Let’s move Open Source forward together!</p>


Get involved in open source today!


<figure class="wp-block-image"><img decoding="async" src="https://miro.medium.com/max/590/1*qklQHkc1Y1Srk_vlo5GEOQ.png" alt=""/></figure>



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



<p>NewSpring Church is a Southern Baptist megachurch headquartered in Anderson, South Carolina. In addition to its main location, which receives an average of 32,000 visitors per week, NewSpring has more than a dozen locations in cities and towns throughout the state.</p>



<div class="wp-block-image"><figure class="alignleft size-large"><img loading="lazy" decoding="async" width="300" height="77" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_QAWOno5bP8XMRCSmp1BKag.png" alt="" class="wp-image-479"/></figure></div>



<p>NewSpring is one of the fastest-growing churches in the country. The church’s development team has had to build and maintain a variety of websites and applications for the various locations in order to adequately serve employees and congregants. The church also operates several institutions, including a leadership college and a youth ministry, each with its own technical needs.</p>



<p>Due to the massive increases in growth and attendance year after year, NewSpring’s technical team has cobbled together a number of internal and third-party solutions in order to keep everything running. “I came into an organization that had grown very fast, and needed very quickly to sign up for a number of different services to be able to sustain itself,” said James Baxley, NewSpring’s director of web systems development. “It was a very distributed data system, with a lot of stuff in the wrong place and not really in sync.” The team wanted to unify the various solutions put into place so that users could have one central hub of activity without signing into a dozen different portals.</p>



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



<p>With this objective in mind, Baxley and the NewSpring team began to seriously look into adding&nbsp;<a href="https://graphql.com/" target="_blank" rel="noreferrer noopener">GraphQL</a>&nbsp;into its technical stack. The team already relied on ExpressionEngine, a PHP and MySQL content management system, as well as third-party church management software and a number of REST endpoints. Because the stack was so large, any new solution needed to play nicely with these existing technologies.</p>



<p>When deciding whether to use GraphQL, the development team had three main concerns:</p>



<ul class="wp-block-list"><li>First, GraphQL was a very new technology; the specifications had only been officially been announced five or six months previously. The team needed reassurance that GraphQL would have support for the foreseeable future and wasn’t just a flash in the pan.</li><li>Second, even a delay of 100 milliseconds is enough to push users away from a website, so speed would be a paramount concern.</li><li>Third, NewSpring keeps track of a large amount of sensitive data, including financial information and personal conversations. Protecting user data was a critical need for the new system.</li></ul>



<p>“Whatever choice we made in how to handle our data had to provide the security and reliability to keep the lights on and set us up for future success,” said Baxley. “GraphQL is that choice.”</p>



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



<p>To supplement the adoption of GraphQL, NewSpring used&nbsp;<a href="http://apollodata.com/optics" target="_blank" rel="noreferrer noopener">Apollo Optics</a>&nbsp;to provide system analytics. Optics let the NewSpring team target queries that were unnecessarily slow or causing problems with caching, allowing them to make numerous improvements and optimizations. Optics makes it simple for the team to find any significant spike in response time, offering a closer look in order to identify where the issue is coming from and determine how much of the problem is due to the application’s caching mechanisms.</p>



<figure class="wp-block-image alignfull size-large"><img loading="lazy" decoding="async" width="1024" height="467" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_7sbz2oa3vivbXH2qAqMsVw-1024x467.png" alt="" class="wp-image-478" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_7sbz2oa3vivbXH2qAqMsVw-1024x467.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_7sbz2oa3vivbXH2qAqMsVw-300x137.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_7sbz2oa3vivbXH2qAqMsVw-768x350.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_7sbz2oa3vivbXH2qAqMsVw-1536x701.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_7sbz2oa3vivbXH2qAqMsVw-2048x934.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_7sbz2oa3vivbXH2qAqMsVw-1200x547.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_7sbz2oa3vivbXH2qAqMsVw-1980x903.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Apollo Optics Trace View</figcaption></figure>



<p>By using&nbsp;<a href="http://apollodata.com/optics" target="_blank" rel="noreferrer noopener">Apollo Optics</a>&nbsp;to sort by the length of time taken for a query, the NewSpring team can easily identify the weak spots in their application. For example, the development team noticed that looking up a person was one of the most time-consuming tasks because the application needed to move from a user account to a record for a person, which could potentially involve merge operations in SQL. Initially, developers assumed that one person would only have one user account and only require a simple check, but this proved not to be the case in production. Optics allowed NewSpring to troubleshoot the issue and tag this pain point for optimization.</p>



<p>“Optics was the fastest way for us to take GraphQL projects from prototype to production” — James Baxley</p>



<p>The operations team also uses Optics to analyze queries during major events, such as Sunday or holiday services. The application lets them view the different usage patterns in the form of GraphQL queries to give them an idea of how successful their efforts have been. By helping to identify inefficiencies, points of overuse and potential areas of improvement, Optics has become a key part of the NewSpring team’s daily toolbox. “Optics was the fastest way for us to take GraphQL projects from prototype to production,” said Baxley.</p>



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



<p>After working with GraphQL and Optics, the NewSpring team is excited about the chance to use what they’ve built and help other churches unify around a common schema. In addition, the team wants to implement some key system features that have been sorely missing so far.</p>



<p>First, Apollo is able to support subscriptions as they are implemented in GraphQL. The NewSpring team is hoping to use the subscriptions feature to build a chat platform using GraphQL, giving end users more functionality and putting a cutting-edge technology into production.</p>



<p>Second, NewSpring’s GraphQL server is currently written in JavaScript, but the team has developed an application in conjunction with other churches written in C#. Moving forward, one of the biggest tasks will be to transition the NewSpring GraphQL server to C#, so that they can promote GraphQL amongst the church tech community.</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="James Baxley - Using Apollo in production at NewSpring Church" width="580" height="326" src="https://www.youtube.com/embed/RGfn8GfC_uE?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<p>If you liked this case study, please show your love with the ❤ below! Have a story to share? Let us know in the comments below!</p>



<p>Have a GraphQL project you’d like to instrument?&nbsp;<a href="https://optics.apollodata.com/" target="_blank" rel="noreferrer noopener">Try Apollo Optics for free »</a>&nbsp;No credit card required.</p>


Managing Explosive Growth with Apollo Optics — A Case Study


<figure class="wp-block-image"><img decoding="async" src="https://miro.medium.com/max/2732/1*ppzuZZgSRJ1zvc3pv_HwVw.png" alt=""/></figure>



<p><a href="https://medium.com/u/9ef1d7baf4fe?source=post_page-----4b0f0df53321----------------------" target="_blank" rel="noreferrer noopener">Tom Coleman</a>&nbsp;and I went on the December 5 episode of React Native Radio, and we got asked some really great questions. You can&nbsp;<a href="https://devchat.tv/react-native-radio/47-tom-coleman-and-sashko-stubailo-of-apollo" target="_blank" rel="noreferrer noopener">listen to the episode on devchat.tv</a>, but if you don’t want to take an hour to hear the whole conversation I’ve summarized my 5 favorite parts below. Let’s dive in!</p>



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



<p><em>I guess before we get too deep into some of this technical stuff, for people that are listening that maybe haven’t used Apollo. What is the elevator pitch for Apollo? When you guys built this thing, what was the main problem that you were trying to solve? What’s the main draw and idea behind it?</em><br><br><strong>Sashko:&nbsp;</strong>At the end of the day it’s very simple. Our goal with Apollo is to make it easy for people to get all the benefits of GraphQL in their apps, regardless of what frontends or backends they are using. The benefits of GraphQL are so great that we don’t have to do very much on top of that. It’s just about enabling people to take advantage of GraphQL in the best way.<br><br>For example, Apollo Client is a caching JavaScript client for GraphQL. React Apollo is a really popular way to use GraphQL data in your React application. The integration there is quite simple because the Apollo client core does most of the work for you. You can come in, you can say, “Okay, I don’t like the way it does Optimistic UI, and I’m going to replace that part.” Then you have essentially your own GraphQL client that does what you need. Or you can integrate with Polymer or Angular or Ember, or any other framework that you like. The idea is it implements the core stuff that’s really useful and then you can customize from there to get what you need.<br><br>On the server it’s a lot more JavaScript focused. The server-side tools we’re building are just some layers around the JavaScript reference implementation, but just make it easier to describe your schema, or set up a server, things like that.<br><br><strong>Tom:</strong>&nbsp;Our specialty I suppose is primarily JavaScript, given that we’re a dev tools company that build a JavaScript framework, but it’s not exclusively that. For instance we now have a client for iOS that we’ve been building, just because there wasn’t really a complete iOS client out there for GraphQL that people were commonly using, so we saw a need for that and so invested a bunch of time in getting that going.<br><br>That’s really the focus of Apollo, is just making it easier for people to get going, as Sashko said, especially in the open source world. It’s about making your experience better.</p>



<p><a href="http://dev.apollodata.com/" target="_blank" rel="noreferrer noopener">Learn more on the Apollo Client home page and docs!</a></p>



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



<p><em>Could I use Redux or any one of these other Flux frameworks with Apollo? Is there any reason why I would want to do something like this?</em><br><br><strong>Sashko:</strong>&nbsp;It’s even better than that. Apollo client is built on top of Redux. Basically everyone’s who’s building React apps is using Redux to manage their data. That was one of the things we were missing when we started, is the way to integrate that with GraphQL. That’s actually where Apollo Client started from, the idea that using Redux with GraphQL should be really powerful and intuitive.<br><br>The way Apollo client works is you can use it without thinking about Redux, you just initialize the client and it just works, but you can also attach it to an existing Redux store. You get the benefit of being able to look at the Redux dev tools. You can see exactly where your query results are coming in, and how they’re being recorded in the store alongside your client data.<br><br>It’s really natural to use your Redux data as input into your query results. It’s actually designed especially for people who like the insight into their app data that Redux gives you, and people that are already using Redux in their app.<br><br><em>That’s so cool. I’m so glad that I asked that question.</em><br><br><strong>Sashko:&nbsp;</strong>We saw a billion questions on the internet that were like, “How do I use Redux for GraphQL?” It’s silly that there wasn’t a first class way to do that, because everyone is using Redux and everyone wants to learn about GraphQL. They should go together, because they’re the two most popular data related things right now, so yeah I’m really fond of that.</p>



<p><a href="http://dev.apollodata.com/react/redux.html" target="_blank" rel="noreferrer noopener">Learn about integrating Apollo with an existing Redux store in the docs!</a></p>



<h2 class="wp-block-heading" id="0dea"><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</h2>



<p><em>One other question that I want to ask is, since we’re talking about the Redux and components. In my current job I have to do a lot of server site rendering, and I’m just wondering if I start using Apollo, do I have to do any configuration or it comes out of the box?</em><br><br><strong>Tom:</strong>&nbsp;Yeah, that’s actually something that we have in the React integration of Apollo client. There’s a function in there called renderToStringWithData. It basically just calls React render to string, but before doing that it walks the tree, figures out which queries you need to call, calls them, waits for the data to come back, and then renders the string. So in a sense I guess you don’t have to really do anything beyond write one line of code that calls it. In general, in my experience, you don’t really need to change the way that you wrote your components, it should all just work out of the box. Like any isomorphic thing there can be caveats and stuff, but I haven’t seen any problems with SSR in Apollo client itself.<br><br><strong>Sashko:</strong>&nbsp;One other cool thing I wanted to add to that, because all of the data is stored in Redux, the way that you do server hydration is identical. You just serialize the contents of the Redux store and then put that back in on the client. It also works with some of these other libraries that help manage Redux data. They work out of the box, because it’s just regular Redux stuff.<br><br><strong>Tom:</strong>&nbsp;And some users that generate their HTML on the server outside of Node, for instance some Rails users, have also been able to inject hydrated data, which is really cool.</p>



<p><a href="http://dev.apollodata.com/react/server-side-rendering.html" target="_blank" rel="noreferrer noopener">Read about React-Apollo SSR in the docs.</a></p>



<h2 class="wp-block-heading" id="ec01"><a href="#future-plans-for-apollo" aria-hidden="true" class="aal_anchor" id="future-plans-for-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>Future plans for Apollo</h2>



<p><em>Nader: What are you guys working on now and what do you want to introduce into the project in the near and far future?</em><br><br><strong>Sashko:</strong>&nbsp;I am really excited about this because we only very recently got to the point where we’re really comfortable with the set of features Apollo Client has as a GraphQL client. We have high standards so for us stuff like server-side rendering was included as a base level feature that we wanted to have. The next step we’re working on is sugar on top you might say.<br><br>The first thing is working on performance, so benchmarking in our own apps, what can we do to squeeze out a little bit of extra performance here and there, or to find out if it’s even a problem. I think it’s particularly something that people might care about on really slow devices like mobile. React Native might be running on some really old device and in that case, we’re not really sure yet exactly what the characteristics will be.<br><br>The other thing is just things we’ve never really seen done before. One thing in particular I’m really excited about is having something like an Apollo dev tools. There’s the Redux dev tools for example which gives you some insight into your redux store. I think it’s one of the most exciting parts about using redux, is that you can see exactly what’s going on in your app.<br><br>Because our redux store and our actions are much more meaningful, we know exactly what action it’s going to be firing, what they mean. We can build an experience on top of that, that will show you exactly what data from your server is cached, let you run GraphQL queries inside Chrome against your client store, tell you what queries are attached to which UI component and when they’re re-running and why and how often UI is working. We think we can build some really great tooling that will help people understand even more about what their app is doing at any given time.</p>



<p>(Editor note: The dev tools we were talking about were built as part of our company hack week and released a week ago!)<a href="https://dev-blog.apollodata.com/apollo-client-developer-tools-ff89181ebcf" target="_blank" rel="noreferrer noopener">Apollo Client Developer ToolsGraphQL debugging tools for Apollo Client in the Chrome developer consoledev-blog.apollodata.com</a></p>



<p><strong>Tom:&nbsp;</strong>Yeah. The other thing that I wanted to mention that we’re looking at in the larger context is investigating if there are ways to make it even easier to get started, especially on the server. It would be great to have, at least for that first exposure to GraphQL, a way to just get something up and running really quickly, start building your frontend, and start playing around with what your schema might look like. We’re big proponents of what we call&nbsp;<a href="https://dev-blog.apollodata.com/navigating-your-transition-to-graphql-28a4dfa3acfb#.4t5ahyr5u" target="_blank" rel="noreferrer noopener">GraphQL first</a>&nbsp;application development, which is basically where you start with your schema.</p>



<p>Once you’ve done that you can start building your frontend and backend in parallel, so figuring out a way to really make it really easy to stand up a schema and start playing with it, and have a server that serves it, but without necessarily having to properly implement the server in a production way could be really fruitful, so something we’re investigating at the moment. I think it would be really cool.</p>



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



<p><em>For anyone listening that might not be familiar enough with GraphQL in general, is this something they can pick up and attach to the their existing Rest API database implementation, or does their backend need to be rewritten to handle this type of technology.</em></p>



<p><strong>Tom:</strong>&nbsp;GraphQL is definitely something that you can add on, both on the frontend and the backend. For instance in the Node world, if you’re using Express you can just add a new route, typically called /graphql, which will serve GraphQL queries. You can continue to serve all your old endpoints, and you may continue to do that indefinitely. There’s no reason you can’t use Rest and GraphQL side by side. On the server you have GraphQL resolvers, which are the functions that get called to figure out what the result of a query should be. They can go ahead and call any other function in your backend. Typically they should be pretty thin and they should go straight to your model layer, where all of the logic should live.</p>



<p>Typically your REST endpoint handlers and GraphQL resolvers will look pretty similar, and they both just call out to a model somewhere with some arguments. They don’t do a lot of logic.</p>



<p>On the front end you can definitely start using GraphQL while continuing to do whatever it is that you were doing before to get data. You could have one part of your site which uses Apollo or Relay to fetch data, and attach it to one sub-tree of your React rendering tree, and the rest of your tree might use data that’s been fetched into Redux via REST or whatever other mechanism you have fetching data.</p>



<p>There’s really, absolutely no reason why you shouldn’t do that. In fact that’s what a lot of people do and do it very successfully. Our hope would be that over time all of your app would become GraphQL or Apollo, but of course that going to depend on what makes sense for you and what works best.</p>


Apollo on React Native Radio


<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><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

How We Built GraphQL Subscriptions with Apollo

GraphQL Summit 2016 in Tweets


<p>GraphQL has only been a publicly-available technology for a little over a year, so there aren’t yet clear best practices. But we’re constantly learning, and Facebook’s own use of GraphQL for over 4 years has been a treasure of experience. There’s one thing in particular that is starting to emerge as a de-facto best practice in the GraphQL community:</p>



<p><strong>It’s best to write your GraphQL queries as static strings using the GraphQL query language.</strong></p>



<p>This means:</p>



<ol class="wp-block-list"><li>It’s best to avoid generating queries dynamically at runtime</li><li>It’s good to use the GraphQL query language directly, rather than a language-specific syntax or query builder</li></ol>



<p>You have two approaches: write the query strings inside your code, using something like a&nbsp;<a href="https://github.com/apollostack/graphql-tag" target="_blank" rel="noreferrer noopener">tagged template literal</a>&nbsp;in JavaScript, or alongside your code in .graphql files, which is the preferred approach for&nbsp;<a href="https://github.com/apollostack/apollo-ios" target="_blank" rel="noreferrer noopener">native mobile clients</a>.</p>



<p>The most common objection is that if you use strings for queries, you won’t get features like editor integration and code highlighting, but in fact it’s just the opposite: all of the best GraphQL tools and integrations rely on the static query language.</p>



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



<p>Below is an animation taken from the <a rel="noreferrer noopener" href="https://github.com/jimkyndemeyer/js-graphql-intellij-plugin" target="_blank">GitHub page</a> of Jim Kynde Meyer’s GraphQL IntelliJ plugin:</p>



<figure class="wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-gfycat"><div class="wp-block-embed__wrapper">
https://gfycat.com/unlawfuldisastrousladybird
</div></figure>



<p>As you can see, with this plugin your query strings become much more than just strings — they give you validation errors, autocompletion, highlighting, and more. Because this tool just works with the GraphQL query language, it also works with all popular GraphQL clients, including&nbsp;<a href="http://dev.apollodata.com/" target="_blank" rel="noreferrer noopener">Apollo</a>&nbsp;and&nbsp;<a href="https://facebook.github.io/relay/" target="_blank" rel="noreferrer noopener">Relay</a>.</p>



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



<p>Internally at Facebook, GraphQL queries are used to generate native code that does the fetch and returns typed results. You can read more about this in our&nbsp;<a href="https://medium.com/apollo-stack/native-code-generation-at-facebook-7d6d0db4f3ee#.hp9jv7pvo" target="_blank" rel="noreferrer noopener">previous post summarizing a talk by Hyo Jeong from Facebook</a>.</p>



<p>But it’s not just a Facebook thing anymore; the community is starting to catch up! For example, take&nbsp;<a href="https://medium.com/apollo-stack/bringing-graphql-to-ios-fc46423befa1#.4598i3hcp" target="_blank" rel="noreferrer noopener">Apollo iOS</a>, a code-generation GraphQL client for Swift. This tool has some great features:</p>



<ol class="wp-block-list"><li>Detects all .graphql files in the project</li><li>Validates queries against your schema</li><li>Rebuilds your code when you change the queries</li><li>Gives you typed result objects based on queries and fragments</li></ol>



<p>It integrates deeply with the Swift type system, making sure that fields are declared as optional when they are nullable in the GraphQL schema, for example.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="341" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_eqH_9oFCIfmVytVBzfKNwg-1024x341.png" alt="" class="wp-image-385" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_eqH_9oFCIfmVytVBzfKNwg-1024x341.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_eqH_9oFCIfmVytVBzfKNwg-300x100.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_eqH_9oFCIfmVytVBzfKNwg-768x255.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_eqH_9oFCIfmVytVBzfKNwg-1536x511.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_eqH_9oFCIfmVytVBzfKNwg-1200x399.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_eqH_9oFCIfmVytVBzfKNwg.png 1666w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Autocompletion for typed GraphQL results, based on the exact fields requested.</figcaption></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="462" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_gqXw90g6I2W1joz4QX1EOw-1024x462.png" alt="" class="wp-image-384" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_gqXw90g6I2W1joz4QX1EOw-1024x462.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_gqXw90g6I2W1joz4QX1EOw-300x135.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_gqXw90g6I2W1joz4QX1EOw-768x347.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_gqXw90g6I2W1joz4QX1EOw-1200x542.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_gqXw90g6I2W1joz4QX1EOw.png 1232w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Highlighting and validation of GraphQL queries directly inside Xcode.</figcaption></figure>



<p>And that’s just the start — people in the Apollo community are working on&nbsp;<a href="https://github.com/apollostack/apollo-codegen/tree/ts-codegen" target="_blank" rel="noreferrer noopener">TypeScript and Flow code generation</a>&nbsp;as well, so that you can get the same experience in your JS app! Because GraphQL is so structured, you can make sure you get only the data you need, and your tools can check it for you.</p>



<p><em>Update after publication: Check out the detailed post below about TypeScript code generation:</em><a href="https://dev-blog.apollodata.com/graphql-dx-d35bcf51c943" target="_blank" rel="noreferrer noopener">An enhanced GraphQL developer experience with TypeScriptDevelop faster and better with the GraphQL type systemdev-blog.apollodata.com</a></p>



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



<p>Have you even wondered what GraphQL&nbsp;<a href="http://graphql.org/learn/queries/#operation-name" target="_blank" rel="noreferrer noopener">operation names</a>&nbsp;are for? For example, in the following query:</p>



<pre class="wp-block-preformatted">query HeroNameAndFriends($episode: Episode) {<br>  hero(episode: $episode) {<br>    name<br>    friends {<br>      name<br>    }<br>  }<br>}</pre>



<p>The&nbsp;<strong>HeroNameAndFriends</strong>&nbsp;is the operation name of the query. Fragments have names, too. In REST, we had endpoint URLs to track what data was being accessed. Operation names are the equivalent for GraphQL.</p>



<p>These can be&nbsp;<em>extremely</em>&nbsp;useful tools to use on the server side to analyze the performance and frequency of your GraphQL queries. Facebook uses them heavily to track changes in their native iOS and Android apps over time, which use their closed-source internal GraphQL clients.</p>



<p>Unfortunately, most open-source GraphQL clients available today, including Relay 1 and Lokka, generate dynamic queries on the fly, making the operation name and fragment names no longer meaningful (for example, a common fragment name you’ll see on your server if you’re using Relay 1 is&nbsp;<em>RQL_12</em>or similar).</p>



<p>That’s why Apollo Client only uses static queries with no dynamic generation at all, keeping your operation and fragment names intact. Relay 2 is being re-architected to have much more predictable queries as well.</p>



<p><em>If you want to take advantage of this on your server, check out our server-side logging product,&nbsp;</em><a href="http://www.apollodata.com/optics" target="_blank" rel="noreferrer noopener"><em>Apollo Optics</em></a><em>!</em></p>



<h2 class="wp-block-heading" id="bca1"><a href="#4-persisted-queries" aria-hidden="true" class="aal_anchor" id="4-persisted-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>4. Persisted queries</h2>



<p><em>Note: Since the time of writing,&nbsp;</em><strong><em>we launched persisted queries for Apollo Client</em></strong><em>! Read about it in the post below:</em><a href="https://dev-blog.apollodata.com/persisted-graphql-queries-with-apollo-client-119fd7e6bba5" target="_blank" rel="noreferrer noopener">Persisted GraphQL Queries with Apollo ClientIf you’re a regular at a diner, you know that saying the full name of a dish is a rookie move. If you refer to the…dev-blog.apollodata.com</a></p>



<p>In addition to queries being analyzable, trackable, and identifiable, there’s one more important benefit to static queries. It’s a concept Facebook uses heavily and has been calling&nbsp;<strong>persisted queries</strong>.</p>



<p>This question has been asked in many ways before:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>“If my GraphQL server accepts and executes any query sent to it, how can I prevent malicious clients from querying too much data, or sending really expensive queries?”</p></blockquote>



<p>Well, one answer is to introduce a complexity measurement for queries, or to limit the length of time they can spend executing. But here’s how Facebook does it:</p>



<ol class="wp-block-list"><li>In development mode, the server accepts any query you throw at it.</li><li>When you deploy your code, all of the queries are saved to a database.</li><li>In production, the server only supports the queries that have been previously stored.</li></ol>



<p>As an added bonus, this enables Facebook to save bandwidth by not sending the entire query string (the mobile news feed query was many kilobytes in size). Since all of the queries are already stored on the server, they just need to send a query ID and the pre-validated query is looked up directly.</p>



<p>This means you no longer have to worry about arbitrary queries hitting your server in production, and it’s very easy to identify which query is causing a performance issue since you can just look up the ID.</p>



<p>Currently none of the open source GraphQL clients include tools to enable this, but the next version of Apollo Client will have a tool to pull queries out of your code and save them. The ability to use persisted queries is also one of the reasons Relay 2 will have a much more static architecture, which is critical for production use at Facebook.</p>



<h2 class="wp-block-heading" id="39e6"><a href="#5-a-common-language-for-data-fetching" aria-hidden="true" class="aal_anchor" id="5-a-common-language-for-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>5. A common language for data fetching</h2>



<p>There’s one more important reason why you should write GraphQL queries directly in your code rather than using a dynamic query builder: It’s amazing to be able to use a GraphiQL to explore the data available from your API, then paste that query into your UI code and be good to go. Having a shared language to talk about data fetching is extremely useful to be able to share tools and vocabulary across different apps.</p>



<p>The API developers can easily read any query across any client codebase and see what the data requirements are, and the UI developers can look into the server logs to identify why their queries are taking longer than expected. This kind of communication is facilitated by the static and language-agnostic nature of GraphQL.</p>



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



<p>After talking with Facebook, building our own tools, and writing several production apps in GraphQL, we’re pretty convinced that using static GraphQL queries in UI code is the right approach. You can expect to see our open source tools, like the Apollo JS Client, Apollo iOS, and the Apollo GraphQL server, gaining features to better enable this approach soon.</p>



<p>If this is something you’re interested in, let’s work together! Getting complete code generation for a variety of typed languages and building tools to collect queries from the UI and persist them to the server is going to require a lot of collaboration across the whole GraphQL ecosystem.</p>



<p>Today, we’ve only scratched the surface of the tooling that could be built around GraphQL clients and servers. There are so many more benefits to be gained.</p>


5 benefits of static GraphQL queries


<figure class="wp-block-image"><img decoding="async" src="https://miro.medium.com/max/3038/1*h1RDyEx7ccDzrxK86tgjfg.png" alt=""/><figcaption>This is a specific collection of packages we put together for a Node.js server and a JavaScript client, but an equivalent set of packages can and should exist for every server and client platform.</figcaption></figure>



<p>Real-time subscriptions have been an exciting topic in the GraphQL community almost from the start.&nbsp;<a href="https://medium.com/u/8d9de11eda52?source=post_page-----1d89b1934c18----------------------" target="_blank" rel="noreferrer noopener">Laney Kuenzel</a>&nbsp;has given several talks about&nbsp;<a href="https://medium.com/apollo-stack/new-features-in-graphql-batch-defer-stream-live-and-subscribe-7585d0c28b07#.n5am6tg1c" target="_blank" rel="noreferrer noopener">Facebook’s internal implementation of subscriptions</a>, and there have been a few community implementations. Unfortunately, a lot of these have been coupled to specific frameworks or application architectures, so it’s been hard for GraphQL subscriptions to take off as a standard.</p>



<p>We wanted to build something anyone can integrate into their servers and clients, without reinventing the common features any implementation would need. That way, as a community we can start building and sharing integrations for different backends, such as Redis, PostgreSQL triggers, Kafka, and more.</p>



<p>That’s why we are shipping an open-source GraphQL subscriptions implementation designed to be as general as possible.</p>



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



<p>Today, I’d like to introduce you to two packages in particular:</p>



<ol class="wp-block-list"><li><a href="https://github.com/apollostack/graphql-subscriptions" target="_blank" rel="noreferrer noopener"><strong>graphql-subscriptions</strong></a>, a package you can use to manage parsing, pub/sub handling, and execution for GraphQL subscriptions with GraphQL.js, Facebook’s reference JavaScript implementation. This is completely transport and backend independent, and only implements the kinds of things we think could be part of the spec for GraphQL subscriptions some day.</li><li><a href="https://github.com/apollostack/subscriptions-transport-ws" target="_blank" rel="noreferrer noopener"><strong>subscriptions-transport-ws</strong></a>, a server and client implementation of a simple Websocket protocol for GraphQL subscriptions. This is not coupled to any specific GraphQL clients, and can be used from Apollo, Relay, or just plain JavaScript. It implements subscribing, unsubscribing, and receiving new results or errors for subscriptions. You can easily run it alongside your HTTP server, and plug it into your schema via the graphql-subscriptions package above.</li></ol>



<p>We’re getting started on integrating GraphQL subscriptions into our production apps, but we wanted to open source the tools above up front, so that we can all work together on them as a community. If this sounds interesting, try them out, and open an issue or maybe file a PR with an improvement.</p>



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



<p><a href="https://github.com/apollostack/graphql-subscriptions" target="_blank" rel="noreferrer noopener">GitHub</a>,&nbsp;<a href="https://www.npmjs.com/package/graphql-subscriptions" target="_blank" rel="noreferrer noopener">npm</a></p>



<p>When you build an HTTP-based GraphQL server in JavaScript, you usually use Facebook’s reference GraphQL.js execution engine, which accepts a query string and a schema and returns a result. The&nbsp;<em>graphql-subscriptions</em>&nbsp;package is a small wrapper around GraphQL.js that can execute subscriptions as well.</p>



<p>The main component of&nbsp;<em>graphql-subscriptions</em>&nbsp;is the&nbsp;<strong>SubscriptionManager</strong>, which takes a schema, a pub-sub handler, and some optional configuration in the form of&nbsp;<em>setup functions</em>, and creates an object which can execute subscriptions in response to pub-sub events.</p>



<p>What is a&nbsp;<em>setup function</em>? Well, it’s simple. While queries and mutations execute in one step, GraphQL subscriptions run in two steps:</p>



<ol class="wp-block-list"><li>Receive the subscription string, validate it, store it, and set up any state necessary on the server to subscribe to the right channels.</li><li>Receive a pub-sub message on some channel, execute the subscription, and send the result to the client.</li></ol>



<p>The second step is handled by your GraphQL resolvers, as usual. But the first is a new thing, and that’s what the setup functions in the GraphQL subscriptions package do. By default, they just use the subscription field as the channel name, which makes it easy to write simple demos.</p>



<p>The best part about <em>graphql-subscriptions</em> is that it’s totally decoupled from the pub-sub system and transport you are using. For example, you can plug it into a <a rel="noreferrer noopener" href="https://medium.com/apollo-stack/graphql-subscriptions-with-redis-pub-sub-f636fc84a0c4#.i7bxnctwy" target="_blank">Redis implementation</a> we recently blogged about. What about the transport? Well, before we move on to the transport, let’s run some very simple GraphQL subscriptions using just GraphQL.js and the <em>graphql-subscriptions</em> package:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">// npm install graphql graphql-tools graphql-subscriptions
const { PubSub, SubscriptionManager } = require(&#039;graphql-subscriptions&#039;);
const { makeExecutableSchema } = require(&#039;graphql-tools&#039;);

// Our &quot;database&quot;
const messages = [];

// Minimal schema
const typeDefs = `
type Query {
  messages: [String!]!
}
type Subscription {
  newMessage: String!
}
`;

// Minimal resolvers
const resolvers = {
  Query: { messages: () =&gt; messages },
  // This just passes through the pubsub message contents
  Subscription: { newMessage: (rootValue) =&gt; rootValue },
};

// Use graphql-tools to make a GraphQL.js schema
const schema = makeExecutableSchema({ typeDefs, resolvers });

// Initialize GraphQL subscriptions
const pubsub = new PubSub();
const subscriptionManager = new SubscriptionManager({ schema, pubsub });

// Run a subscription
subscriptionManager.subscribe({
  query: `
    subscription NewMessageSubscription {
      newMessage
    }
  `,
  callback: (err, result) =&gt;
    console.log(`New message: ${result.data.newMessage}`),
});

// Create a message
const helloWorldMessage = &#039;Hello, world!&#039;;

// Add it to &quot;database&quot;
messages.push(helloWorldMessage);

// Push it over pubsub, this could be replaced with Redis easily
pubsub.publish(&#039;newMessage&#039;, helloWorldMessage);

// Prints &quot;New message: Hello, world!&quot; in the console via the subscription!</code></pre>



<p>As you can see, the&nbsp;<em>graphql-subscriptions</em>&nbsp;package is the only thing you need to start running subscriptions against your schema and getting updates. Just like there is often one popular GraphQL execution engine for each server-side language, we think there should be one core subscription implementation, so that people can target it when writing tools and backend integrations. See how this is possible by&nbsp;<a href="https://medium.com/apollo-stack/graphql-subscriptions-with-redis-pub-sub-f636fc84a0c4#.wejfu4x6i" target="_blank" rel="noreferrer noopener">reading about the Redis integration</a>.</p>



<p>But it’s not quite enough to go off and write a real app; you also need some way to get those results from a client. That’s where the transport comes in.</p>



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



<p><a href="https://github.com/apollostack/subscriptions-transport-ws" target="_blank" rel="noreferrer noopener">GitHub</a>,&nbsp;<a href="https://www.npmjs.com/package/subscriptions-transport-ws" target="_blank" rel="noreferrer noopener">npm</a></p>



<p>This package includes a client and server that works with&nbsp;<em>graphql-subscriptions</em>&nbsp;from above. It defines a minimal websocket protocol that only includes support for starting and stopping subscriptions, and receiving data. It doesn’t even support queries and mutations, since we think it’s currently best to do those over the more standard HTTP transport. Here’s a summary of the messages used by the transport at the time of writing:</p>



<ul class="wp-block-list"><li>Client to server: SUBSCRIPTION_START, SUBSCRIPTION_END</li><li>Server to client: SUBSCRIPTION_SUCCESS, SUBSCRIPTION_FAIL, SUBSCRIPTION_DATA</li></ul>



<p>As you can see, there is nothing extra in there — just the minimal set of operations needed to run subscriptions. It’s designed to run alongside your existing GraphQL setup.</p>



<p>Here’s how easy it is to add GraphQL subscriptions to a basic Node server using this package:</p>



<pre class="wp-block-preformatted">import { createServer } from 'http';<br>import { SubscriptionServer } from 'subscriptions-transport-ws';const websocketServer = createServer((request, response) =&gt; {<br>  response.writeHead(404);<br>  response.end();<br>});<br><br>websocketServer.listen(WS_PORT, () =&gt; console.log(<br>  `Websocket Server is now running on http://localhost:${WS_PORT}`<br>));<br><br>new SubscriptionServer(<br>  { subscriptionManager },<br>  websocketServer<br>);</pre>



<p>As you can see we just pass the&nbsp;<em>subscriptionManager</em>&nbsp;we created above into a new&nbsp;<strong>SubscriptionServer</strong>&nbsp;instance, which attaches itself to a regular Node web server. You can also pass any options you need, such as a per-subscription&nbsp;<em>context</em>.</p>



<p>Now let’s try calling this subscription over the network, instead of before when we had it in-process!</p>



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



<p>Luckily, the <em>subscriptions-transport-ws</em> package also includes a handy client implementation, which we can use to connect to our server and run some subscriptions:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">// To run this code yourself:
// 1. Download and run the demo server: https://github.com/apollostack/frontpage-server
// 2. Use create-react-app to create a build system
// 3. npm install subscriptions-transport-ws
// 4. Replace all of the code in src/ with just this file

import { Client } from &#039;subscriptions-transport-ws&#039;;

const client = new Client(&#039;ws://localhost:8090&#039;);

client.subscribe({
  query: `
    subscription UpvotedPostSubscription {
      postUpvoted {
        title
        votes
      }
    }
  `
}, (err, res) =&gt; {
  if (err) {
    console.error(err);
    return;
  }

  console.log(`&quot;${res.postUpvoted.title}&quot; has ${res.postUpvoted.votes} votes now.`);
})</code></pre>



<p>As you can see, this package is very tiny. It only implements the transport, and doesn’t integrate with any fancy libraries, providing only a basic callback-style interface. Together, we can easily set this up to work with observables, Redux, Apollo, Relay, and any other client-side technology we like to use in our apps.</p>



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



<p>We hope that by the end of the year GraphQL subscriptions are going to be one of the three main operations people expect from their server:&nbsp;<em>query, mutation, and subscription</em>.</p>



<p>To make this happen, there is still some work to do:</p>



<ol class="wp-block-list"><li><strong>Servers:</strong>&nbsp;We’re excited to work with GraphQL server authors to implement support for a&nbsp;<a href="https://github.com/apollostack/subscriptions-transport-ws" target="_blank" rel="noreferrer noopener">common transport</a>, and work on other pub-sub plugins for Kafka, Postgres triggers, and more. Let us know if you’re interested!</li><li><strong>Clients:</strong>&nbsp;Apollo has support for subscriptions built in, and we should add integration with other frontend libraries and tools such as Relay and GraphiQL.</li><li><strong>Spec:</strong>&nbsp;We’re working hard to figure out what parts of GraphQL subscriptions are common to all implementations, and should be core to the GraphQL specification. Look out for a post about this soon!</li></ol>



<p>The coolest thing about GraphQL is that it’s an open spec and community, not just one implementation. So let’s work together to move it into the future!</p>


A proposal for GraphQL subscriptions


<p>If you haven’t visited Apollo’s&nbsp;<a href="http://dev.apollodata.com/" target="_blank" rel="noreferrer noopener">documentation</a>&nbsp;in a while, you might notice it’s a little different now— we’ve recently overhauled our developer site from the ground up.</p>



<figure class="wp-block-image alignfull size-large"><img loading="lazy" decoding="async" width="1024" height="969" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_Z5wCLKPwTWDGzDJja-ZDSA-1024x969.png" alt="" class="wp-image-379" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_Z5wCLKPwTWDGzDJja-ZDSA-1024x969.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Z5wCLKPwTWDGzDJja-ZDSA-300x284.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Z5wCLKPwTWDGzDJja-ZDSA-768x727.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Z5wCLKPwTWDGzDJja-ZDSA-1200x1136.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Z5wCLKPwTWDGzDJja-ZDSA.png 1210w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>The new site is about a lot more than a beautiful new theme however; we’ve totally restructured how our documentation is organized.</p>



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



<p>The vision was to structure the documentation as a guide to help you get your app built, rather than a dry list of API functions (although we still do have&nbsp;<a href="http://dev.apollodata.com/core/apollo-client-api.html" target="_blank" rel="noreferrer noopener">API docs</a>&nbsp;of course!).</p>



<p>With that in mind, we’ve produced two primary guides for our JavaScript GraphQL client — one for&nbsp;<a href="http://dev.apollodata.com/react" target="_blank" rel="noreferrer noopener">React</a>&nbsp;and one for&nbsp;<a href="http://dev.apollodata.com/angular2" target="_blank" rel="noreferrer noopener">Angular 2</a>. These are the the view layers that have the most mature integrations with Apollo, and as such we’ve tried to orient our documentation around how to get things done with those technologies.</p>



<p>As an example, rather than describing Apollo’s&nbsp;<a href="http://dev.apollodata.com/core/apollo-client-api.html#ApolloClient\.mutate" target="_blank" rel="noreferrer noopener">Optimistic UI</a>&nbsp;support in the abstract as an API for our vanilla JS library, and leaving it up to you to figure out how to use it, we show you exactly how to use it in both&nbsp;<a href="http://dev.apollodata.com/react/optimistic-ui.html" target="_blank" rel="noreferrer noopener">React</a>&nbsp;and&nbsp;<a href="http://dev.apollodata.com/angular2/optimistic-ui.html" target="_blank" rel="noreferrer noopener">Angular</a>, with appropriate code examples for each.</p>



<p>Hopefully our list of recipes gives you the boost you need to get your GraphQL-based application off the ground and lets you focus on what actually matters: your app!</p>



<p>As a bonus, this round of documentation updates includes a first explanation of how to start using our&nbsp;<a href="https://medium.com/apollo-stack/bringing-graphql-to-ios-fc46423befa1#.gvtmdc9dh" target="_blank" rel="noreferrer noopener">iOS client</a>&nbsp;and some information about how to get more involved in our&nbsp;<a href="http://dev.apollodata.com/community/" target="_blank" rel="noreferrer noopener">developer community</a>.</p>



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



<p>Alongside all that great new content, we’ve put together a brand new&nbsp;<a href="http://dev.apollodata.com/" target="_blank" rel="noreferrer noopener">developer landing page</a>&nbsp;which explains the key benefits of Apollo Client and showcases simple code snippets showing how to do queries, mutations (and soon subscriptions!) using all our major client technologies.</p>



<figure class="wp-block-image alignfull size-large"><img loading="lazy" decoding="async" width="1024" height="969" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_RMCQ_LOsNJ3sOAxdBjxf7A-1024x969.png" alt="" class="wp-image-378" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_RMCQ_LOsNJ3sOAxdBjxf7A-1024x969.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_RMCQ_LOsNJ3sOAxdBjxf7A-300x284.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_RMCQ_LOsNJ3sOAxdBjxf7A-768x727.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_RMCQ_LOsNJ3sOAxdBjxf7A-1200x1136.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_RMCQ_LOsNJ3sOAxdBjxf7A.png 1210w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>Those snippets use a simple, common “Hello World” example&nbsp;<a href="https://github.com/apollostack/frontpage-api" target="_blank" rel="noreferrer noopener">server</a>&nbsp;and show you how to implement the same basic list query and mutation. We’ve also been excited to see some emerging integrations (such as the&nbsp;<a href="https://github.com/Akryum/meteor-vue-component" target="_blank" rel="noreferrer noopener">VueJS integration</a>&nbsp;and the&nbsp;<a href="https://github.com/wiliamsouza/apollo-polymer" target="_blank" rel="noreferrer noopener">Polymer integration</a>) demonstrating different ways to implement the same example application. We’re investigating ways to make those new integrations more visible.</p>



<p>We’ll keep moving forward with these examples, and in the weeks to come you should see further examples for our iOS client, as well as some simple examples of our brand new subscription support. Check back soon!</p>



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



<p>All in all, there is a lot to see at the new dev.apollodata.com domain. Here’s the full list:</p>



<ul class="wp-block-list"><li><a href="http://dev.apollodata.com/" target="_blank" rel="noreferrer noopener">http://dev.apollodata.com</a>&nbsp;: the developer site with the “hello world” example applications.</li><li><a href="http://dev.apollodata.com/react" target="_blank" rel="noreferrer noopener">http://dev.apollodata.com/react</a>&nbsp;: the complete guide to using Apollo with React.</li><li><a href="http://dev.apollodata.com/angular2:" target="_blank" rel="noreferrer noopener">http://dev.apollodata.com/angular2</a>&nbsp;: the complete guide to using Apollo with Angular 2 (and documentation about Angular 1).</li><li><a href="http://dev.apollodata.com/ios" target="_blank" rel="noreferrer noopener">http://dev.apollodata.com/ios</a>&nbsp;: Some introductory material about our brand new Swift iOS client library (watch this space!)</li><li><a href="http://dev.apollodata.com/core" target="_blank" rel="noreferrer noopener">http://dev.apollodata.com/core</a>&nbsp;: Core documentation about the Vanilla JS library used by all the JS integrations.</li><li><a href="http://dev.apollodata.com/tools" target="_blank" rel="noreferrer noopener">http://dev.apollodata.com/tools</a>&nbsp;: Documentation of various JS GraphQL tools, including Apollo Server.</li><li><a href="http://dev.apollodata.com/community" target="_blank" rel="noreferrer noopener">http://dev.apollodata.com/community</a>&nbsp;: Our new community site, with contributions guidelines and a code of conduct (as well as a list of our prominent contributors!)</li></ul>



<p>I’ll bet even the most seasoned Apollo developer will find something new and interesting. If you see anything that can be improved, please open a pull request on GitHub!</p>


Documenting Apollo


<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

Native code generation at Facebook


<p>As some of you may know, GraphQL was originally developed for the Facebook iOS team, and it has powered the main Facebook iOS app since 2012.</p>



<p>Outside of Facebook however, GraphQL on the client is still mostly associated with JavaScript. By now, there are dozens of GraphQL libraries in other languages available, including implementations in&nbsp;<a href="https://github.com/rmosolgo/graphql-ruby" target="_blank" rel="noreferrer noopener">Ruby</a>,&nbsp;<a href="https://github.com/graphql-python/graphene" target="_blank" rel="noreferrer noopener">Python</a>,&nbsp;<a href="https://github.com/graphql-java/graphql-java" target="_blank" rel="noreferrer noopener">Java</a>,&nbsp;<a href="https://github.com/sangria-graphql/sangria" target="_blank" rel="noreferrer noopener">Scala</a>, and&nbsp;<a href="https://github.com/graphql-dotnet/graphql-dotnet" target="_blank" rel="noreferrer noopener">.NET</a>, but these only cover the server side.</p>



<p>We believe GraphQL is a great match for native mobile apps, so as a first step we’ve started working on a GraphQL client for iOS. The main design goal of the current version of Apollo iOS is to return typed results for GraphQL queries.</p>



<p>You can continue reading the article for details about the features and design, or&nbsp;<a href="https://github.com/apollostack/apollo-ios" target="_blank" rel="noreferrer noopener">try it now on GitHub</a>!</p>



<h2 class="wp-block-heading" id="4ce5"><a href="#why-typed-query-results" aria-hidden="true" class="aal_anchor" id="why-typed-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>Why typed query results?</h2>



<p>Performing a GraphQL request is actually pretty straightforward. If you send an HTTP request with a query string to a GraphQL server, you get back a JSON response:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="372" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_9hZQs9FUPn8O3p8OFz2dEA-1024x372.png" alt="" class="wp-image-350" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_9hZQs9FUPn8O3p8OFz2dEA-1024x372.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_9hZQs9FUPn8O3p8OFz2dEA-300x109.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_9hZQs9FUPn8O3p8OFz2dEA-768x279.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_9hZQs9FUPn8O3p8OFz2dEA-1200x436.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_9hZQs9FUPn8O3p8OFz2dEA.png 1344w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>While JSON responses are convenient to work with in dynamic languages like JavaScript, dealing with dictionaries and untyped values is a pain in statically typed languages like Swift.</p>



<p>The code you have to write to extract data from a JSON response in Swift quickly gets repetitive and is prone to errors. Even ignoring error reporting, parsing query results manually requires quite a bit of code because it relies on string-based dictionary access and conditional casts:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="118" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_p3GzuIxgeKbt8xUVxPmdLg-1024x118.png" alt="" class="wp-image-349" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_p3GzuIxgeKbt8xUVxPmdLg-1024x118.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_p3GzuIxgeKbt8xUVxPmdLg-300x35.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_p3GzuIxgeKbt8xUVxPmdLg-768x89.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_p3GzuIxgeKbt8xUVxPmdLg-1536x177.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_p3GzuIxgeKbt8xUVxPmdLg-1200x139.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_p3GzuIxgeKbt8xUVxPmdLg.png 1766w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>The repetitive nature of writing well-behaved parsing code is the reason&nbsp;<a href="https://swiftmodules.com/blog/json-parsing-in-swift-pt1" target="_blank" rel="noreferrer noopener">so many JSON libraries have sprung up in the Swift community</a>. While these can make dealing with JSON a lot more convenient and somewhat safer, they do nothing to solve a more fundamental problem with manually writing code to parse query results.</p>



<p>Depending on an implicit understanding of the shape and typings of a response makes your parsing code brittle. When query results change, you’ll have to remember to make corresponding changes to your parsing code. Errors may not show up until runtime, or even until a particular response is received in production.</p>



<p>GraphQL has been designed from the start to avoid these issues by incorporating strong typing into the language. GraphQL servers define a schema, a type system that precisely describes what data is available to clients, and servers support introspection to access the type information. Queries are written against a particular schema, and this allows for&nbsp;<a href="https://medium.com/apollo-stack/power-tools-for-your-api-42529706ae78#.u98zo1nxl" target="_blank" rel="noreferrer noopener">powerful developer tools</a>&nbsp;like autocompletion and validation.</p>



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



<p>The strongly-typed nature of GraphQL is a great match for native development. Within Facebook, the iOS and Android teams have long relied on code generation to generate native model classes that know how to parse raw JSON into properly typed data objects.</p>



<p>Apollo iOS has been built around the same process. We integrate with the Xcode build process to generate Swift types from a GraphQL schema and a set of query documents. At runtime, query results are parsed into query-specific nested structs, which allows us to write code like this:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="43" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_K2KhR6Uiy9YB2j3PcwiIYw-1024x43.png" alt="" class="wp-image-348" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_K2KhR6Uiy9YB2j3PcwiIYw-1024x43.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_K2KhR6Uiy9YB2j3PcwiIYw-300x13.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_K2KhR6Uiy9YB2j3PcwiIYw-768x32.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_K2KhR6Uiy9YB2j3PcwiIYw-1536x64.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_K2KhR6Uiy9YB2j3PcwiIYw-1200x50.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_K2KhR6Uiy9YB2j3PcwiIYw.png 1766w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>Instead of passing around dictionaries and making clients cast values to the right type manually, these generated types allow you to access data and navigate relationships using the appropriate native types directly.</p>



<p>Being able to rely on the Swift type checker means that errors in data access now show up at compile time. The type system guarantees that the data we access from our code is actually fetched as part of the query:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="75" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_Ddh8etsqfnVXRFk57c1ReQ-1024x75.png" alt="" class="wp-image-347" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_Ddh8etsqfnVXRFk57c1ReQ-1024x75.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Ddh8etsqfnVXRFk57c1ReQ-300x22.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Ddh8etsqfnVXRFk57c1ReQ-768x56.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Ddh8etsqfnVXRFk57c1ReQ-1536x112.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Ddh8etsqfnVXRFk57c1ReQ-1200x87.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_Ddh8etsqfnVXRFk57c1ReQ.png 1538w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>And we even get code completion for free:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="142" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_79A9_1Xh7vt2Xxczr0O0fQ-1024x142.png" alt="" class="wp-image-346" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_79A9_1Xh7vt2Xxczr0O0fQ-1024x142.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_79A9_1Xh7vt2Xxczr0O0fQ-300x41.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_79A9_1Xh7vt2Xxczr0O0fQ-768x106.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_79A9_1Xh7vt2Xxczr0O0fQ-1200x166.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_79A9_1Xh7vt2Xxczr0O0fQ.png 1504w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>This level of compile time safety is possible because the generated types are query-specific. Instead of generating a struct with all fields for every type in a schema, these types only include properties for fields that are part of a particular query.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="650" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_GOYaUyfF_0w30mFMbViEHA-1024x650.png" alt="" class="wp-image-345" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_GOYaUyfF_0w30mFMbViEHA-1024x650.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_GOYaUyfF_0w30mFMbViEHA-300x190.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_GOYaUyfF_0w30mFMbViEHA-768x487.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_GOYaUyfF_0w30mFMbViEHA-1536x975.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_GOYaUyfF_0w30mFMbViEHA-2048x1300.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_GOYaUyfF_0w30mFMbViEHA-1200x762.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_GOYaUyfF_0w30mFMbViEHA-1980x1257.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>A screenshot of the code Apollo iOS generates for you.</figcaption></figure>



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



<p>Apollo iOS is still at its early stages, but we hope you’ll want to give it a try and report back on your experiences. The easiest way to get started is through&nbsp;<a href="https://github.com/apollostack/apollo-ios-quickstart" target="_blank" rel="noreferrer noopener">Apollo iOS Quickstart</a>, which contains a sample app and playgrounds that allow you to experiment with query results for particular APIs (including your own).</p>



<p>One of the things we’re trying to figure out is what a good native workflow for developing with GraphQL looks like. Even with the limited extensibility of the current version of Xcode, we’ve been able to achieve some neat integrations, like showing inline validation errors for GraphQL documents as part of the build process:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="199" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_5uyoc-OWkyKNQahGG8c5ow-1024x199.png" alt="" class="wp-image-344" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_5uyoc-OWkyKNQahGG8c5ow-1024x199.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_5uyoc-OWkyKNQahGG8c5ow-300x58.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_5uyoc-OWkyKNQahGG8c5ow-768x149.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_5uyoc-OWkyKNQahGG8c5ow-1536x298.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_5uyoc-OWkyKNQahGG8c5ow-2048x398.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_5uyoc-OWkyKNQahGG8c5ow-1200x233.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_5uyoc-OWkyKNQahGG8c5ow-1980x385.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>Apollo iOS is under active development, and there is plenty to work on, but we want to ensure we’re addressing real needs, and prioritizing features accordingly. So if you’re using or planning to use GraphQL in an iOS app, please&nbsp;<a href="http://apollostack.com/#slack" target="_blank" rel="noreferrer noopener">get in touch on the #ios channel on Slack</a>.</p>



<p>Although we’ve chosen to start with iOS, we’re excited about bringing Apollo to more platforms in the future. We expect much of the design of an Android version to carry over from iOS, and we should even be able to reuse parts of the code generation tool. There has been some interest from the community in helping to bring Apollo Android to life faster, so if you’d like to contribute to that effort, please&nbsp;<a href="http://apollostack.com/#slack" target="_blank" rel="noreferrer noopener">let us know on the #android channel on Slack</a>.</p>



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



<p>We’ve learned a lot about best practices around generating code for typed query results from the people at Facebook. If you’re interested in hearing more about their experiences with native clients, two&nbsp;<a href="https://www.youtube.com/watch?v=7oe3gtCzDTM" target="_blank" rel="noreferrer noopener">recent</a>&nbsp;<a href="https://atscaleconference.com/videos/graphql-in-native-applications-at-scale/" target="_blank" rel="noreferrer noopener">talks</a>&nbsp;by Facebook team members go into more detail.</p>



<p>For more information on the proposed mapping from GraphQL results to Swift types, see the Apollo iOS&nbsp;<a href="https://github.com/apollostack/apollo-ios/blob/master/DESIGN.md" target="_blank" rel="noreferrer noopener">design docs</a>.</p>


Bringing GraphQL to iOS


<p>The GraphQL community has been super hyped in the last few days after a truly landmark announcement — the&nbsp;<a href="https://medium.com/apollo-stack/the-new-github-graphql-api-811b005d1b6e#.fhdp8u6ap" target="_blank" rel="noreferrer noopener">first major public GraphQL API</a>. And not just from anyone, from GitHub, one of the most important, developer-oriented API providers out there. While that’s a big piece of news for the wider developer community, and a lot of people will be hearing about GraphQL for the first time because of it, you shouldn’t miss another huge milestone:</p>



<p><strong>GraphQL.org has been rewritten from the ground up, and GraphQL has been announced to be a stable, production ready platform!</strong></p>



<p>For the last year, GraphQL has been a bit of a hidden gem — if you put in the effort to learn about it, you got hooked, but there wasn’t one place you could get a great summary of its benefits, an explanation of the technology, and comprehensive learning and “getting started” materials. Now there is!</p>



<p>Here are the five best parts of the new GraphQL.org website:</p>



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



<p>The front page of graphql.org now describes the main benefits of GraphQL, with incredible moving diagrams brought to you by <a rel="noreferrer noopener" href="https://medium.com/u/d9b1a61823fa?source=post_page-----bae5b245af94----------------------" target="_blank">Lee Byron</a>, one of GraphQL’s primary maintainers. Apparently Lee is secretly a motion graphics designer.</p>



<figure class="wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-gfycat"><div class="wp-block-embed__wrapper">
https://gfycat.com/conventionalsimplekagu
</div></figure>



<p>Go to the&nbsp;<a href="http://graphql.org/" target="_blank" rel="noreferrer noopener">front page</a>&nbsp;to see the other benefits and animations.</p>



<h2 class="wp-block-heading" id="3e1e"><a href="#2-an-ever-growing-list-of-companies-on-graphql" aria-hidden="true" class="aal_anchor" id="2-an-ever-growing-list-of-companies-on-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>2. An ever-growing list of companies on GraphQL</h2>



<p>In the GraphQL community, you’ll never feel lonely. There are tons of companies using it already, and more getting interested every day.</p>



<figure class="wp-block-image size-large"><a href="http://graphql.org/users/"><img loading="lazy" decoding="async" width="1024" height="665" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_EvP8nemSom3UttmbidCiJg-1024x665.png" alt="" class="wp-image-341" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_EvP8nemSom3UttmbidCiJg-1024x665.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_EvP8nemSom3UttmbidCiJg-300x195.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_EvP8nemSom3UttmbidCiJg-768x498.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_EvP8nemSom3UttmbidCiJg-1536x997.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_EvP8nemSom3UttmbidCiJg-2048x1329.png 2048w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_EvP8nemSom3UttmbidCiJg-1200x779.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_EvP8nemSom3UttmbidCiJg-1980x1285.png 1980w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></a></figure>



<p>Send a&nbsp;<a href="https://github.com/graphql/graphql.github.io/edit/source/site/users/index.html.js" target="_blank" rel="noreferrer noopener">pull request</a>&nbsp;to add your company to the list!</p>



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



<p>In the past, you might have needed to read the <a rel="noreferrer noopener" href="https://facebook.github.io/graphql/" target="_blank">official GraphQL specification</a> to learn about some of the neat features GraphQL gives you. It’s great that the spec is relatively easy to read, but not everyone is into that format — it’s can be much better to learn through examples. Now you can do that <a rel="noreferrer noopener" href="http://graphql.org/learn/" target="_blank">right on graphql.org</a>:</p>



<figure class="wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-gfycat"><div class="wp-block-embed__wrapper">
https://gfycat.com/impolitemediumlamprey
</div></figure>



<p>Get started playing with all of the features of GraphQL on the new&nbsp;<a href="http://graphql.org/learn/queries/" target="_blank" rel="noreferrer noopener">Queries and Mutations</a>&nbsp;and&nbsp;<a href="http://graphql.org/learn/schema/" target="_blank" rel="noreferrer noopener">Schemas and Types</a>&nbsp;walkthrough pages.</p>



<p>There’s also more in-depth information about&nbsp;<a href="http://graphql.org/learn/validation/" target="_blank" rel="noreferrer noopener">validation</a>,&nbsp;<a href="http://graphql.org/learn/execution/" target="_blank" rel="noreferrer noopener">execution</a>,&nbsp;<a href="http://graphql.org/learn/introspection/" target="_blank" rel="noreferrer noopener">introspection</a>, and&nbsp;<a href="http://graphql.org/learn/best-practices/" target="_blank" rel="noreferrer noopener">best practices</a>!</p>



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



<p>GraphQL was initially open-sourced by Facebook with a JavaScript reference implementation. Today, GraphQL is much more than just a JavaScript thing! Facebook uses it internally with Hack, GitHub and Shopify use it with Ruby, and there are implementations in almost every popular, server-side language.</p>



<figure class="wp-block-image size-large"><a href="http://graphql.org/code/"><img loading="lazy" decoding="async" width="1024" height="294" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_xpz25GOGrFo1_NYWmeQFIg-1024x294.png" alt="" class="wp-image-340" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_xpz25GOGrFo1_NYWmeQFIg-1024x294.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_xpz25GOGrFo1_NYWmeQFIg-300x86.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_xpz25GOGrFo1_NYWmeQFIg-768x221.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_xpz25GOGrFo1_NYWmeQFIg-1200x345.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_xpz25GOGrFo1_NYWmeQFIg.png 1482w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></a><figcaption>A hello world example for a Python GraphQL server with Graphene, from graphql.org</figcaption></figure>



<p>Check out the all-new&nbsp;<a href="http://graphql.org/code/" target="_blank" rel="noreferrer noopener">Code</a>&nbsp;page to see all of the different examples.</p>



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



<p>The GraphQL community is bigger than ever before, and now there’s a place where people can get together and share what they are up to — a&nbsp;<a href="http://graphql.org/community/" target="_blank" rel="noreferrer noopener">community page</a>. You can also go to the&nbsp;<a href="http://graphql.org/community/upcoming-events/" target="_blank" rel="noreferrer noopener">upcoming events page</a>&nbsp;to learn about upcoming talks and conferences about GraphQL.</p>



<figure class="wp-block-image size-large"><a href="http://graphql.org/community/upcoming-events/"><img loading="lazy" decoding="async" width="1024" height="352" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_WEHu5eZHZOOt_CVtjvF_DA-1024x352.png" alt="" class="wp-image-339" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_WEHu5eZHZOOt_CVtjvF_DA-1024x352.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_WEHu5eZHZOOt_CVtjvF_DA-300x103.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_WEHu5eZHZOOt_CVtjvF_DA-768x264.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_WEHu5eZHZOOt_CVtjvF_DA-1200x412.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_WEHu5eZHZOOt_CVtjvF_DA.png 1420w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></a><figcaption>One of the events on there is the first ever GraphQL conference,&nbsp;<a href="http://graphql.com/summit/" target="_blank" rel="noreferrer noopener">GraphQL summit in San Francisco</a>!</figcaption></figure>



<p>If you’re running a meetup or giving a talk somewhere, make sure to send a pull request to add it to the page!</p>



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



<p>It’s awesome that the GraphQL community now has such a great site to rally around, and a wonderful resource to introduce people to the technology. GraphQL.org launched almost exactly one year ago, let’s see where it goes in the next year!</p>



<p>Congratulations to everyone who worked on the site —&nbsp;<a href="https://medium.com/u/d9b1a61823fa?source=post_page-----bae5b245af94----------------------" target="_blank" rel="noreferrer noopener">Lee Byron</a>,&nbsp;<a href="https://medium.com/u/236f88713399?source=post_page-----bae5b245af94----------------------" target="_blank" rel="noreferrer noopener">Kevin Lacker</a>,&nbsp;<a href="https://medium.com/u/3e6b69951eef?source=post_page-----bae5b245af94----------------------" target="_blank" rel="noreferrer noopener">Robert Zhu</a>,&nbsp;<a href="https://medium.com/u/db65a320cccc?source=post_page-----bae5b245af94----------------------" target="_blank" rel="noreferrer noopener">Thea Lamkin</a>, and others!</p>


GraphQL.org just got a makeover


<p>In September of 2016 GitHub casually dropped some big news when they&nbsp;<a href="http://githubengineering.com/the-github-graphql-api/" target="_blank" rel="noreferrer noopener">officially announced</a>&nbsp;their new GraphQL API and made it available to everyone in&nbsp;<a href="https://developer.github.com/early-access/" target="_blank" rel="noreferrer noopener">early access</a>.</p>



<p>In this post I’ll explain the most important things you need to know about GitHub’s GraphQL API:</p>



<ol class="wp-block-list"><li><strong>Why it matters</strong></li><li><strong>What it looks like&nbsp;</strong>(also check out the&nbsp;<a href="https://youtu.be/6xO87LlijoQ" target="_blank" rel="noreferrer noopener">video tour</a>!)</li><li><strong>How you can use it</strong></li><li><strong>What’s coming next</strong></li></ol>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>If you don’t yet know what GraphQL is, go check out the excellent introduction on&nbsp;<a href="http://graphql.org/" target="_blank" rel="noreferrer noopener">graphql.org</a>&nbsp;before reading the rest of this post. You’ll get more out of it.</p></blockquote>



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



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



<p>For years, GitHub’s REST API has been used by others as a great example of a well-designed REST API, and many companies modeled their REST API after GitHub’s.</p>



<p>If GitHub’s REST API was so good, why are they moving to GraphQL? For the same reasons that many other companies have started adopting GraphQL. You can read the details in their&nbsp;<a href="http://githubengineering.com/the-github-graphql-api/" target="_blank" rel="noreferrer noopener">announcement post</a>, but the gist of it is this:</p>



<ul class="wp-block-list"><li>Where REST requires many requests, GraphQL takes just one</li><li>With REST, you request too much or too little data; with GraphQL you request exactly what you need</li><li>REST often turns into a maze of poorly-documented endpoints; GraphQL is strongly-typed and self-documenting</li></ul>



<p>In the words of the GitHub platform team:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>GraphQL represents a&nbsp;<strong>massive leap forward for API development</strong>. Type safety, introspection, generated documentation, and predictable responses benefit both the maintainers and consumers of our platform. We’re looking forward to our new era of a GraphQL-backed platform, and we hope that you do, too!</p></blockquote>



<p>Thanks to GraphQL, GitHub no longer needs to separately maintain a public and a private API. Instead there will be just one API, used for both.</p>



<p>GitHub’s announcement is so significant because their new API is the first large-scale, public GraphQL API, and&nbsp;<strong>where GitHub goes many others will follow.&nbsp;</strong>On top of that, other notable companies are&nbsp;<em>already</em>&nbsp;using GraphQL, including Facebook, Twitter, Intuit, Shopify, and many more. There’s so much interest that the&nbsp;<a href="http://graphqlsummit.com/" target="_blank" rel="noreferrer noopener">first GraphQL conference</a>&nbsp;ever is coming to San Francisco this October.</p>



<p>But enough about why this is so exciting, let’s take a look at their actual API.</p>



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



<p>If you sign their prerelease agreement, you get early access to the GitHub GraphQL API. I did just that, and then headed straight to the API Explorer. Those familiar with GraphQL will recognize it as&nbsp;<a href="https://medium.com/the-graphqlhub/graphiql-graphql-s-killer-app-9896242b2125#.vcy9lc4ph" target="_blank" rel="noreferrer noopener">Graph<em>i</em>QL</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_51SBnuBFxAGu9Vpw8V8KNA-1024x539.png" alt="" class="wp-image-336" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_51SBnuBFxAGu9Vpw8V8KNA-1024x539.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_51SBnuBFxAGu9Vpw8V8KNA-300x158.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_51SBnuBFxAGu9Vpw8V8KNA-768x404.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_51SBnuBFxAGu9Vpw8V8KNA-1536x809.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_51SBnuBFxAGu9Vpw8V8KNA-1200x632.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_51SBnuBFxAGu9Vpw8V8KNA.png 1592w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Exploring GitHub’s GraphQL API with GraphiQL</figcaption></figure>



<p>After a couple seconds of typing, I sent my first query and got back a response — it worked! I could have used GraphiQL to explore the schema, but it’s not the easiest way to get a quick overview, so I turned to the&nbsp;<a href="https://developer.github.com/early-access/graphql/" target="_blank" rel="noreferrer noopener">API documentation</a>&nbsp;to find out what queries or mutations I could make. The starting points for queries were pretty much as expected: you can search for things, look up users and organizations, and get info about yourself using the&nbsp;<em>viewer</em>&nbsp;query. From there you can drill deeper and get lists of repositories, which in turn let you get PRs, issues, comments, reactions (the emojis), forks, branches, commits and even the Git trees of individual commits. And that’s really only the tip of the iceberg. Pretty cool, right?</p>



<p>Next up, I took a look at the mutations — GraphQL’s way of modifying data. The selection there is a lot more limited. Right now, the only things you can do are comment on issues, add reactions to comments, subscribe/unsubscribe from issues, and manage projects — a new feature GitHub introduced yesterday, and which is powered by GraphQL.</p>



<p>Of course, I had to try posting a comment via the new GraphQL API:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="153" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_7_UGSQL9sRDocXq8CgMKtA-1024x153.png" alt="" class="wp-image-335" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_7_UGSQL9sRDocXq8CgMKtA-1024x153.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_7_UGSQL9sRDocXq8CgMKtA-300x45.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_7_UGSQL9sRDocXq8CgMKtA-768x115.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_7_UGSQL9sRDocXq8CgMKtA-1536x230.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_7_UGSQL9sRDocXq8CgMKtA-1200x180.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_7_UGSQL9sRDocXq8CgMKtA.png 1564w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>My first comment made via GitHub’s GraphQL API</figcaption></figure>



<p>Here’s a&nbsp;<a href="https://github.com/apollostack/apollo/issues/66" target="_blank" rel="noreferrer noopener">link to the issue</a>. Go give it a try, and see if you can post to it via GitHub’s GraphQL API!</p>



<p>Overall, I think the existing parts of the API are already in excellent shape, and there were just a few rough edges:</p>



<ul class="wp-block-list"><li>The API documentation was slightly outdated and incomplete in places. I worked around it by using the introspection query to print myself a neat little schema in GraphQL schema language (<a href="https://gist.github.com/helfer/16ae2323ff3c23cedc69471a973a4f0f" target="_blank" rel="noreferrer noopener">see the schema</a>).</li><li>Connections (<a href="https://medium.com/apollo-stack/understanding-pagination-rest-graphql-and-relay-b10f835549e7" target="_blank" rel="noreferrer noopener">a type of pagination</a>) are used extensively, which can make initial interaction with the API quite confusing for people who are not familiar with connections.</li><li>All mutations take only one input argument, which makes them harder to write and read. This was done because of a&nbsp;<a href="https://github.com/facebook/relay/issues/112" target="_blank" rel="noreferrer noopener">limitation in Relay</a>, but Relay 2 is going to remove that limitation, and&nbsp;<a href="https://github.com/apollostack/apollo-client" target="_blank" rel="noreferrer noopener">Apollo Client</a>&nbsp;already supports multiple arguments today.</li></ul>



<p><strong><em>Edit (9/16)</em></strong><em>: I felt like this post didn’t adequately cover how powerful the GraphQL API is, so I made a quick video tour for anyone who wants to see more:</em></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="A quick tour of GitHub&#039;s GraphQL API" width="580" height="435" src="https://www.youtube.com/embed/6xO87LlijoQ?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="10df"><a href="#how-you-can-use-it" aria-hidden="true" class="aal_anchor" id="how-you-can-use-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>How you can use it</h2>



<p>Once you’ve signed the prerelease agreement, you can start building your own apps against GitHub’s GraphQL API. Technically you can send your GraphQL queries as simple strings in a POST request, but your life is going to be a lot easier if you use a GraphQL client like&nbsp;<a href="https://github.com/apollostack/apollo-client" target="_blank" rel="noreferrer noopener">Apollo Client</a>&nbsp;or&nbsp;<a href="https://github.com/facebook/relay" target="_blank" rel="noreferrer noopener">Relay</a>.</p>



<p>To make your life even easier, we’ve built an&nbsp;<a href="https://github.com/apollostack/GitHub-GraphQL-API-Example" target="_blank" rel="noreferrer noopener">example mobile app</a>&nbsp;with React Native. It’s a small GitHub issue reader that demonstrates how you can use the GraphQL API. You’re more than welcome to contribute to it by adding features or fixing bugs!</p>



<figure class="wp-block-image size-large"><a href="https://www.dropbox.com/s/dcmh6u0hau54609/Screenshot%202016-09-15%2010.08.35.png?dl=0"><img loading="lazy" decoding="async" width="1024" height="691" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_rkk8F2td5pKnijw5RXnGRg-1024x691.png" alt="" class="wp-image-334" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_rkk8F2td5pKnijw5RXnGRg-1024x691.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_rkk8F2td5pKnijw5RXnGRg-300x202.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_rkk8F2td5pKnijw5RXnGRg-768x518.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_rkk8F2td5pKnijw5RXnGRg-1200x810.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_rkk8F2td5pKnijw5RXnGRg.png 1366w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></a><figcaption>IssueReader: an example app for GitHub’s new GraphQL API</figcaption></figure>



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



<p>This is just the start of GitHub’s GraphQL API, and there’s a lot more to come. The API will be refined during early access, and the GitHub team hopes to add support for features like batching, subscriptions and deferring to their server (Apollo Client already supports&nbsp;<a href="https://medium.com/apollo-stack/query-batching-in-apollo-63acfd859862" target="_blank" rel="noreferrer noopener">batching</a>&nbsp;and&nbsp;<a href="https://medium.com/apollo-stack/graphql-subscriptions-in-apollo-client-9a2457f015fb" target="_blank" rel="noreferrer noopener">subscriptions</a>!)</p>



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



<p>If all that talk about GraphQL got you curious, you’ll definitely want to look at the following posts and resources to learn more about it.</p>



<p><strong>Blog posts + tutorials:</strong></p>



<ul class="wp-block-list"><li><a href="https://medium.com/apollo-stack/why-graphql-is-the-future-3bec28193807" target="_blank" rel="noreferrer noopener">Why GraphQL is the future</a></li><li><a href="https://medium.com/apollo-stack/the-concepts-of-graphql-bc68bd819be3" target="_blank" rel="noreferrer noopener">GraphQL concepts visualized</a></li><li><a href="https://medium.com/apollo-stack/graphql-the-next-generation-of-api-design-f24b1689756a" target="_blank" rel="noreferrer noopener">GraphQL: the next generation of API design</a></li><li><a href="https://medium.com/apollo-stack/tutorial-building-a-graphql-server-cddaa023c035" target="_blank" rel="noreferrer noopener">Tutorial: how to build your own GraphQL server</a></li><li>… and more&nbsp;<a href="https://medium.com/apollo-stack" target="_blank" rel="noreferrer noopener">on our blog</a></li></ul>



<p><strong>Resources:</strong></p>



<ul class="wp-block-list"><li><a href="http://graphql.org/" target="_blank" rel="noreferrer noopener">GraphQL.org</a></li><li><a href="http://www.apollostack.com/" target="_blank" rel="noreferrer noopener">Apollo</a></li><li><a href="https://learngraphql.com/" target="_blank" rel="noreferrer noopener">learngraphql.com</a></li></ul>



<p>Last but not least: As we mentioned before, the&nbsp;<a href="http://graphqlsummit.com/" target="_blank" rel="noreferrer noopener">first-ever GraphQL conference</a>&nbsp;is happening in SF on October 26th! GitHub’s Brandon Black will talk more about how his team built the new GraphQL API, along with speakers from Facebook Open Source, Angular, Apollo, and more.</p>



<figure class="wp-block-image size-large"><a href="http://graphqlsummit.com/"><img loading="lazy" decoding="async" width="1024" height="512" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_TAk4fIBMvN8tEOdhBSusCQ-1024x512.png" alt="" class="wp-image-333" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_TAk4fIBMvN8tEOdhBSusCQ-1024x512.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_TAk4fIBMvN8tEOdhBSusCQ-300x150.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_TAk4fIBMvN8tEOdhBSusCQ-768x384.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_TAk4fIBMvN8tEOdhBSusCQ.png 1200w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></a></figure>


The GitHub GraphQL API


<p>Yesterday, version 0.7 of&nbsp;<a href="https://github.com/graphql/graphql-js" target="_blank" rel="noreferrer noopener">GraphQL.js</a>&nbsp;was released, and it contains a lot of exciting improvements, including new features for the schema language, an update to default resolve functions, and utilities for constructing and handling GraphQL documents. In this post I’ll cover:</p>



<ul class="wp-block-list"><li>New features — how, when and why to use them</li><li>Breaking changes — how and if they impact you</li><li>Fixes — what was fixed and why</li></ul>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="978" height="508" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_kq_hWXFncvmcP2h7qzdIag.png" alt="" class="wp-image-316" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_kq_hWXFncvmcP2h7qzdIag.png 978w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_kq_hWXFncvmcP2h7qzdIag-300x156.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_kq_hWXFncvmcP2h7qzdIag-768x399.png 768w" sizes="auto, (max-width: 978px) 100vw, 978px" /></figure>



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



<p>Let’s start with the most exciting of the bunch!</p>



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



<p>Adding descriptions to the schema language was one of the most requested features in GraphQL.js since support for the schema language itself was added in 0.5.0, and finally it’s out!</p>



<p>With 0.7, you can add descriptions directly as comments in the GraphQL schema language. Any comment block that comes before a field, type or directive definition will be used as a description. Here’s an example:</p>



<pre class="wp-block-preformatted"># A small domesticated carnivorous mammal with soft fur<br># See [Wikipedia entry for cat](<a href="https://en.wikipedia.org/wiki/Cat" target="_blank" rel="noreferrer noopener">https://en.wikipedia.org/wiki/Cat</a>)<br>type Cat extends Mammal {<br>  name: String<br>  meows: Boolean<br>  purrs: Boolean<br>  scratches: Boolean<br>}</pre>



<p>Markdown syntax in descriptions is explicitly supported in the GraphQL spec, so tools like GraphiQL are built to work with it!</p>



<p>While the GraphQL schema language itself isn’t part of the of the&nbsp;<a href="https://facebook.github.io/graphql/" target="_blank" rel="noreferrer noopener">official spec</a>&nbsp;yet, it’s proving to be so useful that the plan is to include it there soon. There are already many libraries, such as&nbsp;<a href="https://github.com/apollostack/graphql-tools" target="_blank" rel="noreferrer noopener">graphql-tools</a>, that use it for things like mocking and generating schemas.</p>



<p>Version 0.7 added other features to make using the schema language even more convenient:</p>



<ul class="wp-block-list"><li>Schemas returned by&nbsp;<em>buildASTSchema&nbsp;</em>are now executable. (<strong>Caveat</strong>: unions and interfaces are not supported out of the box, nor is parsing and serialization of scalar types, but GraphQL.js provides a useful error message in those cases.)</li><li>The new&nbsp;<em>buildSchema</em>&nbsp;utility function makes creating an executable schema object from the schema language a tiny bit more convenient.</li></ul>



<p>Taken together, all these changes make a pretty compelling case for using the GraphQL schema language.</p>



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



<p>Until 0.7, there was no official recommendation for what to name your root types, so people chose different alternatives: Query, RootQuery, QueryRootType, etc. GraphQL.js 0.7 is more opinionated here; it prefers:&nbsp;<strong>Query</strong>,&nbsp;<strong>Mutation</strong>&nbsp;and&nbsp;<strong>Subscription</strong>. This is not a breaking change, so you can still continue to name your root types differently, but if you use the Query, Mutation and Subscription, you will no longer need to specify the names of the root types when creating a shorthand schema:</p>



<pre class="wp-block-preformatted">type Query {<br>  aString: String<br>}# The following is now unnecessary if your root type is called Query<br>schema {<br>  query: Query<br>}</pre>



<p>Even though it’s not required, I strongly recommend using the standard names for Query, Mutation and Subscription root types from now on.</p>



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



<p>Until 0.7.0, the default resolve function in GraphQL did not pass along arguments and context, which meant that for all but the most trivial use-cases you had to define a resolve function.</p>



<p>With 0.7, you can now define more complex behavior directly on your JavaScript objects and execute GraphQL queries directly on a schema without having to define resolvers. For example you could do this:</p>



<pre class="wp-block-preformatted">const query = `query {<br>  addOrSubtractTwo(num: 10)<br>}`;const schema = buildSchema(`<br>  type Query {<br>    addOrSubtractTwo: Int<br>  }<br>`);const rootObject = {<br>  addOrSubtractTwo({ num }, context){<br>    return num + 2 * context.polarity;<br>  }<br>};const result = graphql(<br>  schema,<br>  query,<br>  rootObject,<br>  { polarity: -1 },<br>);// result is now { data: { addOrSubtractTwo: 8 } }</pre>



<p>This is a breaking change because until now the default resolve function would not pass through arguments and context. However, unless you specifically programmed your function to behave differently when it gets arguments vs when it gets no arguments, you should be fine.</p>



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



<p>In 0.7 there are improvements to GraphQLError that get rid of unexpected behavior arising due to the special treatment of Error on many platforms. This is, strictly speaking, an improvement. The breaking change won’t affect you unless you called the GraphQLError constructor explicitly in your code, in which case you should check the&nbsp;<a href="https://github.com/graphql/graphql-js/commit/8df7894c8974bd19c600ad05df9d42ed3def3e65#diff-ec43eb1480c36bfa8361782be0ba7066R73" target="_blank" rel="noreferrer noopener">diff</a>&nbsp;and adjust the argument order to make sure your code still works. You may also have to update some of your test code if you relied on e.stack, because GraphQLError now provides stack traces in some cases where it didn’t before, and it no longer writes the message to the stack property when stack is missing.</p>



<p>A change that was already made in 0.6, but that has gotten relatively little notice so far, is that GraphQLError now includes a&nbsp;<strong>path</strong>&nbsp;property, which lets you correlate each error with the corresponding field in the response. That’s especially useful if you want your client to provide useful error messages to the user, or adjust its caching behavior based on whether a field errored or not. However, the default&nbsp;<em>formatError&nbsp;</em>function still filters it out, so if you want to make use of&nbsp;<strong>path</strong>&nbsp;on the client, you have to override the default function by passing the right&nbsp;<em>formatError&nbsp;</em>option to&nbsp;<a href="https://github.com/graphql/express-graphql" target="_blank" rel="noreferrer noopener">express-graphql</a>&nbsp;or&nbsp;<a href="https://github.com/apollostack/apollo-server" target="_blank" rel="noreferrer noopener">apollo-server</a>:</p>



<pre class="wp-block-preformatted">formatError: e =&gt; ({ <br>  message: e.message,<br>  locations: e.locations,<br>  path: e.path<br>}),</pre>



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



<p>Version 0.7 also has a fix for an issue with errors, and adds functionality that was missing in extendSchema:</p>



<ul class="wp-block-list"><li><em>GraphQLError</em>&nbsp;no longer write messages to the stack property of the error, which preserves the original stack and improves compatibility with tools that expect the stack to have a specific format.</li><li>The&nbsp;<em>extendSchema</em>&nbsp;function now supports extending a schema with new directives.</li></ul>



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



<p>Last but not least, the new&nbsp;<em>separateOperations&nbsp;</em>utility function gives us another glimpse of what Facebook’s internal GraphQL setup looks like.</p>



<p><em>separateOperations</em>&nbsp;takes in a GraphQL document with (potentially) many operation definitions and fragments, and returns an array of documents, which each contain one operation definition and all the fragments used in that operation. Operations are things like queries, mutations and subscriptions.</p>



<p>How and why does Facebook use&nbsp;<em>separateOperations</em>? In their own&nbsp;<a href="https://github.com/graphql/graphql-js/pull/456" target="_blank" rel="noreferrer noopener">words</a>:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>A typical task using GraphQL at Facebook looks something like:</p><p>1. Load and parse all .graphql files which may contain operations or fragments.</p><p>2. Use concatAST to produce one AST that contains all operations and fragments.</p><p>3. Separate this all-encompasing AST into individual ASTs that represent each operation which could be sent to the server in isolation.</p></blockquote>



<p><em>separateOperations&nbsp;</em>is for the third step, and it lets Facebook cache the many operations separately, instead of just caching one huge document that contains all of them.</p>



<h2 class="wp-block-heading" id="a8b2"><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>This concludes our not-so-little tour of what’s changed in GraphQL.js 0.7. If you want to know the details, you can always check the excellent&nbsp;<a href="https://github.com/graphql/graphql-js/releases/tag/v0.7.0" target="_blank" rel="noreferrer noopener">release notes</a>. A huge thanks to&nbsp;<a href="https://medium.com/u/d9b1a61823fa?source=post_page-----921e75dd7fd1----------------------" target="_blank" rel="noreferrer noopener">Lee Byron</a>,&nbsp;<a href="https://medium.com/u/236f88713399?source=post_page-----921e75dd7fd1----------------------" target="_blank" rel="noreferrer noopener">Kevin Lacker</a>,&nbsp;<a href="https://medium.com/u/3e6b69951eef?source=post_page-----921e75dd7fd1----------------------" target="_blank" rel="noreferrer noopener">Robert Zhu</a>&nbsp;and&nbsp;<a href="https://medium.com/u/8422e2f8a83e?source=post_page-----921e75dd7fd1----------------------" target="_blank" rel="noreferrer noopener">Rylan Hawkins</a>&nbsp;who all worked on this great release!</p>



<p>Personally, I’m really excited about all these changes and new features. The pace of development in the GraphQL ecosystem is accelerating really significantly. For an open-source project that’s barely a year old, GraphQL already has an incredible amount of traction and a remarkably vibrant community, and it’s only getting better!</p>


All you need to know about GraphQL.js 0.7


<p>To say that it’s been an exciting year for the GraphQL community would be a huge understatement. GraphQL started in 2012 as a project at Facebook to request and deliver their mobile and web app data. Today, it is being used at many other companies, has inspired a collection of community-driven open source libraries, and integrates with a variety of frontends, databases, and backend frameworks.</p>



<p>At Apollo, we’ve been hard at work helping to showcase the amazing stories and projects that have surfaced in the past few months. We’ve organized one&nbsp;<a href="https://medium.com/apollo-stack/graphql-in-2016-a-growing-ecosystem-89846d9bb29e#.epkzehlbg" target="_blank" rel="noreferrer noopener">GraphQL meetup</a>&nbsp;already and there’s another coming up&nbsp;<a href="http://www.meetup.com/GraphQL-SF/events/232983312/" target="_blank" rel="noreferrer noopener">tomorrow</a>.</p>



<p>With&nbsp;<a href="https://www.youtube.com/watch?v=ViXL0YQnioU" target="_blank" rel="noreferrer noopener">all</a>&nbsp;<a href="https://www.youtube.com/watch?v=RNoyPSrQyPs" target="_blank" rel="noreferrer noopener">the</a>&nbsp;<a href="https://www.youtube.com/watch?v=UBGzsb2UkeY" target="_blank" rel="noreferrer noopener">amazing</a>&nbsp;<a href="https://www.youtube.com/watch?v=u1E0CbGeICo" target="_blank" rel="noreferrer noopener">GraphQL</a>&nbsp;<a href="https://www.youtube.com/watch?v=qpGnPbpkcZM" target="_blank" rel="noreferrer noopener">talks</a>&nbsp;happening in conferences and meetups around the world, and the fact that there never seemed to be enough room in our meetup lineups for everyone we wanted to hear from, we decided it was time to plan a conference dedicated entirely to GraphQL.</p>



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



<figure class="wp-block-image size-large"><a href="http://graphql.com/summit"><img loading="lazy" decoding="async" width="1024" height="425" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_n8HfQ62ROMWLYpA30UUFFw-1024x425.png" alt="" class="wp-image-312" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_n8HfQ62ROMWLYpA30UUFFw-1024x425.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_n8HfQ62ROMWLYpA30UUFFw-300x124.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_n8HfQ62ROMWLYpA30UUFFw-768x319.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_n8HfQ62ROMWLYpA30UUFFw.png 1138w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></a></figure>



<p>Today, we launched our event site for&nbsp;<a href="http://graphql.com/summit" target="_blank" rel="noreferrer noopener">GraphQL Summit</a>, the first-ever GraphQL conference. Be sure to check out the full site to see what’s in store. Here are the highlights:</p>



<ul class="wp-block-list"><li><strong>When:</strong>&nbsp;9am- 6:30pm, October 26, 2016</li><li><strong>Where:</strong>&nbsp;<a href="http://thepearlsf.com/" target="_blank" rel="noreferrer noopener">The Pearl</a>, San Francisco</li><li><strong>Who:</strong>&nbsp;250 developers using GraphQL and building GraphQL tools</li><li><strong>What:</strong>&nbsp;Full day of talks from GraphQL leaders + a rooftop happy hour.</li></ul>



<p>We’re also thrilled to already have a stellar group of featured speakers on board from projects and companies you’ll recognize:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="262" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_9e5D5owpXhBDYHiVf1VJ-g-1024x262.png" alt="" class="wp-image-311" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_9e5D5owpXhBDYHiVf1VJ-g-1024x262.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_9e5D5owpXhBDYHiVf1VJ-g-300x77.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_9e5D5owpXhBDYHiVf1VJ-g-768x196.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_9e5D5owpXhBDYHiVf1VJ-g-1536x392.png 1536w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_9e5D5owpXhBDYHiVf1VJ-g-1200x306.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_9e5D5owpXhBDYHiVf1VJ-g.png 1668w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



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



<p>We have a few spots left in the agenda for speakers. Come tell us about your GraphQL best practices, how you use and build GraphQL tools, and how you run GraphQL in production!</p>



<p><a href="https://docs.google.com/a/meteor.com/forms/d/e/1FAIpQLSc2cl-3R_VTY6zkNEjeMCYtSCbcU9g7FA5eZlH3a1a5r2gsMQ/viewform" target="_blank" rel="noreferrer noopener"><strong>Submit your talk</strong></a><strong>&nbsp;by 12am on September 15, 2016.</strong></p>


Speak at GraphQL Summit!


<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>


Community