Using React Query for Data Fetching

As we know, we need to fetch a few different pieces of data for our app. We will fetch the following:

• List of avatars

• List of images for the “Feed” surface

• List of images for the “Favorited Images” surface

• List of conversations

We are free to add the React Query fetching wherever we like. For simple queries, we can simply use the useQuery hook provided by the library in our components. We can also write our own custom hooks, holding more logic or conditions.

Checking the login status

Let’s start by looking at the simplest possible example: querying the server to check whether the user is logged in.

In order to use a React Query hook in the top-level component where we set up our navigation to display either the login screen or not, we will need to reorganize our code a little bit. We cannot have QueryClientProvider in the return statement of the same component trying to use a useQuery hook. Let’s change the name of the main component from App to AppWrapped and let’s add this new App component in the App.js file: