1
Execute Queries and Mutations on a GraphQL API using Insomnia
10m 22s
2
Add urql to a React Native Project and Fetch Data With the useQuery Hook
6m 3s
3
Add Bottom Tabs to a React Native App with React Navigation v6
5m 8s
4
Add a Modal with Typed Navigation to a React Native App with React Navigation v6
5m 40s
5
Add GraphQL Query Args with urql's useQuery Hook
5m 5s
6
Generate TypeScript Types for GraphQL Queries Using GraphQL Code Generator
7m 38s
7
Display Partial Data From Cache with GraphCache
3m 33s
8
Use GraphQL Fragments to Query Same Fields on Multiple Queries in React Native
6m 51s
9
Re-Execute a Query with Pull To Refresh in React Native
2m 2s
10
Use urql's useMutation Hook in React Native to Execute a Mutation
3m 27s
11
Update GraphCache cacheExchange Directly After a urql Mutation
3m 2s
12
Use a GraphQL Fragment to Update Specific Item in urql GraphCache to Remove Items
4m 28s
13
Show a Full Screen Notification When the React Native App is Offline with useNetInfo Hook
3m 18s
14
Add Read-Only Offline Support Using the Offline Exchange from urql GraphCache
4m 11s
15
Create a Custom Exchange for urql to Filter Out Mutations when Offline
4m 54s

Show a Full Screen Notification When the React Native App is Offline with useNetInfo Hook

React Native

Share this video with your friends

We'll use React Native NetInfo to detect whether the user's device is offline. If the device is offline, we will show a full screen "you are offline" message.

Resources:

React Native NetInfo: https://github.com/react-native-netinfo/react-native-netinfo

Expo:

If using Expo, install the library with expo install @react-native-community/netinfo as per the docs

Checkpoint: Show a full screen error when the app is offline

Show a Full Screen Notification When the React Native App is Offline with useNetInfo Hook

Share this video with your friends

Course

Build a News App with React Native, GraphQL and TypeScript