In this course, we will be building a React Native news app that is read-only when offline. 

The videos are recorded on a Mac with an iPhone 13 Simulator using plain React Native, but you can do this course using Android, Windows and even the Expo managed workflow. See the lesson description for platform-specific instructions. The solutions repo has been verified to work on a Pixel 3a Emulator on Mac.

The completed app for this course is available [here](https://github.com/kadikraman/news-flash) and each lesson will include a link to the commit that added the code so you can check your work.

After we build our news app, we're going to enhance it to make it read-only when offline using urql'g GraphCache.

This course will require you to run the api locally on your device. The api repo is available [here](https://github.com/kadikraman/news-flash-api).

**Resources:**
- urql: https://formidable.com/open-source/urql/docs/
- Insomnia: https://insomnia.rest/
- Async Storage: https://github.com/react-native-async-storage/async-storage
- React Native Netinfo: https://github.com/react-native-netinfo/react-native-netinfo

We'll use Insomnia to explore the API that we will be building our application against. I'll give you a tour of our GraphQL API and then start writing some queries. To get a feel of the data that is being sent back we will run queries for All Stories, Story By ID, Add Bookmark, All Bookmarks, and Remove Bookmark.

**Resources:**
- API: https://github.com/kadikraman/news-flash-api
- Download Insomnia: https://insomnia.rest/download

Execute Queries and Mutations on a GraphQL API using Insomnia

Start with a plain React Native app initialised using the React Native TypeScript template.

We will install and configure urql, use urql's useQuery hook to fetch all stories from the locally running graphQL API, and render them in a FlatList.

**Resources:**
- React Native TypeScript template: https://reactnative.dev/docs/typescript
- urql docs: https://formidable.com/open-source/urql/docs/

**Android:**
- run the app with `yarn android`
- use `http://10.0.2.2:3000/graphql` instead of `http://localhost:3000/graphql` for the API endpoint

**Checkpoint:**
- [Initial commit (create from template)](https://github.com/kadikraman/news-flash/commit/a04dccad8fa090b07fdf8a94f904ba7551448ead)
- [Add initial project (remove template UI code)](https://github.com/kadikraman/news-flash/commit/08a6d0f078b36f9e35a28f6a71175b8c2dd260ad) <-- video starts from here
- [Add urql and useQuery](https://github.com/kadikraman/news-flash/commit/66d6fcfb5b797da98456d4ff6e433ab6990207de)

Add urql to a React Native Project and Fetch Data With the useQuery Hook

Install React Navigation v6 and use the Bottom Tabs navigator to add two tabs to the app: the Home tab and the Bookmarks tab.

To do this, we'll wrap our app in a `NavigationContainer` component and set up the two tabs in that tab navigator. In the process, we'll convert our `Stories` component to be the `Home` page of our app.

**Resources:**
- React Navigation: https://reactnavigation.org/
- Bottom Tabs Navigator: https://reactnavigation.org/docs/bottom-tab-navigator/

**Expo:**
- If installing on an Expo managed project, install the dependencies with `expo install react-native-screens react-native-safe-area-context` - [read more](https://reactnavigation.org/docs/getting-started#installing-dependencies-into-an-expo-managed-project)

** Android:**
- If using plain React Native without Expo need to add some native code before rebuilding the app as described [here](https://reactnavigation.org/docs/getting-started#installing-dependencies-into-a-bare-react-native-project)
- Then rebuild the app with `yarn android`

**Checkpoint:** [Add a bottom tabs navigator](https://github.com/kadikraman/news-flash/commit/443cc44108a0bd9f6a00952191a2d9bdd892b6ea)

Add Bottom Tabs to a React Native App with React Navigation v6

We'll use the Stack Navigator from React Navigation v6 to display a modal for the story details page.

Then add TypeScript types for the navigation state to ensure correct typing.

**Resources:**
- React Navigation: https://reactnavigation.org/
- Stack Navigator: https://reactnavigation.org/docs/stack-navigator/

**Checkpoint:** [Add a story details modal](https://github.com/kadikraman/news-flash/commit/2eecf76fcb536cf6affe597e87c3b05d1ffe2bf2)

Add a Modal with Typed Navigation to a React Native App with React Navigation v6

We will update the TypeScript types to support passing variables between screens. Pass the story ID and title to the modal screen. Display the story title on the modal title. Use the ID from the screen params to fetch the full story details in the story details modal.

**Resources:**
- urql `useQuery` hook: https://formidable.com/open-source/urql/docs/api/urql/#usequery

**Checkpoint:** [Fetch story details](https://github.com/kadikraman/news-flash/commit/caabca1bf9e7e6e33276e636f9cdd5bd63fc583c)

Add GraphQL Query Args with urql's useQuery Hook

We will use GraphQL code generator to generate types for the queries used in the app. You'll see how we will get the benefit of TypeScript while not having to do much typing at all ourselves.

This way we know what data is being passed around our application through TypeScript.

**Resources:**
- GraphQL Code Generator: https://www.graphql-code-generator.com/

**Checkpoint:** [Generate types with graphql codegen](https://github.com/kadikraman/news-flash/commit/221da4ee4e3ec5455cd83d1c0c74e364378f0059)

Generate TypeScript Types for GraphQL Queries Using GraphQL Code Generator

We'll learn about exchanges in urql and how urql passes a query through the `dedupExchange`, `cacheExchange`, and `fetchExchanged`.

We'll replace the default `cacheExchange` with `GraphCache` which allows schema awareness. The result is that we'll be able to return partial data from the cache while more data is fetched

Install GraphCache and use the schema awareness feature to return partial data from cache.

**Resources**:
- GraphCache: https://formidable.com/open-source/urql/docs/graphcache/

**Checkpoint:** [Refactor story and use a story details fragment](https://github.com/kadikraman/news-flash/commit/1675f0360f889bb6e456e60226652490f8786d8b)

Display Partial Data From Cache with GraphCache

We'll refactor the Story out to a separate component, create a fragment for the story fields and reuse the fragment in the bookmarks query.

We'll see how using Fragments makes it easy to query for data throughout our application.


Fragments: https://graphql.org/learn/queries/#fragments

Use GraphQL Fragments to Query Same Fields on Multiple Queries in React Native

Now we'll implement pull-to-refresh and refetch the data on Stories and Bookmarks. To do this, we'll create React component state in the `HomeScreen` to track whether the component is refreshing or not. 

We'll set the `FlatList` with `refreshing` and `onRefresh` properties to allow for the native refresh behavior you would expect from an app.

**Resources:**
- Re-executing queries: https://formidable.com/open-source/urql/docs/basics/react-preact/#reexecuting-queries

**Checkpoint:** [Add pull to refresh](https://github.com/kadikraman/news-flash/commit/4824fda90659e80f6336c4a8e59ef5cda94abe67)

Re-Execute a Query with Pull To Refresh in React Native

We'll use the `useMutation` hook to expose the mutation function. Call the mutation function to add a story to bookmarks when the user taps the bookmark button.

Then we will ensure the `bookmarkId` is returned in the mutation request value so its gets updates in the cache (and so also the UI).

During this process, we'll generate some types for the `useMutation` to ensure we are passing in the correct data.

**Resources:**
- Bookmark emoji: https://emojipedia.org/bookmark/
- `urql` mutations docs: https://formidable.com/open-source/urql/docs/basics/react-preact/#mutations

**Checkpoint:** [Add a story to bookmarks](https://github.com/kadikraman/news-flash/commit/c2bb3865637e6b157c02ae1691440019cbe76360)

Use urql's useMutation Hook in React Native to Execute a Mutation

We'll define a custom update function to run when the `addBookmark` mutation finishes to add the bookmark in the bookmarks list.

**Resources:**
- GraphCache updates: https://formidable.com/open-source/urql/docs/graphcache/cache-updates/

**Checkpoint:** [Update cache after mutation](https://github.com/kadikraman/news-flash/commit/d6eb92660c22bca5d9bc6b5f3e4d10c8abe92eb9)

Update GraphCache cacheExchange Directly After a urql Mutation

We'll use a graphQL fragment to update the bookmark id in the cache when the bookmark is removed.

**Resources:**
- Cache updates documentation: https://formidable.com/open-source/urql/docs/graphcache/cache-updates/
- GraphQL Fragments: https://graphql.org/learn/queries/#fragments

**Checkpoint:** [Support removing bookmarks](https://github.com/kadikraman/news-flash/commit/6d0dede3ad1303ba5229489e249fecccfd007635)

Use a GraphQL Fragment to Update Specific Item in urql GraphCache to Remove Items

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](https://docs.expo.dev/versions/latest/sdk/netinfo/)

**Checkpoint:** [Show a full screen error when the app is offline](https://github.com/kadikraman/news-flash/commit/2fdb02c7c017a1376c077bc0bfd6f560f978fb65)

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

We'll install the Async Storage and the React Native-compatible offline storage for graphcache, and configure the news app to show cached data when offline. You'll be able to set how long data is cached for offline viewing.

**Resources:**
- GraphCache offline: https://formidable.com/open-source/urql/docs/graphcache/offline/
- React Native offline storage for Graphcache: https://github.com/FormidableLabs/urql/tree/main/packages/storage-rn
- Async Storage: https://react-native-async-storage.github.io/async-storage/docs/install/

**Expo:**
- Install Async Storage using the expo cli: `expo install @react-native-async-storage/async-storage`

**Checkpoint:** [Show past data from cache when offline](https://github.com/kadikraman/news-flash/commit/fd12f6a053b1048658fb86b49a4786bde03f2956)

Add Read-Only Offline Support Using the Offline Exchange from urql GraphCache

We'll create an exchange that filters out mutations that are executed while the user is offline and map them to an error result. When the user tries to add or remove a bookmark when offline, show an informative alert message.

**Resources:**
Authoring exchanges: https://formidable.com/open-source/urql/docs/advanced/authoring-exchanges/
Wonka: https://github.com/kitten/wonka

**Checkpoint:** [Add an offline mutation exchange](https://github.com/kadikraman/news-flash/commit/c633b2d55f7505a0d8a11b8ea3c7562b1a8ae8a1)

Build a News App with React Native, GraphQL and TypeScript

Instructor

Course content (15 lessons)

Instructor