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 42)
- Docker
- Docker Compose
Installation
yarn install
Optional
Local developement
1. Start the GraphQL API
To start Hasura with Postgres run:
yarn hasura:down
Display Hasura logs
yarn hasura:logs
Launch the console using Hasura CLI or go to http://localhost:8080
yarn hasura:console
">
# 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
To start Hasura with Postgres on Apple Silicon (M1) run:
yarn hasura:arm64:down
Display Hasura logs
yarn hasura:arm64:logs
Launch the console using Hasura CLI or go to http://localhost:8080
yarn hasura:arm64:console
">
# Run Hasura
yarn hasura:arm64:up
# Stop Hasura
yarn hasura:arm64:down
# Display Hasura logs
yarn hasura:arm64:logs
# Launch the console using Hasura CLI or go to http://localhost:8080
yarn hasura:arm64: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):
yarn ios
Run on Android emulator
yarn android
Run in web browser (experimental)
yarn web
">
# 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
Branches
main
Demo app with infinite list, async storage persistor and optimistic updatessimple-list
Demo app using a simple movies FlatListmovies-list-optimistic-update
The movies list is optimistically updated after a movie mutationgraphql-subscriptions
the movie details screen is updated with GraphQL subscriptions
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 thepackage.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.