5 things they don’t want you to know about React-Apollo

Use these simple tricks to supercharge your data fetching!

This is a guest post from Kurtis Kemple, tech lead on the UI team @MLS.

All jokes aside, react-apollo 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 and supports Redux integration. If you want to use GraphQL, it’s a tool that I highly recommend investigating.

Over the last few months at Major League Soccer, 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.

This is not an “intro to react-apollo” example, so if you’re unfamiliar with the project I highly recommend reading the docs first!

1. Dealing with Pagination

A problem that most developers face is fetching paginated data. React-apollo makes this a pretty trivial thing with the fetchMore method off of the data 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.

Pagination Example Code

2. Conditional Data Fetching

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 compose higher order component that react-apollo provides in conjunction with the skip config property. The skip property allows you to tell react-apollo to skip queries based on certain parameters (in most cases based on the props passed to the component).

Composing Multiple Queries Example Code

3. Batching Requests

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.

To deal with this problem at MLS, we actually bring in apollo-client directly. I’ve included it in this post because we’re going to create our own network interface to give to react-apollo — one that supports batching requests!

Batching Network Requests Example Code

4. Fallback Data Fetching

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.

Fallback Request Example Code

5. Polling

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 react-apollo via the pollInterval option on the config object, we knew we would easily be able to achieve that real-time feel that is necessary for our industry.

Polling Example Code

If you’re curious about how we are implementing GraphQL on the backend, check out my other post 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 Peggy Rayzis’s post on the subject!

If you have any questions about our experience, please feel free to leave a comment or reach out to me on the Twitter!