JavaScript Everywhere

Chapter 23. GraphQL and React Native

At the Andy Warhol Museum in Pittsburgh, Pennsylvania, there is a permanent installation called “Silver Clouds.” The installation is a sparse room with a dozen or so rectangular foil balloons, each filled with a mix of helium and regular air. The result is that the balloons will stay suspended longer than balloons filled with atmospheric air, but don’t float to the ceiling like helium balloons. Patrons of the museum walk through the museum, playfully batting the balloons to keep them afloat.

Currently, our application is much like the room of “clouds.” It’s enjoyable to playfully click the icons and navigate around the app shell, but in the end it is a mostly empty room (no offense to Mr. Warhol). In this chapter, we’ll begin to fill our application by first exploring how we can display content with React Native’s list views. We’ll then make use of Apollo Client to connect to our data API. Once we’ve connected, we’ll write GraphQL queries, which will display data on an app screen.

Running Our API Locally

The development of our mobile application will require access to a local instance of our API. If you’ve been following along with the book, you may already have the Notedly API and its database up and running on your machine. If not, I’ve added instructions in the book’s Appendix A on how to get a copy of the API up and running along with some sample data. If you already have the API running, but would like some additional data to work with, ...