React Native - React Query - Hasura - demo app

A basic React Native app to demonstrate React Query with GraphQL Code generator features.

The GraphQL API is powered by Hasura.

React Native EU Conference 2021 Talk

React Native Europe Conference 21 replay

The app folders structure has been updated in this repo compared to the version demonstrated in the talk.

GraphQL subscription support example has been added.

Full Stack

Front-end

• Expo
• Typescript
• GraphQL code generator with graphql-config
• React Query & graphql-request
• React Native Paper
• React Navigation
• Suspense and Error boundaries

Backend

• Hasura with Postgres

Requirements

• Expo CLI (SDK 49)
• Docker
• Docker Compose

Installation

  yarn install

Optional

• GraphQL VS code extension
• Hasura CLI

Local developement

1. Start the GraphQL API

To start Hasura with Postgres run:

  # Run Hasura
  yarn hasura:up

  # Stop Hasura
  yarn hasura:down

  # Display Hasura logs
  yarn hasura:logs

  # Launch the console using Hasura CLI or go to http://localhost:8080
  yarn hasura:console

Hasura will create the demo database and the associated metadata during its first launch. You can open the Hasura console at this address http://localhost:8080.

2. Start the Expo app

To start the Expo app run (Hasura must be up with the initial migrations done):

  # Expo start
  yarn start

  # Run on iOs simulator
  yarn ios

  # Run on Android emulator
  yarn android

  # Run in web browser (experimental)
  yarn web

To test the App on your mobile device you need to change the GraphQL API address in: ./src/providers/GraphQLClientProvider.tsx

Replace localhost with your local IP address:

const initialState: GraphQLClientState = {
  graphQLClient: new GraphQLClient('http://locahost:8080/v1/graphql', {
    headers: {
      //authorization: '',
    },
  }),
};

GraphQL code generator

To generate types and operations with GraphQL code generator (Hasura must be up):

  yarn generate

Features

• Stale-While-Revalidate
• Using GraphQL code generator to generate the Typescript types and custom hooks for the React Query operations
• Initial data
• Automatic re-fetch options
  • On app focus
  • On network status change
  • On screen focus
  • Polling
• Mutations
  • Cache invalidation
  • Optimistic updates
• React Suspense and Error boundaries support
• FlatList with infinite queries
• Cache persistence in the Async storage
• GraphQL subscriptions
• Test code coverage (main branch only)

Branches with SDK 49

• main Demo app with infinite list, async storage persistor and optimistic updates
• graphql-subscriptions the movie details screen is updated with GraphQL subscriptions

Branches with SDK 42

• simple-list Demo app using a simple movies FlatList
• movies-list-optimistic-update The movies list is optimistically updated after a movie mutation

Notes

• This app uses many auto-refetch and cache invalidation possibilities but you may have to select the ones you really need for your app in production.
• The infinite list implemented for this demo app has no limit on the number of pages, the auto-refetch and app performance will be impacted when a lot of pages are loaded.
• Since React Query version 3.20 you can decide which pages should be refetched with infiniteQuery.
• To burst the async storage cache, you have to change the version property value in the package.json file.
• No GraphQL API authentication and authorization have been implemented in this demo.
• React Native Web support is experimental.
• Console logs are verbose for demo purposes.
• More info about WebSocket support in this article React Query can be used with web sockets.