Using React Query for data fetching
As you know, we need to fetch a few different pieces of data for our app. We will fetch a list of avatars, a list of images for the feed surface, a list of images for the FavoritedImages
surface, and a 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. 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...