Enhance customer experiences with Apollo GraphOS


<p>I recently added a feature to the admin interface on&nbsp;<a href="https://www.meteor.com/hosting" target="_blank" rel="noreferrer noopener">Meteor Galaxy</a>, Meteor Development Group’s hosting platform for Meteor apps, that shows the state of our internal database migrations. I’m using&nbsp;<a href="https://www.apollographql.com/docs/react/" target="_blank" rel="noreferrer noopener">Apollo Client with react-apollo</a>&nbsp;to build Galaxy’s UI, and I wanted the control panel to automatically update to show the state of any migrations. To do that, I had to decide how often the GraphQL query would poll our server.</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_d5k-LRupMuVqVBnqvlvviQ.jpg" alt="" class="wp-image-894" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_d5k-LRupMuVqVBnqvlvviQ.jpg 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_d5k-LRupMuVqVBnqvlvviQ-300x200.jpg 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_d5k-LRupMuVqVBnqvlvviQ-768x512.jpg 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption><a href="https://www.flickr.com/photos/59337469@N07/5432665289/in/photolist-9h4Q7V-8hxH3-6goMKZ-iCwSu9-a4EhJ1-WVAVyA-9STPDJ-Tg7gVn-7VkE2w-7EkcrR-j1kcX-pCD9wU-cCHJQN-6LV5ht-4RHW7b-6C7soE-8s4hyy-BWLN2-X79PG-9SsEgm-6cfWAX-WRgpm3-6Vjrjh-7Fyq5v-T6P94p-YNMG6b-62xk1s-8zMMiE-spFQYX-G2hMTK-DeFb4d-71jap-TThS7a-dHamd5-AXv58e-caXmuy-21RVhPE-D5brZh-3nZmYR-AnRMU-4G6Jkt-64YZ5y-oG1gRf-uPdbzh-Rc8Hg5-Zftu9n-8V9ehf-kCFz-uefEd6-gGwVn" target="_blank" rel="noreferrer noopener">Photo credit to themtube2 on Flickr.</a></figcaption></figure>



<p>Now, we’re not usually running any migrations, so a nice, slow polling interval like 30 seconds seemed reasonable. But in the rare case where a migration&nbsp;<em>is</em>&nbsp;running, I wanted to be able to see much faster updates on its progress.</p>



<h2 class="wp-block-heading" id="21d1"><a href="#setting-the-poll-interval-from-the-result-of-a-query" aria-hidden="true" class="aal_anchor" id="setting-the-poll-interval-from-the-result-of-a-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>Setting the poll interval from the result of a query</h2>



<p>It turns out there’s an easy pattern with Apollo Client and react-apollo to let the poll interval be determined by the data returned by the query itself. I had to figure it out for myself, so I thought I’d share it here to save others the work! I think it’s easier to understand if I use some utilities from the great&nbsp;<code>&lt;a href=&quot;https://github.com/acdlite/recompose/blob/master/docs/API.md&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;recompose&lt;/a&gt;</code><a href="https://github.com/acdlite/recompose/blob/master/docs/API.md" target="_blank" rel="noreferrer noopener">&nbsp;library</a>, but you can implement this with the basic React API as well.</p>



<p>The key to this is knowing that the&nbsp;<code>&lt;a href=&quot;https://www.apollographql.com/docs/react/basics/queries.html#options-from-props&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;options&lt;/a&gt;</code><a href="https://www.apollographql.com/docs/react/basics/queries.html#options-from-props" target="_blank" rel="noreferrer noopener">&nbsp;parameter to react-apollo’s main&nbsp;</a><code>&lt;a href=&quot;https://www.apollographql.com/docs/react/basics/queries.html#options-from-props&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;graphql&lt;/a&gt;</code><a href="https://www.apollographql.com/docs/react/basics/queries.html#options-from-props" target="_blank" rel="noreferrer noopener">&nbsp;function</a>&nbsp;can itself be a function that depends on its incoming React props. (The&nbsp;<code>options</code>&nbsp;parameter describes the options for the query itself, as opposed to React-specific details like what property name to use for data.) We can then use&nbsp;<code>recompose</code>&#8216;s&nbsp;<code>&lt;a href=&quot;https://github.com/acdlite/recompose/blob/master/docs/API.md#withstate&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;withState&lt;/a&gt;</code>&nbsp;to set the poll interval from a prop passed in to the&nbsp;<code>graphql</code>&nbsp;component, and use the&nbsp;<code>&lt;a href=&quot;https://reactjs.org/docs/react-component.html#componentwillreceiveprops&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;componentWillReceiveProps&lt;/a&gt;</code>&nbsp;React lifecycle event (added via the&nbsp;<code>recompose</code>&nbsp;<code>&lt;a href=&quot;https://github.com/acdlite/recompose/blob/master/docs/API.md#lifecycle&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;lifecycle&lt;/a&gt;</code>&nbsp;helper) to look at the fetched GraphQL data and adjust if necessary.</p>



<p>Here’s how it all fits together:</p>



<pre class="wp-block-prismatic-blocks"><code class="language-javascript">import { graphql } from &quot;react-apollo&quot;;
import gql from &quot;graphql-tag&quot;;
import { compose, withState, lifecycle } from &quot;recompose&quot;;

const DEFAULT_INTERVAL = 30 * 1000;
const ACTIVE_INTERVAL = 500;

const withData = compose(
  // Pass down two props to the nested component: `pollInterval`,
  // which defaults to our normal slow poll, and `setPollInterval`,
  // which lets the nested components modify `pollInterval`.
  withState(&quot;pollInterval&quot;, &quot;setPollInterval&quot;, DEFAULT_INTERVAL),
  graphql(
    gql`
      query getMigrationStatus {
        activeMigration {
          name
          version
          progress
        }
      }
    `,
    {
      // If you think it&#039;s clear enough, you can abbreviate this as:
      //   options: ({pollInterval}) =&gt; ({pollInterval}),
      options: props =&gt; {
        return {
          pollInterval: props.pollInterval
        };
      }
    }
  ),
  lifecycle({
    componentWillReceiveProps({
      data: { loading, activeMigration },
      pollInterval,
      setPollInterval
    }) {
      if (loading) {
        return;
      }
      if (activeMigration &amp;&amp; pollInterval !== ACTIVE_INTERVAL) {
        setPollInterval(ACTIVE_INTERVAL);
      } else if (
        !activeMigration &amp;&amp;
        pollInterval !== DEFAULT_INTERVAL
      ) {
        setPollInterval(DEFAULT_INTERVAL);
      }
    }
  })
);
const MigrationPanelWithData = withData(MigrationPanel);</code></pre>



<p>Note that we check the current value of&nbsp;<code>pollInterval</code>&nbsp;before changing it, because by default in React, nested components will get re-rendered any time we change state, even if you change it to the same value. You can deal with this using&nbsp;<code>&lt;a href=&quot;https://reactjs.org/docs/react-component.html#shouldcomponentupdate&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;componentShouldUpdate&lt;/a&gt;</code>&nbsp;or&nbsp;<code>&lt;a href=&quot;https://reactjs.org/docs/react-api.html#reactpurecomponent&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;React.PureComponent&lt;/a&gt;</code>, but in this case it’s straightforward just to only set the state when it’s actually changing.</p>



<p>Using this pattern successfully requires at least version 2.0.3 of&nbsp;<code>apollo-client</code>, as earlier versions had a&nbsp;<a href="https://github.com/apollographql/apollo-client/issues/2569" target="_blank" rel="noreferrer noopener">bug</a>&nbsp;related to changing&nbsp;<code>pollInterval</code>.</p>



<p>I hope others find this pattern as useful as I did! This sort of feature is why I find Apollo to be the most delightful way to get data into my apps, even independently of the advantages of GraphQL itself.</p>


Apollo Client

Dynamic GraphQL polling with React and Apollo Client

Stay in our orbit