Enhance customer experiences with Apollo GraphOS


<p>React Native enables you to use the same programming language and mental model you use to write web applications to create great native mobile experiences. Similarly, GraphQL and&nbsp;<a href="http://dev.apollodata.com/" target="_blank" rel="noreferrer noopener">Apollo Client</a>&nbsp;are designed to make data loading and management simple and consistent, regardless of your client platform or backend data store.</p>



<p>In this post I’ll show you how these two technologies can work together seamlessly in React Native’s new FlatList component. As you follow along with the post, try the live demo and even run it on your mobile device with Expo Snack:&nbsp;<a href="https://snack.expo.io/HJc-0uygW" target="_blank" rel="noreferrer noopener">https://snack.expo.io/HJc-0uygW</a></p>



<figure class="wp-block-image size-large"><a href="https://snack.expo.io/HJc-0uygW"><img loading="lazy" decoding="async" width="1024" height="720" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_dot66NVkAguqiuTo9O48uw-1024x720.png" alt="" class="wp-image-1121" srcset="https://wp.apollographql.com/wp-content/uploads/2020/03/1_dot66NVkAguqiuTo9O48uw-1024x720.png 1024w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_dot66NVkAguqiuTo9O48uw-300x211.png 300w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_dot66NVkAguqiuTo9O48uw-768x540.png 768w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_dot66NVkAguqiuTo9O48uw-1200x844.png 1200w, https://wp.apollographql.com/wp-content/uploads/2020/03/1_dot66NVkAguqiuTo9O48uw.png 1400w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></a></figure>



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



<p>One of the most common UI features in a mobile app is the scrollable list. Since most apps need to display long lists of data and mobile devices don’t have much screen space, it’s important to get the right user experience. Less than two months ago, around React Conf 2017, the React Native team announced a new set of components specifically made for building these views with React:&nbsp;<a href="https://facebook.github.io/react-native/blog/2017/03/13/better-list-views.html" target="_blank" rel="noreferrer noopener">FlatList and friends.</a></p>



<p>In this article, we’ll look at the convenient APIs FlatList provides, and how they pair nicely with the features provided by GraphQL and Apollo Client.&nbsp;With these tools, you can build great user experiences without introducing complicated, hard-to-maintain UI or data management code.</p>



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



<p>It has all of the features you need to build a great native list view, with all of the bells and whistles users expect: Infinite scroll pagination, pull to refresh, and smooth rendering performance. Here’s a minimal example from the&nbsp;<a href="https://facebook.github.io/react-native/docs/flatlist.html" target="_blank" rel="noreferrer noopener">React Native documentation</a>:</p>



<pre class="wp-block-preformatted">&lt;FlatList<br>  data={[{key: 'a'}, {key: 'b'}]}<br>  renderItem={({item}) =&gt; &lt;Text&gt;{item.key}&lt;/Text&gt;}<br>/&gt;</pre>



<p>Getting a basic list displayed is simple, but how do you take advantage of all of these nice features I just mentioned? Well, it can be helpful to have a data loading library that makes loading state, refetching, and pagination easy.</p>



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



<p>Today, we’re going to focus on the props needed to set up the above features in&nbsp;<code>FlatList</code>, and see how simple it is to wire up Apollo Client to interact with them.</p>



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



<p>To start, we need a GraphQL API from which we can load data. Since we’re focusing on the client we’ll just use the&nbsp;<a href="http://api.githunt.com/graphiql?query=%7B%0A%20%20feed%20(type%3A%20TOP%2C%20limit%3A%2020%2C%20offset%3A%200)%20%7B%0A%20%20%20%20repository%20%7B%0A%20%20%20%20%20%20owner%20%7B%20login%20%7D%0A%20%20%20%20%20%20name%0A%20%20%20%20%7D%0A%0A%20%20%20%20postedBy%20%7B%20login%20%7D%0A%20%20%7D%0A%7D%0A" target="_blank" rel="noreferrer noopener">API from our GitHunt example app</a>, but it’s not too hard to&nbsp;<a href="https://dev-blog.apollodata.com/react-graphql-tutorial-part-2-server-99d0528c7928" target="_blank" rel="noreferrer noopener">set up a server yourself</a>.</p>



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



<p>Before we can test out fancy features, we’ll need to load some initial data. With GraphQL and the&nbsp;<code>react-apollo</code>&nbsp;higher-order component, wiring up a query to our React component is just one function call:</p>



<pre class="wp-block-preformatted">const FeedWithData = graphql(<br>  gql`<br>    query Feed($pageSize: Int!, $offset: Int!) {<br>      feed (type: TOP, limit: $pageSize, offset: $offset) {<br>        repository {<br>          name<br>          owner { login }<br>          stargazers_count<br>        }<br>    <br>        postedBy { login }<br>      }<br>    }<br>  `,<br>  {<br>    options: {<br>      notifyOnNetworkStatusChange: true,<br>      variables: { offset: 0, pageSize: PAGE_SIZE },<br>    },<br>  }<br>)(Feed);</pre>



<p>This code looks simple because people like&nbsp;<a href="https://medium.com/u/fd3d3dea3cd3?source=post_page-----9646fa9a199b----------------------" target="_blank" rel="noreferrer noopener">James Baxley</a>&nbsp;in the Apollo community have worked hard to make the library easy to use, but it’s actually doing a lot under the hood:</p>



<ol class="wp-block-list"><li>Checking the cache of existing data to avoid extra data loading</li><li>Keeping track of fine-grained loading status for the query</li><li>Reading data out of the cache, delivering it to the&nbsp;<code>Feed</code>&nbsp;component, and watching for further cache updates</li></ol>



<p>In this code, we configure the query with two variables — a page size we’ll use as the&nbsp;<code>limit</code>&nbsp;argument, and the current&nbsp;<code>offset</code>&nbsp;we’re looking at. To achieve pagination, we’ll later pass new values for these variables.</p>



<p>In addition to doing a lot of helpful bookkeeping, Apollo also adds a lot of useful information and methods to the prop it passes down. Let’s see how we can connect those to&nbsp;<code>FlatList</code>&nbsp;to get the features we need.</p>



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



<p>Pull to refresh is the feature that enables you to pull down on the top of a list view to get fresh data.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="800" height="547" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_6d-B9eEjMaEc9pU-eednug.gif" alt="" class="wp-image-1120"/><figcaption>Try it yourself:&nbsp;<a href="https://snack.expo.io/HJc-0uygW" target="_blank" rel="noreferrer noopener">https://snack.expo.io/HJc-0uygW</a></figcaption></figure>



<p>To get this, you need to pass in two props to&nbsp;<code>FlatList</code>:</p>



<ol class="wp-block-list"><li><code>refreshing</code>&nbsp;— A boolean that indicates whether or not a pull to refresh is currently in progress. We can easily get this from&nbsp;<a href="http://dev.apollodata.com/react/api-queries.html#graphql-query-data-networkStatus" target="_blank" rel="noreferrer noopener">Apollo’s&nbsp;</a><code>&lt;a href=&quot;http://dev.apollodata.com/react/api-queries.html#graphql-query-data-networkStatus&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;networkStatus&lt;/a&gt;</code><a href="http://dev.apollodata.com/react/api-queries.html#graphql-query-data-networkStatus" target="_blank" rel="noreferrer noopener">&nbsp;prop</a>, which provides a value of&nbsp;<code>4</code>&nbsp;when a query is currently refetching.</li><li><code>onRefresh</code>&nbsp;— A callback for when pull to refresh is activated by a user swiping down. This can be wired directly to&nbsp;<a href="http://dev.apollodata.com/react/api-queries.html#graphql-query-data-refetch" target="_blank" rel="noreferrer noopener">Apollo’s refetch method</a>, which will also set the network status for the&nbsp;<code>refreshing</code>&nbsp;prop above.</li></ol>



<p>So, all together, it’s only<em>&nbsp;two lines of code</em>&nbsp;to connect Apollo and the React Native FlatList to add pull to refresh:</p>



<pre class="wp-block-preformatted">refreshing={data.networkStatus === 4}<br>onRefresh={() =&gt; data.refetch()}</pre>



<p>And with that, we get fully native pull to refresh behavior!</p>



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



<p>For application performance, it’s important to not load or display data the user isn’t looking at yet. A common technique for this is&nbsp;<em>infinite scroll pagination</em>&nbsp;— giving the impression of an unending list by loading new items just in time when we are about to run out of content to display:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="800" height="548" src="https://apollographql.wpengine.com/wp-content/uploads/2020/03/1_iH7rz7vabHW7opH1noDfCQ.gif" alt="" class="wp-image-1119"/><figcaption>Try it yourself:&nbsp;<a href="https://snack.expo.io/HJc-0uygW" target="_blank" rel="noreferrer noopener">https://snack.expo.io/HJc-0uygW</a></figcaption></figure>



<p>Adding this is almost as simple as pull to refresh above. We just need to provide one prop to&nbsp;<code>FlatList</code>, the&nbsp;<code>onEndReached</code>&nbsp;callback. Here’s the code:</p>



<pre class="wp-block-preformatted">onEndReached={() =&gt; {<br>  data.fetchMore({<br>    variables: { offset: data.feed.length + 1 },<br>    updateQuery: (previousResult, { fetchMoreResult }) =&gt; {<br>      // Don't do anything if there weren't any new items<br>      if (!fetchMoreResult || fetchMoreResult.feed.length === 0) {<br>        return previousResult;<br>      }      return {<br>        // Append the new feed results to the old one<br>        feed: previousResult.feed.concat(fetchMoreResult.feed),<br>      };<br>    },<br>  });<br>}}</pre>



<p>The callback from&nbsp;<code>FlatList</code>&nbsp;wires up nicely to the&nbsp;<code>fetchMore</code>&nbsp;method from the Apollo Client data object. It reuses the same query we saw above, but passes in a new&nbsp;<code>offset</code>&nbsp;variable to fetch a page of data after the items we have already seen. Then, we use a simple concat to add the items to the end, and they show up in the UI seamlessly!</p>



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



<p>In the Apollo community, we’re passionate about doing for data loading what React Native is doing for native UI development. We want to enable product developers to spend less time managing data and more time building a great application. Because Apollo Client includes critical boilerplate-reducing features such as network status tracking, refetching, pagination, caching, and more, building a fully-functional list view in React native on top of your GraphQL API is just a few lines of code, and that leaves you with a lot less code to worry about and maintain.</p>



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



<p><em>If you’re excited about developer ergonomics and you want to help build a next-generation data loading experience, please join the Apollo community and contribute, or&nbsp;</em><a href="https://www.meteor.io/jobs/#5e11e6cf-5303-4c12-a3e7-11e5f8da4be1" target="_blank" rel="noreferrer noopener"><em>apply for a full-time job</em></a><em>&nbsp;as an open source engineer!</em></p>


Mobile

Building a great scrollable list in React Native with FlatList

Mobile

Building a great scrollable list in React Native with FlatList

Stay in our orbit